From fda487d5fc5d71d2e9916eceee3b25f153405d61 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 4 Jun 2024 10:10:50 -0700
Subject: [PATCH] [site] Display encoded payment request and internal status on
 received payment d (#395)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [site] Display encoded payment request and internal status on received payment details (#9381)

GitOrigin-RevId: e2a4904dfc1c4757003d60745dc34ef0b907f43c

* Bump vite from 5.0.5 to 5.0.12 in /js (#9515)

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite)
from 5.0.5 to 5.0.12.
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/vitejs/vite/blob/v5.0.12/packages/vite/CHANGELOG.md">vite's
changelog</a>.</em></p>
<blockquote>
<h2><!-- raw HTML omitted -->5.0.12 (2024-01-19)<!-- raw HTML omitted
--></h2>
<ul>
<li>fix: await <code>configResolved</code> hooks of worker plugins (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15597">#15597</a>)
(<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15605">#15605</a>)
(<a href="https://github.com/vitejs/vite/commit/ef89f80">ef89f80</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15597">#15597</a>
<a
href="https://redirect.github.com/vitejs/vite/issues/15605">#15605</a></li>
<li>fix: fs deny for case insensitive systems (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15653">#15653</a>)
(<a href="https://github.com/vitejs/vite/commit/91641c4">91641c4</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15653">#15653</a></li>
</ul>
<h2><!-- raw HTML omitted -->5.0.11 (2024-01-05)<!-- raw HTML omitted
--></h2>
<ul>
<li>fix: don't pretransform classic script links (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15361">#15361</a>)
(<a href="https://github.com/vitejs/vite/commit/19e3c9a">19e3c9a</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15361">#15361</a></li>
<li>fix: inject <code>__vite__mapDeps</code> code before sourcemap file
comment (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15483">#15483</a>)
(<a href="https://github.com/vitejs/vite/commit/d2aa096">d2aa096</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15483">#15483</a></li>
<li>fix(assets): avoid splitting <code>,</code> inside base64 value of
<code>srcset</code> attribute (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15422">#15422</a>)
(<a href="https://github.com/vitejs/vite/commit/8de7bd2">8de7bd2</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15422">#15422</a></li>
<li>fix(html): handle offset magic-string slice error (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15435">#15435</a>)
(<a href="https://github.com/vitejs/vite/commit/5ea9edb">5ea9edb</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15435">#15435</a></li>
<li>chore(deps): update dependency strip-literal to v2 (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15475">#15475</a>)
(<a href="https://github.com/vitejs/vite/commit/49d21fe">49d21fe</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15475">#15475</a></li>
<li>chore(deps): update tj-actions/changed-files action to v41 (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15476">#15476</a>)
(<a href="https://github.com/vitejs/vite/commit/2a540ee">2a540ee</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15476">#15476</a></li>
</ul>
<h2><!-- raw HTML omitted -->5.0.10 (2023-12-15)<!-- raw HTML omitted
--></h2>
<ul>
<li>fix: omit protocol does not require pre-transform (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15355">#15355</a>)
(<a href="https://github.com/vitejs/vite/commit/d9ae1b2">d9ae1b2</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15355">#15355</a></li>
<li>fix(build): use base64 for inline SVG if it contains both single and
double quotes (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15271">#15271</a>)
(<a href="https://github.com/vitejs/vite/commit/1bbff16">1bbff16</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15271">#15271</a></li>
</ul>
<h2><!-- raw HTML omitted -->5.0.9 (2023-12-14)<!-- raw HTML omitted
--></h2>
<ul>
<li>fix: htmlFallbackMiddleware for favicon (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15301">#15301</a>)
(<a href="https://github.com/vitejs/vite/commit/c902545">c902545</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15301">#15301</a></li>
<li>fix: more stable hash calculation for depsOptimize (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15337">#15337</a>)
(<a href="https://github.com/vitejs/vite/commit/2b39fe6">2b39fe6</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15337">#15337</a></li>
<li>fix(scanner): catch all external files for glob imports (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15286">#15286</a>)
(<a href="https://github.com/vitejs/vite/commit/129d0d0">129d0d0</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15286">#15286</a></li>
<li>fix(server): avoid chokidar throttling on startup (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15347">#15347</a>)
(<a href="https://github.com/vitejs/vite/commit/56a5740">56a5740</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15347">#15347</a></li>
<li>fix(worker): replace <code>import.meta</code> correctly for IIFE
worker (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15321">#15321</a>)
(<a href="https://github.com/vitejs/vite/commit/08d093c">08d093c</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15321">#15321</a></li>
<li>feat: log re-optimization reasons (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15339">#15339</a>)
(<a href="https://github.com/vitejs/vite/commit/b1a6c84">b1a6c84</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15339">#15339</a></li>
<li>chore: temporary typo (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15329">#15329</a>)
(<a href="https://github.com/vitejs/vite/commit/7b71854">7b71854</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15329">#15329</a></li>
<li>perf: avoid computing paths on each request (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15318">#15318</a>)
(<a href="https://github.com/vitejs/vite/commit/0506812">0506812</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15318">#15318</a></li>
<li>perf: temporary hack to avoid fs checks for /<a
href="https://github.com/react-refresh"><code>@​react-refresh</code></a>
(<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15299">#15299</a>)
(<a href="https://github.com/vitejs/vite/commit/b1d6211">b1d6211</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15299">#15299</a></li>
</ul>
<h2><!-- raw HTML omitted -->5.0.8 (2023-12-12)<!-- raw HTML omitted
--></h2>
<ul>
<li>perf: cached fs utils (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15279">#15279</a>)
(<a href="https://github.com/vitejs/vite/commit/c9b61c4">c9b61c4</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15279">#15279</a></li>
<li>fix: missing warmupRequest in transformIndexHtml (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15303">#15303</a>)
(<a href="https://github.com/vitejs/vite/commit/103820f">103820f</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15303">#15303</a></li>
<li>fix: public files map will be updated on add/unlink in windows (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15317">#15317</a>)
(<a href="https://github.com/vitejs/vite/commit/921ca41">921ca41</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15317">#15317</a></li>
<li>fix(build): decode urls in CSS files (fix <a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15109">#15109</a>)
(<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15246">#15246</a>)
(<a href="https://github.com/vitejs/vite/commit/ea6a7a6">ea6a7a6</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15109">#15109</a>
<a
href="https://redirect.github.com/vitejs/vite/issues/15246">#15246</a></li>
<li>fix(deps): update all non-major dependencies (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15304">#15304</a>)
(<a href="https://github.com/vitejs/vite/commit/bb07f60">bb07f60</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15304">#15304</a></li>
<li>fix(ssr): check esm file with normal file path (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15307">#15307</a>)
(<a href="https://github.com/vitejs/vite/commit/1597170">1597170</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/15307">#15307</a></li>
</ul>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/vitejs/vite/commit/ee81e196769c102a6b1bf30f8444ccde236e71d5"><code>ee81e19</code></a>
release: v5.0.12</li>
<li><a
href="https://github.com/vitejs/vite/commit/91641c4da0a011d4c5352e88fc68389d4e1289a5"><code>91641c4</code></a>
fix: fs deny for case insensitive systems (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15653">#15653</a>)</li>
<li><a
href="https://github.com/vitejs/vite/commit/ef89f8092f0eb1d8fd7d21256e6af8c4e64fe9b2"><code>ef89f80</code></a>
fix: await <code>configResolved</code> hooks of worker plugins (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15597">#15597</a>)
(<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15605">#15605</a>)</li>
<li><a
href="https://github.com/vitejs/vite/commit/b44c49302ffbf0c82f984f6219ed6376d1e4552a"><code>b44c493</code></a>
release: v5.0.11</li>
<li><a
href="https://github.com/vitejs/vite/commit/d2aa0969ee316000d3b957d7e879f001e85e369e"><code>d2aa096</code></a>
fix: inject <code>__vite__mapDeps</code> code before sourcemap file
comment (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15483">#15483</a>)</li>
<li><a
href="https://github.com/vitejs/vite/commit/2a540eee82f9a31deff8215bdbdccfa46d494a06"><code>2a540ee</code></a>
chore(deps): update tj-actions/changed-files action to v41 (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15476">#15476</a>)</li>
<li><a
href="https://github.com/vitejs/vite/commit/5ea9edbc9ceb991e85f893fe62d68ed028677451"><code>5ea9edb</code></a>
fix(html): handle offset magic-string slice error (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15435">#15435</a>)</li>
<li><a
href="https://github.com/vitejs/vite/commit/49d21fe1feaac30dee0196bd484480a8000a4363"><code>49d21fe</code></a>
chore(deps): update dependency strip-literal to v2 (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15475">#15475</a>)</li>
<li><a
href="https://github.com/vitejs/vite/commit/8de7bd2b68db27b83d9484cc8d4e26436615168e"><code>8de7bd2</code></a>
fix(assets): avoid splitting <code>,</code> inside base64 value of
<code>srcset</code> attribute (#...</li>
<li><a
href="https://github.com/vitejs/vite/commit/19e3c9a8a16847486fbad8a8cd48fc771b1538bb"><code>19e3c9a</code></a>
fix: don't pretransform classic script links (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/15361">#15361</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/vitejs/vite/commits/v5.0.12/packages/vite">compare
view</a></li>
</ul>
</details>
<br />

[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=vite&package-manager=npm_and_yarn&previous-version=5.0.5&new-version=5.0.12)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/lightsparkdev/webdev/network/alerts).

</details>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Corey Martin <coreyn.martin@gmail.com>
GitOrigin-RevId: cc2337a5da920b98923b247bc83cd6619e592065

* CI update lock file for PR

* Bump ip from 1.1.8 to 1.1.9 in /js/packages/react-native/examples/ReactNativeWallet (#9528)

Bumps [ip](https://github.com/indutny/node-ip) from 1.1.8 to 1.1.9.
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/indutny/node-ip/commit/1ecbf2fd8c0cc85e44c3b587d2de641f50dc0217"><code>1ecbf2f</code></a>
1.1.9</li>
<li><a
href="https://github.com/indutny/node-ip/commit/6a3ada9b471b09d5f0f5be264911ab564bf67894"><code>6a3ada9</code></a>
lib: fixed CVE-2023-42282 and added unit test</li>
<li>See full diff in <a
href="https://github.com/indutny/node-ip/compare/v1.1.8...v1.1.9">compare
view</a></li>
</ul>
</details>
<br />

[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=ip&package-manager=npm_and_yarn&previous-version=1.1.8&new-version=1.1.9)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/lightsparkdev/webdev/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Corey Martin <coreyn.martin@gmail.com>
GitOrigin-RevId: 05eb73b692a008a1bc90b40bec17eaf2e665033b

* Bump follow-redirects from 1.15.3 to 1.15.6 in /js/packages/react-native/examples/ReactNativeWallet (#9526)

Bumps
[follow-redirects](https://github.com/follow-redirects/follow-redirects)
from 1.15.3 to 1.15.6.
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/follow-redirects/follow-redirects/commit/35a517c5861d79dc8bff7db8626013d20b711b06"><code>35a517c</code></a>
Release version 1.15.6 of the npm package.</li>
<li><a
href="https://github.com/follow-redirects/follow-redirects/commit/c4f847f85176991f95ab9c88af63b1294de8649b"><code>c4f847f</code></a>
Drop Proxy-Authorization across hosts.</li>
<li><a
href="https://github.com/follow-redirects/follow-redirects/commit/8526b4a1b2ab3a2e4044299377df623a661caa76"><code>8526b4a</code></a>
Use GitHub for disclosure.</li>
<li><a
href="https://github.com/follow-redirects/follow-redirects/commit/b1677ce00110ee50dc5da576751d39b281fc4944"><code>b1677ce</code></a>
Release version 1.15.5 of the npm package.</li>
<li><a
href="https://github.com/follow-redirects/follow-redirects/commit/d8914f7982403ea096b39bd594a00ee9d3b7e224"><code>d8914f7</code></a>
Preserve fragment in responseUrl.</li>
<li><a
href="https://github.com/follow-redirects/follow-redirects/commit/65858205e59f1e23c9bf173348a7a7cbb8ac47f5"><code>6585820</code></a>
Release version 1.15.4 of the npm package.</li>
<li><a
href="https://github.com/follow-redirects/follow-redirects/commit/7a6567e16dfa9ad18a70bfe91784c28653fbf19d"><code>7a6567e</code></a>
Disallow bracketed hostnames.</li>
<li><a
href="https://github.com/follow-redirects/follow-redirects/commit/05629af696588b90d64e738bc2e809a97a5f92fc"><code>05629af</code></a>
Prefer native URL instead of deprecated url.parse.</li>
<li><a
href="https://github.com/follow-redirects/follow-redirects/commit/1cba8e85fa73f563a439fe460cf028688e4358df"><code>1cba8e8</code></a>
Prefer native URL instead of legacy url.resolve.</li>
<li><a
href="https://github.com/follow-redirects/follow-redirects/commit/72bc2a4229bc18dc9fbd57c60579713e6264cb92"><code>72bc2a4</code></a>
Simplify _processResponse error handling.</li>
<li>Additional commits viewable in <a
href="https://github.com/follow-redirects/follow-redirects/compare/v1.15.3...v1.15.6">compare
view</a></li>
</ul>
</details>
<br />

[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=follow-redirects&package-manager=npm_and_yarn&previous-version=1.15.3&new-version=1.15.6)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/lightsparkdev/webdev/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Zhen Lu <zhenlu@lightspark.com>
GitOrigin-RevId: efc8996c28ad43a53e73950e179a98701df03c6f

* Bump jose from 4.15.4 to 4.15.5 in /js (#9537)

Bumps [jose](https://github.com/panva/jose) from 4.15.4 to 4.15.5.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/panva/jose/releases">jose's
releases</a>.</em></p>
<blockquote>
<h2>v4.15.5</h2>
<h3>Fixes</h3>
<ul>
<li>add a maxOutputLength option to zlib inflate (<a
href="https://github.com/panva/jose/commit/1b91d88d2f8233f3477a5f4579aa5f8057b2ee8b">1b91d88</a>),
fixes <a
href="https://github.com/panva/jose/security/advisories/GHSA-hhhv-q57g-882q">CVE-2024-28176</a></li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/panva/jose/blob/v4.15.5/CHANGELOG.md">jose's
changelog</a>.</em></p>
<blockquote>
<h2><a
href="https://github.com/panva/jose/compare/v4.15.4...v4.15.5">4.15.5</a>
(2024-03-07)</h2>
<h3>Fixes</h3>
<ul>
<li>add a maxOutputLength option to zlib inflate (<a
href="https://github.com/panva/jose/commit/1b91d88d2f8233f3477a5f4579aa5f8057b2ee8b">1b91d88</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/panva/jose/commit/765aafd226d30dbab14038bfadc8af1881dce158"><code>765aafd</code></a>
chore(release): 4.15.5</li>
<li><a
href="https://github.com/panva/jose/commit/b36e45e008b8af2af38d9d2a8305e03ba77da644"><code>b36e45e</code></a>
test: add export check to x509 pem import tests</li>
<li><a
href="https://github.com/panva/jose/commit/e839ecbd7975c4264de6f10fa2b1aa00ad4121fa"><code>e839ecb</code></a>
test: stop testing JWE RSA1_5 Algorithm</li>
<li><a
href="https://github.com/panva/jose/commit/1b91d88d2f8233f3477a5f4579aa5f8057b2ee8b"><code>1b91d88</code></a>
fix: add a maxOutputLength option to zlib inflate</li>
<li><a
href="https://github.com/panva/jose/commit/9ca2b2427d15c3a410d9fe9ddb86e85fdc55e9ac"><code>9ca2b24</code></a>
build: remove release action</li>
<li><a
href="https://github.com/panva/jose/commit/f3035d8897b25dc9cd8e094f943e57ec74eeccb1"><code>f3035d8</code></a>
chore: cleanup after release</li>
<li>See full diff in <a
href="https://github.com/panva/jose/compare/v4.15.4...v4.15.5">compare
view</a></li>
</ul>
</details>
<br />

[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=jose&package-manager=npm_and_yarn&previous-version=4.15.4&new-version=4.15.5)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/lightsparkdev/webdev/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Zhen Lu <zhenlu@lightspark.com>
GitOrigin-RevId: 0faad175d4f41811ffd13291e33d597112d983f6

* CI update lock file for PR

* Update semver to 7.6.0 (#9540)

GitOrigin-RevId: fb7e5ddc926e85500ce9287a9a518919f9ad13d7

* Update the JS demo vasp to 0.8.1 uma sdk. (#9543)

GitOrigin-RevId: ec6e16c43795dc20ad611badb163293f627d7aed

* CI update lock file for PR

* Bump the uma vasp sdk version to 0.8.2 (#9563)

GitOrigin-RevId: f1ecccbf1c7df5adfe3a5c5817d85afd0c3c9501

* CI update lock file for PR

* [docs] add uma introduction video (#9569)

GitOrigin-RevId: ea7dd4c5e29bfb4d59eec4ca4965295165f3d119

* Add multi capability to IdFilter and StringFilter (#9458)

![Screenshot 2024-03-14 at 5.11.23 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/eb50627e-a84b-4da6-8ec3-a6d0c68393c0.png)

- allows user to apply multiple values for a filter
- they can be deleted via buttons that appear below the filter
- fixes column mapping to be snake case due to Filter using a generic type for column keys
- adds queryVariable to IdFilter and StringFilter due to column names not necessarily mapping to a query variable name

GitOrigin-RevId: 104f6c41f87905adfdf173c1ffb96d14f908590f

* Add Badge themes and add badges to webhook log (#9467)

![Screenshot 2024-03-15 at 5.24.06 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/7dc57862-76c7-4e87-aeab-e0ab773a0fbf.png)

![Screenshot 2024-03-15 at 5.23.59 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/82174f64-e191-45f5-a610-9ce032869908.png)

- updates badge to have error theme
- adds http code badge to webhook log
- adds Unverified badge if response_error_code says so
- updates colors in webhook log details modal
- adds num attempts to status in details

GitOrigin-RevId: 139c89196eb6d736bd4f8d83dd746f3ca74b78b4

* Bump webpack-dev-middleware from 5.3.3 to 5.3.4 in /js/packages/react-native/examples/ReactNativeWallet (#9582)

Bumps
[webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware)
from 5.3.3 to 5.3.4.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/webpack/webpack-dev-middleware/releases">webpack-dev-middleware's
releases</a>.</em></p>
<blockquote>
<h2>v5.3.4</h2>
<h3><a
href="https://github.com/webpack/webpack-dev-middleware/compare/v5.3.3...v5.3.4">5.3.4</a>
(2024-03-20)</h3>
<h3>Bug Fixes</h3>
<ul>
<li><strong>security:</strong> do not allow to read files above (<a
href="https://redirect.github.com/webpack/webpack-dev-middleware/issues/1779">#1779</a>)
(<a
href="https://github.com/webpack/webpack-dev-middleware/commit/189c4ac7d2344ec132a4689e74dc837ec5be0132">189c4ac</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/webpack/webpack-dev-middleware/blob/v5.3.4/CHANGELOG.md">webpack-dev-middleware's
changelog</a>.</em></p>
<blockquote>
<h3><a
href="https://github.com/webpack/webpack-dev-middleware/compare/v5.3.3...v5.3.4">5.3.4</a>
(2024-03-20)</h3>
<h3>Bug Fixes</h3>
<ul>
<li><strong>security:</strong> do not allow to read files above (<a
href="https://redirect.github.com/webpack/webpack-dev-middleware/issues/1779">#1779</a>)
(<a
href="https://github.com/webpack/webpack-dev-middleware/commit/189c4ac7d2344ec132a4689e74dc837ec5be0132">189c4ac</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/webpack/webpack-dev-middleware/commit/86071ead69e946ada25497d3e281923e885229a4"><code>86071ea</code></a>
chore(release): 5.3.4</li>
<li><a
href="https://github.com/webpack/webpack-dev-middleware/commit/189c4ac7d2344ec132a4689e74dc837ec5be0132"><code>189c4ac</code></a>
fix(security): do not allow to read files above (<a
href="https://redirect.github.com/webpack/webpack-dev-middleware/issues/1779">#1779</a>)</li>
<li>See full diff in <a
href="https://github.com/webpack/webpack-dev-middleware/compare/v5.3.3...v5.3.4">compare
view</a></li>
</ul>
</details>
<br />

[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=webpack-dev-middleware&package-manager=npm_and_yarn&previous-version=5.3.3&new-version=5.3.4)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/lightsparkdev/webdev/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Zhen Lu <zhenlu@lightspark.com>
GitOrigin-RevId: e0739a0a0de84ff1eb34888bd63f6f954de1cefd

* [ops] move ops inspector search to header, fix search button (#9639)

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/NU8OmLauzLqa61yWDJkY/a9429b2f-3cc2-4bbc-82cc-11fe459fb3ec.mov">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/NU8OmLauzLqa61yWDJkY/a9429b2f-3cc2-4bbc-82cc-11fe459fb3ec.mov">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/a9429b2f-3cc2-4bbc-82cc-11fe459fb3ec.mov">Screen Recording 2024-03-25 at 6.57.50 PM.mov</video>

- fixes search button not working due to react select clearing input on blur
- moves search to header
- search can be opened via button or shortcut
- entering a search or pressing escape or clicking the close button closes it
- chose to not use Modal because Modal would unload the search which was performing the query and unexpected behavior would happen
- always shows ops tools search now
- shows description when no results are found

GitOrigin-RevId: ec385e7688f8f169e08137a764e8e0fd53b6d505

* Update UMA integration tests to include V1 images. (#9510)

GitOrigin-RevId: f10be54533e2f9ee15869ad43364b8ec68ac03ab

* Update the vasp CLI tool for umav1 (#9840)

GitOrigin-RevId: d01400b51443f2eafed91535ab8005cf7678d8ea

* Update the demo vasp to use uma 1.0 (#9218)

Co-authored-by: Jeremy Klein <jklein24@gmail.com>
GitOrigin-RevId: f7ce53846cebe620363ab18b7043444c059aa614

* CI update lock file for PR

* Update demo vasp to use post-tx callback utils and verify signature (#9880)

GitOrigin-RevId: 9388b086325a5af3fd3b0cb6754cba74c24a2530

* [ui] Move PageSectionNav to new UI component (#9971)

For use in @dawit-0 's PR
https://github.com/lightsparkdev/webdev/pull/9965

GitOrigin-RevId: dd3ef4035304de8d6ab5f2d83d23b53062ffa284

* [ui] Move all PageSection components and Dropdown to public UI (#9979)

For use in @dawit-0 's PR
https://github.com/lightsparkdev/webdev/pull/9965

GitOrigin-RevId: 9d1a8a36c12ddfa060540fc556cf390c11329df1

* [js] Upgrade Apollo (#10052)

GitOrigin-RevId: eb13b6a84a080eaaa4322e3a080b005501bd37a4

* CI update lock file for PR

* [ui] Allow Modal submit to be a link (#10066)

GitOrigin-RevId: 5127ae88434d30692d0456e5ddb652373f974bd8

* [transactions_report] Remove time filter for reporting (#10107)

Added isDateOnly to props to have to option to have date only filters

https://github.com/lightsparkdev/webdev/assets/132481249/50046b5d-073f-4c7e-88aa-48b1478aea81

GitOrigin-RevId: 09b9cee9e29ee46262e74e50c2b6680ab3dc50c6

* CI update lock file for PR

* Update readmes related to uma certs (#10139)

GitOrigin-RevId: 2c578459c89c4365ffc29a7a10ce4d202735bb52

* [uma-bridge] Initial Plaid integration (#10146)

GitOrigin-RevId: fc9083ee22ba6b6aa0927d927c317d0ab2b6b063

* [ui] Move themes to own file. Simplify colors (#10167)

GitOrigin-RevId: 1d968ccb6f4e09e11893aa0d5d6f9f90f8cd83cf

* [ui] Move typography and tokens (#10172)

GitOrigin-RevId: 729f9d839fc6224005d97c185c01a464dac715ba

* [ui] Improve theme typography tokens and add bridge tokens (#10189)

GitOrigin-RevId: bc77c6e38d0a6491161299b41e76f24e8ce08c30

* [ui] Move typography to components (#10178)

GitOrigin-RevId: afc3b60e25df2f727511d088f72c285bf8fd4acf

* Create wise-tables-knock.md

* [ui] Remove unused icons (#10179)

GitOrigin-RevId: 117054dfc2879c55c816e22238ebef0fbcddca53

* Some vasp cli fixes for sender-locked amounts (#10207)

GitOrigin-RevId: a09da053b1d4af84fc33cbe3e0061402cb6b224c

* [ui] Preload icons. Switch to ui/src path for imports (#10182)

GitOrigin-RevId: e3e4b5e05cf13267d7764afddba097e94e402cff

* [static] Add new static workspace and upload to S3 (#10230)

GitOrigin-RevId: 33332dbf54e2fbb3851fdaadb609111fef1833c2

* [colors] fix invalid color string (#10231)

umame docs make heavy usage of this color and as a result made the headline link color blue

GitOrigin-RevId: 7b3d99bccf884bb9443e87fd62bbf3eb54dbf1d0

* [js] Dummy change to trigger build

GitOrigin-RevId: f1255918f6317ac8d05896eb2cae6ab8b1c97806

* [uda] Initial working version of UDA (#10198)

Squashed branch of commits/PRs reviewed by various people:

https://github.com/lightsparkdev/webdev/pull/10197
https://github.com/lightsparkdev/webdev/pull/10175
https://github.com/lightsparkdev/webdev/pull/10173
https://github.com/lightsparkdev/webdev/pull/10159
https://github.com/lightsparkdev/webdev/pull/10121
https://github.com/lightsparkdev/webdev/pull/10118
https://github.com/lightsparkdev/webdev/pull/10090
https://github.com/lightsparkdev/webdev/pull/10084
https://github.com/lightsparkdev/webdev/pull/10064
https://github.com/lightsparkdev/webdev/pull/10062
https://github.com/lightsparkdev/webdev/pull/10037
https://github.com/lightsparkdev/webdev/pull/10001
https://github.com/lightsparkdev/webdev/pull/10000
https://github.com/lightsparkdev/webdev/pull/9999
https://github.com/lightsparkdev/webdev/pull/9998
https://github.com/lightsparkdev/webdev/pull/9935
https://github.com/lightsparkdev/webdev/pull/9912
https://github.com/lightsparkdev/webdev/pull/9911

GitOrigin-RevId: d7cd34040709c6623ac490c0be5a5546f3169cb6

* Support non-uma receiver in demo vasp (#10225)

GitOrigin-RevId: 9fd653e96403fb12debb1e7c40e4bf22243d1f24

* [site] Improve balance tooltips and messaging (#10236)

More context:
https://lightsparkgroup.slack.com/archives/C03RAD5U336/p1713909385513359
- Add the same available balance messaging tooltip to Send that we have
for Withdraw
- Add a link to the docs balances page to the tooltip for Send/Withdraw
- Add fee estimate text to "Add Funds" to help the user deposit the
correct amount.

<img width="498" alt="Screenshot 2024-04-24 at 1 03 46 PM"
src="https://github.com/lightsparkdev/webdev/assets/4000247/59020f64-70ff-4d7a-9ddf-3d559af9a209">

<img width="735" alt="Screenshot 2024-04-24 at 1 04 25 PM"
src="https://github.com/lightsparkdev/webdev/assets/4000247/b05cc27d-6e3d-44ef-9352-0ce061604941">
GitOrigin-RevId: baa54a54c58b6d4902029ee0762d57d55151ec5d

* [gha] release: Check that frontend version exists before deploying

Add `deploy.py --check` option which just checks that the expected
number of files exist.

GitOrigin-RevId: 9fa6ee664d44fc6467e0066d24dd44a0d4e9c438

* [ui] Fix InfoIconTooltip debugging prop (#10261)

GitOrigin-RevId: 9fce392f0e807ad3019506a4743231e1eee0107f

* [ops] migrate channels connection page to DataManagerTable, add Radio ui component, add BooleanFilter (fixes LIG-5141) (#10350)

![Screenshot 2024-04-29 at 6.38.44 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/01da2917-552f-4797-888d-4288b62aa482.png)

![Screenshot 2024-04-29 at 6.38.49 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/362899aa-3de3-4a41-9d89-03b343fbc6be.png)

- added a story

![Screenshot 2024-04-30 at 6.39.37 AM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/4d2c0bfb-bd4b-4e33-8ec3-211f6d5c985f.png)

GitOrigin-RevId: 059ce5d28462bf0b50ed62fe4624705b37fa48b7

* [bridge] Separate bank / KYC pages (#10262)

GitOrigin-RevId: 5ecfc3772b3e5f31744f694b2743d4b623aa8a3e

* [ui] Typography improvements (#10331)

- Moving towards two possible props for typography content, `content`
which can be ToReactNodesArgs, and `children` which can only be a
string. This way we keep the typography directly paired with text
elements and prevent redundant/problematic styles from leaking in.
- Start moving towards new ThemeOrColorKey as base allowed color props
for components. Components that want to limit the color further can
choose a subset. Base components will call getColor to resolve the color
string. Both keys from theme object and colors object are valid choices.
- Start moving towards NewRoutesType to replace having to pass in
RoutesType to each component that references Routes. Uses global
interface augmentation instead - downstream app is expected to extend
NewRoutesType.

GitOrigin-RevId: c2f210d3cf34a2c845615c1f28a0cd05fe82592b

* [ui] Convert Label (#10436)

GitOrigin-RevId: fa2041f1aef33e3e149b7460d5a61253a3b6dce8

* Added some basic action scraping to Github bot. (#10482)

Created a basic Github client, added some basic methods for scraping
actions, and console.log success rate.

Contributes to LIG-5259 .

GitOrigin-RevId: b92a85b7d11056ac94c975b315e1d4b5dfaa94ed

* [site] Allow full precision BTC display amounts (#10489)

GitOrigin-RevId: 491e0fb2a10a8ac9c7a490117cb02c9345e21e38

* [ui] Add NextLink as a ToReactNode type (#10432)

Make it possible for Next projects to use base typography components
directly for consistency.

See alse:
- https://github.com/vercel/next.js/issues/46078#issuecomment-1920149196
-
https://github.com/chakra-ui/chakra-ui/issues/7363#issuecomment-1449395561
- https://github.com/vercel/next.js/discussions/15560

GitOrigin-RevId: 1acc75f8719ee21bd010d797bb7b8feece4f3e5d

* [ui] Updated banner style (#10434)

GitOrigin-RevId: b3670c7ba4957588bc0bf131333119c0a9742820

* [uma-bridge] Start page (#10485)

GitOrigin-RevId: eb72e7370bacc6c2ec1a72196b209b984da4f8eb

* [site] Fix z-index for some Banner types (#10535)

GitOrigin-RevId: e79f7507d7ec9908667e69fe340f572120993268

* [ui] Button improvements (#10507)

- Consolidate button variants into available "kinds" like primary,
secondary (remains the default), ghost, and other specific allowed
colors.
- Start moving towards theme default button props. The button kinds will
likely have corresponding default colors at some point to make the kinds
customizable across themes.
- The concept of button size is now primarily linked to typography size.
- Map existing buttons to new prop interface.
- Update storybook with new prop interface.

https://github.com/lightsparkdev/webdev/assets/4000247/d78c3436-fb04-4206-8260-dbabe95aaa6b

GitOrigin-RevId: b3a41d4f0a67f298f89b3ad2065cb166153471a6

* [uma-bridge] Update to latest typography tokens (#10536)

GitOrigin-RevId: ef109a2f511697f5295e00c915ae8a798f96df6d

* [js] Upgrade codegen (#10537)

Upgrade to latest so that we can get react-query v5 compatibility

GitOrigin-RevId: 489465d911cf6210c7173b6e0cb9955a6997e35d

* [js-sdk] Compress requests with deflate

GitOrigin-RevId: 15f01a9cd9445905110c3146255595196543db8f

* [js] Move and rename transformGQLName (#10592)

GitOrigin-RevId: 31f502ba805ec1a1844cb1f12f8a17d072ae9fb5

* [site] Complete new account creation (#10562)

GitOrigin-RevId: 91233a51d55480c8c5f23ff0b408a7ab96cdf7f5

* Adding UX guidelines to Uma.me (#10572)

https://linear.app/lightsparkdev/issue/LIG-5436/add-uma-ux-recommendations-to-uma-site

GitOrigin-RevId: 5617ffa9fbaca2eeb70d888de1e5ba664e7f1f2f

* [ui] Provide icon color inversion when color is specified (#10630)

GitOrigin-RevId: 7d67d71d8f96ae5a55777dd6034903b5dc962984

* [site] Re-enable UI tests (#10627)

GitOrigin-RevId: 0c8e25ebb825d94def1162cc5a032d5858f8ec0a

* [uma-bridge] Configure GQL client with react-query (#10538)

GitOrigin-RevId: c03693673e5137816ef635b7b35f7ae568a9a37a

* Feature flag new ui in SelectPlan page, add icons (#10618)

GitOrigin-RevId: 1fd4a9be8a178e0558aff65fc0ac667d0977d589

* [uma-bridge] Autocomplete hint for account creation and invalid token screen (#10668)

GitOrigin-RevId: cc0785596ff7b120e73fe4fb6079d675c9d68b6f

* [ui/docs] add Headline ExtraSmall design token, handle h4 and h5 in docs (#10698)

![Screenshot 2024-05-17 at
11.01.28 AM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/95b72bf2-9a25-4c3a-aa57-40983622f48a.png)

GitOrigin-RevId: 17f961241d2f048d94f73f47e287f68987deabdc

* [site] Ignore ResizeObserver errors in Cypress (#10701)

GitOrigin-RevId: c565e89edf49b23bea84930292176b1fa2905405

* [uma-bridge] SecureAccountMFA page (#10702)

GitOrigin-RevId: 68a76a42557b986f074b8cf79fd0ba95724d878a

* [ui] Fix theme settings (#10734)

GitOrigin-RevId: 410f27d46858e1106f57a0affc444b2f2c3d1b02

* [uma-bridge] Login (#10732)

GitOrigin-RevId: 005da974e3a71739221d8f2292273dfdc982d71d

* [uma-bridge] GetUma page (#10741)

<img width="938" alt="Screenshot 2024-05-21 at 11 29 39 PM"
src="https://github.com/lightsparkdev/webdev/assets/4000247/2017319b-7046-4421-ac70-bd8964322c53">

<img width="939" alt="Screenshot 2024-05-21 at 11 29 30 PM"
src="https://github.com/lightsparkdev/webdev/assets/4000247/faf726e8-fa9b-4745-ad7f-fdbeab18f71f">
GitOrigin-RevId: 6c0d664602a8912a03874269150d9a957d87dfa5

* [uma-bridge] FAQ page (#10753)

GitOrigin-RevId: 13e5e722db57bb4802893ed7a8ffdc1b7ab609f9

* [uma-bridge] Banner progress state (#10757)

GitOrigin-RevId: dbee2baff1a8177d4103c77502fecb21fba180c4

* [uma-bridge] Desktop Banner styles (#10778)

GitOrigin-RevId: fa3dc43e872d5490121d6fcb08cf1b5350e37688

* [uma-bridge] account page initial setup (#10822)

GitOrigin-RevId: 1706fd0afbfb511607880d57325ef667027d0dde

* [uma-bridge] Add themed Loading component (#10834)

GitOrigin-RevId: 2cb127589b2e9b74f1d8fd8465b6f165ec9f3229

* [ui/bridge] add common Drawer component, optionally use in Modal (#10819)

contributes to LIG-5481

- adds having trouble modal/drawer for bridge
- makes drawer animation smoother
- adds drawer opening animation
- transitions background opacity when moving drawer
- calculates percentage of drawer closed and closes if let go under 80%
- adds drawer as an optional view for Modal
- adds horizontal and vertical button layouts
- adds extra actions prop to Modal so buttons can be laid out properly

![Screenshot 2024-05-24 at 2.44.36 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/54d5868e-d1b1-44e9-acb6-0a8e2c67ed02.png)

![Screenshot 2024-05-24 at 2.44.18 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/0fcf517b-c2bc-4b25-947d-bbde4c5449df.png)

- updates modal to use typography
- removes blur from background to be consistent with drawer
- moves close button to right side to be consistent

old: ![Screenshot 2024-05-24 at 1.45.53 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/3aa0aba3-6b46-4a13-9c94-bb560e9697ec.png)

new: ![Screenshot 2024-05-24 at 1.45.57 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/2271a936-e1f2-4081-8dd9-51a1afd5efb3.png)
GitOrigin-RevId: e3c5b82e1388c22116ade414328df797256bf6fc

* [uma-bridge] Support buttons styling, update gql query (#10885)

GitOrigin-RevId: 257674f0d7995eaaa4ae59e58d6c07a8a8657177

* [uma-bridge] Fix logged in desktop header styles (#10839)

GitOrigin-RevId: 7213101734cf614763d140c6bebed3d032852b4e

* [uma-bridge] Card header styles (#10842)

GitOrigin-RevId: d3d3e9eabbea9881e602f968f102e1f6399b8a77

* [uma-bridge] Payment settings styling, use real bank info (#10895)

GitOrigin-RevId: 9299391b81212a53b2d3d91b449428fedbe6e249

* [uma-bridge] add log out button to help modal/drawer, add more help modals, show cardform when closing zerohash iframe (#10894)

- adds help modal/drawers for plaid and zerohash
- shows verify cardform when closing zerohash iframe via clicking
background (which doesn't fire a post message)
- adds verify icon to verify cardform (note: we'll have to update icons
to match the designs)
- adds log out button to help modal/drawers
- removes temporary log out button from banner

![Screenshot 2024-05-29 at
6.14.13 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/1eb0775e-5e2a-48d7-b9e3-f4c9b595a72b.png)

![Screenshot 2024-05-29 at
6.14.24 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/dd53d76b-7d48-4d03-8d8c-08e58c214878.png)

![Screenshot 2024-05-29 at
5.27.39 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/14498fb7-8563-4367-81a5-0dd099f2a3fa.png)

![Screenshot 2024-05-29 at
5.31.31 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/fa850348-24d6-4819-b464-440c1dc57954.png)

![Screenshot 2024-05-29 at
5.48.09 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/e52a03f7-d476-49e7-814f-e719eb7d587c.png)

![Screenshot 2024-05-29 at
5.48.18 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/56b03cbd-d3a9-47bb-b212-82dc48b60c7e.png)

GitOrigin-RevId: 1aea90dca2ef6182eea8faee5bc76ea4eb3cfa6c

* [uma-bridge] add abstraction for help modal data (#10905)

GitOrigin-RevId: 724b386c3348f1606b5d48b1150e081973f46b7c

* [site] Show msats on TransactionDetails page (#10955)

GitOrigin-RevId: 936fcec0783f52b626f182e1451b6e5b11d1a8be

* Add frontend Recapcha v3 support for account creation (#10922)

Give our recent account creation spam, we probably should have a
Recaptcha barrier on our frontend, at least at account creation. This
adds frontend support for Recaptcha, but notably does not send it to the
backend yet. This will let us at least monitor on the Google console in
production.

https://linear.app/lightsparkdev/issue/LIG-5555/front-end-recaptcha-implementation

GitOrigin-RevId: 01fd543a5b989c6847f82ee9d6bc056d738122cd

* [uma-bridge] Display KYC rejected state on VerifyIdentity (#10940)

GitOrigin-RevId: c617e9bbde6ce68c1fe727a6922d7ea13f61706b

* [ui-test-app] Remove private dependency (#10968)

GitOrigin-RevId: 83ba9544bbae30f56e1a7a79f6f1dac3355bdf8c

* CI update lock file for PR

* trigger change

* [uma-vasp] Upgrade UMA core version and fix type issue (#10980)

GitOrigin-RevId: 39aaf2d9ad0c8f6e7dadd9b9a83556c693391836

* CI update lock file for PR

* [js] Move deploy script to private (#10982)

GitOrigin-RevId: f203851612d88b1edcce8aad447bdae299b04ac7

* Create warm-vans-change.md

* Create wild-beans-suffer.md

* Update from public js-sdk main branch (#9385)

Update public `js` sources with the latest code from the [public
repository](https://github.com/lightsparkdev/js-sdk) main branch.

This typically happens when new versions of the SDK are released and
version updates need to be synced. The PR should be merged as soon as
possible to avoid updates to webdev overwriting the changes in the
js-sdk develop branch.

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Lightspark Eng <engineering@lightspark.com>
Co-authored-by: Corey Martin <coreyn.martin@gmail.com>
GitOrigin-RevId: cb8a90d247c07874ebde3b5e8206fc3b8bca9e05

* CI update lock file for PR

* [ui-test-app] Remove GlobalErrorBoundary private dep (#10990)

GitOrigin-RevId: 3ac0de5c85e4db08f81c84123bfc43c36424013f

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Corey Martin <coreyn.martin@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Lightspark Eng <engineering@lightspark.com>
Co-authored-by: Zhen Lu <zhenlu@lightspark.com>
Co-authored-by: Jeremy Klein <jklein24@gmail.com>
Co-authored-by: Brian Siao Tick Chong <bsiaotickchong@gmail.com>
Co-authored-by: Shreya Vissamsetti <shreya@lightspark.com>
Co-authored-by: Dawit <132481249+dawit-0@users.noreply.github.com>
Co-authored-by: Michael Gorven <mgorven@lightspark.com>
Co-authored-by: Matthew Rheaume <mhr@lightspark.com>
Co-authored-by: Peng Ying <peng@lightspark.com>
Co-authored-by: Joel Weinberger <jww@lightspark.com>
Co-authored-by: lightspark-ci-js-sdk[bot] <134011073+lightspark-ci-js-sdk[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/warm-vans-change.md                |   23 +
 .changeset/wild-beans-suffer.md               |    6 +
 .changeset/wise-tables-knock.md               |   12 +
 apps/examples/oauth-app/package.json          |    2 +-
 apps/examples/oauth-app/src/index.tsx         |    2 +-
 .../oauth-app/src/pages/DashboardPage.tsx     |    2 +-
 .../oauth-app/src/pages/LoginPage.tsx         |    2 +-
 apps/examples/react-wallet-app/package.json   |    2 +-
 .../src/components/Dashboard.tsx              |    2 +-
 apps/examples/react-wallet-app/src/index.tsx  |    2 +-
 .../src/pages/DashboardPage.tsx               |    6 +-
 .../react-wallet-app/src/pages/LoginPage.tsx  |   15 +-
 apps/examples/settings.json                   |    3 +
 .../streaming-wallet-extension/package.json   |    2 +-
 .../streaming-wallet-extension/src/App.tsx    |    7 +-
 .../src/components/CirclePlusIcon.tsx         |   19 -
 .../src/components/LeftArrow.tsx              |   21 -
 apps/examples/ui-test-app/.eslintrc.js        |   23 +
 apps/examples/ui-test-app/.prettierignore     |    1 +
 apps/examples/ui-test-app/.prettierrc         |    3 +
 apps/examples/ui-test-app/gql-codegen.yml     |   11 +
 apps/examples/ui-test-app/index.html          |   43 +
 .../examples/ui-test-app}/jest.config.ts      |    3 -
 apps/examples/ui-test-app/jest/setup.ts       |   23 +
 .../ui-test-app/jest/setupAfterEnv.ts         |    1 +
 apps/examples/ui-test-app/package.json        |   98 +
 .../ui-test-app/public/favicon-16.ico         |  Bin 0 -> 4286 bytes
 .../ui-test-app/public/favicon-32.ico         |  Bin 0 -> 16958 bytes
 apps/examples/ui-test-app/public/logo192.png  |  Bin 0 -> 2211 bytes
 apps/examples/ui-test-app/public/logo512.png  |  Bin 0 -> 7413 bytes
 .../examples/ui-test-app/public/manifest.json |   25 +
 apps/examples/ui-test-app/public/robots.txt   |    3 +
 apps/examples/ui-test-app/src/Root.tsx        |   79 +
 apps/examples/ui-test-app/src/index.tsx       |   18 +
 .../ui-test-app/src/tests/Banner.test.tsx     |   60 +
 .../ui-test-app/src/tests/CodeInput.test.tsx  |  154 +
 .../src/tests/CommaNumberInput.test.tsx       |  213 +
 .../src/tests/TextIconAligner.test.tsx        |   43 +
 .../ui-test-app/src/tests/Toasts.test.tsx     |   62 +
 .../src/tests/renderTypography.test.tsx       |    9 +
 .../src/tests/toReactNodes.test.tsx           |  328 ++
 apps/examples/ui-test-app/src/types.ts        |   12 +
 .../examples/ui-test-app}/tsconfig-test.json  |    1 +
 apps/examples/ui-test-app/tsconfig.json       |    9 +
 apps/examples/ui-test-app/vite.config.ts      |    8 +
 apps/examples/uma-vasp-cli/package.json       |    2 +-
 apps/examples/uma-vasp-cli/src/index.ts       |  111 +-
 apps/examples/uma-vasp/README.md              |    8 +-
 apps/examples/uma-vasp/package.json           |    4 +-
 apps/examples/uma-vasp/server.test.ts         |   13 +-
 apps/examples/uma-vasp/src/ReceivingVasp.ts   |  227 +-
 apps/examples/uma-vasp/src/SendingVasp.ts     |  332 +-
 .../uma-vasp/src/SendingVaspRequestCache.ts   |   10 +-
 apps/examples/uma-vasp/src/UmaConfig.ts       |    4 +
 apps/examples/uma-vasp/src/UserService.ts     |    2 +-
 apps/examples/uma-vasp/src/currencies.ts      |   11 +
 .../uma-vasp/src/demo/DemoUserService.ts      |   25 +-
 .../demo/InMemorySendingVaspRequestCache.ts   |   45 +-
 .../src/networking/expressAdapters.ts         |    7 +
 apps/examples/uma-vasp/src/rawLnurl.ts        |   11 -
 apps/examples/uma-vasp/src/server.ts          |   54 +-
 apps/examples/uma-vasp/src/startServer.ts     |    5 +-
 apps/examples/uma-vasp/test.sh                |   34 +-
 package.json                                  |    5 +-
 packages/core/src/requester/Requester.ts      |   49 +-
 packages/core/src/utils/currency.ts           |   76 +-
 packages/core/src/utils/types.ts              |    6 +
 packages/eslint-config/base.js                |    5 +-
 packages/eslint-config/react-app.js           |    2 -
 packages/lightspark-cli/package.json          |    2 +-
 packages/lightspark-sdk/src/env.ts            |    6 +-
 .../components/CurrencyAmount.tsx             |  107 -
 .../components/Dashboard.tsx                  |    2 +-
 .../ReactNativeWallet/package-lock.json       |   90 +-
 .../examples/ReactNativeWallet/package.json   |    3 +-
 .../ReactNativeWallet/utils/currency.ts       |  483 ---
 packages/static/images/lightspark-logo.svg    |   55 +
 packages/static/package.json                  |    8 +
 packages/ui/CHANGELOG.md                      |    4 +-
 packages/ui/README.md                         |    2 +-
 packages/ui/esbuild-svgr-plugin.ts            |   54 +
 packages/ui/package.json                      |   39 +-
 packages/ui/src/components/Badge.tsx          |   27 +-
 packages/ui/src/components/Banner/Banner.tsx  |  254 ++
 .../ui/src/components/Banner/constants.ts     |    2 +
 packages/ui/src/components/Button.tsx         |  585 +--
 packages/ui/src/components/CardPage.tsx       |    2 +-
 packages/ui/src/components/Checkbox.tsx       |   81 +
 packages/ui/src/components/CodeBlock.tsx      |    3 +-
 .../ui/src/components/CodeInput/CodeInput.tsx |  440 +++
 .../components/CodeInput/SingleCodeInput.tsx  |  121 +
 packages/ui/src/components/Collapsible.tsx    |   21 +-
 .../ui/src/components/CommaNumberInput.tsx    |  131 +
 packages/ui/src/components/ContentTable.tsx   |    2 +-
 .../src/components/CopyToClipboardButton.tsx  |    9 +-
 packages/ui/src/components/CurrencyAmount.tsx |   19 +-
 packages/ui/src/components/Drawer.tsx         |  209 +
 packages/ui/src/components/Dropdown.tsx       |  498 +++
 packages/ui/src/components/FileInput.tsx      |    2 +-
 packages/ui/src/components/Icon.tsx           |  115 -
 packages/ui/src/components/Icon/Icon.tsx      |  107 +
 packages/ui/src/components/Icon/types.tsx     |    3 +
 .../ui/src/components/InfoIconTooltip.tsx     |   30 +
 .../ui/src/components/LightsparkProvider.tsx  |    2 +-
 packages/ui/src/components/Loading.tsx        |    6 +-
 packages/ui/src/components/Modal.tsx          |  280 +-
 .../components/PageSection/PageSection.tsx    |  426 ++
 .../components/PageSection/PageSectionNav.tsx |  100 +
 .../src/components/PageSection/constants.tsx  |    1 +
 packages/ui/src/components/PhoneInput.tsx     |  126 +
 packages/ui/src/components/Pill.tsx           |    7 +-
 packages/ui/src/components/ProgressBar.tsx    |    2 +-
 packages/ui/src/components/Radio.tsx          |   60 +
 packages/ui/src/components/TextButton.tsx     |  151 +
 .../ui/src/components/TextIconAligner.tsx     |   44 +-
 packages/ui/src/components/TextInput.tsx      |  399 ++
 packages/ui/src/components/Toasts.tsx         |  429 ++
 packages/ui/src/components/Toggle.tsx         |  115 +
 .../{LightTooltip.tsx => Tooltip.tsx}         |   18 +-
 .../documentation/AnchorLinkHeader.tsx        |   35 +-
 .../documentation/DocsBodyParagraph.tsx       |   21 +
 .../documentation/DocsBodyStrongParagraph.tsx |   31 +
 .../documentation/DocsHeadline.tsx}           |   80 +-
 .../ui/src/components/documentation/Video.tsx |   20 +
 packages/ui/src/components/index.tsx          |   55 +-
 .../typography/Article.tsx                    |   66 +-
 .../ui/src/components/typography/Body.tsx     |   57 +
 .../src/components/typography/BodyStrong.tsx  |   52 +
 .../ui/src/components/typography/Code.tsx     |   48 +
 .../ui/src/components/typography/Display.tsx  |   58 +
 .../ui/src/components/typography/Headline.tsx |   80 +
 .../ui/src/components/typography/Label.tsx    |   49 +
 .../components/typography/LabelModerate.tsx   |   49 +
 .../src/components/typography/LabelStrong.tsx |   53 +
 .../ui/src/components/typography/Overline.tsx |   49 +
 .../ui/src/components/typography/Title.tsx    |   52 +
 .../ui/src/components/typography/index.tsx    |   13 +
 .../typography/renderTypography.tsx           |   43 +
 packages/ui/src/hooks/useDebounce.tsx         |   31 +
 packages/ui/src/hooks/useResizeObserver.tsx   |   85 +
 packages/ui/src/icons/AI.tsx                  |    4 +-
 packages/ui/src/icons/AnchorLink.tsx          |    4 +-
 packages/ui/src/icons/ApiConnection.tsx       |   32 +-
 packages/ui/src/icons/AppIcon.tsx             |    4 +-
 packages/ui/src/icons/ArrowCircle.tsx         |   23 +
 packages/ui/src/icons/ArrowCircleTier1.tsx    |    4 +-
 packages/ui/src/icons/ArrowCircleTier2.tsx    |    4 +-
 packages/ui/src/icons/ArrowCircleTier3.tsx    |    4 +-
 .../ui/src/icons/ArrowCornerDownRight.tsx     |    7 +-
 packages/ui/src/icons/ArrowDown.tsx           |    2 -
 packages/ui/src/icons/ArrowUp.tsx             |    2 -
 .../ui/src/icons/ArrowUpRightCircleFill.tsx   |   20 +
 packages/ui/src/icons/Bank.tsx                |   20 +
 packages/ui/src/icons/Bell.tsx                |   30 -
 packages/ui/src/icons/BellOn.tsx              |   37 -
 packages/ui/src/icons/BitcoinB.tsx            |   36 +-
 .../ui/src/icons/BitcoinBOnRoundedSquare.tsx  |   36 +-
 packages/ui/src/icons/Bolt.tsx                |   80 -
 packages/ui/src/icons/Camera.tsx              |   24 -
 packages/ui/src/icons/CameraCapture.tsx       |    4 +-
 packages/ui/src/icons/CaretRight.tsx          |   20 +
 .../ui/src/icons/CentralArrowShareRight.tsx   |    2 -
 packages/ui/src/icons/Channel.tsx             |   33 -
 packages/ui/src/icons/ChannelBalance.tsx      |   27 -
 packages/ui/src/icons/ChannelOpen.tsx         |   30 -
 packages/ui/src/icons/CheckboxIcon.tsx        |   52 -
 packages/ui/src/icons/Checkmark.tsx           |    4 +-
 .../ui/src/icons/CheckmarkCircleGreen.tsx     |    4 +-
 .../ui/src/icons/CheckmarkCircleTier1.tsx     |    4 +-
 .../ui/src/icons/CheckmarkCircleTier2.tsx     |    4 +-
 .../ui/src/icons/CheckmarkCircleTier3.tsx     |    4 +-
 packages/ui/src/icons/Chevron.tsx             |   37 +-
 packages/ui/src/icons/ChevronLeft.tsx         |   19 +
 packages/ui/src/icons/CircleCheck.tsx         |    2 -
 packages/ui/src/icons/CircleCheckOutline.tsx  |    2 -
 packages/ui/src/icons/CirclePlus.tsx          |    2 -
 packages/ui/src/icons/Clock.tsx               |    1 -
 packages/ui/src/icons/Close.tsx               |    6 +-
 packages/ui/src/icons/Code.tsx                |    6 +-
 packages/ui/src/icons/Copy.tsx                |    6 +-
 packages/ui/src/icons/CreditCard.tsx          |   44 +-
 packages/ui/src/icons/DeleteIcon.tsx          |    4 +-
 packages/ui/src/icons/Dollar.tsx              |    4 +-
 packages/ui/src/icons/DollarManrope.tsx       |   20 +
 packages/ui/src/icons/DollarManropeSmall.tsx  |   20 +
 .../ui/src/icons/DotGrid1x3Horizontal.tsx     |   54 +-
 packages/ui/src/icons/Dots.tsx                |   15 -
 packages/ui/src/icons/Down.tsx                |   19 -
 packages/ui/src/icons/Download.tsx            |   46 +-
 packages/ui/src/icons/Envelope.tsx            |   20 +
 packages/ui/src/icons/ExclamationPoint.tsx    |   62 +-
 packages/ui/src/icons/Exit.tsx                |   20 -
 packages/ui/src/icons/Explorer.tsx            |   30 +-
 packages/ui/src/icons/Eye.tsx                 |   42 +-
 packages/ui/src/icons/EyeDropper.tsx          |   36 +-
 packages/ui/src/icons/Figma.tsx               |   20 +
 packages/ui/src/icons/FlutterTwoTone.tsx      |   10 +-
 packages/ui/src/icons/FramedLetterI.tsx       |   44 +-
 packages/ui/src/icons/Gear.tsx                |    4 +-
 packages/ui/src/icons/Github.tsx              |    4 +-
 packages/ui/src/icons/GoTwoTone.tsx           |    4 +-
 packages/ui/src/icons/GraphQLTwoTone.tsx      |    4 +-
 packages/ui/src/icons/HeartOutline.tsx        |   33 +-
 packages/ui/src/icons/Home.tsx                |    2 -
 packages/ui/src/icons/HorizontalArrows.tsx    |    6 +-
 packages/ui/src/icons/Info.tsx                |   64 +-
 packages/ui/src/icons/InvoiceNew.tsx          |   20 -
 packages/ui/src/icons/JavaScriptTwoTone.tsx   |   10 +-
 packages/ui/src/icons/JavaTwoTone.tsx         |    4 +-
 packages/ui/src/icons/KotlinTwoTone.tsx       |   16 +-
 packages/ui/src/icons/LeftArrow.tsx           |   36 +-
 .../ui/src/icons/LightningOnRoundedSquare.tsx |   32 +-
 packages/ui/src/icons/LinkIcon.tsx            |   58 +-
 packages/ui/src/icons/LoadingSpinner.tsx      |   13 +-
 packages/ui/src/icons/Lock.tsx                |    4 +-
 packages/ui/src/icons/Logo.tsx                |    4 +-
 packages/ui/src/icons/LogoBolt.tsx            |  132 +-
 packages/ui/src/icons/LogoOnCircle.tsx        |   54 +-
 packages/ui/src/icons/MagicWand.tsx           |   72 +-
 packages/ui/src/icons/Mail.tsx                |   21 -
 packages/ui/src/icons/Minus.tsx               |   19 +
 packages/ui/src/icons/Monitor.tsx             |    4 +-
 packages/ui/src/icons/NodeAdd.tsx             |   32 +-
 packages/ui/src/icons/NotEye.tsx              |   46 +-
 packages/ui/src/icons/NoteLine.tsx            |   16 -
 packages/ui/src/icons/PaperPlane.tsx          |   34 +-
 packages/ui/src/icons/Pencil.tsx              |   39 +-
 packages/ui/src/icons/Person.tsx              |    6 +-
 packages/ui/src/icons/PersonCircle.tsx        |   25 +
 packages/ui/src/icons/Phone.tsx               |   26 -
 packages/ui/src/icons/PiggyBank.tsx           |    2 -
 packages/ui/src/icons/Plus.tsx                |   70 +-
 packages/ui/src/icons/PythonTwoTone.tsx       |    4 +-
 packages/ui/src/icons/QRCodeIcon.tsx          |   11 +-
 packages/ui/src/icons/QuestionCircle.tsx      |   20 +
 .../ui/src/icons/QuestionCircleStrong.tsx     |   20 +
 packages/ui/src/icons/ReactTwoTone.tsx        |   10 +-
 packages/ui/src/icons/Receive.tsx             |   23 -
 packages/ui/src/icons/Recycling.tsx           |   36 +-
 packages/ui/src/icons/Remove.tsx              |   19 +
 packages/ui/src/icons/Restart.tsx             |   35 +-
 packages/ui/src/icons/RightArrow.tsx          |   36 +-
 packages/ui/src/icons/Roadmap.tsx             |   36 +-
 packages/ui/src/icons/Route.tsx               |   30 -
 packages/ui/src/icons/RustTwoTone.tsx         |    4 +-
 packages/ui/src/icons/Satoshi.tsx             |    4 +-
 packages/ui/src/icons/SatoshiRounded.tsx      |    4 +-
 packages/ui/src/icons/Search.tsx              |   38 +-
 packages/ui/src/icons/SecurityKey.tsx         |    4 +-
 packages/ui/src/icons/Selector.tsx            |    4 +-
 packages/ui/src/icons/SemiCircleOverlap.tsx   |    4 +-
 packages/ui/src/icons/Send.tsx                |   23 -
 packages/ui/src/icons/Share.tsx               |   18 +
 packages/ui/src/icons/ShieldCheck.tsx         |   19 +
 packages/ui/src/icons/Sidebar.tsx             |    6 +-
 packages/ui/src/icons/Sort.tsx                |    4 +-
 packages/ui/src/icons/StackedLines.tsx        |    2 -
 packages/ui/src/icons/SwiftTwoTone.tsx        |    4 +-
 packages/ui/src/icons/TapSingle.tsx           |   18 +
 packages/ui/src/icons/Team.tsx                |   36 +-
 packages/ui/src/icons/Terminal.tsx            |    4 +-
 packages/ui/src/icons/Trash.tsx               |   38 +-
 packages/ui/src/icons/TrashOld.tsx            |   26 -
 packages/ui/src/icons/TwoArrowsDown.tsx       |    2 -
 packages/ui/src/icons/TwoArrowsUp.tsx         |    2 -
 packages/ui/src/icons/Uma.tsx                 |    8 +-
 packages/ui/src/icons/UmaBridgeLoading.tsx    |   18 +
 packages/ui/src/icons/Upload.tsx              |   46 +-
 packages/ui/src/icons/VerticalArrows.tsx      |   32 -
 packages/ui/src/icons/ViewAll.tsx             |   20 -
 packages/ui/src/icons/WalletSDKIcon.tsx       |    4 +-
 packages/ui/src/icons/WarningIcon.tsx         |   22 -
 packages/ui/src/icons/WarningSign.tsx         |   56 +-
 packages/ui/src/icons/constants.tsx           |    2 +
 packages/ui/src/icons/index.tsx               |  112 +-
 packages/ui/src/modules.d.ts                  |    4 +
 packages/ui/src/styles/buttons.tsx            |   85 +
 packages/ui/src/styles/colors.tsx             |  317 +-
 packages/ui/src/styles/common.tsx             |   21 +-
 packages/ui/src/styles/constants.ts           |    5 +
 packages/ui/src/styles/fields.tsx             |   28 +-
 .../ui/src/styles/fonts/typography/Body.tsx   |   34 -
 .../styles/fonts/typography/BodyStrong.tsx    |   38 -
 .../ui/src/styles/fonts/typography/Code.tsx   |   21 -
 .../src/styles/fonts/typography/Display.tsx   |   42 -
 .../ui/src/styles/fonts/typography/Label.tsx  |   29 -
 .../styles/fonts/typography/LabelModerate.tsx |   44 -
 .../styles/fonts/typography/LabelStrong.tsx   |   42 -
 .../src/styles/fonts/typography/Overline.tsx  |   33 -
 .../ui/src/styles/fonts/typography/Title.tsx  |   35 -
 .../ui/src/styles/fonts/typography/index.ts   |   11 -
 .../ui/src/styles/fonts/typographyTokens.ts   |  943 -----
 packages/ui/src/styles/global.tsx             |    9 +-
 packages/ui/src/styles/themes.tsx             |  444 +++
 packages/ui/src/styles/tokens/typography.ts   | 3444 +++++++++++++++++
 packages/ui/src/styles/type.tsx               |    2 +-
 packages/ui/src/styles/typography.tsx         |   31 +
 packages/ui/src/types/index.ts                |   14 +
 packages/ui/src/utils/NextLink.tsx            |   50 +
 packages/ui/src/utils/countryCodesToNames.tsx |  264 ++
 .../ui/src/utils/isReactNodeWithChildren.tsx  |   18 +
 packages/ui/src/utils/strings.tsx             |   50 +-
 .../ui/src/utils/tests/toReactNodes.test.tsx  |  156 -
 .../src/utils/toNonTypographicReactNodes.tsx  |  160 +
 packages/ui/src/utils/toReactNodes.tsx        |  170 +-
 packages/ui/src/utils/transformGQLName.tsx    |   66 +
 packages/ui/src/utils/unicode.tsx             |    1 +
 packages/ui/tsup.config.ts                    |    2 +-
 packages/vite/index.cjs                       |    5 +
 packages/vite/package.json                    |    2 +-
 packages/wallet-cli/package.json              |    2 +-
 start.sh                                      |    1 +
 turbo.json                                    |    7 +-
 yarn.lock                                     | 3279 ++++++++++++++--
 314 files changed, 16455 insertions(+), 5501 deletions(-)
 create mode 100644 .changeset/warm-vans-change.md
 create mode 100644 .changeset/wild-beans-suffer.md
 create mode 100644 .changeset/wise-tables-knock.md
 delete mode 100644 apps/examples/streaming-wallet-extension/src/components/CirclePlusIcon.tsx
 delete mode 100644 apps/examples/streaming-wallet-extension/src/components/LeftArrow.tsx
 create mode 100644 apps/examples/ui-test-app/.eslintrc.js
 create mode 100644 apps/examples/ui-test-app/.prettierignore
 create mode 100644 apps/examples/ui-test-app/.prettierrc
 create mode 100644 apps/examples/ui-test-app/gql-codegen.yml
 create mode 100644 apps/examples/ui-test-app/index.html
 rename {packages/ui => apps/examples/ui-test-app}/jest.config.ts (81%)
 create mode 100644 apps/examples/ui-test-app/jest/setup.ts
 create mode 100644 apps/examples/ui-test-app/jest/setupAfterEnv.ts
 create mode 100644 apps/examples/ui-test-app/package.json
 create mode 100644 apps/examples/ui-test-app/public/favicon-16.ico
 create mode 100644 apps/examples/ui-test-app/public/favicon-32.ico
 create mode 100644 apps/examples/ui-test-app/public/logo192.png
 create mode 100644 apps/examples/ui-test-app/public/logo512.png
 create mode 100644 apps/examples/ui-test-app/public/manifest.json
 create mode 100644 apps/examples/ui-test-app/public/robots.txt
 create mode 100644 apps/examples/ui-test-app/src/Root.tsx
 create mode 100644 apps/examples/ui-test-app/src/index.tsx
 create mode 100644 apps/examples/ui-test-app/src/tests/Banner.test.tsx
 create mode 100644 apps/examples/ui-test-app/src/tests/CodeInput.test.tsx
 create mode 100644 apps/examples/ui-test-app/src/tests/CommaNumberInput.test.tsx
 create mode 100644 apps/examples/ui-test-app/src/tests/TextIconAligner.test.tsx
 create mode 100644 apps/examples/ui-test-app/src/tests/Toasts.test.tsx
 create mode 100644 apps/examples/ui-test-app/src/tests/renderTypography.test.tsx
 create mode 100644 apps/examples/ui-test-app/src/tests/toReactNodes.test.tsx
 create mode 100644 apps/examples/ui-test-app/src/types.ts
 rename {packages/ui => apps/examples/ui-test-app}/tsconfig-test.json (85%)
 create mode 100644 apps/examples/ui-test-app/tsconfig.json
 create mode 100644 apps/examples/ui-test-app/vite.config.ts
 create mode 100644 apps/examples/uma-vasp/src/currencies.ts
 delete mode 100644 apps/examples/uma-vasp/src/rawLnurl.ts
 delete mode 100644 packages/react-native/examples/ReactNativeWallet/components/CurrencyAmount.tsx
 delete mode 100644 packages/react-native/examples/ReactNativeWallet/utils/currency.ts
 create mode 100644 packages/static/images/lightspark-logo.svg
 create mode 100644 packages/static/package.json
 create mode 100644 packages/ui/esbuild-svgr-plugin.ts
 create mode 100644 packages/ui/src/components/Banner/Banner.tsx
 create mode 100644 packages/ui/src/components/Banner/constants.ts
 create mode 100644 packages/ui/src/components/Checkbox.tsx
 create mode 100644 packages/ui/src/components/CodeInput/CodeInput.tsx
 create mode 100644 packages/ui/src/components/CodeInput/SingleCodeInput.tsx
 create mode 100644 packages/ui/src/components/CommaNumberInput.tsx
 create mode 100644 packages/ui/src/components/Drawer.tsx
 create mode 100644 packages/ui/src/components/Dropdown.tsx
 delete mode 100644 packages/ui/src/components/Icon.tsx
 create mode 100644 packages/ui/src/components/Icon/Icon.tsx
 create mode 100644 packages/ui/src/components/Icon/types.tsx
 create mode 100644 packages/ui/src/components/InfoIconTooltip.tsx
 create mode 100644 packages/ui/src/components/PageSection/PageSection.tsx
 create mode 100644 packages/ui/src/components/PageSection/PageSectionNav.tsx
 create mode 100644 packages/ui/src/components/PageSection/constants.tsx
 create mode 100644 packages/ui/src/components/PhoneInput.tsx
 create mode 100644 packages/ui/src/components/Radio.tsx
 create mode 100644 packages/ui/src/components/TextButton.tsx
 create mode 100644 packages/ui/src/components/TextInput.tsx
 create mode 100644 packages/ui/src/components/Toasts.tsx
 create mode 100644 packages/ui/src/components/Toggle.tsx
 rename packages/ui/src/components/{LightTooltip.tsx => Tooltip.tsx} (77%)
 create mode 100644 packages/ui/src/components/documentation/DocsBodyParagraph.tsx
 create mode 100644 packages/ui/src/components/documentation/DocsBodyStrongParagraph.tsx
 rename packages/ui/src/{styles/fonts/typography/Headline.tsx => components/documentation/DocsHeadline.tsx} (52%)
 create mode 100644 packages/ui/src/components/documentation/Video.tsx
 rename packages/ui/src/{styles/fonts => components}/typography/Article.tsx (60%)
 create mode 100644 packages/ui/src/components/typography/Body.tsx
 create mode 100644 packages/ui/src/components/typography/BodyStrong.tsx
 create mode 100644 packages/ui/src/components/typography/Code.tsx
 create mode 100644 packages/ui/src/components/typography/Display.tsx
 create mode 100644 packages/ui/src/components/typography/Headline.tsx
 create mode 100644 packages/ui/src/components/typography/Label.tsx
 create mode 100644 packages/ui/src/components/typography/LabelModerate.tsx
 create mode 100644 packages/ui/src/components/typography/LabelStrong.tsx
 create mode 100644 packages/ui/src/components/typography/Overline.tsx
 create mode 100644 packages/ui/src/components/typography/Title.tsx
 create mode 100644 packages/ui/src/components/typography/index.tsx
 create mode 100644 packages/ui/src/components/typography/renderTypography.tsx
 create mode 100644 packages/ui/src/hooks/useDebounce.tsx
 create mode 100644 packages/ui/src/hooks/useResizeObserver.tsx
 create mode 100644 packages/ui/src/icons/ArrowCircle.tsx
 create mode 100644 packages/ui/src/icons/ArrowUpRightCircleFill.tsx
 create mode 100644 packages/ui/src/icons/Bank.tsx
 delete mode 100644 packages/ui/src/icons/Bell.tsx
 delete mode 100644 packages/ui/src/icons/BellOn.tsx
 delete mode 100644 packages/ui/src/icons/Bolt.tsx
 delete mode 100644 packages/ui/src/icons/Camera.tsx
 create mode 100644 packages/ui/src/icons/CaretRight.tsx
 delete mode 100644 packages/ui/src/icons/Channel.tsx
 delete mode 100644 packages/ui/src/icons/ChannelBalance.tsx
 delete mode 100644 packages/ui/src/icons/ChannelOpen.tsx
 delete mode 100644 packages/ui/src/icons/CheckboxIcon.tsx
 create mode 100644 packages/ui/src/icons/ChevronLeft.tsx
 create mode 100644 packages/ui/src/icons/DollarManrope.tsx
 create mode 100644 packages/ui/src/icons/DollarManropeSmall.tsx
 delete mode 100644 packages/ui/src/icons/Dots.tsx
 delete mode 100644 packages/ui/src/icons/Down.tsx
 create mode 100644 packages/ui/src/icons/Envelope.tsx
 delete mode 100644 packages/ui/src/icons/Exit.tsx
 create mode 100644 packages/ui/src/icons/Figma.tsx
 delete mode 100644 packages/ui/src/icons/InvoiceNew.tsx
 delete mode 100644 packages/ui/src/icons/Mail.tsx
 create mode 100644 packages/ui/src/icons/Minus.tsx
 delete mode 100644 packages/ui/src/icons/NoteLine.tsx
 create mode 100644 packages/ui/src/icons/PersonCircle.tsx
 delete mode 100644 packages/ui/src/icons/Phone.tsx
 create mode 100644 packages/ui/src/icons/QuestionCircle.tsx
 create mode 100644 packages/ui/src/icons/QuestionCircleStrong.tsx
 delete mode 100644 packages/ui/src/icons/Receive.tsx
 create mode 100644 packages/ui/src/icons/Remove.tsx
 delete mode 100644 packages/ui/src/icons/Route.tsx
 delete mode 100644 packages/ui/src/icons/Send.tsx
 create mode 100644 packages/ui/src/icons/Share.tsx
 create mode 100644 packages/ui/src/icons/ShieldCheck.tsx
 create mode 100644 packages/ui/src/icons/TapSingle.tsx
 delete mode 100644 packages/ui/src/icons/TrashOld.tsx
 create mode 100644 packages/ui/src/icons/UmaBridgeLoading.tsx
 delete mode 100644 packages/ui/src/icons/VerticalArrows.tsx
 delete mode 100644 packages/ui/src/icons/ViewAll.tsx
 delete mode 100644 packages/ui/src/icons/WarningIcon.tsx
 create mode 100644 packages/ui/src/icons/constants.tsx
 create mode 100644 packages/ui/src/styles/buttons.tsx
 delete mode 100644 packages/ui/src/styles/fonts/typography/Body.tsx
 delete mode 100644 packages/ui/src/styles/fonts/typography/BodyStrong.tsx
 delete mode 100644 packages/ui/src/styles/fonts/typography/Code.tsx
 delete mode 100644 packages/ui/src/styles/fonts/typography/Display.tsx
 delete mode 100644 packages/ui/src/styles/fonts/typography/Label.tsx
 delete mode 100644 packages/ui/src/styles/fonts/typography/LabelModerate.tsx
 delete mode 100644 packages/ui/src/styles/fonts/typography/LabelStrong.tsx
 delete mode 100644 packages/ui/src/styles/fonts/typography/Overline.tsx
 delete mode 100644 packages/ui/src/styles/fonts/typography/Title.tsx
 delete mode 100644 packages/ui/src/styles/fonts/typography/index.ts
 delete mode 100644 packages/ui/src/styles/fonts/typographyTokens.ts
 create mode 100644 packages/ui/src/styles/themes.tsx
 create mode 100644 packages/ui/src/styles/tokens/typography.ts
 create mode 100644 packages/ui/src/styles/typography.tsx
 create mode 100644 packages/ui/src/utils/NextLink.tsx
 create mode 100644 packages/ui/src/utils/countryCodesToNames.tsx
 create mode 100644 packages/ui/src/utils/isReactNodeWithChildren.tsx
 delete mode 100644 packages/ui/src/utils/tests/toReactNodes.test.tsx
 create mode 100644 packages/ui/src/utils/toNonTypographicReactNodes.tsx
 create mode 100644 packages/ui/src/utils/transformGQLName.tsx
 create mode 100644 packages/ui/src/utils/unicode.tsx

diff --git a/.changeset/warm-vans-change.md b/.changeset/warm-vans-change.md
new file mode 100644
index 000000000..b04ac868a
--- /dev/null
+++ b/.changeset/warm-vans-change.md
@@ -0,0 +1,23 @@
+---
+"@lightsparkdev/ui": patch
+---
+
+- Remove unused icons (#10179)
+- Preload icons (#10182)
+- Fix invalid color string (#10231)
+- Add ChevronLeft icon (#10198)
+- Add InfoIconTooltip component and improve Tooltip (#10236)
+- Add Radio component (#10350)
+- Typography and theme improvements (#10331)
+- Add Banner component (#10262)
+- Consolidate specifying full precision for currencies (#1095)
+- Add NextLink as a ToReactNode type (#10432)
+- Button improvements (#10507)
+- Update to latest typography tokens (#10536)
+- Add transformGQLName (#10592)
+- ToReactNodes improvements and tests (#10562)
+- Add icons (#10572)
+- Provide icon color inversion when color is specified (#10630)
+- Add PhoneInput component (#10702)
+- Add useDebounce hook (#10741)
+- Add common Drawer component, optionally use in Modal (#10819)
diff --git a/.changeset/wild-beans-suffer.md b/.changeset/wild-beans-suffer.md
new file mode 100644
index 000000000..40736792e
--- /dev/null
+++ b/.changeset/wild-beans-suffer.md
@@ -0,0 +1,6 @@
+---
+"@lightsparkdev/core": minor
+---
+
+- Move formatCurrencyStr options into an object (#1095)
+- Compress requests with deflate (#10512)
diff --git a/.changeset/wise-tables-knock.md b/.changeset/wise-tables-knock.md
new file mode 100644
index 000000000..c72505673
--- /dev/null
+++ b/.changeset/wise-tables-knock.md
@@ -0,0 +1,12 @@
+---
+"@lightsparkdev/ui": major
+---
+
+- Move PageSectionNav to new UI component (#9971) 
+- Move all PageSection components and Dropdown to public UI (#9979) 
+- Allow Modal submit to be a link (#10066)
+- Move themes to own file. Simplify colors (#10167) 
+- Move typography and tokens (#10172) 
+- Improve theme typography tokens and add bridge tokens (#10189) 
+- Move typography to components (#10178)
+- Update dependencies
diff --git a/apps/examples/oauth-app/package.json b/apps/examples/oauth-app/package.json
index 547591c57..6921f4b68 100644
--- a/apps/examples/oauth-app/package.json
+++ b/apps/examples/oauth-app/package.json
@@ -27,7 +27,7 @@
     "eslint-watch": "^8.0.0",
     "tsc-absolute": "^1.0.1",
     "typescript": "^5.0.0",
-    "vite": "^5.0.5"
+    "vite": "^5.1.6"
   },
   "scripts": {
     "start": "yarn vite",
diff --git a/apps/examples/oauth-app/src/index.tsx b/apps/examples/oauth-app/src/index.tsx
index 7675e17cc..165ae6832 100644
--- a/apps/examples/oauth-app/src/index.tsx
+++ b/apps/examples/oauth-app/src/index.tsx
@@ -7,7 +7,7 @@ import "./index.css";
 import reportWebVitals from "./reportWebVitals";
 import { Root } from "./Root";
 import { ThemeProvider } from "@emotion/react";
-import { themes } from "@lightsparkdev/ui/styles/colors";
+import { themes } from "@lightsparkdev/ui/styles/themes";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
diff --git a/apps/examples/oauth-app/src/pages/DashboardPage.tsx b/apps/examples/oauth-app/src/pages/DashboardPage.tsx
index 0e15dde7d..2eac6aec0 100644
--- a/apps/examples/oauth-app/src/pages/DashboardPage.tsx
+++ b/apps/examples/oauth-app/src/pages/DashboardPage.tsx
@@ -46,7 +46,7 @@ function DashboardPage() {
       <div>
         <Header>
           <Button
-            primary
+            kind="primary"
             text="Sign out"
             onClick={() => {
               auth.signout().catch((err) => {
diff --git a/apps/examples/oauth-app/src/pages/LoginPage.tsx b/apps/examples/oauth-app/src/pages/LoginPage.tsx
index 1f1f92a28..146553c17 100644
--- a/apps/examples/oauth-app/src/pages/LoginPage.tsx
+++ b/apps/examples/oauth-app/src/pages/LoginPage.tsx
@@ -51,7 +51,7 @@ const LoginPage = () => {
   return (
     <Container>
       <Description>Log into your Lightspark account to continue</Description>
-      <Button text="Login" primary onClick={handleLogin} />
+      <Button text="Login" kind="primary" onClick={handleLogin} />
     </Container>
   );
 };
diff --git a/apps/examples/react-wallet-app/package.json b/apps/examples/react-wallet-app/package.json
index 1f0a0b52b..288664b31 100644
--- a/apps/examples/react-wallet-app/package.json
+++ b/apps/examples/react-wallet-app/package.json
@@ -38,7 +38,7 @@
     "eslint-watch": "^8.0.0",
     "tsc-absolute": "^1.0.1",
     "typescript": "^5.0.0",
-    "vite": "^5.0.5"
+    "vite": "^5.1.6"
   },
   "engines": {
     "node": ">=18"
diff --git a/apps/examples/react-wallet-app/src/components/Dashboard.tsx b/apps/examples/react-wallet-app/src/components/Dashboard.tsx
index b5a475561..946a33386 100644
--- a/apps/examples/react-wallet-app/src/components/Dashboard.tsx
+++ b/apps/examples/react-wallet-app/src/components/Dashboard.tsx
@@ -33,7 +33,7 @@ const Dashboard = ({ data }: { data: WalletDashboard }) => {
       <ActionsBar>
         <Button
           text="Send Payment"
-          primary
+          kind="primary"
           // mt={isSm ? 0 : 24}
           // loading={sendingPayment}
           // onClick={onSubmit}
diff --git a/apps/examples/react-wallet-app/src/index.tsx b/apps/examples/react-wallet-app/src/index.tsx
index 65085a108..d1c6ae9f4 100644
--- a/apps/examples/react-wallet-app/src/index.tsx
+++ b/apps/examples/react-wallet-app/src/index.tsx
@@ -1,5 +1,5 @@
 import { ThemeProvider } from "@emotion/react";
-import { themes } from "@lightsparkdev/ui/styles/colors";
+import { themes } from "@lightsparkdev/ui/styles/themes";
 import { GlobalStyles } from "@lightsparkdev/ui/styles/global";
 import React from "react";
 import ReactDOM from "react-dom/client";
diff --git a/apps/examples/react-wallet-app/src/pages/DashboardPage.tsx b/apps/examples/react-wallet-app/src/pages/DashboardPage.tsx
index db5df7ff2..94da4f071 100644
--- a/apps/examples/react-wallet-app/src/pages/DashboardPage.tsx
+++ b/apps/examples/react-wallet-app/src/pages/DashboardPage.tsx
@@ -103,7 +103,7 @@ function DashboardPage() {
         <Header>
           <Button
             text="Sign out"
-            primary
+            kind="primary"
             onClick={() => {
               void (async () => {
                 await auth.logout();
@@ -130,7 +130,7 @@ const DeployWallet = ({
   return (
     <div>
       <h1>Wallet not yet deployed. Status: {status}</h1>
-      <Button primary onClick={onDeploy} text="Deploy Wallet" />
+      <Button kind="primary" onClick={onDeploy} text="Deploy Wallet" />
     </div>
   );
 };
@@ -145,7 +145,7 @@ const InitializeWallet = ({
   return (
     <div>
       <h1>Wallet not yet initialized. Status: {status}</h1>
-      <Button primary onClick={onInitialize} text="Initialize Wallet" />
+      <Button kind="primary" onClick={onInitialize} text="Initialize Wallet" />
     </div>
   );
 };
diff --git a/apps/examples/react-wallet-app/src/pages/LoginPage.tsx b/apps/examples/react-wallet-app/src/pages/LoginPage.tsx
index a026fe55f..f01472ebf 100644
--- a/apps/examples/react-wallet-app/src/pages/LoginPage.tsx
+++ b/apps/examples/react-wallet-app/src/pages/LoginPage.tsx
@@ -30,14 +30,19 @@ const LoginPage = () => {
 
   const generateDemoTokens = async () => {
     const { token: jwt, accountId: jwtServerAccountId } = await fetch(
-      `${jwtServerUrl.replace(/\/$/, "")}/getJwt?userId=${userName}&password=${password}`,
+      `${jwtServerUrl.replace(
+        /\/$/,
+        ""
+      )}/getJwt?userId=${userName}&password=${password}`,
       {
         method: "GET",
         headers: {
           "ngrok-skip-browser-warning": "true",
-        }
+        },
       }
-    ).then((res) => res.json() as Promise<{ token: string, accountId: string }>);
+    ).then(
+      (res) => res.json() as Promise<{ token: string; accountId: string }>
+    );
     await auth.login(jwtServerAccountId, jwt);
     navigate(Routes.Dashboard);
   };
@@ -62,7 +67,7 @@ const LoginPage = () => {
           onChange={(e) => setJwt(e.target.value)}
         />
       </Label>
-      <Button primary onClick={handleLogin} text="Login" />
+      <Button kind="primary" onClick={handleLogin} text="Login" />
 
       <Description>
         Alternatively, use our demo jwt server with a user name and password.
@@ -94,7 +99,7 @@ const LoginPage = () => {
         />
       </Label>
       <Button
-        primary
+        kind="primary"
         onClick={() => {
           void generateDemoTokens();
         }}
diff --git a/apps/examples/settings.json b/apps/examples/settings.json
index 5e32d7d96..d66d28a09 100644
--- a/apps/examples/settings.json
+++ b/apps/examples/settings.json
@@ -13,5 +13,8 @@
   },
   "umaVasp": {
     "port": 3104
+  },
+  "uiTestApp": {
+    "port": 3105
   }
 }
diff --git a/apps/examples/streaming-wallet-extension/package.json b/apps/examples/streaming-wallet-extension/package.json
index ac5185eb0..e3f8f9de3 100644
--- a/apps/examples/streaming-wallet-extension/package.json
+++ b/apps/examples/streaming-wallet-extension/package.json
@@ -41,7 +41,7 @@
     "eslint-watch": "^8.0.0",
     "tsc-absolute": "^1.0.1",
     "typescript": "^5.0.0",
-    "vite": "^5.0.5"
+    "vite": "^5.1.6"
   },
   "engines": {
     "node": ">=18"
diff --git a/apps/examples/streaming-wallet-extension/src/App.tsx b/apps/examples/streaming-wallet-extension/src/App.tsx
index 77a5ff651..8f6050065 100644
--- a/apps/examples/streaming-wallet-extension/src/App.tsx
+++ b/apps/examples/streaming-wallet-extension/src/App.tsx
@@ -17,14 +17,13 @@ import StreamingDemoAccountCredentials from "./auth/StreamingDemoCredentials";
 import VideoProgressCache from "./background/VideoProgressCache";
 import { clearStorageKeepingInstanceId } from "./common/storage";
 import { findActiveStreamingDemoTabs } from "./common/streamingTabs";
-import CirclePlusIcon from "./components/CirclePlusIcon";
 import CurrencyAmountElement from "./components/CurrencyAmount";
 import CurrencyAmountRaw from "./components/CurrencyAmountRaw";
-import LeftArrow from "./components/LeftArrow";
 import { LoadingSpinner } from "./components/Loading";
 import StreamingTransactionChip from "./components/StreamingTransactionChip";
 import TransactionRow from "./components/TransactionRow";
 import { getWalletClient } from "./lightsparkClientProvider";
+import { Icon } from "@lightsparkdev/ui/components";
 
 enum Screen {
   Balance,
@@ -224,7 +223,7 @@ function Header(screen: Screen, setScreen: (screen: Screen) => void) {
     return (
       <div className="header">
         <button onClick={() => setScreen(Screen.Balance)}>
-          <LeftArrow />
+          <Icon name="LeftArrow" width={16} />
         </button>
         <HeaderBackText>Transactions</HeaderBackText>
       </div>
@@ -341,7 +340,7 @@ function LoginScreen(props: {
       <CreateWalletButton onClick={createWallet} disabled={isLoading}>
         {!isLoading ? (
           <span style={{ marginInlineEnd: "8px", height: "13px" }}>
-            <CirclePlusIcon />
+            <Icon name="CirclePlus" width={12} />
           </span>
         ) : (
           <></>
diff --git a/apps/examples/streaming-wallet-extension/src/components/CirclePlusIcon.tsx b/apps/examples/streaming-wallet-extension/src/components/CirclePlusIcon.tsx
deleted file mode 100644
index b4914d6de..000000000
--- a/apps/examples/streaming-wallet-extension/src/components/CirclePlusIcon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-const CirclePlusIcon = () => (
-  <svg
-    width="12"
-    height="13"
-    viewBox="0 0 12 13"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M6 3.75V9.25M3.25 6.5H8.75M11.5 6.5C11.5 9.53757 9.03757 12 6 12C2.96243 12 0.5 9.53757 0.5 6.5C0.5 3.46243 2.96243 1 6 1C9.03757 1 11.5 3.46243 11.5 6.5Z"
-      stroke="white"
-      stroke-linecap="round"
-    />
-  </svg>
-);
-
-export default CirclePlusIcon;
diff --git a/apps/examples/streaming-wallet-extension/src/components/LeftArrow.tsx b/apps/examples/streaming-wallet-extension/src/components/LeftArrow.tsx
deleted file mode 100644
index c07251cb0..000000000
--- a/apps/examples/streaming-wallet-extension/src/components/LeftArrow.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-const LeftArrow = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12.9837 8.00003L3.01636 8.00003M3.01636 8.00003L7.01636 12.1905M3.01636 8.00003L7.01636 3.80955"
-      stroke="#666666"
-      strokeWidth="1.33333"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default LeftArrow;
diff --git a/apps/examples/ui-test-app/.eslintrc.js b/apps/examples/ui-test-app/.eslintrc.js
new file mode 100644
index 000000000..c0a94025e
--- /dev/null
+++ b/apps/examples/ui-test-app/.eslintrc.js
@@ -0,0 +1,23 @@
+module.exports = {
+  extends: ["@lightsparkdev/eslint-config/react-lib"],
+  /* Mainly keeping this file around for reference for future public react lib, ignore in lint: */
+  ignorePatterns: ["src/generated/"],
+  overrides: [
+    {
+      files: ["**/src/**/*.ts?(x)"],
+      excludedFiles: ["**/tests/**/*.ts?(x)"],
+      rules: {
+        /* Temporarily turn off no-explicit-any until these can be resolved LIG-3400: */
+        "@typescript-eslint/no-explicit-any": "off",
+        /* Too many of these type-aware errors, turn off for now: */
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-floating-promises": "off",
+        "@typescript-eslint/no-misused-promises": "off",
+        "@typescript-eslint/no-unsafe-argument": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/no-unsafe-return": "off",
+      },
+    },
+  ],
+};
diff --git a/apps/examples/ui-test-app/.prettierignore b/apps/examples/ui-test-app/.prettierignore
new file mode 100644
index 000000000..d3db8f9b1
--- /dev/null
+++ b/apps/examples/ui-test-app/.prettierignore
@@ -0,0 +1 @@
+src/generated/
diff --git a/apps/examples/ui-test-app/.prettierrc b/apps/examples/ui-test-app/.prettierrc
new file mode 100644
index 000000000..55c1943ae
--- /dev/null
+++ b/apps/examples/ui-test-app/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-organize-imports"]
+}
diff --git a/apps/examples/ui-test-app/gql-codegen.yml b/apps/examples/ui-test-app/gql-codegen.yml
new file mode 100644
index 000000000..14875df40
--- /dev/null
+++ b/apps/examples/ui-test-app/gql-codegen.yml
@@ -0,0 +1,11 @@
+overwrite: true
+schema: ["../../../../sparkcore/graphql_schemas/first_party_schema.graphql"]
+documents: ["src/**/*.tsx"]
+generates:
+  src/generated/graphql.tsx:
+    plugins:
+      - "typescript"
+      - "typescript-operations"
+      - "typescript-react-apollo"
+    config:
+      nonOptionalTypename: true
diff --git a/apps/examples/ui-test-app/index.html b/apps/examples/ui-test-app/index.html
new file mode 100644
index 000000000..297ea69dd
--- /dev/null
+++ b/apps/examples/ui-test-app/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+  <head data-commit="__CURRENT_COMMIT__">
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-16.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Lightspark is building infrastructure for the Lightning Network to deliver open payments for the Internet at scale. Lightspark services and tools aim to be the fastest, easiest and most reliable way to send and receive payments globally, with exceptionally low fees, using the Lightning Network."
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <title>Lightspark</title>
+  </head>
+  <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript>
+      <!-- Can't switch the gtm id dynamically without js, assume prod: -->
+      <iframe
+        src="https://www.googletagmanager.com/ns.html?id=<%= gtmProdId %>"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe
+    ></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="root"></div>
+
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/ui/jest.config.ts b/apps/examples/ui-test-app/jest.config.ts
similarity index 81%
rename from packages/ui/jest.config.ts
rename to apps/examples/ui-test-app/jest.config.ts
index a4915e613..d2cf931c9 100644
--- a/packages/ui/jest.config.ts
+++ b/apps/examples/ui-test-app/jest.config.ts
@@ -19,9 +19,6 @@ const config: JestConfigWithTsJest = {
   testTimeout: 20000,
   moduleNameMapper: {
     "^.+\\.(css|svg|png)$": "identity-obj-proxy",
-    /* ts-jest doesn't support .js imports which are required for making imports work in
-       the published ui package. See issue https://bit.ly/3TF1uSS */
-    "(.+)\\.js": "$1",
   },
   setupFiles: ["<rootDir>/jest/setup.ts"],
   setupFilesAfterEnv: ["<rootDir>/jest/setupAfterEnv.ts"],
diff --git a/apps/examples/ui-test-app/jest/setup.ts b/apps/examples/ui-test-app/jest/setup.ts
new file mode 100644
index 000000000..1f5fb2185
--- /dev/null
+++ b/apps/examples/ui-test-app/jest/setup.ts
@@ -0,0 +1,23 @@
+/* Import node libs to polyfill browser objects */
+import crypto from "crypto";
+import ResizeObserver from "resize-observer-polyfill";
+
+import { TextDecoder, TextEncoder } from "util";
+
+Object.defineProperties(global.self, {
+  crypto: {
+    value: {
+      getRandomValues: (arr: NodeJS.ArrayBufferView) =>
+        crypto.randomFillSync(arr),
+      subtle: crypto.webcrypto.subtle,
+    },
+  },
+  TextEncoder: {
+    value: TextEncoder,
+  },
+  TextDecoder: {
+    value: TextDecoder,
+  },
+});
+
+global.ResizeObserver = ResizeObserver;
diff --git a/apps/examples/ui-test-app/jest/setupAfterEnv.ts b/apps/examples/ui-test-app/jest/setupAfterEnv.ts
new file mode 100644
index 000000000..d0de870dc
--- /dev/null
+++ b/apps/examples/ui-test-app/jest/setupAfterEnv.ts
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";
diff --git a/apps/examples/ui-test-app/package.json b/apps/examples/ui-test-app/package.json
new file mode 100644
index 000000000..ef4866c9a
--- /dev/null
+++ b/apps/examples/ui-test-app/package.json
@@ -0,0 +1,98 @@
+{
+  "name": "@lightsparkdev/ui-test-app",
+  "version": "0.0.0",
+  "description": "Lightspark UI components",
+  "author": "Lightspark Inc.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "yarn tsc && yarn vite build",
+    "circular-deps": "madge --circular --extensions ts,tsx src",
+    "clean": "rm -rf .turbo && rm -rf dist",
+    "dev": "yarn build --watch",
+    "format:fix": "prettier src --write",
+    "format": "prettier src --check",
+    "lint:fix": "eslint --fix .",
+    "lint:watch": "esw ./src -w --ext .ts,.tsx,.js --color",
+    "lint": "eslint .",
+    "postversion": "yarn build",
+    "start": "yarn vite",
+    "preview": "yarn tsc && yarn vite preview",
+    "test": "node --experimental-vm-modules $(yarn bin jest) --no-cache --runInBand --bail",
+    "types": "echo \"TODO: Some imports depend on the inheriting app config. May not be possible to run types here separately unless we fix that.\"",
+    "types:watch": "echo \"TODO: Some imports depend on the inheriting app config. May not be possible to run types here separately unless we fix that.\""
+  },
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@apollo/client": "^3.9.11",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@lightsparkdev/core": "1.0.22",
+    "@lightsparkdev/ui": "0.0.13",
+    "@wojtekmaj/react-datetimerange-picker": "^5.5.0",
+    "@zxing/browser": "^0.1.1",
+    "@zxing/library": "^0.19.2",
+    "auto-bind": "^5.0.1",
+    "chart.js": "4.2.0",
+    "dayjs": "^1.11.7",
+    "deep-object-diff": "^1.1.9",
+    "nanoid": "^4.0.0",
+    "qrcode.react": "^3.1.0",
+    "react": "^18.2.0",
+    "react-date-picker": "^10.6.0",
+    "react-datetime-picker": "^5.6.0",
+    "react-device-detect": "^2.2.3",
+    "react-dom": "^18.1.0",
+    "react-router-dom": "6.11.2",
+    "react-table": "^7.8.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@graphql-codegen/cli": "^5.0.2",
+    "@graphql-codegen/typescript": "^4.0.6",
+    "@graphql-codegen/typescript-operations": "^4.2.0",
+    "@graphql-codegen/typescript-react-apollo": "^4.3.0",
+    "@lightsparkdev/eslint-config": "*",
+    "@lightsparkdev/tsconfig": "*",
+    "@lightsparkdev/vite": "*",
+    "@simbathesailor/use-what-changed": "^2.0.0",
+    "@testing-library/jest-dom": "^6.1.2",
+    "@types/jest": "^29.5.3",
+    "@vitejs/plugin-react": "^4.0.1",
+    "babel-jest": "^29.6.4",
+    "eslint": "^8.3.0",
+    "eslint-watch": "^8.0.0",
+    "graphql": "^16.6.0",
+    "graphql-tag": "^2.12.6",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.4",
+    "madge": "^6.1.0",
+    "prettier": "3.0.3",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "resize-observer-polyfill": "^1.5.1",
+    "ts-jest": "^29.1.1",
+    "tsc-absolute": "^1.0.1",
+    "tsup": "^7.2.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.1.6"
+  },
+  "madge": {
+    "detectiveOptions": {
+      "ts": {
+        "skipTypeImports": true
+      },
+      "tsx": {
+        "skipTypeImports": true
+      }
+    }
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}
diff --git a/apps/examples/ui-test-app/public/favicon-16.ico b/apps/examples/ui-test-app/public/favicon-16.ico
new file mode 100644
index 0000000000000000000000000000000000000000..a87e750eedc03686997d1bfd4a1488f2af396ffc
GIT binary patch
literal 4286
zcmeH}!EuBz3`La=IOWVSM@pasN}vPi06KsU;FvBb0Xm=rN+5ooQHEh*lf{gES?vge
zS<wHozKqC+`Ngqtl<!F7Q$)Uun<+_+GjGk@JFwNvz5PiJ@;nckAL93Y9~8qp&+9M@
zYZOI6aF7EG9B~|b#{h3)kK<^^BuTtuXqv{ZK~+`jvMg(wrd~0ScZ{(p3VU9brB@8-
zpzAst6aM6(u4``?wmG10QU}yU+qT{?5Ob>m&cP5;pXh`5;MiijvbV6FtnpudRC_$*
zib1(h;Jgn!M}D?1+@(+S4woyv<}Q6Imn_R3>KpyB=4XyJF;{&)<8rhvM{}+<8KT$h
zwWB)Ue+z)kmES(r*|lPrrs?-vK=-AyXYQU?eX7pEg!#&W^4aQhyD#Z|AEWA%UKk<=
za8!MwclxCd-uoD;&rmr4k7~oU-|e}*at#Lh@hi{V{a^HXWzV`B$NPQqpE@vU3THo?
C1o(ge

literal 0
HcmV?d00001

diff --git a/apps/examples/ui-test-app/public/favicon-32.ico b/apps/examples/ui-test-app/public/favicon-32.ico
new file mode 100644
index 0000000000000000000000000000000000000000..edecb5b07789f3b43a97e86fb595a14c272be600
GIT binary patch
literal 16958
zcmeHM(UF2M5Y2Vq*M0MOpO(N}1$Lk%*nxDQ9cTyIfhA}MmS71SkDKT0>;RWZIDssC
z69SQN?Aw=po58t{>Mze-b<Et?w{xG)xv#2KL$0VA#%s%eJ9R9p>$%Ms%p90G5X^zi
zW)nO&h5Q5m4~K(k3?7e1c{-iS#bRL+huv;h!tVEbnPr(d4B#^jT(F1%_)mL2pXGA7
zG{pnS0pI`(tZ9Sf0J%^Ug&7`b4iE!N`gpxwYq!CFo@2m@KIVB|`;P<8_xt_p+KN6x
z17V0iYFyR_7_*>{$on+b0_*jfL$x-fu8-uv@pydYf2;@O1z76(*u(*>1@M8`0Ed+I
zk$y@J5Ch~wTB`ae^B(g6_x#u^rml~&9%|!x>iW1^t?GRMavx)_d&v{58O;@ae~Q=E
z^sy<1mh`d7e~gVy9}$zjTbu732L@6f+j1xG|IZ%lk~JIkI=1i1h4f`i`iNScwM?w<
zn18ukTD5@wvmc8->UD{l4r8H>{`vG{(MNDnuFH4Utx_Ms#i90(zyPtQp@zknPaI?K
z8IwN7a1wrCe;CrB1=5DphENRTJn2j5`H&b$eS}W>Xd81W)^T4An8vQJ(D_;)x7+Pt
z?-J@m>^#Pl93GOBvA%@P2L?mwW9U2gJ#R>T?Aw=^=gAz890zVRJr6Y$YKZgs-1vLb
zoT-fYU;w?K`Dn*feCK=m=p*<60}nVarC#eJ>OSdT+qVLF&(zQV(noSYe=C@}-}3#t
z^w9zbfJK)+THpZrAhiKC6SyJA+Vqn1Q|P6?h`rQ8EA_M1$J^~zYa#GRA;vyFXnm{!
zs18~ueV#Sdd$c|R14|r0+_XLd14|qL23jAjae(VrYD0?qBKq0Y6N6OuMP0u0H|nE>
qdWb&j9{TvsZ%z9DkKx*K{KtU*{0`1cJwC^Jj<o>}R4&eD6@ee$pw}A!

literal 0
HcmV?d00001

diff --git a/apps/examples/ui-test-app/public/logo192.png b/apps/examples/ui-test-app/public/logo192.png
new file mode 100644
index 0000000000000000000000000000000000000000..c31b513a7e9656d95e1aaec976df335fa4a0cac2
GIT binary patch
literal 2211
zcmb_eeK?bQAD<{CnuENY<h`=fB#hJB!crz~^UOi3RAggCom^$C+E9m7+O!>~ZKY%;
zy`0iYiO5w>nrU*ghm)dGr<<}9cV1>M&rj#Np8ucgdj7b7_xJ7h{e185_4|B(cTr4q
zxRu5C78nf1DuNtF1@A{Q&)hj+rS_$pV=!~~M1+O@lx_0)Lf(NcvR&BIuGt}T`6g#_
z56xLROOSWL#M&eU6E<M|^BlfON^U?8d?o$gTgeqAgbGoa@xf4BVp0RT1G!f@z7tWd
zW*waC)IGnDpX7&Wz2k^U*=mXL_nCtc*_-A@oiYiLwP4)fWDKAAKe>yCMn^ko)~2~-
z$osb6M#jh0v=^dxwcZ~?Z|-<FgyjUA-Q3xf6@Snyd+bB|mkCXO_)V}x=JcNs(pp1U
zja=RI#D4DI)9x{&Wf+{Ce{Ohq_+9ns%BFAy-fM8|FO_Nm=NO_X@t;5M<BCjPFh{p)
z0ez*ONM$5>Cc<L}Yt}|_je(UDXJ>J+yU2;~y9a}s;pgRzT;qsAH}wv`c~5fE;)H|*
z3Zy!Rml;jLzS*wpkE|*{zYZr<PY4`w@>~2Qc!Sn>Oh`MCauspc8$%WNu$A2?-%vpo
z{o)kOVv~*DQY9(3PL}E&jNh#BwFO!7XEg57OQ^x$gKod+1e0B`#(4o%<L60bygA+j
zoE4G#V?hG*QUY;<QzBbJQsD2?AuJMnN=O^SXMn6UsZz{f0`PEmx*ES%?9v%*fs=nY
zk-^q6Up(cx@}x%p$&jd)QP=HLQ)5-bYo-VK$6QlZ2M4qE_cvb9tu>hXrfv6!_Z0QW
zsuuAZZN47otht2-6$xp!PlAa3jYo$mCAx{pmRej5Y9FRZ9|Kmy5#yJ`Bt)}OYhL32
zl28Mw+S}XZ8c+R??)2ISQ0(I+L7m(HDnsI#Rh2r_NR%2GQe{v}rz~|+FXh?*`LS4*
zO8%HH!Zw6?(rf3b!3TbbzA*VHl0ap=r@cfizZ@ohi&WgMM4UW@2K+-GlH$78Hc6R#
zIhu-O_<^{dKhe{n+GQIR*X?lPGIuFAQ>s+(FC$LJP|6u0Z5}m{xIqUyM;Hgmq8s8a
zNX75i>$`YqHc63wSGtc~Fqs#j7k2>s&6xmy3%jjA*gMqv0<}y+e3nxg*E|y7fa9p@
zq_B4nXlQM`K+4UMD(zDvV8L4xyML4=EI43XQ)0-OQk8p8RbB6Y{rb#$y8fpojy}`D
z!C}N;c%AX9@!tBQT7ou^8-Tw?$)fmF7x^@wm4zcmLwUm9SH0JeykxTI)vpi5F5Unv
zv8Nu%yG$0fKYtBj?ZOr5@ui>8>xp}Fhxq;yE3u0lxMo2-rc}AKQ1)~kl_3a)O|fJV
zGz-G6OWx;j<w>;ae8X>b=5OwLH9bDaV*RzJr0dDPa<y#PozXtAj+shdm>Ia~Hgzu?
zaBsBlY~zus+r!3}<f{R~^XFtwjVazQ&@B<hlgkHxfR?z|B3~Tpmxx{FBRhZCVjpv(
zrrkW@GejBwrc&?L#XT88g$-_}7RSWRi)-y(v^^{xjzwnEy1mWXEWDyNHAhp{f4{&U
zCl_?}p;zGSTV#>G@K1@$AxpDU!rs(dumHQE*@He_w8^*i>Z2{d{ka@@R@l6&#6J=i
zd{@zYd3UL7nQOtZN{)a)%<*%<A6k?`cXKt1d~a%fI8=6>Ix$&A`uzwd*|)VT?(M+k
z|H>ZvYW{N9+@5Ll&ZUR&MT_3<wU`=*lpARplsENvaf`*&rvnz7+xqQOM&g(FJOgiD
zxbvarw-0t9`^|07PK=JcsyAe<RC@*7xMe9Wn<21QBT`h?L#M^G;ll<bWsWuY9#6VG
z;}SwUEu_s2f#raFEAxX3CwLiR+qV1}_L~rh5-@v~b)a5gDy$2E1(rDZKpNY|ldfJz
zATs?XPDq`H7Sui?E^QhUygd-|2^|!4JyHMBM>NC|d<jHaiT}36<*{e&ma7QFUZ5<j
zgN<6P*3na327!Zp@;pL;<%__1bx+Vv!;a#zL=a@Py0af^wU$^9j<>~!t)j<o__{y}
zmLo2cf<5^XiR77S*FC?;ohqy)MDdd<<3kl_6@oh>?0q{qUxk}$-ZHwCK#X&v*RCo@
zc^ULH_Eo@}e^I5u5akeA<fBl7@M;^JyroBMAP~Df=(UdJ)1}WVfxjF0^C_AbZJ~`s
zR>cOKaTgk5%~wD?ODcnv+TOVc;@Qne$c*F+Bsx<Iqht?yRzfKN;NgL3cf^dzlb-cs
za_2=^)jX+kB%d<TQP*Hx15pA1Uw-Mp6*uKpB23Wqdh0d!^*QSx3YeGe(P@ZJJb_4^
z5tY>tnLx}0qM{TOT(S|+Ni72qV9>~Gg7i%GV2Qt^I1uy@HUlPW?V~nf8e1HyNVg}s
zW;@w_O9`E6$}V0AQ3QZx(Mo@b14IEVgcN;>F{Byn1oaAR1fUJ=p7bCmKagzqES&t=
zxk#?q1(XVrya7;p(rCmNaFJASpU0{*HZ!)yuKdbeA$E~8{QSqkRnFU4mx8C|_4R96
z9L{T_S;)9oV9hqCnNoA4%6-ZAM?YO0zcT20+l`)O%R@AhvbMHJoQ7|OlV8h;;%2c2
zgz`dT+KyLwnh}j=S}Zt~h<e-l#IPQ~tZ6WboOK^XN}Y#tSukmXX!UGTTGR*5cLg2Q
f|F3IYq&9|b&n-6l8gd%^d|)CrMu+`Q+LiwwHMBTh

literal 0
HcmV?d00001

diff --git a/apps/examples/ui-test-app/public/logo512.png b/apps/examples/ui-test-app/public/logo512.png
new file mode 100644
index 0000000000000000000000000000000000000000..230379bde0d3b5b72773dc45be1019951eb3794c
GIT binary patch
literal 7413
zcmd@(`y-TT+czq0OLn)HHe#x8O*zY<*l6rlZ;fN?Scp`}<WQ6p<I(n&m85k@4jJtZ
z6LP48WR23SgxGN^6(KYZIn9LOd7kfj^#1z&1+QP`x$pZrU)OydZgKnV_bRSZU4;-*
zWbWJTh>$FN%A%Dk;71(ME=6d4HFNh*&Ji->?-GAeZ+KYS_qs?i=9?bB(qkKZH|#-b
zGFxQ#FUwiE?Ax3KtI%cFFFdz8cCy#<u5aUmm7h4-**n{M-6VyQnXrR;&eP-B=4Xe}
ze7<*;L#?Ua@+fD=HiTL?sv-38x*|fSp99+;kI5mVeqRQ~tbUD<Rcs(aIlKM~z)U_i
zXKt6XZCHVFHp<J(*A2IDV&P9FPuy75fojKy36hwYs$(n?3lnm-q6(Rq*Z5RDt**Jb
zd4T@Dg+Z=A%qm8xY3$?2<CWFbQPqnWhE0eal>HF$I~^Xr&GXP9%jmh-*@<4I{TFo*
zGJaH9`Mte^13823z@3uUp_mu_WwhA^@4wDV7-UTw!}O6X+W*filbjn)>=$DZ5g$h}
z=c6EB(oHcoQpfQ0_FkCeX{(`_RY!!RKaJS9LgqFdmT?K2@%nypZ3W7q8zZzv)j`V8
zq?1ADPICo9^vMTIaw`uT>R*Mdd>ENx>`EIWY^xmF-x`)o9JME#8kAAY&(TqNBt45r
zPX<w!SDT0!p9dS)(uk%P-)yMO-j*(=&Ajp+8d5>E*S6gf(;h#592qrcu!O1}XbjMO
zb+Ix-L#t5jjUz&aJ@GhdE^^SI$Z*-p(o1RCBJ#UgBH$8`R=dI^XJ%%6-0aD+X9}ox
zML3WSlkzmdmKI05mLzo_05T3^KsB7rwzRTQkdd|U$@G`<f3PQ~Qml^0DWclvH6Xjj
zf=zrALW_rcnItblq@-sghbBWb>3Dthbeb!e^K?l&mvqV^0#bF5RhPBBG|?PyGjc;Q
z!Q(Twq@5WodSy|S^LZgQR>CKy`yAQ=QOu`jT+A~&F_Lt8R9(G3$JY<V6x(hUF;sdN
z5_5dFA*;1{SxfdX0`+uzQa}<f=`Ixj+oLlNWFrO*4pzz{T~}Lay<tyET{I(9x_J$7
z-BSQmhQtnZP&VG_s1R!saRQ^hMhC8DEP3MCQ8}dhb2F2?XNE8IFkau3LBc{yFs`U=
zb0V&(Zj7v04>#kS{#?ef53A7i&h-@Qc^g-tr`5bwME;A1-8Wjcl4~@~C2zJd(!m7W
zt?&&dXlPPE*Pp)q!pC0@nHbP<59y>5pofD>ZSFV4wD?#eVp8e#I@x6z9WQ`FJ#l~8
zWprVv48mb3m!S&|v~qIKq#Wk2<tc+QzD*`hO@~P8dPN+~t;<%L+!ic3@WwM`bU1vg
z2#b#1Sq3`hLbNp%bbLAc8_rbp9HfZ?5ji<|G9n`4`@<Bmf)i{ZrkgDtuH)pMT8{1%
zNWM7L=7R^aGF?YGRUDfe3MZTDmNYu34JK_6aIpj>axO=IK1qXz-3ZoXI-Ndwveeys
z+PmW${!1FRcuzZkUAU>E#iN@J2+U_};?0{k+TJq@lYMoQQpsrFhY!cL2t*tWZuh-?
zEWTMBhD*=5)JZ#^4wS6pNs_XNj-T>Xbn>UJUAyMmTf_FS(~C|R7#JWIt7wd9&(!ZK
z))?VUx#~6#4=@$ahKH9IY%JD)=5l$0ADq=`6Z~Umg`Ok+_RD!f_^DI(3O4RstWO)Z
z3AX6xGa6ewyB|2mr?wve&kl5{mE8VN{UotMnR_XXbuUR(+rIzdWnACDfaAF<>Tp`W
zxa6fZ@JTSK2OF5<HanJ}w$Skt--AiRq-meEJC0~Jzx7Ne90tV(<1PgP>x_Fzy$`XM
zPRYbT7LkifgHXg1_!~G8)wOxrhc#uysR-#^t)!&XLJaqh|C$SlMyd5rlgG+T$q64J
z=4o+<mtt4EZQs{=K-xw3)03`<yCD(5aMCcm`dLsyC%K**M@f~+@)crPZiKafS}C&v
zD3G6a^RP2slo*vaz=`JuOPuxL(rG+26ER#vr^%5KRwbWL%kd8g*GbCDhX~?z9!P5A
zr<}N#w5n@_OI9XT(08(>?P5-xb3RzgxzrW%UFuG}K5Usg5%#-wDi~^2$26BrIg#MM
zvP|l~$weO|RlYOGBv0iIuc;RAl{$b20}@xSUhP^@QBkPc&sFF5)SUP%qy^k})N>VH
z^MxF%&BMN|R{KIy8WtPaxr5l<_u+De^i*qAg~Pd!f>!a(_;OCE)m`eIOl);F6F5o0
zx(!qm7&wOs$)TaV=OBD#>VE6El1<h&V_h-_u1e(Jl@gOB(?4^RXgkNmKXdG|va%F%
zpT);ki{-O#u<AF7L@awL6mt8|3%}KiZ+s9NSl-e>rD*Toy@{L2h}?-3s2V(?v9Zxd
zdn!^(po8_Dqbx@p90F~<=5<^sFX8(?Gf6FsG1c24<fOJArnH}1;AXLfWPYy`)1DN@
z=epl*XCLH<NJo3pQ37g>RNcJp{S-tN^2j;!hvH$nDW(6r@X*lv1wL0G|2j9cVbzx_
zQyIqjQxw8|O*?6#4%?<q<lS8fo~hElJaJ>2h@l^BngTgW=t}Xhv&jO}8sNYC>2w^)
z)prMvnw2c3`hl3af{J!<cc?UNX|=~KOo)B*F$Xh$2J-HKrkin(2<z-NzDXn~pjWH`
z@dJL394jevqBaV^Gj48f4?v3eSV>A~bac<N38wV{kUBnph>O|KlD0<fhgd2Lqrm^j
zrtmHBNKs;$8*Jp3@V=PLl)5GPqd{MS*AC*z@x^&a@el&0Zg3<TIRi&+{B}<Ys{pDL
zFM72m+`c^!=UR4_aPxG|NfSf9EnAFC{f<Jvaz0y3TMNlU?RF=|cl-m?Vb%0(#(9h9
zB1DPKWnip~W-i%wPL$Xl2t-ZOf#%E$?|cyjsh><RT14KgDhdn|aSPn*3<I#2pOJ`+
z0(Z?&hTToaIRIt-3rP6DPl!FR&L$o-TkfN-VnDgAG{p67@fOWsEMlz0<RI{9PGXYH
z@p~mVDA#a-g0p2ZkvUsW!|qyx3+R+X3ev^B`rw^u@f&0z8XF5d;C+pj7mi_!>S$a#
z#d(d7dXwkx{;z>|jY93|=ygQTSBMNhdD76+(^H|ozP_&g)2C0DA)V;=*U_E}l+oN1
zY4*&?urTAh6TV7Lk85f)I%gM`8m*jiZ~6DXM9pEu;-eR_<ihL(t;BF{Qhw-&96C|r
z^_OaJNC<7aj8o+7r$ec)Wn+dbms`!++uL8JLZ5Z2J8=QO{3b@FQr4>Lh>-txET%B8
zuAw2Fl+W;yvr2;wX`nvQMPC4U(y?YpUN_bQov!CHVsy~yzqyRs-az#6G82m-L%)vE
zzbTfV^DaiE5p-OJXjl;=FcK+Eh6T%%?t_i&;Z-R9sF3y^D!=X(KxwXAUV8*kUS;VZ
z-Ctp2{1v*M0l)7+LU+Ij2Mn!r07z6sA_|b>fw)J6v>XLDw6BiKurl9<Oj_XgT(C@Q
zSvO>lG5J<GH*}n;=jgAK%VX$J)v^``rpb0<ai*mYQY88aT~Bkqxd=MOff|NY$XnSQ
zEvOjmIk~?=0pVFL5g#9~J=@23kVf98wHm7-KYt-#eaipanYD(ol}5w!YLZvTuy7)o
zFx41UOC~f%7pfzAepN(azbTQGMtd#!cRdsh<&ue@IJ;L}CEoIP^z8Aek3kiKBSy=f
z>n?S5PS{*Mne(iaqeP|&5WO9`K6ztv<5SCHM*1)2{hd2Ek@hdk&RJh*DxU;BI+re!
zqnb>Nhe~;QbCK&xy2E{gy^7KPOH4A{9Cvc^{5^gF&wjF%VT^2F8sl%EGt%n~X`G)7
zxu}Sep;7!&r{kH}?3#*!NV5GqFxB-Fbe{S)WcxQ4TY!RG5cu+ACeSP53X2SMN>~Sa
zAA1!sY8~-FckSqC!(55WBWG;$`4<&vOTiGA9~(QinYapVE>QnGuYv^aS>i;SD?A=g
z?s0qrriStk3mNimXv<S$JnWRzUt6O#HC6|W6?Gcpha7e5MI5atsaQ1i#w@sT@Vy5b
z%kAWnvrd<kNZcGZzEr8_Pu~oE_^X2o3muh86G=x7PIWN0Xcadd^72~!;fP#qCuHx5
z1Z-xg+0ZnZ@MY6luX1!6m9dwmUJukUgMlQ>Q@WY=uU<E2HNn|WAt51drgt6wl^?y$
z@#~JL74_%;{C&j#Pb`IXFXP@^qu1z@tr{Aef_kOpZwoG)EsH>1o8a;{w@X9GkvA0~
zh53S#Q&CY_BmV!>{Eph28Ez?54Gs?0!2Ysj&~QjY9SXOyvhK1@GJol=F^lV}G8!&_
z+YdBciaRy;w20HnONN3TwY9Z5Gt`2d3j_s@r{WCsB^}?S=^t`TDIfj#@lJQpqsrws
zMgD&#K<RUN&gHj<({YzOK>As_IIa67m%r);h-;WkI6h7ncP)d&Lw^BK!F1g8mwc7N
zuZ%<n4>OsV9i;7o!*o2i+*ni+2egzaD2mo?=XjS3wo;oQf1!6O$TptN#PZ+SN((~)
z-SR)^&HD=kta^YN_Y-;>Lk{jX0*-Hh<5l2T{vWwap%4@*8Ux2$Ow5!*x%eLxML;>f
z@r#gdM*$_f;fs(RP&^AaQ(Pz%sEDi-U_TC3`mqsD59GwJQ)>`sFnWHLzad?sDez%$
zqIISX#O7OCSSXx5dseRT^QU(^u$Pyf^)^a^9`$t;y4AH8mz2axEXjI4ue1o7E&NcC
z%@y(g`0X&l)sH`d%2wPIz=>Ad=gVeJovKjM6lf*kMInur*^6D7F^~WS^kUhk#cyTz
z{V}AuM;Zz#dTCT$$UozuuP@=V7sBVJ2OH7C$>kd^nAzPm_{Y`UrIkaCqhtPTkKm=m
zu9Eo>ZaRZl^LcQU)d0)Ok;||r7Z&EG22MsrS=j2WFd6tTQO9wNRzL3Q>3DkD-`bvh
z9B+d|59P9R@#w$n8aP_q^aEpB$%L&Qy~7y4bsRq3fA&MF$AlbJTVjG9+$czWq}uY{
zP}GtVh*XaVIqv<A(;Xchwc-8co(UZAJj+n7^|#6v+Uy$koYStT(n?PCt()SKsXiK}
z52a$~VtQ7Hj7cq*@lf!AuUI=|D}AuL7&SFf8(N+6O@6R(3^wj`*6n(~*PhJGpGU=W
zKjx8oIoo!{7;hD|tj{909~E*mDrNUW><oPnlMo!@rwUek=y-aYH--<^k<010C{70{
z3*`AejG_KQti@R55CY?1u>c~xmo|&@R3QH>tVtt%f`etyJ885>F_aw`@|0K5h_a^@
zC`LbB%sUIi*gJD`^K%yS4tO7pheuQ<Dq-&M%yJqg(-Tn}GR3?z)DQ`o0CI75<ytBi
z+l;~>8^5+LdI~}HpM+|J;y>f*1Rd|g;9VwOS*iDm4_{U3JyakA@y0d4Y!Box)w<|x
zkpngVQ6<XD59UXxYOk_9Q0=Ch;@EK*L%IG!S~(1STt6W#d_V<VzX1TyQd(KlaUTW<
zqD{wdD*!zcTj?%yYLW!R`=Iwwx;S?Ftt`p_#Js*$s8u(aFjQAVIp%<P9xPzDRitzV
zIG8|9YlqR*<O%!^svyH1$;5t+4ywItE3LBtN(X`Bxkt;9Gl((-qO7^1RP}wZ&LGsa
z=bsi}fb-$s6mK7sXH+Da*p1q}Ep+VX>$FYa`JI`!JD{0xg&c@O4iqZDy-dlIe0A1E
zC=ESV&`VY(Cnvio-h1*}!oTx42_{rmn4AAWgs~eeIwsg}U%!4`aJj^rzcaYn2oL10
zgWIaLXKJJKwBy;%HRDg7{Pa&kYZ&wy>^Yk^OKqEVcEo^lrf8P<YtHbR(x7T_ak0jB
zwe;wnj&c<1KjvEX2j}L@IwmZyD3M8wi^EwQ4o~`eAC)~EX9V)$TI(E0$YCY`-5zDh
zA?&0!`H-^mMdx?onc_4d1=l8tkZu<l<Wdcn-{_P$MCfgO2%5NN*J&}w=l(k`Kc$B1
z{B&0ct>a`WIt{`AQ-x~t>{Jp*^l~L>#7)?6qEM6#L|XZSZG0vc@C(J$)3SQHi_0&2
zPW6!m!ji?Hsf#VJezmmDT@olBrlVXxcd4is4(6zXyd-G(RerMJZ-)f9mZGye*MZby
zugnmqRcQe<U3-4x>lYM4`yr~8^b$R(RPmA?6?%`{2T}b(0u1mt`E`)+t8@YUwTDnd
z!uuLnA{uNS(0SuDrSTbWs#PsdX(I&!LBR^()dsvwJZ#MH`pI|jvbMBGHMb@nuPHlf
zCV=e%ZX7vKoMNsY4^|NGrnoy=+~uWo8{p6m^*%LL{2|B_=yt?^^*M=^O`Nco*1KFb
zC$oMC>MD_&y!+>$f8I`!{591_5Ycz~`umT-Yu)-h6+Wk~uCDLXr(hJyeBkjrD{U&3
z5B-$l0y6+4&Sz<QUvnDh!N!@S3UT#^@g)u~!YM5R8o^`*u6dNvnLD5qJEmH52ws#*
z4Yh_^2kUHNV4bW}QJXQYIZin)c`fa<=0tA&;JomJiO3+|3e>Rks;;O>(ejcyoxeB@
zouBXz%2d<t(V|2kw47Q9-J=I5{`u#3SZjV+TjHEsw~APXU`%RgN$wb-oU$~22i$kx
zf!BXvH*|f&s0T-R_pDfXVpM6&hb>jN{;gtwJwNUHYVTcN{I*5)c?s)gw?rZtc(bUX
zp|K)|whbAkum?k;az4$x=#^N``LL%A$~T^SNwwwM8CD#jXYuvCEgEee!kx4KKu{M@
zLzY129EZ(Wibm&05C&H|U+7@e;kyvI(}C;}4eLi$Ro&7a5?&i%25|CyH30^Xz@-m;
z81EUvF;{L<Gg~@qi!qJi8N>0Ob<OnIH<4sE80Z4nSX-FI!;*<4RVo5E!QfV3v2q)J
z1{koQy-5A6Z$GN(@P2Cj1-s}&0Ok%&-bZ^2i9z0k&8rXh_%J;l)eGsZF%>BV{?Ku4
zPj^MeQpjNE&ZYMc8|0@0i|)dVl0{SCN6oX{h3-7kJ(-v~0oSYSD7a|cv#1R#Vv+|g
zf(IhO)xwt@X4E}Sp#%tLjkJMkKmAj&YUk$YTXT~8i({Im9$=UqF4JO$MkVwaS^+>N
z=n(aU@_p69l<+YSqMDn4QERUZaw?YrL9R)Sc10N@OAEampj^(n;zq#TE4xmKMGfR;
zalo}K=gV?Q<Nzi<J%P!@-`|NVftNRCQl))(cv!Bsy?XV{JwNW)p=K1<HCq!o8(djc
zrHWWER|p!yrF?j7>8WAwc>C_1B6?UUTid^0U0w0uvsiMptAs{=wZE-IPIq4xk(ihm
zt56d)Z?t}Cs`B%ZtNjDwX5`eG)+%_su*hB<=wZ~ZZ$hP8PEGJ7iZM(qXSpA|WmbxN
zr(@x6<iMM5>Gyh6%8@IA5n<2qc}R7%<G;h$^m8GPyeUphhEkhjTC?2he33noDVBHl
zle0RnxAQY34hIJZ`54!9nGFxk@V!NbBBf(6*0J;~KX-8%*W)%?30We_UKawJ&~;ax
zS;Df7_WZdra%2sPp{!oUW3GD2Y{*ryhb(fT2|jN<q7upl%}G5ZOrN0yIj~9%ImWe-
zp1lj(MM}DH>yTsm=si9F!F#2Zc38C-=EYLzG_L=>p0c=-F1#XhfBAy@<E|L){-w{4
z7hre)C`Iw(rFAI7?aL=Mt`$zb=%uv8-Y&?0yr78e;wNwi{5{BLm8c*iEQ8|Z1J(CJ
z_BvVaL8lsuU+WHP4s<rap|-wXg%UDGD0NOvLv<9t{APn)MnA>qJ>OF%#~faDj|$1f
z#VGVX#19>}Z=f<#4DU5+O)<mMq&?J%^FSs?YpR|9T_O$|Oj;NtliX)E(6q=^H&vkH
z|Bj<>ul%d4I>_W`?-G79Ol@B+WKmuVY*9uTrK6Bx7`4HkGKa$-XH(l_FO`vBMdQ+T
zbkx@|2L-#Za(ohuSjvF0^WpeW4CE4vPou+(U>U>AAgWN%a&&jaH2JkH@t6i;Dw#{f
zZ0i)zgI6CYEth&d89J!l5fmzgBv==X+Njym>qoeA@;9?}khA11#n#FaV#WoY#2knP
z7`R7Z0%pP6-enjVF^hR>v}XIEJ3~-`$T><bLnSwK$8S*xOwbHa)c$+Pp@s&q-M_Fz
zQ4JJnU^6I2$6?~L{j@Mk=~@QjB}3GA48%fuk12=QpWFYKJT)z!qX#XJRV*|}|7HI<
g`~Uw(C?=EsD3|M+-Bttt&P2>T_PdLJKK$$d0hiRcumAu6

literal 0
HcmV?d00001

diff --git a/apps/examples/ui-test-app/public/manifest.json b/apps/examples/ui-test-app/public/manifest.json
new file mode 100644
index 000000000..a931ae928
--- /dev/null
+++ b/apps/examples/ui-test-app/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "Lightspark",
+  "name": "Lightspark App",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/apps/examples/ui-test-app/public/robots.txt b/apps/examples/ui-test-app/public/robots.txt
new file mode 100644
index 000000000..e9e57dc4d
--- /dev/null
+++ b/apps/examples/ui-test-app/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/apps/examples/ui-test-app/src/Root.tsx b/apps/examples/ui-test-app/src/Root.tsx
new file mode 100644
index 000000000..81e22ada9
--- /dev/null
+++ b/apps/examples/ui-test-app/src/Root.tsx
@@ -0,0 +1,79 @@
+import { ThemeProvider } from "@emotion/react";
+import styled from "@emotion/styled";
+import {
+  Button,
+  Checkbox,
+  Modal,
+  TextInput,
+  Toggle,
+} from "@lightsparkdev/ui/components";
+import { Headline } from "@lightsparkdev/ui/components/typography";
+import { GlobalStyles } from "@lightsparkdev/ui/styles/global";
+import { themes } from "@lightsparkdev/ui/styles/themes";
+import { useState } from "react";
+
+export function Root() {
+  const [showModal, setShowModal] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [textInputValue, setTextInputValue] = useState("");
+  const [checkboxValue, setCheckboxValue] = useState(true);
+  const [toggleValue, setToggleValue] = useState(true);
+  return (
+    <ThemeProvider theme={themes.light}>
+      <GlobalStyles />
+      <Aligner>
+        <Headline>UI Test App</Headline>
+        <Checkbox
+          mt={30}
+          checked={checkboxValue}
+          onChange={setCheckboxValue}
+          label="Disable toggle"
+          id="ls-checkbox"
+        />
+        <Toggle
+          mt={30}
+          label="Disable button"
+          disabled={checkboxValue}
+          on={toggleValue}
+          onChange={setToggleValue}
+          id="ls-toggle"
+        />
+        <Button
+          mt={30}
+          text="Click to open modal"
+          onClick={() => setShowModal(true)}
+          disabled={toggleValue}
+        />
+      </Aligner>
+      <Modal
+        title="Modal Title"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+        visible={showModal}
+        onClose={() => setShowModal(false)}
+        submitLoading={submitting}
+        onSubmit={() => {
+          setSubmitting(true);
+          setTimeout(() => {
+            setShowModal(false);
+            setSubmitting(false);
+          }, 1000);
+        }}
+      >
+        <TextInput
+          label="Name"
+          onChange={setTextInputValue}
+          value={textInputValue}
+          icon={{ name: "Logo" }}
+        />
+      </Modal>
+    </ThemeProvider>
+  );
+}
+
+const Aligner = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
diff --git a/apps/examples/ui-test-app/src/index.tsx b/apps/examples/ui-test-app/src/index.tsx
new file mode 100644
index 000000000..eff3ab165
--- /dev/null
+++ b/apps/examples/ui-test-app/src/index.tsx
@@ -0,0 +1,18 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { Root } from "./Root";
+
+function init() {
+  const root = ReactDOM.createRoot(
+    document.getElementById("root") as HTMLElement,
+  );
+
+  root.render(
+    <React.StrictMode>
+      <Root />
+    </React.StrictMode>,
+  );
+}
+
+init();
diff --git a/apps/examples/ui-test-app/src/tests/Banner.test.tsx b/apps/examples/ui-test-app/src/tests/Banner.test.tsx
new file mode 100644
index 000000000..425a9a934
--- /dev/null
+++ b/apps/examples/ui-test-app/src/tests/Banner.test.tsx
@@ -0,0 +1,60 @@
+import { ThemeProvider } from "@emotion/react";
+import { Banner } from "@lightsparkdev/ui/components";
+import { themes } from "@lightsparkdev/ui/styles/themes";
+import { render as tlRender } from "@testing-library/react";
+import type { ReactElement, ReactNode } from "react";
+import { BrowserRouter } from "react-router-dom";
+import { TestAppRoutes } from "../types";
+
+function Providers({ children }: { children: ReactNode }) {
+  return <ThemeProvider theme={themes.dark}>{children}</ThemeProvider>;
+}
+
+function render(renderElement: ReactElement) {
+  return tlRender(renderElement, {
+    wrapper: Providers,
+  });
+}
+
+describe("Banner", () => {
+  test("should properly infer argument types and raise errors for invalid values", () => {
+    render(
+      <BrowserRouter>
+        <Banner
+          content={[
+            "Hello",
+            /* @ts-expect-error `/exasdmple` is not a valid TestAppRoute */
+            { text: "World", to: "/exasdmple" },
+            {
+              text: "!",
+              typography: {
+                type: "Body",
+                props: {
+                  children: "Hello",
+                  /* @ts-expect-error `cosdlor` is not a valid prop for Body component */
+                  cosdlor: "white",
+                },
+              },
+            },
+            {
+              text: "!",
+              to: TestAppRoutes.PageOne,
+              typography: {
+                type: "Body",
+                props: {
+                  children: "Hello",
+                  color: "white",
+                },
+              },
+            },
+            { text: "sdkfjn", externalLink: "https://example.com" },
+          ]}
+          color="blue43"
+          stepDuration={5}
+          offsetTop={0}
+          image={{ src: "https://example.com/image.jpg" }}
+        />
+      </BrowserRouter>,
+    );
+  });
+});
diff --git a/apps/examples/ui-test-app/src/tests/CodeInput.test.tsx b/apps/examples/ui-test-app/src/tests/CodeInput.test.tsx
new file mode 100644
index 000000000..3fe609da0
--- /dev/null
+++ b/apps/examples/ui-test-app/src/tests/CodeInput.test.tsx
@@ -0,0 +1,154 @@
+import { ThemeProvider } from "@emotion/react";
+import { jest } from "@jest/globals";
+import { CodeInput } from "@lightsparkdev/ui/components/CodeInput/CodeInput";
+import { themes } from "@lightsparkdev/ui/styles/themes";
+import {
+  fireEvent,
+  screen,
+  render as tlRender,
+  waitFor,
+} from "@testing-library/react";
+import { type ReactElement, type ReactNode } from "react";
+
+function Providers({ children }: { children: ReactNode }) {
+  return <ThemeProvider theme={themes.dark}>{children}</ThemeProvider>;
+}
+
+function render(renderElement: ReactElement) {
+  return tlRender(renderElement, {
+    wrapper: Providers,
+  });
+}
+
+describe("CodeInput", () => {
+  beforeEach(() => {
+    const mockClipboardReadWithoutNumbers = jest.fn(() =>
+      Promise.resolve("sdkjfnsd"),
+    );
+    Object.assign(navigator, {
+      clipboard: {
+        readText: mockClipboardReadWithoutNumbers,
+      },
+    });
+  });
+
+  it("renders the correct number of input fields", () => {
+    render(<CodeInput codeLength={8} />);
+    const inputFields = screen.getAllByRole("spinbutton");
+    expect(inputFields).toHaveLength(8);
+  });
+
+  it("prevents non-numeric characters from being entered", () => {
+    render(<CodeInput codeLength={8} />);
+    const inputField = screen.getAllByRole("spinbutton")[0];
+    fireEvent.keyDown(inputField, { key: "A" });
+    expect(inputField).toHaveValue(null);
+  });
+
+  it("allows numeric characters to be entered", () => {
+    render(<CodeInput codeLength={8} />);
+    const inputField = screen.getAllByRole("spinbutton")[0];
+    fireEvent.keyDown(inputField, { key: "1" });
+    expect(inputField).toHaveValue(1);
+  });
+
+  it('handles the "Backspace" key correctly', () => {
+    render(<CodeInput codeLength={8} />);
+    const inputFields = screen.getAllByRole("spinbutton");
+    const firstInput = inputFields[0];
+    const secondInput = inputFields[1];
+    fireEvent.keyDown(firstInput, { key: "1" });
+    expect(secondInput).toHaveFocus();
+
+    // deleting from the empty second input should move the focus back to the
+    // first
+    fireEvent.keyDown(inputFields[1], { key: "Backspace" });
+    expect(firstInput).toHaveFocus();
+
+    // deleting with a value should remove the value
+    fireEvent.keyDown(firstInput, { key: "Backspace" });
+    expect(firstInput).toHaveValue(null);
+
+    // test deleting past the first input
+    fireEvent.keyDown(firstInput, { key: "Backspace" });
+    expect(firstInput).toHaveFocus();
+  });
+
+  it('handles the "Delete" key correctly', () => {
+    render(<CodeInput codeLength={8} />);
+    const inputFields = screen.getAllByRole("spinbutton");
+    const firstInput = inputFields[0];
+    const secondInput = inputFields[1];
+    fireEvent.keyDown(firstInput, { key: "1" });
+    expect(secondInput).toHaveFocus();
+    fireEvent.keyDown(secondInput, { key: "ArrowLeft" });
+    expect(firstInput).toHaveFocus();
+    fireEvent.keyDown(firstInput, { key: "Delete" });
+    expect(firstInput).toHaveValue(null);
+    expect(inputFields[1]).toHaveFocus();
+  });
+
+  it('handles the "Arrow" keys correctly', () => {
+    render(<CodeInput codeLength={4} />);
+    const inputFields = screen.getAllByRole("spinbutton");
+    fireEvent.keyDown(inputFields[0], { key: "ArrowRight" });
+    expect(inputFields[1]).toHaveFocus();
+    fireEvent.keyDown(inputFields[1], { key: "ArrowRight" });
+    expect(inputFields[2]).toHaveFocus();
+    fireEvent.keyDown(inputFields[2], { key: "ArrowRight" });
+    expect(inputFields[3]).toHaveFocus();
+    fireEvent.keyDown(inputFields[3], { key: "ArrowLeft" });
+    expect(inputFields[2]).toHaveFocus();
+    fireEvent.keyDown(inputFields[2], { key: "ArrowLeft" });
+    expect(inputFields[1]).toHaveFocus();
+    fireEvent.keyDown(inputFields[1], { key: "ArrowLeft" });
+    expect(inputFields[0]).toHaveFocus();
+    fireEvent.keyDown(inputFields[0], { key: "ArrowLeft" });
+    expect(inputFields[0]).toHaveFocus();
+  });
+
+  it('handles the "Escape" key correctly', () => {
+    render(<CodeInput codeLength={8} />);
+    const inputFields = screen.getAllByRole("spinbutton");
+    fireEvent.keyDown(inputFields[0], { key: "1" });
+    expect(inputFields[1]).toHaveFocus();
+    fireEvent.keyDown(inputFields[1], { key: "Escape" });
+    expect(inputFields[1]).not.toHaveFocus();
+  });
+
+  it('handles the "Backspace" with meta keys correctly', () => {
+    render(<CodeInput codeLength={8} />);
+    const inputFields = screen.getAllByRole("spinbutton");
+    fireEvent.keyDown(inputFields[0], { key: "1" });
+    fireEvent.keyDown(inputFields[1], { key: "2" });
+    fireEvent.keyDown(inputFields[2], { key: "3" });
+    fireEvent.keyDown(inputFields[3], { key: "Backspace", metaKey: true });
+    expect(inputFields[0]).toHaveValue(null);
+    expect(inputFields[1]).toHaveValue(null);
+    expect(inputFields[2]).toHaveValue(null);
+    expect(inputFields[3]).toHaveValue(null);
+    expect(inputFields[0]).toHaveFocus();
+  });
+
+  it("handles pasting data correctly", async () => {
+    render(<CodeInput codeLength={8} />);
+
+    const inputFields = screen.getAllByRole("spinbutton");
+    fireEvent.paste(inputFields[0], {
+      clipboardData: { getData: () => "sdkjfnsd" },
+    });
+    expect(inputFields[0]).toHaveValue(null);
+    expect(inputFields[1]).toHaveValue(null);
+    expect(inputFields[2]).toHaveValue(null);
+
+    fireEvent.paste(inputFields[0], {
+      clipboardData: { getData: () => "234" },
+    });
+    await waitFor(() => expect(inputFields[0]).toHaveValue(2));
+    expect(inputFields[0]).toHaveValue(2);
+    expect(inputFields[1]).toHaveValue(3);
+    expect(inputFields[2]).toHaveValue(4);
+    expect(inputFields[3]).toHaveValue(null);
+    expect(inputFields[2]).toHaveFocus();
+  });
+});
diff --git a/apps/examples/ui-test-app/src/tests/CommaNumberInput.test.tsx b/apps/examples/ui-test-app/src/tests/CommaNumberInput.test.tsx
new file mode 100644
index 000000000..59b366758
--- /dev/null
+++ b/apps/examples/ui-test-app/src/tests/CommaNumberInput.test.tsx
@@ -0,0 +1,213 @@
+import { ThemeProvider } from "@emotion/react";
+import { CommaNumberInput } from "@lightsparkdev/ui/components/CommaNumberInput";
+import { themes } from "@lightsparkdev/ui/styles/themes";
+import { screen, render as tlRender } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ReactElement, ReactNode } from "react";
+
+function Providers({ children }: { children: ReactNode }) {
+  return <ThemeProvider theme={themes.dark}>{children}</ThemeProvider>;
+}
+
+function render(renderElement: ReactElement) {
+  return tlRender(renderElement, {
+    wrapper: Providers,
+  });
+}
+
+describe("CommaNumberInput", () => {
+  const defaultOnChange = () => {};
+  test("should not add commas to numbers less than 1000", () => {
+    render(<CommaNumberInput value="123" onChange={defaultOnChange} />);
+    const el = screen.getByPlaceholderText("Enter a number");
+    expect(el).toHaveValue("123");
+  });
+  test("should add commas", () => {
+    render(<CommaNumberInput value="12354" onChange={defaultOnChange} />);
+    const el = screen.getByPlaceholderText("Enter a number");
+    expect(el).toHaveValue("12,354");
+  });
+  test("should add multiple commas for large values", () => {
+    render(<CommaNumberInput value="123456789" onChange={defaultOnChange} />);
+    const el = screen.getByPlaceholderText("Enter a number");
+    expect(el).toHaveValue("123,456,789");
+  });
+  test("should return input onChange without commas", async () => {
+    let value = "";
+    function onChange(newValue: string) {
+      value = newValue;
+    }
+    const { rerender } = render(
+      <CommaNumberInput value="123456" onChange={onChange} />,
+    );
+    const el = screen.getByPlaceholderText("Enter a number");
+    expect(el).toHaveValue("123,456");
+    await userEvent.type(el, "7");
+    expect(value).toBe("1234567");
+    rerender(<CommaNumberInput value={value} onChange={onChange} />);
+    expect(el).toHaveValue("1,234,567");
+  });
+  test("should have expected cursor position when adding values to end", async () => {
+    const { rerender } = render(
+      <CommaNumberInput value="123456" onChange={defaultOnChange} />,
+    );
+    const el = screen.getByPlaceholderText<HTMLInputElement>("Enter a number");
+    expect(el).toHaveValue("123,456");
+    await userEvent.type(el, "7");
+    rerender(<CommaNumberInput value="1234567" onChange={defaultOnChange} />);
+    expect(el).toHaveValue("1,234,567");
+    expect(el.selectionStart).toBe(9);
+  });
+  test("should have expected cursor position when adding values to beginning", async () => {
+    let value = "";
+    function onChange(newValue: string) {
+      value = newValue;
+    }
+    const { rerender } = render(
+      <CommaNumberInput value="123456" onChange={onChange} />,
+    );
+    const el = screen.getByPlaceholderText<HTMLInputElement>("Enter a number");
+    expect(el).toHaveValue("123,456");
+    el.setSelectionRange(0, 0);
+    await userEvent.type(el, "7", {
+      initialSelectionStart: 0,
+      initialSelectionEnd: 0,
+    });
+    expect(value).toBe("7123456");
+    rerender(<CommaNumberInput value="7123456" onChange={onChange} />);
+    expect(el).toHaveValue("7,123,456");
+    expect(el.selectionStart).toBe(2);
+  });
+  test("should have expected cursor position when adding values to middle", async () => {
+    let value = "";
+    function onChange(newValue: string) {
+      value = newValue;
+    }
+    const { rerender } = render(
+      <CommaNumberInput value="123456" onChange={onChange} />,
+    );
+    const el = screen.getByPlaceholderText<HTMLInputElement>("Enter a number");
+    expect(el).toHaveValue("123,456");
+    el.setSelectionRange(2, 2);
+    await userEvent.type(el, "7", {
+      initialSelectionStart: 2,
+      initialSelectionEnd: 2,
+    });
+    expect(value).toBe("1273456");
+    rerender(<CommaNumberInput value="1273456" onChange={onChange} />);
+    expect(el).toHaveValue("1,273,456");
+    expect(el.selectionStart).toBe(4);
+  });
+  test("backspace should delete proper character when not comma", async () => {
+    let value = "";
+    function onChange(newValue: string) {
+      value = newValue;
+    }
+    const { rerender } = render(
+      <CommaNumberInput value="123456" onChange={onChange} />,
+    );
+    const el = screen.getByPlaceholderText<HTMLInputElement>("Enter a number");
+    expect(el).toHaveValue("123,456");
+    el.setSelectionRange(2, 2);
+    await userEvent.type(el, "{backspace}", {
+      initialSelectionStart: 2,
+      initialSelectionEnd: 2,
+    });
+    expect(value).toBe("13456");
+    rerender(<CommaNumberInput value="13456" onChange={onChange} />);
+    expect(el).toHaveValue("13,456");
+    expect(el.selectionStart).toBe(1);
+  });
+  test("backspace should delete proper character when comma", async () => {
+    let value = "";
+    function onChange(newValue: string) {
+      value = newValue;
+    }
+    const { rerender } = render(
+      <CommaNumberInput value="123456" onChange={onChange} />,
+    );
+    const el = screen.getByPlaceholderText<HTMLInputElement>("Enter a number");
+    expect(el).toHaveValue("123,456");
+    el.setSelectionRange(4, 4);
+    await userEvent.type(el, "{backspace}", {
+      initialSelectionStart: 4,
+      initialSelectionEnd: 4,
+    });
+    expect(value).toBe("12456");
+    rerender(<CommaNumberInput value="12456" onChange={onChange} />);
+    expect(el).toHaveValue("12,456");
+    expect(el.selectionStart).toBe(2);
+  });
+  test("delete key should delete proper character when not comma", async () => {
+    let value = "";
+    function onChange(newValue: string) {
+      value = newValue;
+    }
+    const { rerender } = render(
+      <CommaNumberInput value="123456" onChange={onChange} />,
+    );
+    const el = screen.getByPlaceholderText<HTMLInputElement>("Enter a number");
+    expect(el).toHaveValue("123,456");
+    el.setSelectionRange(2, 2);
+    await userEvent.type(el, "{delete}", {
+      initialSelectionStart: 2,
+      initialSelectionEnd: 2,
+    });
+    expect(value).toBe("12456");
+    rerender(<CommaNumberInput value="12456" onChange={onChange} />);
+    expect(el).toHaveValue("12,456");
+    expect(el.selectionStart).toBe(2);
+  });
+  test("delete key should delete proper character when comma", async () => {
+    let value = "";
+    function onChange(newValue: string) {
+      value = newValue;
+    }
+    const { rerender } = render(
+      <CommaNumberInput value="123456" onChange={onChange} />,
+    );
+    const el = screen.getByPlaceholderText<HTMLInputElement>("Enter a number");
+    expect(el).toHaveValue("123,456");
+    el.setSelectionRange(3, 3);
+    await userEvent.type(el, "{delete}", {
+      initialSelectionStart: 3,
+      initialSelectionEnd: 3,
+    });
+    expect(value).toBe("12356");
+    rerender(<CommaNumberInput value="12356" onChange={onChange} />);
+    expect(el).toHaveValue("12,356");
+    expect(el.selectionStart).toBe(4);
+  });
+  test("deleting range of characters including comma", async () => {
+    let value = "";
+    function onChange(newValue: string) {
+      value = newValue;
+    }
+    const { rerender } = render(
+      <CommaNumberInput value="123456789" onChange={onChange} />,
+    );
+    const el = screen.getByPlaceholderText<HTMLInputElement>("Enter a number");
+    expect(el).toHaveValue("123,456,789");
+    el.setSelectionRange(1, 5);
+    await userEvent.type(el, "{delete}", {
+      initialSelectionStart: 1,
+      initialSelectionEnd: 5,
+    });
+    expect(value).toBe("156789");
+    rerender(<CommaNumberInput value="156789" onChange={onChange} />);
+    expect(el).toHaveValue("156,789");
+    expect(el.selectionStart).toBe(1);
+  });
+  test("paste should trigger on change", async () => {
+    let value = "";
+    function onChange(newValue: string) {
+      value = newValue;
+    }
+    render(<CommaNumberInput value="" onChange={onChange} />);
+    const el = screen.getByPlaceholderText<HTMLInputElement>("Enter a number");
+    expect(el).toHaveValue("");
+    await userEvent.click(el);
+    await userEvent.paste("123456789");
+    expect(value).toBe("123456789");
+  });
+});
diff --git a/apps/examples/ui-test-app/src/tests/TextIconAligner.test.tsx b/apps/examples/ui-test-app/src/tests/TextIconAligner.test.tsx
new file mode 100644
index 000000000..3a48df547
--- /dev/null
+++ b/apps/examples/ui-test-app/src/tests/TextIconAligner.test.tsx
@@ -0,0 +1,43 @@
+import { ThemeProvider } from "@emotion/react";
+import { TextIconAligner } from "@lightsparkdev/ui/components";
+import { themes } from "@lightsparkdev/ui/styles/themes";
+import { render as tlRender } from "@testing-library/react";
+import type { ReactElement, ReactNode } from "react";
+import { BrowserRouter } from "react-router-dom";
+import { TestAppRoutes } from "../types";
+
+function Providers({ children }: { children: ReactNode }) {
+  return <ThemeProvider theme={themes.dark}>{children}</ThemeProvider>;
+}
+
+function render(renderElement: ReactElement) {
+  return tlRender(renderElement, {
+    wrapper: Providers,
+  });
+}
+
+describe("TextIconAligner", () => {
+  test("should properly infer argument types and raise errors for invalid values", () => {
+    render(
+      <BrowserRouter>
+        <TextIconAligner
+          content={[
+            "Hello",
+            /* @ts-expect-error `/something` is not a valid TestAppRoute */
+            { to: "/something", text: "World" },
+            { text: "Page one", to: TestAppRoutes.PageOne },
+            { text: "Page one", to: TestAppRoutes.PageOne },
+            { text: "Page one", to: TestAppRoutes.PageOne },
+            { text: "sdkfjn", externalLink: "https://example.com" },
+          ]}
+          typography={{
+            type: "Display",
+            size: "Small",
+            color: "blue43",
+          }}
+          rightIcon={{ name: "RightArrow" }}
+        />
+      </BrowserRouter>,
+    );
+  });
+});
diff --git a/apps/examples/ui-test-app/src/tests/Toasts.test.tsx b/apps/examples/ui-test-app/src/tests/Toasts.test.tsx
new file mode 100644
index 000000000..f5a0c2970
--- /dev/null
+++ b/apps/examples/ui-test-app/src/tests/Toasts.test.tsx
@@ -0,0 +1,62 @@
+import { ThemeProvider } from "@emotion/react";
+import { Toasts } from "@lightsparkdev/ui/components";
+import { themes } from "@lightsparkdev/ui/styles/themes";
+import { render as tlRender } from "@testing-library/react";
+import type { ReactElement, ReactNode } from "react";
+import { BrowserRouter } from "react-router-dom";
+import { TestAppRoutes } from "../types";
+
+function Providers({ children }: { children: ReactNode }) {
+  return <ThemeProvider theme={themes.dark}>{children}</ThemeProvider>;
+}
+
+function render(renderElement: ReactElement) {
+  return tlRender(renderElement, {
+    wrapper: Providers,
+  });
+}
+
+describe("Toasts", () => {
+  test("should properly infer argument types and raise errors for invalid values", () => {
+    render(
+      <BrowserRouter>
+        <Toasts
+          queue={[
+            {
+              text: [
+                {
+                  text: "Test toast",
+                  to: TestAppRoutes.PageOne,
+                  typography: {
+                    type: "Body",
+                    props: {
+                      children: "Hello",
+                      /* @ts-expect-error `cosdlor` is not a valid prop for Body component */
+                      cosdlor: "white",
+                    },
+                  },
+                },
+                {
+                  text: "Test toast",
+                  /* @ts-expect-error `/examplsdfe` is not a valid TestAppRoute */
+                  to: "/examplsdfe",
+                  typography: {
+                    type: "Body",
+                    props: {
+                      children: "Hello",
+                      color: "white",
+                    },
+                  },
+                },
+              ],
+              duration: 5000,
+              id: "test-toast",
+              expires: Date.now() + 5000,
+            },
+          ]}
+          onHide={() => {}}
+        />
+      </BrowserRouter>,
+    );
+  });
+});
diff --git a/apps/examples/ui-test-app/src/tests/renderTypography.test.tsx b/apps/examples/ui-test-app/src/tests/renderTypography.test.tsx
new file mode 100644
index 000000000..0962b07e4
--- /dev/null
+++ b/apps/examples/ui-test-app/src/tests/renderTypography.test.tsx
@@ -0,0 +1,9 @@
+import { renderTypography } from "@lightsparkdev/ui/components/typography/renderTypography";
+
+describe("TextIconAligner", () => {
+  test("should properly infer argument types and raise errors for invalid values", () => {
+    /* @ts-expect-error `hey` is not a valid prop for Display component */
+    renderTypography("Display", { hey: "hey" });
+    renderTypography("Display", { content: "hey" });
+  });
+});
diff --git a/apps/examples/ui-test-app/src/tests/toReactNodes.test.tsx b/apps/examples/ui-test-app/src/tests/toReactNodes.test.tsx
new file mode 100644
index 000000000..0e5e61480
--- /dev/null
+++ b/apps/examples/ui-test-app/src/tests/toReactNodes.test.tsx
@@ -0,0 +1,328 @@
+import {
+  setReactNodesTypography,
+  toReactNodes,
+} from "@lightsparkdev/ui/utils/toReactNodes";
+import { render } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { TestAppRoutes } from "../types";
+
+describe("toReactNodes", () => {
+  it("renders the expected output for a single string", () => {
+    const result = toReactNodes("test1\ntest2");
+    const { asFragment } = render(result);
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        test1
+        <br />
+        test2
+      </DocumentFragment>
+    `);
+  });
+
+  it("renders the expected output for a single link", () => {
+    const result = toReactNodes({
+      text: "Test",
+      to: TestAppRoutes.PageOne,
+    });
+    const { asFragment } = render(<BrowserRouter>{result}</BrowserRouter>);
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <a
+          class="css-0"
+          href="/test-app-page-one"
+        >
+          Test
+        </a>
+      </DocumentFragment>
+    `);
+  });
+
+  it("renders the expected output for a single string array with line breaks", () => {
+    const result = toReactNodes(["test1\ntest2\ntest3"]);
+    const { asFragment } = render(result);
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        test1
+        <br />
+        test2
+        <br />
+        test3
+      </DocumentFragment>
+    `);
+  });
+
+  it("renders the expected output for a single string array with consecutive line breaks", () => {
+    const result = toReactNodes(["test1\n\ntest2\ntest3"]);
+    const { asFragment } = render(result);
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        test1
+        <br />
+        <br />
+        test2
+        <br />
+        test3
+      </DocumentFragment>
+    `);
+  });
+
+  it("renders the expected output for multiple string array", () => {
+    const result = toReactNodes(["test1", "test2", "test3"]);
+    const { asFragment } = render(result);
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        test1test2test3
+      </DocumentFragment>
+    `);
+  });
+
+  it("renders the expected output for multiple string array and line breaks", () => {
+    const result = toReactNodes(["test1\n", "test2\n", "test3"]);
+    const { asFragment } = render(result);
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        test1
+        <br />
+        test2
+        <br />
+        test3
+      </DocumentFragment>
+    `);
+  });
+
+  it("renders the expected output for multiple string array, line breaks, and links", () => {
+    const result = toReactNodes([
+      "test1\n",
+      "test2\n",
+      { text: "Test", to: TestAppRoutes.PageOne },
+      "\n",
+      "test3",
+    ]);
+    const { asFragment } = render(<BrowserRouter>{result}</BrowserRouter>);
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        test1
+        <br />
+        test2
+        <br />
+        <a
+          class="css-0"
+          href="/test-app-page-one"
+        >
+          Test
+        </a>
+        <br />
+        test3
+      </DocumentFragment>
+    `);
+  });
+
+  it("renders the expected output for multiple links", () => {
+    const result = toReactNodes([
+      "test1\n",
+      "test2\n",
+      { text: "Test", to: TestAppRoutes.PageOne },
+      { text: "Test 2", to: TestAppRoutes.PageTwo },
+      "\n",
+      "test3",
+    ]);
+    const { asFragment } = render(<BrowserRouter>{result}</BrowserRouter>);
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        test1
+        <br />
+        test2
+        <br />
+        <a
+          class="css-0"
+          href="/test-app-page-one"
+        >
+          Test
+        </a>
+        <a
+          class="css-0"
+          href="/test-app-page-two"
+        >
+          Test 2
+        </a>
+        <br />
+        test3
+      </DocumentFragment>
+    `);
+  });
+
+  it("should have type errors when arguments do not match inferred types", () => {
+    toReactNodes([
+      {
+        /* @ts-expect-error `/testsf` is not a valid TestAppRoutes */
+        to: "/testsf",
+        text: "Hello",
+        /* @ts-expect-error `contnt` is not a valid prop for the Display component */
+        typography: { type: "Display", props: { contnt: "Something" } },
+      },
+    ]);
+  });
+
+  it("should correctly add typography to nontypographic nodes", () => {
+    const stringNode = "Some string that should have typography applied";
+    const linkNode = {
+      text: "Some link node that should have typography applied",
+      to: TestAppRoutes.PageOne,
+    };
+    const iconNode = { icon: "LogoBolt" as const };
+    const externalLinkNode = {
+      text: "Some external link node that should have typography applied",
+      externalLink: "https://www.google.com",
+    };
+    const nextLinkNode = {
+      text: "Some next link node that should have typography applied",
+      nextHref: "https://www.google.com",
+    };
+    const textNode = {
+      text: "Some text node that should have typography applied",
+    };
+
+    const nodes = setReactNodesTypography(
+      [
+        stringNode,
+        linkNode,
+        iconNode,
+        externalLinkNode,
+        nextLinkNode,
+        textNode,
+      ],
+      {
+        link: { type: "Body" },
+        externalLink: { type: "Body" },
+        text: { type: "Body", props: { size: "Large" } },
+        nextLink: { type: "Body" },
+      },
+    );
+
+    expect(nodes).toEqual([
+      {
+        text: stringNode,
+        typography: { type: "Body", props: { size: "Large" } },
+      },
+      {
+        ...linkNode,
+        typography: { type: "Body" },
+      },
+      iconNode,
+      {
+        ...externalLinkNode,
+        typography: { type: "Body" },
+      },
+      {
+        ...nextLinkNode,
+        typography: { type: "Body" },
+      },
+      {
+        ...textNode,
+        typography: { type: "Body", props: { size: "Large" } },
+      },
+    ]);
+  });
+
+  it("should correctly change the typography of typographic nodes", () => {
+    const stringNode = "Some string that should have typography applied";
+    const linkNode = {
+      text: "Some link node that should have typography applied",
+      to: TestAppRoutes.PageOne,
+      typography: { type: "Display", props: { size: "Medium" } },
+    };
+    const iconNode = { icon: "LogoBolt" as const };
+    const externalLinkNode = {
+      text: "Some external link node that should have typography applied",
+      externalLink: "https://www.google.com",
+      typography: { type: "Title", props: { size: "Small" } },
+    };
+    const nextLinkNode = {
+      text: "Some next link node that should have typography applied",
+      nextHref: "https://www.google.com",
+      typography: { type: "Display", props: { size: "Large" } },
+    };
+    const textNode = {
+      text: "Some text node that should have typography applied",
+      typography: { type: "Label", props: { size: "Small" } },
+    };
+
+    const nodes = setReactNodesTypography(
+      [
+        stringNode,
+        linkNode,
+        iconNode,
+        externalLinkNode,
+        nextLinkNode,
+        textNode,
+      ],
+      {
+        link: { type: "Body" },
+        externalLink: { type: "Body" },
+        text: { type: "Body", props: { size: "Large" } },
+        nextLink: { type: "Body" },
+      },
+    );
+
+    expect(nodes).toEqual([
+      {
+        text: stringNode,
+        typography: { type: "Body", props: { size: "Large" } },
+      },
+      {
+        ...linkNode,
+        typography: { type: "Body" },
+      },
+      iconNode,
+      {
+        ...externalLinkNode,
+        typography: { type: "Body" },
+      },
+      {
+        ...nextLinkNode,
+        typography: { type: "Body" },
+      },
+      {
+        ...textNode,
+        typography: { type: "Body", props: { size: "Large" } },
+      },
+    ]);
+  });
+
+  it("should not change the typography of typographic nodes when no override is provided for the node type", () => {
+    const stringNode = "Some string that should have typography applied";
+    const linkNode = {
+      text: "Some link node that should have typography applied",
+      to: TestAppRoutes.PageOne,
+      typography: { type: "Display", props: { size: "Medium" } },
+    };
+    const textNode = {
+      text: "Some text node that should have typography applied",
+      typography: { type: "Label", props: { size: "Small" } },
+    };
+
+    const nodes = setReactNodesTypography([stringNode, linkNode, textNode], {
+      link: { type: "Body", props: { size: "Large" } },
+    });
+
+    expect(nodes).toEqual([
+      stringNode,
+      {
+        ...linkNode,
+        typography: { type: "Body", props: { size: "Large" } },
+      },
+      {
+        ...textNode,
+        typography: { type: "Label", props: { size: "Small" } },
+      },
+    ]);
+  });
+});
diff --git a/apps/examples/ui-test-app/src/types.ts b/apps/examples/ui-test-app/src/types.ts
new file mode 100644
index 000000000..19c4b9eb9
--- /dev/null
+++ b/apps/examples/ui-test-app/src/types.ts
@@ -0,0 +1,12 @@
+export enum TestAppRoutes {
+  PageOne = "/test-app-page-one",
+  PageTwo = "/test-app-page-two",
+}
+
+type TestAppRoutesType = typeof TestAppRoutes;
+
+declare global {
+  interface NewRoutes extends TestAppRoutesType {}
+}
+
+export {};
diff --git a/packages/ui/tsconfig-test.json b/apps/examples/ui-test-app/tsconfig-test.json
similarity index 85%
rename from packages/ui/tsconfig-test.json
rename to apps/examples/ui-test-app/tsconfig-test.json
index 17be58e06..6c8030e6c 100644
--- a/packages/ui/tsconfig-test.json
+++ b/apps/examples/ui-test-app/tsconfig-test.json
@@ -2,6 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "resolveJsonModule": true,
+    "moduleResolution": "bundler",
     "types": ["jest", "@testing-library/jest-dom", "node"]
   },
   "include": ["src/**/*"],
diff --git a/apps/examples/ui-test-app/tsconfig.json b/apps/examples/ui-test-app/tsconfig.json
new file mode 100644
index 000000000..31cf6e5f6
--- /dev/null
+++ b/apps/examples/ui-test-app/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../../packages/tsconfig/react-app.json",
+  "compilerOptions": {
+    "baseUrl": "src",
+    "types": ["node", "chrome", "vite/client"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["**/tests", "dist", "node_modules"]
+}
diff --git a/apps/examples/ui-test-app/vite.config.ts b/apps/examples/ui-test-app/vite.config.ts
new file mode 100644
index 000000000..050edb5e6
--- /dev/null
+++ b/apps/examples/ui-test-app/vite.config.ts
@@ -0,0 +1,8 @@
+import { buildConfig } from "@lightsparkdev/vite";
+import settings from "../settings.json";
+
+export default buildConfig({
+  port: process.env.SITE_PORT || settings.uiTestApp.port,
+  dirname: __dirname,
+  proxyTarget: process.env.VITE_PROXY_TARGET || undefined,
+});
diff --git a/apps/examples/uma-vasp-cli/package.json b/apps/examples/uma-vasp-cli/package.json
index 03c06d1df..e425bed3d 100644
--- a/apps/examples/uma-vasp-cli/package.json
+++ b/apps/examples/uma-vasp-cli/package.json
@@ -45,7 +45,7 @@
     "@inquirer/prompts": "^1.1.3",
     "@lightsparkdev/core": "1.0.22",
     "@lightsparkdev/lightspark-sdk": "1.5.12",
-    "@uma-sdk/core": "^0.7.3",
+    "@uma-sdk/core": "^1.0.2",
     "chalk": "^5.3.0",
     "commander": "^11.0.0"
   },
diff --git a/apps/examples/uma-vasp-cli/src/index.ts b/apps/examples/uma-vasp-cli/src/index.ts
index 219e84258..e6136a6fc 100644
--- a/apps/examples/uma-vasp-cli/src/index.ts
+++ b/apps/examples/uma-vasp-cli/src/index.ts
@@ -2,7 +2,6 @@
 // Copyright ©, 2023-present, Lightspark Group, Inc. - All Rights Reserved
 
 import { confirm, input, password, select } from "@inquirer/prompts";
-import { type CurrencyAmount } from "@lightsparkdev/lightspark-sdk";
 import { type Currency } from "@uma-sdk/core";
 import chalk from "chalk";
 import type { OptionValues } from "commander";
@@ -14,11 +13,18 @@ const sendPayment = async (options: OptionValues) => {
     chalk.yellowBright.bold("\n⚡️ Welcome to the UMA VASP CLI! ⚡️\n"),
   );
 
-  let { endpoint, receiverUma, sendingUser, sendingPassword } = options as {
+  let {
+    endpoint,
+    receiverUma,
+    sendingUser,
+    sendingPassword,
+    lockSendingAmount,
+  } = options as {
     endpoint: string;
     receiverUma: string;
     sendingUser: string | undefined;
     sendingPassword: string | undefined;
+    lockSendingAmount: boolean | undefined;
   };
   if (!endpoint) {
     endpoint = process.env.UMA_VASP_ENDPOINT || "";
@@ -61,7 +67,7 @@ const sendPayment = async (options: OptionValues) => {
       "\n",
     );
     currencyChoice = await select({
-      message: "What currency do you want to send?",
+      message: "What currency do you want the receiver to receive?",
       choices: lnurlpResponse.receiverCurrencies.map((c) => {
         return { value: c, name: `${c.name} (${c.code})` };
       }),
@@ -70,8 +76,18 @@ const sendPayment = async (options: OptionValues) => {
     console.log(`\n${receiverUma} can only receive ${currencyChoice.code}.\n`);
   }
 
+  if (lockSendingAmount === undefined) {
+    lockSendingAmount = !(await confirm({
+      message:
+        "Do you want to lock the amount the receiver receives (y) or the amount you're sending?",
+      default: true,
+    }));
+  }
+
+  const amountCurrencyCode = lockSendingAmount ? "sats" : currencyChoice.code;
+
   const amountStr = await input({
-    message: `How much ${currencyChoice.code} do you want to send?`,
+    message: `How much ${amountCurrencyCode} do you want to send?`,
     validate: (value) => {
       try {
         return !Number.isNaN(parseFloat(value));
@@ -80,48 +96,72 @@ const sendPayment = async (options: OptionValues) => {
       }
     },
   });
-  const amount = Math.round(
-    parseFloat(amountStr) * Math.pow(10, currencyChoice.decimals),
-  );
-  if (amount < currencyChoice.minSendable) {
-    throw new Error(
-      `Amount must be greater than ${currencyChoice.minSendable} ${currencyChoice.code}`,
+  const amount = lockSendingAmount
+    ? Math.round(parseFloat(amountStr) * 1000)
+    : Math.round(parseFloat(amountStr) * Math.pow(10, currencyChoice.decimals));
+
+  if (lockSendingAmount) {
+    if (amount < lnurlpResponse.minSendableSats) {
+      throw new Error(
+        `Amount must be greater than ${lnurlpResponse.minSendableSats} sats`,
+      );
+    }
+
+    if (amount > lnurlpResponse.maxSendableSats) {
+      throw new Error(
+        `Amount must be less than ${lnurlpResponse.maxSendableSats} sats`,
+      );
+    }
+
+    console.log(`\nSending ${amount} sats to ${receiverUma}...`);
+
+    console.log(
+      `The estimated ${currencyChoice.code} amount is ${
+        (amount * 1000) / currencyChoice.multiplier
+      }`,
     );
-  }
-  if (amount > currencyChoice.maxSendable) {
-    throw new Error(
-      `Amount must be less than ${currencyChoice.maxSendable} ${currencyChoice.code}`,
+  } else {
+    if (amount < currencyChoice.minSendable) {
+      throw new Error(
+        `Amount must be greater than ${currencyChoice.minSendable} ${currencyChoice.code}`,
+      );
+    }
+    if (amount > currencyChoice.maxSendable) {
+      throw new Error(
+        `Amount must be less than ${currencyChoice.maxSendable} ${currencyChoice.code}`,
+      );
+    }
+
+    console.log(
+      `\nSending ${amount / Math.pow(10, currencyChoice.decimals)} ${
+        currencyChoice.code
+      } to ${receiverUma}...`,
+    );
+    console.log(
+      `The estimated SAT amount is ${
+        (amount * currencyChoice.multiplier) / 1000
+      }`,
     );
   }
 
-  console.log(
-    `\nSending ${amount / Math.pow(10, currencyChoice.decimals)} ${
-      currencyChoice.code
-    } to ${receiverUma}...`,
-  );
-  console.log(
-    `The estimated SAT amount is ${
-      (amount * currencyChoice.multiplier) / 1000
-    }`,
-  );
-
   const payreqResponse = await fetchPayreq(
     endpoint,
     lnurlpResponse.callbackUuid,
     amount,
     currencyChoice.code,
+    lockSendingAmount,
     sendingUser,
     sendingPassword,
   );
 
   console.log(`\nPayreq details:`);
-  console.log(`- Amount: ${JSON.stringify(payreqResponse.amount, null, 2)}`);
   console.log(
-    `- Exchange rate: ${payreqResponse.conversionRate} mSAT per ${currencyChoice.code}`,
+    `- Amount: ${payreqResponse.amountReceivingCurrency} ${currencyChoice.code} (${payreqResponse.amountMsats} mSAT)`,
   );
   console.log(
-    `- Exchange fees: ${payreqResponse.exchangeFeesMillisatoshi} mSAT\n`,
+    `- Exchange rate: ${payreqResponse.conversionRate} mSAT per ${currencyChoice.code}`,
   );
+  console.log(`- Exchange fees: ${payreqResponse.exchangeFeesMsats} mSAT\n`);
   const shouldPay = await confirm({
     message: "Do you want to complete payment? (y/n)",
     default: true,
@@ -189,11 +229,12 @@ const fetchPayreq = async (
   callbackUuid: string,
   amount: number,
   currency: string,
+  isAmountInMsats: boolean,
   sendingUsername: string | undefined,
   sendingUserPassword: string | undefined,
 ) => {
   const response = await fetch(
-    `${endpoint}/api/umapayreq/${callbackUuid}?amount=${amount}&currencyCode=${currency}`,
+    `${endpoint}/api/umapayreq/${callbackUuid}?amount=${amount}&receivingCurrencyCode=${currency}&isAmountInMsats=${isAmountInMsats}`,
     getAuthOptions(sendingUsername, sendingUserPassword),
   );
   if (!response.ok) {
@@ -203,10 +244,11 @@ const fetchPayreq = async (
     senderCurrencies: Currency[];
     callbackUuid: string;
     encodedInvoice: string;
-    amount: CurrencyAmount;
+    amountMsats: number;
+    amountReceivingCurrency: number;
     conversionRate: number;
-    exchangeFeesMillisatoshi: number;
-    currencyCode: string;
+    exchangeFeesMsats: number;
+    receivingCurrencyCode: string;
   };
 
   return payreq;
@@ -281,6 +323,11 @@ const getAuthOptions = (
       "The password of the sending user if the sending vasp requires one.",
       undefined,
     )
+    .option(
+      "-l, --lock-sending-amount",
+      "Lock the amount you're sending instead of the amount the receiver receives.",
+      undefined,
+    )
     .action((options: OptionValues) => {
       sendPayment(options).catch((err) =>
         console.error("Oh no, something went wrong.\n", err),
diff --git a/apps/examples/uma-vasp/README.md b/apps/examples/uma-vasp/README.md
index 19736f13b..867661940 100644
--- a/apps/examples/uma-vasp/README.md
+++ b/apps/examples/uma-vasp/README.md
@@ -12,9 +12,7 @@ in your account's [API config page](https://app.lightspark.com/api-config).
 1. Find your node credentials (`LIGHTSPARK_UMA_NODE_ID`, `LIGHTSPARK_UMA_OSK_NODE_SIGNING_KEY_PASSWORD`)
 in your account's [API config page](https://app.lightspark.com/api-config).
 
-1. Create a secp256k1 keypair to use as your encryption keys (`LIGHTSPARK_UMA_ENCRYPTION_PUBKEY`, `LIGHTSPARK_UMA_ENCRYPTION_PRIVKEY`)
-and signing keys (`LIGHTSPARK_UMA_SIGNING_PUBKEY`, `LIGHTSPARK_UMA_SIGNING_PRIVKEY`). For information on generating these,
-see [our docs](https://docs.uma.me/uma-standard/keys-authentication-encryption).
+1. Create a secp256k1 private key to use as your encryption private key (`LIGHTSPARK_UMA_ENCRYPTION_PRIVKEY`) and use this private key to wrap the corresponding encryption public key in an X.509 Certificate (`LIGHTSPARK_UMA_ENCRYPTION_CERT_CHAIN`). Similarly for signing, create a secp256k1 private key to use as your signing private key (`LIGHTSPARK_UMA_SIGNING_PRIVKEY`) and use this private key to wrap the corresponding signing public key in an X.509 Certificate (`LIGHTSPARK_UMA_SIGNING_CERT_CHAIN`). You may choose to use the same keypair for encryption and signing. For information on generating these, see [our docs](https://docs.uma.me/uma-standard/keys-authentication-encryption).
 
 To run locally on your machine, from the `uma-vasp` directory, run:
 
@@ -38,8 +36,10 @@ LIGHTSPARK_UMA_NODE_ID=<your node ID> \
 LIGHTSPARK_UMA_OSK_NODE_SIGNING_KEY_PASSWORD=<your node ID password> \
 LIGHTSPARK_UMA_RECEIVER_USER=bob \
 LIGHTSPARK_UMA_RECEIVER_USER_PASSWORD=pa55w0rd \
+LIGHTSPARK_UMA_ENCRYPTION_CERT_CHAIN=<pem-encoded x509 certificate chain containing encryption pubkey> \
 LIGHTSPARK_UMA_ENCRYPTION_PUBKEY=<encryption public key hex> \
 LIGHTSPARK_UMA_ENCRYPTION_PRIVKEY=<encryption private key hex> \
+LIGHTSPARK_UMA_SIGNING_CERT_CHAIN=<pem-encoded x509 certificate chain containing signing pubkey> \
 LIGHTSPARK_UMA_SIGNING_PUBKEY=<signing public key hex> \
 LIGHTSPARK_UMA_SIGNING_PRIVKEY=<signing private key hex> \
 yarn start
@@ -61,8 +61,10 @@ LIGHTSPARK_API_TOKEN_CLIENT_ID=<your lightspark API token client ID from https:/
 LIGHTSPARK_API_TOKEN_CLIENT_SECRET=<your lightspark API token client secret from https://app.lightspark.com/api-config>
 LIGHTSPARK_UMA_NODE_ID=<your lightspark node ID. ex: LightsparkNodeWithOSKLND:018b24d0-1c45-f96b-0000-1ed0328b72cc>
 LIGHTSPARK_UMA_RECEIVER_USER=<receiver UMA>
+LIGHTSPARK_UMA_ENCRYPTION_CERT_CHAIN=<pem-encoded x509 certificate chain containing encryption pubkey>
 LIGHTSPARK_UMA_ENCRYPTION_PUBKEY=<hex-encoded encryption pubkey>
 LIGHTSPARK_UMA_ENCRYPTION_PRIVKEY=<hex-encoded encryption privkey>
+LIGHTSPARK_UMA_SIGNING_CERT_CHAIN=<pem-encoded x509 certificate chain containing signing pubkey>
 LIGHTSPARK_UMA_SIGNING_PUBKEY=<hex-encoded signing pubkey>
 LIGHTSPARK_UMA_SIGNING_PRIVKEY=<hex-encoded signing privkey>
 
diff --git a/apps/examples/uma-vasp/package.json b/apps/examples/uma-vasp/package.json
index b26b6a687..14cc6ac38 100644
--- a/apps/examples/uma-vasp/package.json
+++ b/apps/examples/uma-vasp/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "start": "./start.sh",
     "build": "yarn tsc",
-    "start:docker": "node dist/src/startServer.js",
+    "start:docker": "node dist/startServer.js",
     "test:start": "./test.sh start",
     "test": "./test.sh test"
   },
@@ -14,7 +14,7 @@
   "dependencies": {
     "@lightsparkdev/core": "1.0.22",
     "@lightsparkdev/lightspark-sdk": "1.5.12",
-    "@uma-sdk/core": "^0.7.3",
+    "@uma-sdk/core": "^1.0.2",
     "express": "^4.18.2",
     "uuid": "^9.0.0",
     "zod": "^3.22.4"
diff --git a/apps/examples/uma-vasp/server.test.ts b/apps/examples/uma-vasp/server.test.ts
index 5ec40c831..10864d0f3 100644
--- a/apps/examples/uma-vasp/server.test.ts
+++ b/apps/examples/uma-vasp/server.test.ts
@@ -4,7 +4,7 @@ import { createUmaServer } from "./src/server.js";
 import UmaConfig from "./src/UmaConfig.js";
 import { AccountTokenAuthProvider, LightsparkClient } from "@lightsparkdev/lightspark-sdk";
 import DemoUserService from "./src/demo/DemoUserService.js";
-import { InMemoryPublicKeyCache } from "@uma-sdk/core";
+import { InMemoryNonceValidator, InMemoryPublicKeyCache, getPubKeyResponse } from "@uma-sdk/core";
 import InMemorySendingVaspRequestCache from "./src/demo/InMemorySendingVaspRequestCache.js";
 import DemoInternalLedgerService from "./src/demo/DemoInternalLedgerService.js";
 import DemoComplianceService from "./src/demo/DemoComplianceService.js";
@@ -16,8 +16,10 @@ declare global {
       LIGHTSPARK_API_TOKEN_CLIENT_SECRET: string;
       LIGHTSPARK_UMA_NODE_ID: string;
       LIGHTSPARK_UMA_RECEIVER_USER: string;
+      LIGHTSPARK_UMA_ENCRYPTION_CERT_CHAIN: string;
       LIGHTSPARK_UMA_ENCRYPTION_PUBKEY: string;
       LIGHTSPARK_UMA_ENCRYPTION_PRIVKEY: string;
+      LIGHTSPARK_UMA_SIGNING_CERT_CHAIN: string;
       LIGHTSPARK_UMA_SIGNING_PUBKEY: string;
       LIGHTSPARK_UMA_SIGNING_PRIVKEY: string;
       LIGHTSPARK_EXAMPLE_BASE_URL: string;
@@ -40,6 +42,7 @@ const app = createUmaServer(
   userService,
   new DemoInternalLedgerService(config, userService, lightsparkClient),
   new DemoComplianceService(config, lightsparkClient),
+  new InMemoryNonceValidator(Date.now() - 1000 * 60 * 60 * 6),
 );
 
 describe("Test server routes", () => {
@@ -59,9 +62,9 @@ describe("Test server routes", () => {
     const response = await request.get("/.well-known/lnurlpubkey").send();
 
     expect(response.status).toBe(200);
-    expect(response.body).toEqual({
-      signingPubKey: process.env.LIGHTSPARK_UMA_SIGNING_PUBKEY,
-      encryptionPubKey: process.env.LIGHTSPARK_UMA_ENCRYPTION_PUBKEY,
-    });
+    expect(response.text).toEqual(getPubKeyResponse({
+      signingCertChainPem: process.env.LIGHTSPARK_UMA_SIGNING_CERT_CHAIN,
+      encryptionCertChainPem: process.env.LIGHTSPARK_UMA_ENCRYPTION_CERT_CHAIN,
+    }).toJsonString());
   });
 });
diff --git a/apps/examples/uma-vasp/src/ReceivingVasp.ts b/apps/examples/uma-vasp/src/ReceivingVasp.ts
index c25fb4d57..800f65862 100644
--- a/apps/examples/uma-vasp/src/ReceivingVasp.ts
+++ b/apps/examples/uma-vasp/src/ReceivingVasp.ts
@@ -7,11 +7,12 @@ import {
 import * as uma from "@uma-sdk/core";
 import { Express } from "express";
 import ComplianceService from "./ComplianceService.js";
-import { errorMessage } from "./errors.js";
+import { SATS_CURRENCY } from "./currencies.js";
 import {
   fullUrlForRequest,
   isDomainLocalhost,
   sendResponse,
+  hostNameWithPort,
 } from "./networking/expressAdapters.js";
 import { HttpResponse } from "./networking/HttpResponse.js";
 import UmaConfig from "./UmaConfig.js";
@@ -25,6 +26,7 @@ export default class ReceivingVasp {
     private readonly pubKeyCache: uma.PublicKeyCache,
     private readonly userService: UserService,
     private readonly complianceService: ComplianceService,
+    private readonly nonceCache: uma.NonceValidator,
   ) {}
 
   registerRoutes(app: Express): void {
@@ -63,8 +65,28 @@ export default class ReceivingVasp {
       return { httpStatus: 404, data: "User not found." };
     }
 
-    if (uma.isUmaLnurlpQuery(requestUrl)) {
-      return this.handleUmaLnurlp(requestUrl, user);
+    let lnurlpRequest: uma.LnurlpRequest;
+    try {
+      lnurlpRequest = uma.parseLnurlpRequest(requestUrl);
+    } catch (e: any) {
+      if (e instanceof uma.UnsupportedVersionError) {
+        // For unsupported versions, return a 412 "Precondition Failed" as per the spec.
+        return {
+          httpStatus: 412,
+          data: {
+            supportedMajorVersions: e.supportedMajorVersions,
+            unsupportedVersion: e.unsupportedVersion,
+          },
+        };
+      }
+      return {
+        httpStatus: 500,
+        data: new Error("Invalid lnurlp Query", { cause: e }),
+      };
+    }
+
+    if (uma.isLnurlpRequestForUma(lnurlpRequest)) {
+      return this.handleUmaLnurlp(requestUrl, lnurlpRequest, user);
     }
 
     // Fall back to normal LNURLp.
@@ -84,31 +106,18 @@ export default class ReceivingVasp {
 
   private async handleUmaLnurlp(
     requestUrl: URL,
+    umaQuery: uma.LnurlpRequest,
     user: User,
   ): Promise<HttpResponse> {
-    let umaQuery: uma.LnurlpRequest;
-    try {
-      umaQuery = uma.parseLnurlpRequest(requestUrl);
-    } catch (e: any) {
-      if (e instanceof uma.UnsupportedVersionError) {
-        // For unsupported versions, return a 412 "Precondition Failed" as per the spec.
-        return {
-          httpStatus: 412,
-          data: {
-            supportedMajorVersions: e.supportedMajorVersions,
-            unsupportedVersion: e.unsupportedVersion,
-          },
-        };
-      }
+    if (!uma.isLnurlpRequestForUma(umaQuery)) {
       return {
-        httpStatus: 500,
-        data: new Error("Invalid UMA Query", { cause: e }),
+        httpStatus: 400,
+        data: "Invalid UMA query.",
       };
     }
-
     if (
       !this.complianceService.shouldAcceptTransactionFromVasp(
-        umaQuery.vaspDomain,
+        umaQuery.vaspDomain!,
         umaQuery.receiverAddress,
       )
     ) {
@@ -122,7 +131,7 @@ export default class ReceivingVasp {
     try {
       pubKeys = await uma.fetchPublicKeyForVasp({
         cache: this.pubKeyCache,
-        vaspDomain: umaQuery.vaspDomain,
+        vaspDomain: umaQuery.vaspDomain!,
       });
     } catch (e) {
       console.error(e);
@@ -133,10 +142,7 @@ export default class ReceivingVasp {
     }
 
     try {
-      const isSignatureValid = await uma.verifyUmaLnurlpQuerySignature(
-        umaQuery,
-        hexToBytes(pubKeys.signingPubKey),
-      );
+      const isSignatureValid = await uma.verifyUmaLnurlpQuerySignature(umaQuery, pubKeys, this.nonceCache);
       if (!isSignatureValid) {
         return {
           httpStatus: 500,
@@ -161,7 +167,7 @@ export default class ReceivingVasp {
     }
 
     const [minSendableSats, maxSendableSats] =
-      await this.userService.getReceivableSatsRangeForUser(user.id);
+      await this.userService.getReceivableMsatsRangeForUser(user.id);
 
     try {
       const response = await uma.getLnurlpResponse({
@@ -181,7 +187,7 @@ export default class ReceivingVasp {
         },
         currencyOptions: currencyPrefs,
       });
-      return { httpStatus: 200, data: response };
+      return { httpStatus: 200, data: response.toJsonSchemaObject() };
     } catch (e) {
       console.error(e);
       return {
@@ -203,7 +209,8 @@ export default class ReceivingVasp {
 
     let payreq: uma.PayRequest;
     try {
-      payreq = uma.parsePayRequest(requestBody);
+      console.log(`Parsing payreq: ${requestBody}`);
+      payreq = uma.PayRequest.fromJson(requestBody);
     } catch (e) {
       console.error("Failed to parse pay req", e);
       return {
@@ -211,14 +218,21 @@ export default class ReceivingVasp {
         data: new Error("Invalid UMA pay request.", { cause: e }),
       };
     }
-    console.log(`Parsed payreq: ${JSON.stringify(payreq, null, 2)}`);
+    console.log(`Parsed payreq: ${JSON.stringify(payreq.toJsonSchemaObject(), null, 2)}`);
+    if (!payreq.isUma()) {
+      return { httpStatus: 400, data: "Invalid UMA payreq." };
+    }
+
+    if (!payreq.payerData!.identifier) {
+      return { httpStatus: 400, data: "Payer identifier is missing" };
+    }
 
     let pubKeys: uma.PubKeyResponse;
     try {
       pubKeys = await uma.fetchPublicKeyForVasp({
         cache: this.pubKeyCache,
         vaspDomain: uma.getVaspDomainFromUmaAddress(
-          payreq.payerData.identifier,
+          payreq.payerData!.identifier,
         ),
       });
     } catch (e) {
@@ -232,10 +246,7 @@ export default class ReceivingVasp {
     console.log(`Fetched pubkeys: ${JSON.stringify(pubKeys, null, 2)}`);
 
     try {
-      const isSignatureValid = await uma.verifyPayReqSignature(
-        payreq,
-        hexToBytes(pubKeys.signingPubKey),
-      );
+      const isSignatureValid = await uma.verifyPayReqSignature(payreq, pubKeys, this.nonceCache);
       if (!isSignatureValid) {
         return { httpStatus: 400, data: "Invalid payreq signature." };
       }
@@ -248,7 +259,14 @@ export default class ReceivingVasp {
     }
 
     console.log(`Verified payreq signature.`);
+    return this.handlePayReq(payreq, user, requestUrl);
+  }
 
+  private async handlePayReq(
+    payreq: uma.PayRequest,
+    user: User,
+    requestUrl: URL,
+  ): Promise<HttpResponse> {
     const currencyPrefs = await this.userService.getCurrencyPreferencesForUser(
       user.id,
     );
@@ -259,42 +277,69 @@ export default class ReceivingVasp {
         data: "Failed to fetch currency preferences.",
       };
     }
-    const currency = currencyPrefs.find((c) => c.code === payreq.currency);
-    if (!currency) {
-      console.error(`Invalid currency: ${payreq.currency}`);
+    let receivingCurrency = currencyPrefs.find(
+      (c) => c.code === payreq.receivingCurrencyCode,
+    );
+    if (payreq.receivingCurrencyCode && !receivingCurrency) {
+      console.error(`Invalid currency: ${payreq.receivingCurrencyCode}`);
       return {
         httpStatus: 400,
-        data: `Invalid currency. This user does not accept ${payreq.currency}.`,
+        data: `Invalid currency. This user does not accept ${payreq.receivingCurrencyCode}.`,
       };
+    } else if (!payreq.receivingCurrencyCode) {
+      receivingCurrency = SATS_CURRENCY;
+    } else if (!receivingCurrency) {
+      // This can't actually happen, but TypeScript doesn't know that.
+      return { httpStatus: 400, data: "Invalid currency." };
     }
 
-    if (
-      payreq.amount < currency.minSendable ||
-      payreq.amount > currency.maxSendable
-    ) {
+    const isSendingAmountMsats = !payreq.sendingAmountCurrencyCode;
+    const [minSendableSats, maxSendableSats] =
+      await this.userService.getReceivableMsatsRangeForUser(user.id);
+    const isCurrencyAmountInBounds = isSendingAmountMsats
+      ? payreq.amount >= minSendableSats && payreq.amount / 1000 <= maxSendableSats
+      : payreq.amount >= receivingCurrency.minSendable &&
+        payreq.amount <= receivingCurrency.maxSendable;
+    if (!isCurrencyAmountInBounds) {
       return {
         httpStatus: 400,
-        data: `Invalid amount. This user only accepts between ${currency.minSendable} and ${currency.maxSendable} ${currency.code}.`,
+        data:
+          `Invalid amount. This user only accepts between ${receivingCurrency.minSendable} ` +
+          `and ${receivingCurrency.maxSendable} ${receivingCurrency.code}.`,
       };
     }
 
     // TODO(Jeremy): Move this to the currency service.
-    const receiverFeesMillisats = 0;
-    const amountMsats =
-      payreq.amount * currency.multiplier + receiverFeesMillisats;
-    const shouldTransact = await this.complianceService.preScreenTransaction(
-      payreq.payerData.identifier,
-      user.id,
-      amountMsats,
-      payreq.payerData.compliance.nodePubKey,
-      payreq.payerData.compliance.utxos ?? [],
-    );
-    if (!shouldTransact) {
+    if (
+      payreq.sendingAmountCurrencyCode &&
+      payreq.sendingAmountCurrencyCode !== "SAT" &&
+      payreq.sendingAmountCurrencyCode !== receivingCurrency.code
+    ) {
       return {
-        httpStatus: 403,
-        data: "This transaction is too risky.",
+        httpStatus: 400,
+        data: `Invalid sending currency. Cannot convert from ${payreq.sendingAmountCurrencyCode}.`,
       };
     }
+    const receiverFeesMillisats = 0;
+    const amountMsats = isSendingAmountMsats
+      ? payreq.amount
+      : payreq.amount * receivingCurrency.multiplier + receiverFeesMillisats;
+    const isUmaRequest = payreq.isUma();
+    if (isUmaRequest) {
+      const shouldTransact = await this.complianceService.preScreenTransaction(
+        payreq.payerData.identifier!,
+        user.id,
+        amountMsats,
+        payreq.payerData.compliance?.nodePubKey ?? undefined,
+        payreq.payerData.compliance?.utxos ?? [],
+      );
+      if (!shouldTransact) {
+        return {
+          httpStatus: 403,
+          data: "This transaction is too risky.",
+        };
+      }
+    }
 
     // 3 minutes invoice expiration to avoid big fluctuations in exchange rate.
     const expirationTimeSec = 60 * 3;
@@ -314,22 +359,36 @@ export default class ReceivingVasp {
         return invoice?.data.encodedPaymentRequest;
       },
     };
+    const payeeData = this.getPayeeData(
+      payreq.requestedPayeeData,
+      user,
+      requestUrl,
+    );
 
     let response: uma.PayReqResponse;
     try {
       response = await uma.getPayReqResponse({
-        conversionRate: currency.multiplier,
-        currencyCode: currency.code,
-        currencyDecimals: currency.decimals,
+        request: payreq,
+        conversionRate: receivingCurrency.multiplier,
+        receivingCurrencyCode: receivingCurrency.code,
+        receivingCurrencyDecimals: receivingCurrency.decimals,
         invoiceCreator: umaInvoiceCreator,
         metadata: this.getEncodedMetadata(requestUrl, user),
-        query: payreq,
         receiverChannelUtxos: [],
         receiverFeesMillisats: receiverFeesMillisats,
-        receiverNodePubKey: await this.getReceiverNodePubKey(),
-        utxoCallback: this.getUtxoCallback(requestUrl, txId),
+        receiverNodePubKey: isUmaRequest
+          ? await this.getReceiverNodePubKey()
+          : undefined,
+        utxoCallback: isUmaRequest
+          ? this.getUtxoCallback(requestUrl, txId)
+          : undefined,
+        payeeData: payeeData,
+        receivingVaspPrivateKey: isUmaRequest
+          ? this.config.umaSigningPrivKey()
+          : undefined,
+        payeeIdentifier: `$${user.umaUserName}@${hostNameWithPort(requestUrl)}`,
       });
-      return { httpStatus: 200, data: response };
+      return { httpStatus: 200, data: response.toJsonSchemaObject() };
     } catch (e) {
       console.log(`Failed to generate UMA response: ${e}`);
       console.error(e);
@@ -352,31 +411,17 @@ export default class ReceivingVasp {
       return { httpStatus: 404, data: "User not found." };
     }
 
-    const amountMsats = parseInt(
-      requestUrl.searchParams.get("amount") as string,
-    );
-    if (!amountMsats) {
+    let request: uma.PayRequest;
+    try {
+      request = uma.PayRequest.fromUrlSearchParams(requestUrl.searchParams);
+    } catch (e) {
       return {
         httpStatus: 400,
-        data: errorMessage("Missing amount query parameter."),
+        data: "Invalid pay request: " + e,
       };
     }
 
-    const invoice = await this.lightsparkClient.createLnurlInvoice(
-      this.config.nodeID,
-      amountMsats,
-      this.getEncodedMetadata(requestUrl, user),
-    );
-    if (!invoice) {
-      return {
-        httpStatus: 500,
-        data: errorMessage("Invoice creation failed."),
-      };
-    }
-    return {
-      httpStatus: 200,
-      data: { pr: invoice.data.encodedPaymentRequest, routes: [] },
-    };
+    return this.handlePayReq(request, user, requestUrl);
   }
 
   private getEncodedMetadata(requestUrl: URL, user: User): string {
@@ -417,4 +462,18 @@ export default class ReceivingVasp {
     const path = `/api/uma/utxoCallback?txId=${txId}`;
     return `${requestUrl.protocol}//${requestUrl.hostname}${path}`;
   }
+
+  private getPayeeData(
+    options: uma.CounterPartyDataOptions | undefined,
+    user: User,
+    requestUrl: URL,
+  ) {
+    const name = options?.name?.mandatory ? user.umaUserName : undefined;
+    const email = options?.email?.mandatory ? user.emailAddress : undefined;
+    return {
+      name: name,
+      email: email,
+      identifier: `${user.umaUserName}@${requestUrl.hostname}`,
+    };
+  }
 }
diff --git a/apps/examples/uma-vasp/src/SendingVasp.ts b/apps/examples/uma-vasp/src/SendingVasp.ts
index 360213221..18c06a1d0 100644
--- a/apps/examples/uma-vasp/src/SendingVasp.ts
+++ b/apps/examples/uma-vasp/src/SendingVasp.ts
@@ -1,4 +1,4 @@
-import { convertCurrencyAmount, hexToBytes } from "@lightsparkdev/core";
+import { convertCurrencyAmount } from "@lightsparkdev/core";
 import {
   CurrencyUnit,
   InvoiceData,
@@ -19,12 +19,13 @@ import SendingVaspRequestCache, {
 import UmaConfig from "./UmaConfig.js";
 import { User } from "./User.js";
 import UserService from "./UserService.js";
+import { SATS_CURRENCY } from "./currencies.js";
 import { HttpResponse } from "./networking/HttpResponse.js";
 import {
   fullUrlForRequest,
+  hostNameWithPort,
   sendResponse,
 } from "./networking/expressAdapters.js";
-import { NonUmaLnurlpResponseSchema } from "./rawLnurl.js";
 
 export default class SendingVasp {
   constructor(
@@ -35,6 +36,7 @@ export default class SendingVasp {
     private readonly userService: UserService,
     private readonly ledgerService: InternalLedgerService,
     private readonly complianceService: ComplianceService,
+    private readonly nonceCache: uma.NonceValidator,
   ) {}
 
   registerRoutes(app: Express) {
@@ -124,12 +126,20 @@ export default class SendingVasp {
       };
     }
 
-    const lnurlpRequestUrl = await uma.getSignedLnurlpRequestUrl({
-      isSubjectToTravelRule: true,
-      receiverAddress: receiverUmaAddress,
-      signingPrivateKey: this.config.umaSigningPrivKey(),
-      senderVaspDomain: this.getSendingVaspDomain(requestUrl),
-    });
+    let lnurlpRequestUrl: URL;
+    if (receiverUmaAddress.startsWith("$")) {
+      lnurlpRequestUrl = await uma.getSignedLnurlpRequestUrl({
+        isSubjectToTravelRule: true,
+        receiverAddress: receiverUmaAddress,
+        signingPrivateKey: this.config.umaSigningPrivKey(),
+        senderVaspDomain: this.getSendingVaspDomain(requestUrl),
+      });
+    } else {
+      const nonUmaLnurlpRequest: uma.LnurlpRequest = {
+        receiverAddress: receiverUmaAddress,
+      };
+      lnurlpRequestUrl = uma.encodeToUrl(nonUmaLnurlpRequest);
+    }
 
     console.log(`Making lnurlp request: ${lnurlpRequestUrl}`);
 
@@ -167,19 +177,19 @@ export default class SendingVasp {
     let lnurlpResponse: uma.LnurlpResponse;
     const responseJson = await response.text();
     try {
-      lnurlpResponse = uma.parseLnurlpResponse(responseJson);
+      lnurlpResponse = uma.LnurlpResponse.fromJson(responseJson);
     } catch (e) {
-      console.error("Couldn't parse as uma. Trying raw lnurl.", e);
-      const response = await this.handleAsNonUmaLnurlpResponse(
-        responseJson,
+      console.error("Error parsing lnurlp response.", e, responseJson);
+      return { httpStatus: 424, data: `Error parsing Lnurlp response. ${e}` };
+    }
+
+    if (!lnurlpResponse.isUma()) {
+      console.log("Couldn't parse as uma. Trying raw lnurl.");
+      return await this.handleAsNonUmaLnurlpResponse(
+        lnurlpResponse,
         receiverId,
         receivingVaspDomain,
       );
-      if (!response) {
-        console.error("Error parsing lnurlp response.", e);
-        return { httpStatus: 424, data: `Error parsing Lnurlp response. ${e}` };
-      }
-      return response;
     }
 
     let pubKeys = await this.fetchPubKeys(receivingVaspDomain);
@@ -192,7 +202,8 @@ export default class SendingVasp {
     try {
       const isSignatureValid = await uma.verifyUmaLnurlpResponseSignature(
         lnurlpResponse,
-        hexToBytes(pubKeys.signingPubKey),
+        pubKeys,
+        this.nonceCache,
       );
       if (!isSignatureValid) {
         return { httpStatus: 424, data: "Invalid UMA response signature." };
@@ -251,50 +262,25 @@ export default class SendingVasp {
   }
 
   private async handleAsNonUmaLnurlpResponse(
-    responseJson: string,
+    lnurlpResponse: uma.LnurlpResponse,
     receiverId: string,
     receivingVaspDomain: string,
-  ): Promise<HttpResponse | null> {
-    const response = JSON.parse(responseJson);
-    if (response.status === "ERROR") {
-      console.error("Error fetching Lnurlp request.", response.reason);
-      return null;
-    }
-    if (response.tag !== "payRequest") {
-      return null;
-    }
-
-    try {
-      const lnurlResponse = NonUmaLnurlpResponseSchema.parse(responseJson);
-      const callbackUuid = this.requestCache.saveNonUmaLnurlpResponseData(
-        lnurlResponse,
-        receiverId,
-        receivingVaspDomain,
-      );
-      return {
-        httpStatus: 200,
-        data: {
-          receiverCurrencies: [
-            {
-              symbol: "sat",
-              code: "SAT",
-              name: "Satoshis",
-              maxSendable: 10_000_000_000,
-              minSendable: 1,
-              multiplier: 1000,
-              displayDecimals: 0,
-            },
-          ],
-          callbackUuid: callbackUuid,
-          maxSendSats: lnurlResponse.maxSendable,
-          minSendSats: lnurlResponse.minSendable,
-          receiverKycStatus: uma.KycStatus.NotVerified,
-        },
-      };
-    } catch (e) {
-      console.error("Failed to parse as non-UMA lnurlp response.", e);
-      return null;
-    }
+  ): Promise<HttpResponse> {
+    const callbackUuid = this.requestCache.saveLnurlpResponseData(
+      lnurlpResponse,
+      receiverId,
+      receivingVaspDomain,
+    );
+    return {
+      httpStatus: 200,
+      data: {
+        receiverCurrencies: lnurlpResponse.currencies || [SATS_CURRENCY],
+        callbackUuid: callbackUuid,
+        maxSendSats: lnurlpResponse.maxSendable,
+        minSendSats: lnurlpResponse.minSendable,
+        receiverKycStatus: uma.KycStatus.NotVerified,
+      },
+    };
   }
 
   private async handleClientUmaPayreq(
@@ -322,24 +308,53 @@ export default class SendingVasp {
     }
 
     if (!initialRequestData.lnurlpResponse) {
-      if (!initialRequestData.nonUmaLnurlpResponse) {
-        return { httpStatus: 400, data: "Invalid callbackUuid" };
-      }
-      return await this.handleNonUmaPayReq(initialRequestData, amount);
+      return { httpStatus: 400, data: "Invalid callbackUuid" };
     }
+    const receivingCurrencyCode = requestUrl.searchParams.get(
+      "receivingCurrencyCode",
+    );
+    const isUma = initialRequestData.lnurlpResponse.isUma();
 
-    const recievingCurrencyCode = requestUrl.searchParams.get("currencyCode");
-    if (!recievingCurrencyCode || typeof recievingCurrencyCode !== "string") {
+    let payerProfile: PayerProfile | null = null;
+    if (initialRequestData.lnurlpResponse.payerData) {
+      payerProfile = this.getPayerProfile(
+        user,
+        initialRequestData.lnurlpResponse.payerData,
+        this.getSendingVaspDomain(requestUrl),
+        isUma,
+      );
+    }
+
+    if (!isUma) {
+      const msatsParam = requestUrl.searchParams.get("isAmountInMsats");
+      return await this.handleNonUmaPayReq(
+        initialRequestData,
+        amount,
+        payerProfile,
+        msatsParam,
+        receivingCurrencyCode,
+      );
+    }
+
+    if (!payerProfile) {
+      return { httpStatus: 400, data: "Missing payerData" };
+    }
+
+    if (!receivingCurrencyCode || typeof receivingCurrencyCode !== "string") {
       return { httpStatus: 400, data: "Missing currencyCode" };
     }
-    const selectedCurrency = initialRequestData.lnurlpResponse.currencies.find(
-      (c) => c.code === recievingCurrencyCode,
-    );
+    const selectedCurrency = (
+      initialRequestData.lnurlpResponse.currencies || []
+    ).find((c) => c.code === receivingCurrencyCode);
     if (selectedCurrency === undefined) {
       return { httpStatus: 400, data: "Currency code not supported" };
     }
 
-    const amountValueMillisats = selectedCurrency.multiplier * amount;
+    const msatsParam = requestUrl.searchParams.get("isAmountInMsats");
+    const isAmountInMsats = msatsParam?.toLocaleLowerCase() === "true";
+    const amountValueMillisats = isAmountInMsats
+      ? amount
+      : selectedCurrency.multiplier * amount;
     const sendingCurrencyCode =
       requestUrl.searchParams.get("sendingCurrency") ?? "SAT";
     const sendingCurrency = (
@@ -365,34 +380,34 @@ export default class SendingVasp {
     let pubKeys = await this.fetchPubKeys(
       initialRequestData.receivingVaspDomain,
     );
-    if (!pubKeys)
+    if (!pubKeys) {
       return {
         httpStatus: 424,
         data: "Error fetching receiving vasp public key.",
       };
+    }
 
-    const payerProfile = this.getPayerProfile(
-      user,
-      initialRequestData.lnurlpResponse.payerData,
-      this.getSendingVaspDomain(requestUrl),
-    );
     const trInfo = await this.complianceService.getTravelRuleInfoForTransaction(
       user.id,
-      payerProfile.identifier,
+      payerProfile.identifier!,
       `${initialRequestData.receiverId}@${initialRequestData.receivingVaspDomain}`,
       amountValueMillisats,
     );
     const node = await this.getLightsparkNode();
     const utxoCallback = this.getUtxoCallback(requestUrl, "1234abcd");
 
+    console.log(`Generating payreq for ${amountValueMillisats} msats.`);
+    console.log(`  isAmountInMsats: ${isAmountInMsats}`);
+    console.log(`  amount: ${amount}`);
     let payReq: uma.PayRequest;
     try {
       payReq = await uma.getPayRequest({
-        receiverEncryptionPubKey: hexToBytes(pubKeys.encryptionPubKey),
+        receiverEncryptionPubKey: pubKeys.getEncryptionPubKey(),
         sendingVaspPrivateKey: this.config.umaSigningPrivKey(),
-        currencyCode: recievingCurrencyCode,
-        amount,
-        payerIdentifier: payerProfile.identifier,
+        receivingCurrencyCode: receivingCurrencyCode,
+        isAmountInReceivingCurrency: !isAmountInMsats,
+        amount: amount,
+        payerIdentifier: payerProfile.identifier!,
         payerKycStatus: user.kycStatus,
         utxoCallback,
         trInfo,
@@ -400,13 +415,23 @@ export default class SendingVasp {
         payerNodePubKey: node.publicKey ?? "",
         payerName: payerProfile.name,
         payerEmail: payerProfile.email,
+        requestedPayeeData: {
+          // Compliance and Identifier are mandatory fields added automatically.
+          name: { mandatory: false },
+          email: { mandatory: false },
+        },
+        umaMajorVersion: initialRequestData.lnurlpResponse.umaVersion
+          ? uma.getMajorVersion(initialRequestData.lnurlpResponse.umaVersion)
+          : 1,
       });
     } catch (e) {
       console.error("Error generating payreq.", e);
       return { httpStatus: 500, data: "Error generating payreq." };
     }
 
-    console.log(`Sending payreq: ${JSON.stringify(payReq, null, 2)}`);
+    console.log(
+      `Sending payreq: ${JSON.stringify(payReq.toJsonSchemaObject(), null, 2)}`,
+    );
     let response: globalThis.Response;
     try {
       response = await fetch(initialRequestData.lnurlpResponse.callback, {
@@ -414,7 +439,7 @@ export default class SendingVasp {
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify(payReq),
+        body: payReq.toJsonString(),
       });
     } catch (e) {
       return { httpStatus: 500, data: "Error sending payreq." };
@@ -427,19 +452,53 @@ export default class SendingVasp {
     let payResponse: uma.PayReqResponse;
     const bodyText = await response.text();
     try {
-      payResponse = await uma.parsePayReqResponse(bodyText);
+      payResponse = await uma.PayReqResponse.fromJson(bodyText);
     } catch (e) {
       console.error("Error parsing payreq response. Raw response: " + bodyText);
       console.error("Error:", e);
       return { httpStatus: 424, data: "Error parsing payreq response." };
     }
 
+    if (!payResponse.isUma()) {
+      console.log("Received non-uma response for uma payreq.");
+      return {
+        httpStatus: 424,
+        data: "Received non-uma response for uma payreq.",
+      };
+    }
+
+    try {
+      if (payReq.umaMajorVersion !== 0) {
+        const isSignatureValid = await uma.verifyPayReqResponseSignature(
+          payResponse,
+          payerProfile.identifier!,
+          `${initialRequestData.receiverId}@${initialRequestData.receivingVaspDomain}`,
+          pubKeys,
+          this.nonceCache,
+        );
+        if (!isSignatureValid) {
+          return {
+            httpStatus: 424,
+            data: "Invalid payreq response signature.",
+          };
+        }
+      }
+    } catch (e) {
+      console.error(e);
+      return {
+        httpStatus: 424,
+        data: new Error("Invalid payreq response signature.", { cause: e }),
+      };
+    }
+
+    console.log(`Verified payreq response signature.`);
+
     const shouldTransact = await this.complianceService.preScreenTransaction(
-      payerProfile.identifier,
+      payerProfile.identifier!,
       `${initialRequestData.receiverId}@${initialRequestData.receivingVaspDomain}`,
       amountValueMillisats,
-      payResponse.compliance.nodePubKey,
-      payResponse.compliance.utxos,
+      payResponse.payeeData?.compliance?.nodePubKey ?? undefined,
+      payResponse.payeeData?.compliance?.utxos ?? [],
     );
     if (!shouldTransact) {
       return {
@@ -460,24 +519,29 @@ export default class SendingVasp {
       (await this.userService.getCurrencyPreferencesForUser(user.id)) ?? [];
 
     const newCallbackUuid = this.requestCache.savePayReqData(
-      payerProfile.identifier,
+      payerProfile.identifier!,
       payResponse.pr,
       utxoCallback,
       invoice,
       senderCurrencies,
     );
 
+    const amountMsats = convertCurrencyAmount(
+      invoice.amount,
+      CurrencyUnit.MILLISATOSHI,
+    ).preferredCurrencyValueRounded;
+
     return {
       httpStatus: 200,
       data: {
         senderCurrencies: senderCurrencies ?? [],
         callbackUuid: newCallbackUuid,
         encodedInvoice: payResponse.pr,
-        amount: invoice.amount,
-        conversionRate: payResponse.paymentInfo.multiplier,
-        exchangeFeesMillisatoshi:
-          payResponse.paymentInfo.exchangeFeesMillisatoshi,
-        currencyCode: payResponse.paymentInfo.currencyCode,
+        amountMsats: amountMsats,
+        amountReceivingCurrency: payResponse.converted!.amount,
+        conversionRate: payResponse.converted!.multiplier,
+        exchangeFeesMsats: payResponse.converted!.fee,
+        receivingCurrencyCode: payResponse.converted!.currencyCode,
       },
     };
   }
@@ -485,15 +549,27 @@ export default class SendingVasp {
   private async handleNonUmaPayReq(
     initialRequestData: SendingVaspInitialRequestData,
     amount: number,
+    payerProfile: PayerProfile | null,
+    sendingCurrencyCode: string | null,
+    receivingCurrencyCode: string | null,
   ): Promise<HttpResponse> {
-    const nonUmaLnurlpResponse = initialRequestData.nonUmaLnurlpResponse;
-    if (!nonUmaLnurlpResponse) {
-      throw new Error("Called handleNonUmaPayReq with UMA response.");
-    }
     let response: globalThis.Response;
     try {
-      const url = new URL(nonUmaLnurlpResponse.callback);
-      url.searchParams.append("amount", amount.toString());
+      const url = new URL(initialRequestData.lnurlpResponse.callback);
+      if (sendingCurrencyCode) {
+        url.searchParams.append("amount", `${amount}.${sendingCurrencyCode}`);
+      } else {
+        url.searchParams.append("amount", amount.toString());
+      }
+      if (receivingCurrencyCode) {
+        url.searchParams.append("convert", receivingCurrencyCode);
+      }
+      if (
+        payerProfile &&
+        (payerProfile.identifier || payerProfile.email || payerProfile.name)
+      ) {
+        url.searchParams.append("payerData", JSON.stringify(payerProfile));
+      }
       response = await fetch(url.toString(), {
         method: "GET",
         headers: {
@@ -518,8 +594,15 @@ export default class SendingVasp {
         data: `Error on pay request. reason: ${responseJson.reason}`,
       };
     }
+    let payreqResponse: uma.PayReqResponse;
+    try {
+      payreqResponse = uma.PayReqResponse.fromJson(responseText);
+    } catch (e) {
+      console.error("Error parsing payreq response.", e);
+      return { httpStatus: 424, data: "Error parsing payreq response." };
+    }
 
-    const encodedInvoice = responseJson.pr;
+    const encodedInvoice = payreqResponse.pr;
 
     let invoice: InvoiceData;
     try {
@@ -530,7 +613,7 @@ export default class SendingVasp {
     }
 
     const newCallbackUuid = this.requestCache.savePayReqData(
-      "", // TODO(Jeremy): Parse LUD-18 payerdata for this.
+      payreqResponse.payeeData?.identifier ?? "",
       encodedInvoice,
       "", // No utxo callback for non-UMA lnurl.
       invoice,
@@ -542,10 +625,10 @@ export default class SendingVasp {
       data: {
         callbackUuid: newCallbackUuid,
         encodedInvoice: encodedInvoice,
-        amount: invoice.amount,
-        conversionRate: 1,
-        exchangeFeesMillisatoshi: 0,
-        currencyCode: "mSAT",
+        amount: payreqResponse.converted?.amount ?? invoice.amount,
+        conversionRate: payreqResponse.converted?.multiplier ?? 1000,
+        exchangeFeesMillisatoshi: payreqResponse.converted?.fee ?? 0,
+        currencyCode: receivingCurrencyCode ?? "SAT",
       },
     };
   }
@@ -659,7 +742,7 @@ export default class SendingVasp {
         amountMsats,
         sendingCurrencyAmount,
         sendingCurrency.code,
-        paymentId,
+        paymentId!,
       );
       payment = await this.waitForPaymentCompletion(paymentResult);
       await this.ledgerService.recordOutgoingTransactionSucceeded(
@@ -668,7 +751,7 @@ export default class SendingVasp {
         amountMsats,
         sendingCurrencyAmount,
         sendingCurrency.code,
-        paymentId,
+        paymentId!,
       );
     } catch (e) {
       console.error("Error paying invoice.", e);
@@ -685,7 +768,7 @@ export default class SendingVasp {
       return { httpStatus: 500, data: "Error paying invoice." };
     }
 
-    await this.sendPostTransactionCallback(payment, payReqData);
+    await this.sendPostTransactionCallback(payment, payReqData, requestUrl);
 
     const nodePubKey = (await this.getLightsparkNode()).publicKey;
     await this.complianceService.registerTransactionMonitoring(
@@ -723,15 +806,19 @@ export default class SendingVasp {
    */
   private getPayerProfile(
     user: User,
-    requiredPayerData: uma.PayerDataOptions,
+    requiredPayerData: uma.CounterPartyDataOptions,
     vaspDomain: string,
-  ) {
+    isUma: boolean,
+  ): PayerProfile {
     return {
       name: requiredPayerData.name?.mandatory ? user.name ?? "" : undefined,
       email: requiredPayerData.email?.mandatory
         ? user.emailAddress ?? ""
         : undefined,
-      identifier: `$${user.umaUserName}@${vaspDomain}`,
+      identifier:
+        isUma || !!requiredPayerData.identifier
+          ? `$${user.umaUserName}@${vaspDomain}`
+          : undefined,
     };
   }
 
@@ -771,6 +858,7 @@ export default class SendingVasp {
   private async sendPostTransactionCallback(
     payment: OutgoingPayment,
     payReqData: SendingVaspPayReqData,
+    requestUrl: URL,
   ) {
     if (!payReqData.utxoCallback || payReqData.utxoCallback === "") {
       return;
@@ -779,17 +867,24 @@ export default class SendingVasp {
       payment.umaPostTransactionData?.map((d) => {
         return {
           utxo: d.utxo,
-          amount: convertCurrencyAmount(d.amount, CurrencyUnit.MILLISATOSHI)
-            .preferredCurrencyValueRounded,
+          amountMsats: convertCurrencyAmount(
+            d.amount,
+            CurrencyUnit.MILLISATOSHI,
+          ).preferredCurrencyValueRounded,
         };
       }) ?? [];
+    const postTransactionCallback = await uma.getPostTransactionCallback({
+      utxos: utxos,
+      vaspDomain: this.getSendingVaspDomain(requestUrl),
+      signingPrivateKey: this.config.umaSigningPrivKey(),
+    });
     try {
       const postTxResponse = await fetch(payReqData.utxoCallback, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ utxos }),
+        body: JSON.stringify(postTransactionCallback),
       });
       if (!postTxResponse.ok) {
         console.error(
@@ -850,9 +945,8 @@ export default class SendingVasp {
   }
 }
 
-const hostNameWithPort = (requestUrl: URL) => {
-  const port = requestUrl.port;
-  const portString =
-    port === "80" || port === "443" || port === "" ? "" : `:${port}`;
-  return `${requestUrl.hostname}${portString}`;
+type PayerProfile = {
+  name?: string;
+  email?: string;
+  identifier?: string;
 };
diff --git a/apps/examples/uma-vasp/src/SendingVaspRequestCache.ts b/apps/examples/uma-vasp/src/SendingVaspRequestCache.ts
index 2cd98d61c..708575888 100644
--- a/apps/examples/uma-vasp/src/SendingVaspRequestCache.ts
+++ b/apps/examples/uma-vasp/src/SendingVaspRequestCache.ts
@@ -1,6 +1,5 @@
 import { InvoiceData } from "@lightsparkdev/lightspark-sdk";
 import { Currency, LnurlpResponse } from "@uma-sdk/core";
-import { NonUmaLnurlpResponse } from "./rawLnurl.js";
 
 /**
  * A simple in-memory cache for data that needs to be remembered between calls to VASP1. In practice, this would be
@@ -19,12 +18,6 @@ export default interface SendingVaspRequestCache {
     receivingVaspDomain: string,
   ): string;
 
-  saveNonUmaLnurlpResponseData(
-    nonUmaLnurlpResponse: NonUmaLnurlpResponse,
-    receiverId: string,
-    receivingVaspDomain: string,
-  ): string;
-
   savePayReqData(
     receiverUmaAddress: string,
     encodedInvoice: string,
@@ -38,8 +31,7 @@ export default interface SendingVaspRequestCache {
  * This is the data that we cache for the initial Lnurlp request.
  */
 export interface SendingVaspInitialRequestData {
-  lnurlpResponse?: LnurlpResponse | undefined;
-  nonUmaLnurlpResponse?: NonUmaLnurlpResponse | undefined;
+  lnurlpResponse: LnurlpResponse;
   receiverId: string;
   receivingVaspDomain: string;
 }
diff --git a/apps/examples/uma-vasp/src/UmaConfig.ts b/apps/examples/uma-vasp/src/UmaConfig.ts
index 59d4482a8..2f5079b1d 100644
--- a/apps/examples/uma-vasp/src/UmaConfig.ts
+++ b/apps/examples/uma-vasp/src/UmaConfig.ts
@@ -5,8 +5,10 @@ export default class UmaConfig {
     public readonly apiClientID: string,
     public readonly apiClientSecret: string,
     public readonly nodeID: string,
+    public readonly umaEncryptionCertChain: string,
     public readonly umaEncryptionPubKeyHex: string,
     public readonly umaEncryptionPrivKeyHex: string,
+    public readonly umaSigningCertChain: string,
     public readonly umaSigningPubKeyHex: string,
     public readonly umaSigningPrivKeyHex: string,
     public readonly clientBaseURL: string | undefined,
@@ -27,8 +29,10 @@ export default class UmaConfig {
       requireEnv("LIGHTSPARK_API_TOKEN_CLIENT_ID"),
       requireEnv("LIGHTSPARK_API_TOKEN_CLIENT_SECRET"),
       requireEnv("LIGHTSPARK_UMA_NODE_ID"),
+      requireEnv("LIGHTSPARK_UMA_ENCRYPTION_CERT_CHAIN"),
       requireEnv("LIGHTSPARK_UMA_ENCRYPTION_PUBKEY"),
       requireEnv("LIGHTSPARK_UMA_ENCRYPTION_PRIVKEY"),
+      requireEnv("LIGHTSPARK_UMA_SIGNING_CERT_CHAIN"),
       requireEnv("LIGHTSPARK_UMA_SIGNING_PUBKEY"),
       requireEnv("LIGHTSPARK_UMA_SIGNING_PRIVKEY"),
       process.env.LIGHTSPARK_EXAMPLE_BASE_URL,
diff --git a/apps/examples/uma-vasp/src/UserService.ts b/apps/examples/uma-vasp/src/UserService.ts
index 331bd08a5..08c75620f 100644
--- a/apps/examples/uma-vasp/src/UserService.ts
+++ b/apps/examples/uma-vasp/src/UserService.ts
@@ -11,5 +11,5 @@ export default interface UserService {
   getCurrencyPreferencesForUser(
     userId: string,
   ): Promise<Currency[] | undefined>;
-  getReceivableSatsRangeForUser(userId: string): Promise<[number, number]>;
+  getReceivableMsatsRangeForUser(userId: string): Promise<[number, number]>;
 }
diff --git a/apps/examples/uma-vasp/src/currencies.ts b/apps/examples/uma-vasp/src/currencies.ts
new file mode 100644
index 000000000..5a09106fb
--- /dev/null
+++ b/apps/examples/uma-vasp/src/currencies.ts
@@ -0,0 +1,11 @@
+import { Currency } from "@uma-sdk/core";
+
+export const SATS_CURRENCY = new Currency(
+  "SAT",
+  "Satoshis",
+  "sat",
+  1000,
+  1,
+  100_000_000,
+  0,
+);
diff --git a/apps/examples/uma-vasp/src/demo/DemoUserService.ts b/apps/examples/uma-vasp/src/demo/DemoUserService.ts
index 7960567da..48a697bb7 100644
--- a/apps/examples/uma-vasp/src/demo/DemoUserService.ts
+++ b/apps/examples/uma-vasp/src/demo/DemoUserService.ts
@@ -2,6 +2,7 @@ import { Currency, KycStatus } from "@uma-sdk/core";
 import { requireEnv } from "../UmaConfig.js";
 import { User } from "../User.js";
 import UserService from "../UserService.js";
+import { SATS_CURRENCY } from "../currencies.js";
 
 // Static UUID so that callback URLs are always the same.
 const DEMO_UID = "4b41ae03-01b8-4974-8d26-26a35d28851b";
@@ -26,7 +27,11 @@ export default class DemoUserService implements UserService {
   ): Promise<User | undefined> {
     // Using basic auth with a static username/password for demo purposes.
     const basicAuthHeader = headers["authorization"];
-    if (!basicAuthHeader || typeof basicAuthHeader !== "string" || !basicAuthHeader.startsWith("Basic ")) {
+    if (
+      !basicAuthHeader ||
+      typeof basicAuthHeader !== "string" ||
+      !basicAuthHeader.startsWith("Basic ")
+    ) {
       return undefined;
     }
     const usernameAndPassword = basicAuthHeader.split(" ")[1];
@@ -42,7 +47,7 @@ export default class DemoUserService implements UserService {
     if (username !== requireEnv("LIGHTSPARK_UMA_RECEIVER_USER")) {
       return undefined;
     }
-    if (password  !== requireEnv("LIGHTSPARK_UMA_RECEIVER_USER_PASSWORD")) {
+    if (password !== requireEnv("LIGHTSPARK_UMA_RECEIVER_USER_PASSWORD")) {
       return undefined;
     }
 
@@ -64,20 +69,12 @@ export default class DemoUserService implements UserService {
   ): Promise<Currency[] | undefined> {
     // Implementation note: In a real VASP, you'd probably inject a CurrencyService into the UserService
     // to pull out exchange rates for each supported currency. For the demo, we'll just hard-code sats.
-    return [
-      {
-        symbol: "sat",
-        code: "SAT",
-        name: "Satoshis",
-        maxSendable: 100_000_000,
-        minSendable: 1,
-        multiplier: 1000,
-        decimals: 0,
-      },
-    ];
+    return [SATS_CURRENCY];
   }
 
-  async getReceivableSatsRangeForUser(userId: string): Promise<[number, number]> {
+  async getReceivableMsatsRangeForUser(
+    userId: string,
+  ): Promise<[number, number]> {
     return [1, 100_000_000];
   }
 }
diff --git a/apps/examples/uma-vasp/src/demo/InMemorySendingVaspRequestCache.ts b/apps/examples/uma-vasp/src/demo/InMemorySendingVaspRequestCache.ts
index 0e25927ce..b7d1b9831 100644
--- a/apps/examples/uma-vasp/src/demo/InMemorySendingVaspRequestCache.ts
+++ b/apps/examples/uma-vasp/src/demo/InMemorySendingVaspRequestCache.ts
@@ -1,14 +1,18 @@
 import { InvoiceData } from "@lightsparkdev/lightspark-sdk";
 import { Currency, LnurlpResponse } from "@uma-sdk/core";
 import { v4 as uuidv4 } from "uuid";
-import { NonUmaLnurlpResponse } from "../rawLnurl.js";
-import SendingVaspRequestCache from "../SendingVaspRequestCache.js";
+import SendingVaspRequestCache, {
+  SendingVaspInitialRequestData,
+  SendingVaspPayReqData,
+} from "../SendingVaspRequestCache.js";
 
 /**
  * A simple in-memory cache for data that needs to be remembered between calls to VASP1. In practice, this would be
  * stored in a database or other persistent storage.
  */
-export default class InMemorySendingVaspRequestCache implements SendingVaspRequestCache {
+export default class InMemorySendingVaspRequestCache
+  implements SendingVaspRequestCache
+{
   /**
    * This is a map of the UMA request UUID to the LnurlpResponse from that initial Lnurlp request.
    * This is used to cache the LnurlpResponse so that we can use it to generate the UMA payreq without the client
@@ -49,20 +53,6 @@ export default class InMemorySendingVaspRequestCache implements SendingVaspReque
     return uuid;
   }
 
-  public saveNonUmaLnurlpResponseData(
-    nonUmaLnurlpResponse: NonUmaLnurlpResponse,
-    receiverId: string,
-    receivingVaspDomain: string,
-  ): string {
-    const uuid = uuidv4();
-    this.lnurlpRequestCache.set(uuid, {
-      nonUmaLnurlpResponse,
-      receiverId,
-      receivingVaspDomain,
-    });
-    return uuid;
-  }
-
   public savePayReqData(
     receiverUmaAddress: string,
     encodedInvoice: string,
@@ -81,24 +71,3 @@ export default class InMemorySendingVaspRequestCache implements SendingVaspReque
     return uuid;
   }
 }
-
-/**
- * This is the data that we cache for the initial Lnurlp request.
- */
-export interface SendingVaspInitialRequestData {
-  lnurlpResponse?: LnurlpResponse | undefined;
-  nonUmaLnurlpResponse?: NonUmaLnurlpResponse | undefined;
-  receiverId: string;
-  receivingVaspDomain: string;
-}
-
-/**
- * This is the data that we cache for the payreq request.
- */
-export interface SendingVaspPayReqData {
-  receiverUmaAddress: string;
-  encodedInvoice: string;
-  utxoCallback: string;
-  invoiceData: InvoiceData;
-  senderCurrencies: Currency[];
-}
diff --git a/apps/examples/uma-vasp/src/networking/expressAdapters.ts b/apps/examples/uma-vasp/src/networking/expressAdapters.ts
index 5a6f7461a..9cc318083 100644
--- a/apps/examples/uma-vasp/src/networking/expressAdapters.ts
+++ b/apps/examples/uma-vasp/src/networking/expressAdapters.ts
@@ -17,6 +17,13 @@ export const isDomainLocalhost = (domain: string) => {
   );
 };
 
+export const hostNameWithPort = (requestUrl: URL) => {
+  const port = requestUrl.port;
+  const portString =
+    port === "80" || port === "443" || port === "" ? "" : `:${port}`;
+  return `${requestUrl.hostname}${portString}`;
+};
+
 export const sendResponse = (
   expressResponse: Response,
   httpResponse: HttpResponse,
diff --git a/apps/examples/uma-vasp/src/rawLnurl.ts b/apps/examples/uma-vasp/src/rawLnurl.ts
deleted file mode 100644
index f5d0b1162..000000000
--- a/apps/examples/uma-vasp/src/rawLnurl.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { z } from "zod";
-
-export const NonUmaLnurlpResponseSchema = z.object({
-  tag: z.string(),
-  callback: z.string(),
-  minSendable: z.number(),
-  maxSendable: z.number(),
-  metadata: z.string(),
-});
-
-export type NonUmaLnurlpResponse = z.infer<typeof NonUmaLnurlpResponseSchema>;
diff --git a/apps/examples/uma-vasp/src/server.ts b/apps/examples/uma-vasp/src/server.ts
index 2634c85e6..8ab982332 100644
--- a/apps/examples/uma-vasp/src/server.ts
+++ b/apps/examples/uma-vasp/src/server.ts
@@ -1,5 +1,13 @@
 import { LightsparkClient } from "@lightsparkdev/lightspark-sdk";
-import { InMemoryPublicKeyCache } from "@uma-sdk/core";
+import {
+  fetchPublicKeyForVasp,
+  getPubKeyResponse,
+  parsePostTransactionCallback,
+  verifyPostTransactionCallbackSignature,
+  InMemoryPublicKeyCache,
+  PubKeyResponse,
+  NonceValidator
+} from "@uma-sdk/core";
 import bodyParser from "body-parser";
 import express from "express";
 import ComplianceService from "./ComplianceService.js";
@@ -19,6 +27,7 @@ export const createUmaServer = (
   userService: UserService,
   ledgerService: InternalLedgerService,
   complianceService: ComplianceService,
+  nonceCache: NonceValidator,
 ): {
   listen: (
     port: number,
@@ -39,6 +48,7 @@ export const createUmaServer = (
     userService,
     ledgerService,
     complianceService,
+    nonceCache,
   );
   sendingVasp.registerRoutes(app);
   const receivingVasp = new ReceivingVasp(
@@ -47,17 +57,49 @@ export const createUmaServer = (
     pubKeyCache,
     userService,
     complianceService,
+    nonceCache,
   );
   receivingVasp.registerRoutes(app);
 
   app.get("/.well-known/lnurlpubkey", (req, res) => {
-    res.send({
-      signingPubKey: config.umaSigningPubKeyHex,
-      encryptionPubKey: config.umaEncryptionPubKeyHex,
-    });
+    res.send(getPubKeyResponse({
+      signingCertChainPem: config.umaSigningCertChain,
+      encryptionCertChainPem: config.umaEncryptionCertChain,
+    }).toJsonString());
   });
 
-  app.post("/api/uma/utxoCallback", (req, res) => {
+  app.post("/api/uma/utxoCallback", async (req, res) => {
+    const postTransactionCallback = parsePostTransactionCallback(req.body);
+
+    let pubKeys: PubKeyResponse;
+    try {
+      pubKeys = await fetchPublicKeyForVasp({
+        cache: pubKeyCache,
+        vaspDomain: postTransactionCallback.vaspDomain,
+      });
+    } catch (e) {
+      console.error(e);
+      return {
+        httpStatus: 500,
+        data: new Error("Failed to fetch public key.", { cause: e }),
+      };
+    }
+
+    console.log(`Fetched pubkeys: ${JSON.stringify(pubKeys, null, 2)}`);
+
+    try {
+      const isSignatureValid = await verifyPostTransactionCallbackSignature(postTransactionCallback, pubKeys, nonceCache);
+      if (!isSignatureValid) {
+        return { httpStatus: 400, data: "Invalid post transaction callback signature." };
+      }
+    } catch (e) {
+      console.error(e);
+      return {
+        httpStatus: 500,
+        data: new Error("Invalid post transaction callback signature.", { cause: e }),
+      };
+    }
+
     console.log(`Received UTXO callback for ${req.query.txid}`);
     console.log(`  ${req.body}`);
     res.send("ok");
diff --git a/apps/examples/uma-vasp/src/startServer.ts b/apps/examples/uma-vasp/src/startServer.ts
index 11cbf88a0..2a2866972 100644
--- a/apps/examples/uma-vasp/src/startServer.ts
+++ b/apps/examples/uma-vasp/src/startServer.ts
@@ -2,7 +2,7 @@ import {
   AccountTokenAuthProvider,
   LightsparkClient,
 } from "@lightsparkdev/lightspark-sdk";
-import { InMemoryPublicKeyCache } from "@uma-sdk/core";
+import { InMemoryPublicKeyCache, InMemoryNonceValidator } from "@uma-sdk/core";
 import UmaConfig from "./UmaConfig.js";
 import DemoComplianceService from "./demo/DemoComplianceService.js";
 import DemoInternalLedgerService from "./demo/DemoInternalLedgerService.js";
@@ -19,6 +19,8 @@ const lightsparkClient = new LightsparkClient(
 );
 const userService = new DemoUserService();
 
+const twoDaysAgo = new Date();
+twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
 const umaServer = createUmaServer(
   config,
   lightsparkClient,
@@ -27,6 +29,7 @@ const umaServer = createUmaServer(
   userService,
   new DemoInternalLedgerService(config, userService, lightsparkClient),
   new DemoComplianceService(config, lightsparkClient),
+  new InMemoryNonceValidator(twoDaysAgo.getTime()),
 );
 
 let port = 8080;
diff --git a/apps/examples/uma-vasp/test.sh b/apps/examples/uma-vasp/test.sh
index 365f13c24..120c23e87 100755
--- a/apps/examples/uma-vasp/test.sh
+++ b/apps/examples/uma-vasp/test.sh
@@ -1,10 +1,34 @@
 #! /bin/bash
 
 LIGHTSPARK_UMA_RECEIVER_USER="bob"
-LIGHTSPARK_UMA_ENCRYPTION_PUBKEY="04b8555255fe93431754a6a69d370aa3ecbfc1a71e7f740f1f98c082af35e1d565a1e30b342009146778f4da28f186fd2e0ddca13a12b925a30b96a0c5c0c34126"
-LIGHTSPARK_UMA_ENCRYPTION_PRIVKEY="b832d0e6a72dc3948b71bf4aa2c789aa0714f6632b0d717eff6423955bb039ce"
-LIGHTSPARK_UMA_SIGNING_PUBKEY="04b8555255fe93431754a6a69d370aa3ecbfc1a71e7f740f1f98c082af35e1d565a1e30b342009146778f4da28f186fd2e0ddca13a12b925a30b96a0c5c0c34126"
-LIGHTSPARK_UMA_SIGNING_PRIVKEY="b832d0e6a72dc3948b71bf4aa2c789aa0714f6632b0d717eff6423955bb039ce"
+LIGHTSPARK_UMA_ENCRYPTION_CERT_CHAIN="-----BEGIN CERTIFICATE-----
+MIIB1zCCAXygAwIBAgIUGN3ihBj1RnKoeTM/auDFnNoThR4wCgYIKoZIzj0EAwIw
+QjELMAkGA1UEBhMCVVMxEzARBgNVBAgMCmNhbGlmb3JuaWExDjAMBgNVBAcMBWxv
+cyBhMQ4wDAYDVQQKDAVsaWdodDAeFw0yNDAzMDUyMTAzMTJaFw0yNDAzMTkyMTAz
+MTJaMEIxCzAJBgNVBAYTAlVTMRMwEQYDVQQIDApjYWxpZm9ybmlhMQ4wDAYDVQQH
+DAVsb3MgYTEOMAwGA1UECgwFbGlnaHQwVjAQBgcqhkjOPQIBBgUrgQQACgNCAARB
+nFRn6lY/ABD9YU+F6IWsmcIbjo1BYkEXX91e/SJE/pB+Lm+j3WYxsbF80oeY2o2I
+KjTEd21EzECQeBx6reobo1MwUTAdBgNVHQ4EFgQUU87LnQdiP6XIE6LoKU1PZnbt
+bMwwHwYDVR0jBBgwFoAUU87LnQdiP6XIE6LoKU1PZnbtbMwwDwYDVR0TAQH/BAUw
+AwEB/zAKBggqhkjOPQQDAgNJADBGAiEAvsrvoeo3rbgZdTHxEUIgP0ArLyiO34oz
+NlwL4gk5GpgCIQCvRx4PAyXNV9T6RRE+3wFlqwluOc/pPOjgdRw/wpoNPQ==
+-----END CERTIFICATE-----"
+LIGHTSPARK_UMA_ENCRYPTION_PUBKEY="04419c5467ea563f0010fd614f85e885ac99c21b8e8d416241175fdd5efd2244fe907e2e6fa3dd6631b1b17cd28798da8d882a34c4776d44cc4090781c7aadea1b"
+LIGHTSPARK_UMA_ENCRYPTION_PRIVKEY="77e891f0ecd265a3cda435eaa73792233ebd413aeb0dbb66f2940babfc9a2667"
+LIGHTSPARK_UMA_SIGNING_CERT_CHAIN="-----BEGIN CERTIFICATE-----
+MIIB1zCCAXygAwIBAgIUGN3ihBj1RnKoeTM/auDFnNoThR4wCgYIKoZIzj0EAwIw
+QjELMAkGA1UEBhMCVVMxEzARBgNVBAgMCmNhbGlmb3JuaWExDjAMBgNVBAcMBWxv
+cyBhMQ4wDAYDVQQKDAVsaWdodDAeFw0yNDAzMDUyMTAzMTJaFw0yNDAzMTkyMTAz
+MTJaMEIxCzAJBgNVBAYTAlVTMRMwEQYDVQQIDApjYWxpZm9ybmlhMQ4wDAYDVQQH
+DAVsb3MgYTEOMAwGA1UECgwFbGlnaHQwVjAQBgcqhkjOPQIBBgUrgQQACgNCAARB
+nFRn6lY/ABD9YU+F6IWsmcIbjo1BYkEXX91e/SJE/pB+Lm+j3WYxsbF80oeY2o2I
+KjTEd21EzECQeBx6reobo1MwUTAdBgNVHQ4EFgQUU87LnQdiP6XIE6LoKU1PZnbt
+bMwwHwYDVR0jBBgwFoAUU87LnQdiP6XIE6LoKU1PZnbtbMwwDwYDVR0TAQH/BAUw
+AwEB/zAKBggqhkjOPQQDAgNJADBGAiEAvsrvoeo3rbgZdTHxEUIgP0ArLyiO34oz
+NlwL4gk5GpgCIQCvRx4PAyXNV9T6RRE+3wFlqwluOc/pPOjgdRw/wpoNPQ==
+-----END CERTIFICATE-----"
+LIGHTSPARK_UMA_SIGNING_PUBKEY="04419c5467ea563f0010fd614f85e885ac99c21b8e8d416241175fdd5efd2244fe907e2e6fa3dd6631b1b17cd28798da8d882a34c4776d44cc4090781c7aadea1b"
+LIGHTSPARK_UMA_SIGNING_PRIVKEY="77e891f0ecd265a3cda435eaa73792233ebd413aeb0dbb66f2940babfc9a2667"
 
 if [ "$1" == "test" ]; then
   TEST_CMD="node --experimental-vm-modules $(yarn bin jest) --no-cache --runInBand --bail"
@@ -19,8 +43,10 @@ LIGHTSPARK_API_TOKEN_CLIENT_ID=$LIGHTSPARK_API_TOKEN_CLIENT_ID \
 LIGHTSPARK_API_TOKEN_CLIENT_SECRET=$LIGHTSPARK_API_TOKEN_CLIENT_SECRET \
 LIGHTSPARK_UMA_NODE_ID=$LIGHTSPARK_UMA_NODE_ID \
 LIGHTSPARK_UMA_RECEIVER_USER=$LIGHTSPARK_UMA_RECEIVER_USER \
+LIGHTSPARK_UMA_ENCRYPTION_CERT_CHAIN=$LIGHTSPARK_UMA_ENCRYPTION_CERT_CHAIN \
 LIGHTSPARK_UMA_ENCRYPTION_PUBKEY=$LIGHTSPARK_UMA_ENCRYPTION_PUBKEY \
 LIGHTSPARK_UMA_ENCRYPTION_PRIVKEY=$LIGHTSPARK_UMA_ENCRYPTION_PRIVKEY \
+LIGHTSPARK_UMA_SIGNING_CERT_CHAIN=$LIGHTSPARK_UMA_SIGNING_CERT_CHAIN \
 LIGHTSPARK_UMA_SIGNING_PUBKEY=$LIGHTSPARK_UMA_SIGNING_PUBKEY \
 LIGHTSPARK_UMA_SIGNING_PRIVKEY=$LIGHTSPARK_UMA_SIGNING_PRIVKEY \
 LIGHTSPARK_EXAMPLE_BASE_URL=$LIGHTSPARK_EXAMPLE_BASE_URL \
diff --git a/package.json b/package.json
index ef5f3391e..379a536ca 100644
--- a/package.json
+++ b/package.json
@@ -43,11 +43,12 @@
     "@changesets/cli": "^2.27.1",
     "@manypkg/cli": "^0.21.0",
     "@octokit/auth-action": "^4.0.1",
-    "octokit": "^3.1.2",
+    "@wojtekmaj/react-daterange-picker": "^5.5.0",
+    "octokit": "^4.0.2",
     "react-datetime-picker": "^5.6.0",
     "rehype-autolink-headings": "^7.0.0",
     "ts-prune": "^0.10.3",
-    "turbo": "1.10.16",
+    "turbo": "^1.13.3",
     "unimported": "^1.29.2"
   },
   "engines": {
diff --git a/packages/core/src/requester/Requester.ts b/packages/core/src/requester/Requester.ts
index 0e01dba5f..d6ca51f2b 100644
--- a/packages/core/src/requester/Requester.ts
+++ b/packages/core/src/requester/Requester.ts
@@ -137,7 +137,7 @@ class Requester {
       }
     }
     const operation = operationMatch[2];
-    let bodyData: BodyData = {
+    const payload: BodyData = {
       query: queryPayload,
       variables,
       operationName: operation,
@@ -149,16 +149,22 @@ class Requester {
       "Content-Type": "application/json",
       "X-Lightspark-SDK": sdkUserAgent,
       "User-Agent": browserUserAgent || sdkUserAgent,
+      "X-GraphQL-Operation": operation,
     };
-    const headers = skipAuth
+    const headers: { [key: string]: string } = skipAuth
       ? baseHeaders
       : await this.authProvider.addAuthHeaders(baseHeaders);
-    bodyData = await this.addSigningDataIfNeeded(
-      bodyData,
+    let bodyData = await this.addSigningDataIfNeeded(
+      payload,
       headers,
       signingNodeId,
     );
 
+    if (bodyData.length > 1024 && typeof CompressionStream != "undefined") {
+      bodyData = await compress(bodyData);
+      headers["Content-Encoding"] = "deflate";
+    }
+
     let urlWithProtocol = this.baseUrl;
     if (
       !urlWithProtocol.startsWith("https://") &&
@@ -177,7 +183,7 @@ class Requester {
     const response = await fetch(url, {
       method: "POST",
       headers: headers,
-      body: JSON.stringify(bodyData),
+      body: bodyData,
     });
     if (!response.ok) {
       throw new LightsparkException(
@@ -214,9 +220,16 @@ class Requester {
     headers: { [key: string]: string },
     signingNodeId: string | undefined,
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any -- LIG-3400 */
-  ): Promise<BodyData> {
+  ): Promise<Uint8Array> {
+    let TextEncoderImpl;
+    if (typeof TextEncoder === "undefined") {
+      TextEncoderImpl = (await import("text-encoding")).TextEncoder;
+    } else {
+      TextEncoderImpl = TextEncoder;
+    }
+
     if (!signingNodeId) {
-      return queryPayload;
+      return new TextEncoderImpl().encode(JSON.stringify(queryPayload));
     }
 
     const query = queryPayload.query;
@@ -241,12 +254,6 @@ class Requester {
       );
     }
 
-    let TextEncoderImpl;
-    if (typeof TextEncoder === "undefined") {
-      TextEncoderImpl = (await import("text-encoding")).TextEncoder;
-    } else {
-      TextEncoderImpl = TextEncoder;
-    }
     const encodedPayload = new TextEncoderImpl().encode(
       JSON.stringify(payload),
     );
@@ -258,8 +265,22 @@ class Requester {
       v: "1",
       signature: encodedSignedPayload,
     });
-    return payload;
+    return encodedPayload;
+  }
+}
+
+async function compress(data: Uint8Array): Promise<Uint8Array> {
+  const stream = new Blob([data]).stream();
+  const compressedStream = stream.pipeThrough(new CompressionStream("deflate"));
+  const reader = compressedStream.getReader();
+  const chunks = [];
+  let done, value;
+  while (!done) {
+    ({ done, value } = await reader.read()); // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+    chunks.push(value);
   }
+  const blob = new Blob(chunks);
+  return new Uint8Array(await blob.arrayBuffer());
 }
 
 export default Requester;
diff --git a/packages/core/src/utils/currency.ts b/packages/core/src/utils/currency.ts
index 77db0e86e..0a5789084 100644
--- a/packages/core/src/utils/currency.ts
+++ b/packages/core/src/utils/currency.ts
@@ -382,35 +382,54 @@ export const abbrCurrencyUnit = (unit: CurrencyUnitType) => {
   return "Unsupported CurrencyUnit";
 };
 
+const defaultOptions = {
+  /* undefined indicates to use default precision for unit defined below */
+  precision: undefined,
+  compact: false,
+  showBtcSymbol: false,
+};
+
+type FormatCurrencyStrOptions = {
+  /* undefined indicates to use default precision for unit defined below */
+  precision?: number | "full" | undefined;
+  compact?: boolean | undefined;
+  showBtcSymbol?: boolean | undefined;
+};
+
 export function formatCurrencyStr(
   amount: CurrencyAmountArg,
-  maxFractionDigits?: number,
-  compact?: boolean,
-  showBtcSymbol = false,
-  options: Intl.NumberFormatOptions = {},
+  options?: FormatCurrencyStrOptions,
 ) {
+  const { precision, compact, showBtcSymbol } = {
+    ...defaultOptions,
+    ...options,
+  };
+
   const currencyAmount = getCurrencyAmount(amount);
   let { value: num } = currencyAmount;
   const { unit } = currencyAmount;
 
-  /**
-   * Currencies should always be represented in the smallest unit, e.g.
-   * cents for USD:
-   */
+  /* Currencies should always be represented in the smallest unit, e.g. cents for USD: */
   if (unit === CurrencyUnit.USD) {
     num = num / 100;
   }
 
-  function getDefaultMaxFractionDigits(defaultDigits: number) {
-    return typeof maxFractionDigits === "undefined"
-      ? compact
-        ? 1
-        : defaultDigits
-      : maxFractionDigits;
+  function getDefaultMaxFractionDigits(
+    defaultDigits: number,
+    fullPrecisionDigits: number,
+  ) {
+    let digits = defaultDigits;
+    if (precision === "full") {
+      digits = fullPrecisionDigits;
+    } else if (typeof precision === "number") {
+      digits = precision;
+    } else if (compact) {
+      digits = 1;
+    }
+    return digits;
   }
 
-  // Symbol handled by toLocaleString for USD.
-  // These rely on the LightsparkIcons font
+  /* Symbol handled by toLocaleString for USD. These rely on the LightsparkIcons font: */
   const symbol = !showBtcSymbol
     ? ""
     : unit === CurrencyUnit.BITCOIN
@@ -423,35 +442,41 @@ export function formatCurrencyStr(
 
   switch (unit) {
     case CurrencyUnit.BITCOIN:
+      /* In most cases product prefers 4 precision digtis for BTC. In a few places
+         full precision (8 digits) are preferred, e.g. for a transaction details page: */
       return `${symbol}${num.toLocaleString(currentLocale, {
         notation: compact ? ("compact" as const) : undefined,
-        maximumFractionDigits: getDefaultMaxFractionDigits(4),
-        ...options,
+        maximumFractionDigits: getDefaultMaxFractionDigits(4, 8),
       })}`;
-    case CurrencyUnit.MILLISATOSHI:
     case CurrencyUnit.SATOSHI:
+      /* In most cases product prefers hiding sub sat precision (msats). In a few
+         places full precision (3 digits) are preferred, e.g. for Lightning fees
+         paid on a transaction details page: */
+      return `${symbol}${num.toLocaleString(currentLocale, {
+        notation: compact ? ("compact" as const) : undefined,
+        maximumFractionDigits: getDefaultMaxFractionDigits(0, 3),
+      })}`;
+    case CurrencyUnit.MILLISATOSHI:
     case CurrencyUnit.MICROBITCOIN:
     case CurrencyUnit.MILLIBITCOIN:
     case CurrencyUnit.NANOBITCOIN:
     default:
       return `${symbol}${num.toLocaleString(currentLocale, {
         notation: compact ? ("compact" as const) : undefined,
-        maximumFractionDigits: getDefaultMaxFractionDigits(0),
-        ...options,
+        maximumFractionDigits: getDefaultMaxFractionDigits(0, 0),
       })}`;
     case CurrencyUnit.USD:
       return num.toLocaleString(currentLocale, {
         style: "currency",
         currency: defaultCurrencyCode,
         notation: compact ? ("compact" as const) : undefined,
-        maximumFractionDigits: getDefaultMaxFractionDigits(2),
-        ...options,
+        maximumFractionDigits: getDefaultMaxFractionDigits(2, 2),
       });
   }
 }
 
 export function separateCurrencyStrParts(currencyStr: string) {
-  // split the currency string into the symbol and the amount
+  /* split the currency string into the symbol and the amount */
   const symbol = currencyStr.replace(/[0-9\s\u00a0.,]/g, "");
   const amount = currencyStr.replace(/[^\d.,-]/g, "");
   return { symbol, amount };
@@ -467,8 +492,7 @@ export function localeToCurrencySymbol(locale: string) {
     maximumFractionDigits: 0,
   }).format(0);
 
-  // Remove numeric and non-breaking space characters to extract the currency
-  // symbol
+  /* Remove numeric and non-breaking space characters to extract the currency symbol */
   const { symbol } = separateCurrencyStrParts(formatted);
   return symbol;
 }
diff --git a/packages/core/src/utils/types.ts b/packages/core/src/utils/types.ts
index 82b6fc706..758a4bef8 100644
--- a/packages/core/src/utils/types.ts
+++ b/packages/core/src/utils/types.ts
@@ -39,3 +39,9 @@ export function notNullUndefined<TValue>(
 ): value is TValue {
   return value !== null && value !== undefined;
 }
+
+/* Make specific properties on object optional: */
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+/* Opposite of Partial - make all keys required with NonNullable values */
+export type Complete<T> = { [P in keyof T]-?: NonNullable<T[P]> };
diff --git a/packages/eslint-config/base.js b/packages/eslint-config/base.js
index b3441ca66..a8667b77e 100644
--- a/packages/eslint-config/base.js
+++ b/packages/eslint-config/base.js
@@ -120,8 +120,11 @@ module.exports = {
       env: {
         node: true,
       },
-      excludedFiles: ["**/src/**/*"],
       extends: ["eslint:recommended"],
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
     },
   ],
 };
diff --git a/packages/eslint-config/react-app.js b/packages/eslint-config/react-app.js
index d1a16179d..7e8e59070 100644
--- a/packages/eslint-config/react-app.js
+++ b/packages/eslint-config/react-app.js
@@ -66,8 +66,6 @@ module.exports = {
               "ButtonProps",
               "ButtonRow",
               "ButtonRowContainer",
-              "CardForm",
-              "CardFormTextWithLink",
               "Dropdown",
               "Table",
               "TableCell",
diff --git a/packages/lightspark-cli/package.json b/packages/lightspark-cli/package.json
index 56bd7ed2a..66daa72e9 100644
--- a/packages/lightspark-cli/package.json
+++ b/packages/lightspark-cli/package.json
@@ -50,7 +50,7 @@
     "commander": "^11.0.0",
     "dayjs": "^1.11.7",
     "dotenv": "^16.3.1",
-    "jose": "^4.14.4",
+    "jose": "^4.15.5",
     "jsonwebtoken": "^9.0.1",
     "qrcode-terminal": "^0.12.0",
     "secp256k1": "^5.0.0"
diff --git a/packages/lightspark-sdk/src/env.ts b/packages/lightspark-sdk/src/env.ts
index 08a59d9d0..4b36b86be 100644
--- a/packages/lightspark-sdk/src/env.ts
+++ b/packages/lightspark-sdk/src/env.ts
@@ -39,10 +39,10 @@ export const getCredentialsFromEnvOrThrow = (): EnvCredentials => {
     );
   }
 
-  const apiTokenClientId = env[RequiredCredentials.ClientId]!;
-  const apiTokenClientSecret = env[RequiredCredentials.ClientSecret]!;
+  const apiTokenClientId = env[RequiredCredentials.ClientId];
+  const apiTokenClientSecret = env[RequiredCredentials.ClientSecret];
   const bitcoinNetwork = getBitcoinNetworkOrThrow(
-    env[RequiredCredentials.BitcoinNetwork]! as BitcoinNetwork,
+    env[RequiredCredentials.BitcoinNetwork] as BitcoinNetwork,
   );
   const testNodePassword = "1234!@#$";
   const baseUrl = env["LIGHTSPARK_BASE_URL"] || "api.lightspark.com";
diff --git a/packages/react-native/examples/ReactNativeWallet/components/CurrencyAmount.tsx b/packages/react-native/examples/ReactNativeWallet/components/CurrencyAmount.tsx
deleted file mode 100644
index 4d0911a05..000000000
--- a/packages/react-native/examples/ReactNativeWallet/components/CurrencyAmount.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import {
-  CurrencyAmount as GraphQLCurrencyAmountType,
-  CurrencyUnit,
-} from "@lightsparkdev/wallet-sdk";
-// import { Icon } from "../icons/Icon";
-import {
-  CurrencyMap,
-  formatCurrencyStr,
-  isCurrencyMap,
-  mapCurrencyAmount,
-} from "../utils/currency";
-
-type CurrencyAmountProps = {
-  amount: CurrencyAmountType | CurrencyMap;
-  displayUnit?: CurrencyUnit;
-  shortNumber?: boolean;
-  showUnits?: boolean;
-  ml?: number;
-};
-
-const CurrencyAmount = ({
-  amount,
-  displayUnit = CurrencyUnit.SATOSHI,
-  shortNumber,
-  showUnits = false,
-}: CurrencyAmountProps) => {
-  const amountMap = isCurrencyMap(amount) ? amount : mapCurrencyAmount(amount);
-  const value = amountMap[displayUnit] as number;
-  let formattedNumber = amountMap.formatted[displayUnit];
-  if (shortNumber) {
-    formattedNumber = formatCurrencyStr(
-      { value: Number(value), unit: displayUnit },
-      1,
-      true
-    );
-  }
-  if (showUnits) {
-    formattedNumber += ` ${shorttext(displayUnit, value)}`;
-  }
-
-  return (
-    <>
-      <CurrencyIcon unit={displayUnit} />
-      {formattedNumber}
-    </>
-  );
-};
-
-export const CurrencyIcon = ({ unit }: { unit: CurrencyUnit }) => {
-  switch (unit) {
-    // case CurrencyUnit.BITCOIN:
-    //   return <Icon name="BitcoinB" width={8} verticalAlign={-2} mr={2} />;
-    // case CurrencyUnit.SATOSHI:
-    //   return <Icon name="Satoshi" width={8} verticalAlign={-2} mr={2} />;
-    default:
-      return null;
-  }
-};
-
-const shorttext = (unit: CurrencyUnit, value: number) => {
-  const pl = value !== 1;
-  switch (unit) {
-    case CurrencyUnit.BITCOIN:
-      return "BTC";
-    case CurrencyUnit.MILLIBITCOIN:
-      return "mBTC";
-    case CurrencyUnit.MICROBITCOIN:
-      return "μBTC";
-    case CurrencyUnit.SATOSHI:
-      return `sat${pl ? "s" : ""}`;
-    case CurrencyUnit.MILLISATOSHI:
-      return `msat${pl ? "s" : ""}`;
-  }
-  return unit;
-};
-
-export class ConversionError {
-  message: string;
-
-  constructor(message: string) {
-    this.message = message;
-  }
-}
-
-export type CurrencyAmountType = Omit<
-  GraphQLCurrencyAmountType,
-  | "__typename"
-  | "original_value"
-  | "original_unit"
-  | "preferred_currency_value_rounded"
-  | "preferred_currency_value_approx"
-  | "preferred_currency_unit"
->;
-
-export const valueAsSatoshis = (amount: CurrencyAmountType): number => {
-  switch (amount.originalUnit) {
-    case CurrencyUnit.BITCOIN:
-      return amount.originalValue * 1e8;
-    case CurrencyUnit.SATOSHI:
-      return amount.originalValue;
-    case CurrencyUnit.MILLISATOSHI:
-      return amount.originalValue * 0.001;
-  }
-  throw new ConversionError(`Cannot convert from {amount.unit} to Satoshis`);
-};
-
-export default CurrencyAmount;
diff --git a/packages/react-native/examples/ReactNativeWallet/components/Dashboard.tsx b/packages/react-native/examples/ReactNativeWallet/components/Dashboard.tsx
index 6b9f178e8..c6bec3b21 100644
--- a/packages/react-native/examples/ReactNativeWallet/components/Dashboard.tsx
+++ b/packages/react-native/examples/ReactNativeWallet/components/Dashboard.tsx
@@ -6,7 +6,7 @@ import {
 } from "@lightsparkdev/wallet-sdk";
 import { useState } from "react";
 import { Button, StyleSheet, Text, TextInput, View } from "react-native";
-import CurrencyAmount from "./CurrencyAmount";
+import { CurrencyAmount } from "@lightsparkdev/ui/components/CurrencyAmount";
 
 const Dashboard = ({
   data,
diff --git a/packages/react-native/examples/ReactNativeWallet/package-lock.json b/packages/react-native/examples/ReactNativeWallet/package-lock.json
index 537611369..c34ea744d 100644
--- a/packages/react-native/examples/ReactNativeWallet/package-lock.json
+++ b/packages/react-native/examples/ReactNativeWallet/package-lock.json
@@ -29,22 +29,26 @@
         "@babel/core": "^7.23.5",
         "prettier": "3.1.0",
         "prettier-plugin-organize-imports": "^3.2.4"
+      },
+      "engines": {
+        "node": ">=18"
       }
     },
     "../..": {
       "name": "@lightsparkdev/react-native",
-      "version": "0.2.27",
+      "version": "0.3.10",
       "license": "Apache-2.0",
       "dependencies": {
-        "@lightsparkdev/core": "1.0.12",
-        "@lightsparkdev/ls-react-native-crypto": "0.2.10",
+        "@lightsparkdev/core": "1.0.22",
+        "@lightsparkdev/ls-react-native-crypto": "0.2.11",
+        "@lightsparkdev/wallet-sdk": "0.12.10",
         "auto-bind": "^5.0.1",
         "dayjs": "^1.11.7",
         "expo-secure-store": "~12.3.1"
       },
       "devDependencies": {
         "@lightsparkdev/eslint-config": "*",
-        "@lightsparkdev/tsconfig": "0.0.0",
+        "@lightsparkdev/tsconfig": "0.0.1",
         "eslint": "^8.3.0",
         "eslint-watch": "^8.0.0",
         "jest": "^29.6.2",
@@ -56,15 +60,14 @@
         "typescript": "^5.0.0"
       },
       "engines": {
-        "node": ">=18.17.0"
+        "node": ">=18"
       }
     },
     "../../../core": {
       "name": "@lightsparkdev/core",
-      "version": "1.0.12",
+      "version": "1.0.22",
       "license": "Apache-2.0",
       "dependencies": {
-        "auto-bind": "^5.0.1",
         "crypto-browserify": "^3.12.0",
         "dayjs": "^1.11.7",
         "graphql": "^16.6.0",
@@ -76,14 +79,18 @@
       },
       "devDependencies": {
         "@lightsparkdev/eslint-config": "*",
-        "@lightsparkdev/tsconfig": "0.0.0",
+        "@lightsparkdev/tsconfig": "0.0.1",
         "@types/crypto-js": "^4.1.1",
         "@types/jest": "^29.5.3",
+        "@types/lodash-es": "^4.17.6",
         "@types/secp256k1": "^4.0.3",
+        "@types/text-encoding": "^0.0.36",
         "@types/ws": "^8.5.4",
+        "auto-bind": "^5.0.1",
         "eslint": "^8.3.0",
         "eslint-watch": "^8.0.0",
         "jest": "^29.6.2",
+        "lodash-es": "^4.17.21",
         "prettier": "3.0.3",
         "prettier-plugin-organize-imports": "^3.2.4",
         "ts-jest": "^29.1.1",
@@ -92,12 +99,12 @@
         "typescript": "^5.0.0"
       },
       "engines": {
-        "node": ">=18.17.0"
+        "node": ">=18"
       }
     },
     "../../../ls-react-native-crypto": {
       "name": "@lightsparkdev/ls-react-native-crypto",
-      "version": "0.2.10",
+      "version": "0.2.11",
       "license": "MIT",
       "dependencies": {
         "expo-modules-core": "~1.2.7"
@@ -118,6 +125,9 @@
         "tsc-absolute": "^1.0.1",
         "typescript": "^5.0.0"
       },
+      "engines": {
+        "node": ">=18"
+      },
       "peerDependencies": {
         "expo": "*",
         "react": "*",
@@ -126,17 +136,17 @@
     },
     "../../../react-wallet": {
       "name": "@lightsparkdev/react-wallet",
-      "version": "0.6.39",
+      "version": "0.7.10",
       "license": "Apache-2.0",
       "dependencies": {
-        "@lightsparkdev/core": "1.0.12",
-        "@lightsparkdev/wallet-sdk": "0.11.0",
+        "@lightsparkdev/core": "1.0.22",
+        "@lightsparkdev/wallet-sdk": "0.12.10",
         "auto-bind": "^5.0.1",
         "dayjs": "^1.11.7"
       },
       "devDependencies": {
         "@lightsparkdev/eslint-config": "*",
-        "@lightsparkdev/tsconfig": "0.0.0",
+        "@lightsparkdev/tsconfig": "0.0.1",
         "@types/react": "^18.2.12",
         "eslint": "^8.3.0",
         "eslint-watch": "^8.0.0",
@@ -150,7 +160,7 @@
         "typescript": "^5.0.0"
       },
       "engines": {
-        "node": ">=18.17.0"
+        "node": ">=18"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -159,14 +169,14 @@
     },
     "../../../wallet-sdk": {
       "name": "@lightsparkdev/wallet-sdk",
-      "version": "0.11.0",
+      "version": "0.12.10",
       "license": "Apache-2.0",
       "dependencies": {
-        "@lightsparkdev/core": "1.0.12",
+        "@lightsparkdev/core": "1.0.22",
         "@react-native-async-storage/async-storage": "^1.18.1",
-        "auto-bind": "^5.0.1",
         "crypto-browserify": "^3.12.0",
         "dayjs": "^1.11.7",
+        "dotenv": "^16.3.1",
         "graphql": "^16.6.0",
         "graphql-ws": "^5.11.3",
         "react": "^18.2.0",
@@ -175,10 +185,10 @@
       },
       "devDependencies": {
         "@lightsparkdev/eslint-config": "*",
+        "@types/chrome": "^0.0.254",
         "@types/crypto-js": "^4.1.1",
         "@types/ws": "^8.5.4",
-        "dotenv": "^16.3.1",
-        "dotenv-cli": "^7.3.0",
+        "auto-bind": "^5.0.1",
         "eslint": "^8.3.0",
         "eslint-watch": "^8.0.0",
         "jest": "^29.6.2",
@@ -191,7 +201,7 @@
         "typescript": "^5.0.0"
       },
       "engines": {
-        "node": ">=18.17.0"
+        "node": ">=18"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -9527,6 +9537,20 @@
         "xml2js": "0.6.0"
       }
     },
+    "node_modules/expo-splash-screen/node_modules/@expo/config/node_modules/@expo/config-plugins/node_modules/semver": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/expo-splash-screen/node_modules/@expo/prebuild-config": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/@expo/prebuild-config/-/prebuild-config-6.4.0.tgz",
@@ -10057,9 +10081,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -10816,9 +10840,9 @@
       }
     },
     "node_modules/ip": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
-      "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg=="
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
+      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ=="
     },
     "node_modules/ip-regex": {
       "version": "2.1.0",
@@ -15588,9 +15612,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -17163,9 +17187,9 @@
       }
     },
     "node_modules/webpack-dev-middleware": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
       "dependencies": {
         "colorette": "^2.0.10",
         "memfs": "^3.4.3",
diff --git a/packages/react-native/examples/ReactNativeWallet/package.json b/packages/react-native/examples/ReactNativeWallet/package.json
index f0d3337d2..f2c406f7b 100644
--- a/packages/react-native/examples/ReactNativeWallet/package.json
+++ b/packages/react-native/examples/ReactNativeWallet/package.json
@@ -14,7 +14,8 @@
   "dependencies": {
     "@craftzdog/react-native-buffer": "^6.0.5",
     "@expo/webpack-config": "^18.1.3",
-    "@lightsparkdev/core": "file:../../../core",
+    "@lightsparkdev/core": "1.0.22",
+    "@lightsparkdev/ui": "0.0.13",
     "@lightsparkdev/ls-react-native-crypto": "file:../../../ls-react-native-crypto",
     "@lightsparkdev/react-native": "file:../..",
     "@lightsparkdev/react-wallet": "file:../../../react-wallet",
diff --git a/packages/react-native/examples/ReactNativeWallet/utils/currency.ts b/packages/react-native/examples/ReactNativeWallet/utils/currency.ts
deleted file mode 100644
index 2ba9949af..000000000
--- a/packages/react-native/examples/ReactNativeWallet/utils/currency.ts
+++ /dev/null
@@ -1,483 +0,0 @@
-import {
-  CurrencyAmount,
-  CurrencyUnit,
-} from "@lightsparkdev/wallet-sdk";
-
-const currentLocale = Intl.NumberFormat().resolvedOptions().locale;
-const defaultCurrencyCode = "USD";
-
-type CurrencyLocales = keyof typeof localeToCurrencyCodes;
-export type CurrencyMap = {
-  sats: number;
-  msats: number;
-  btc: number;
-  [CurrencyUnit.BITCOIN]: number;
-  [CurrencyUnit.SATOSHI]: number;
-  [CurrencyUnit.MILLISATOSHI]: number;
-  [CurrencyUnit.MICROBITCOIN]: number;
-  [CurrencyUnit.MILLIBITCOIN]: number;
-  [CurrencyUnit.NANOBITCOIN]: number;
-  [CurrencyUnit.USD]: number;
-  [CurrencyUnit.FUTURE_VALUE]: number;
-  formatted: {
-    sats: string;
-    msats: string;
-    btc: string;
-    [CurrencyUnit.BITCOIN]: string;
-    [CurrencyUnit.SATOSHI]: string;
-    [CurrencyUnit.MILLISATOSHI]: string;
-    [CurrencyUnit.MILLIBITCOIN]: string;
-    [CurrencyUnit.MICROBITCOIN]: string;
-    [CurrencyUnit.NANOBITCOIN]: string;
-    [CurrencyUnit.USD]: string;
-    [CurrencyUnit.FUTURE_VALUE]: string;
-  };
-  isZero: boolean;
-  isLessThan: (other: CurrencyMap) => boolean;
-  isGreaterThan: (other: CurrencyMap) => boolean;
-  isEqualTo: (other: CurrencyMap) => boolean;
-  type: "CurrencyMap";
-};
-export type CurrencyAmountArg =
-  | {
-      /* technically the graphql schema has value as any as value but it returns a number in at least up to 18 or more
-     digits, which is over 100 billion dollars in millisats, so we can safely assume it's a number */
-      value?: number | null;
-      /* assume satoshi if not provided */
-      unit?: CurrencyUnit;
-      __typename?: "CurrencyAmount";
-    }
-  | undefined
-  | null;
-
-/* From https://github.com/tadeegan/locale-currency. For now only USD conversion from
-   BTC is supported by sparkcore, strip additional currency codes from the bundle: */
-const localeToCurrencyCodes = {
-  // AD: "EUR",
-  // AE: "AED",
-  // AF: "AFN",
-  // AG: "XCD",
-  // AI: "XCD",
-  // AL: "ALL",
-  // AM: "AMD",
-  // AO: "AOA",
-  // AR: "ARS",
-  AS: "USD",
-  // AT: "EUR",
-  // AU: "AUD",
-  // AW: "AWG",
-  // AX: "EUR",
-  // AZ: "AZN",
-  // BA: "BAM",
-  // BB: "BBD",
-  // BD: "BDT",
-  // BE: "EUR",
-  // BF: "XOF",
-  // BG: "BGN",
-  // BH: "BHD",
-  // BI: "BIF",
-  // BJ: "XOF",
-  // BL: "EUR",
-  // BM: "BMD",
-  // BN: "BND",
-  // BO: "BOB",
-  BQ: "USD",
-  // BR: "BRL",
-  // BS: "BSD",
-  // BT: "BTN",
-  // BV: "NOK",
-  // BW: "BWP",
-  // BY: "BYN",
-  // BZ: "BZD",
-  // CA: "CAD",
-  // CC: "AUD",
-  // CD: "CDF",
-  // CF: "XAF",
-  // CG: "XAF",
-  // CH: "CHF",
-  // CI: "XOF",
-  // CK: "NZD",
-  // CL: "CLP",
-  // CM: "XAF",
-  // CN: "CNY",
-  // CO: "COP",
-  // CR: "CRC",
-  // CU: "CUP",
-  // CV: "CVE",
-  // CW: "ANG",
-  // CX: "AUD",
-  // CY: "EUR",
-  // CZ: "CZK",
-  // DE: "EUR",
-  // DJ: "DJF",
-  // DK: "DKK",
-  // DM: "XCD",
-  // DO: "DOP",
-  // DZ: "DZD",
-  EC: "USD",
-  // EE: "EUR",
-  // EG: "EGP",
-  // EH: "MAD",
-  // ER: "ERN",
-  // ES: "EUR",
-  // ET: "ETB",
-  // FI: "EUR",
-  // FJ: "FJD",
-  // FK: "FKP",
-  FM: "USD",
-  // FO: "DKK",
-  // FR: "EUR",
-  // GA: "XAF",
-  // GB: "GBP",
-  // GD: "XCD",
-  // GE: "GEL",
-  // GF: "EUR",
-  // GG: "GBP",
-  // GH: "GHS",
-  // GI: "GIP",
-  // GL: "DKK",
-  // GM: "GMD",
-  // GN: "GNF",
-  // GP: "EUR",
-  // GQ: "XAF",
-  // GR: "EUR",
-  // GS: "GBP",
-  // GT: "GTQ",
-  GU: "USD",
-  // GW: "XOF",
-  // GY: "GYD",
-  // HK: "HKD",
-  // HM: "AUD",
-  // HN: "HNL",
-  // HR: "HRK",
-  // HT: "HTG",
-  // HU: "HUF",
-  // ID: "IDR",
-  // IE: "EUR",
-  // IL: "ILS",
-  // IM: "GBP",
-  // IN: "INR",
-  IO: "USD",
-  // IQ: "IQD",
-  // IR: "IRR",
-  // IS: "ISK",
-  // IT: "EUR",
-  // JE: "GBP",
-  // JM: "JMD",
-  // JO: "JOD",
-  // JP: "JPY",
-  // KE: "KES",
-  // KG: "KGS",
-  // KH: "KHR",
-  // KI: "AUD",
-  // KM: "KMF",
-  // KN: "XCD",
-  // KP: "KPW",
-  // KR: "KRW",
-  // KW: "KWD",
-  // KY: "KYD",
-  // KZ: "KZT",
-  // LA: "LAK",
-  // LB: "LBP",
-  // LC: "XCD",
-  // LI: "CHF",
-  // LK: "LKR",
-  // LR: "LRD",
-  // LS: "LSL",
-  // LT: "EUR",
-  // LU: "EUR",
-  // LV: "EUR",
-  // LY: "LYD",
-  // MA: "MAD",
-  // MC: "EUR",
-  // MD: "MDL",
-  // ME: "EUR",
-  // MF: "EUR",
-  // MG: "MGA",
-  MH: "USD",
-  // MK: "MKD",
-  // ML: "XOF",
-  // MM: "MMK",
-  // MN: "MNT",
-  // MO: "MOP",
-  MP: "USD",
-  // MQ: "EUR",
-  // MR: "MRO",
-  // MS: "XCD",
-  // MT: "EUR",
-  // MU: "MUR",
-  // MV: "MVR",
-  // MW: "MWK",
-  // MX: "MXN",
-  // MY: "MYR",
-  // MZ: "MZN",
-  // NA: "NAD",
-  // NC: "XPF",
-  // NE: "XOF",
-  // NF: "AUD",
-  // NG: "NGN",
-  // NI: "NIO",
-  // NL: "EUR",
-  // NO: "NOK",
-  // NP: "NPR",
-  // NR: "AUD",
-  // NU: "NZD",
-  // NZ: "NZD",
-  // OM: "OMR",
-  // PA: "PAB",
-  // PE: "PEN",
-  // PF: "XPF",
-  // PG: "PGK",
-  // PH: "PHP",
-  // PK: "PKR",
-  // PL: "PLN",
-  // PM: "EUR",
-  // PN: "NZD",
-  PR: "USD",
-  // PS: "ILS",
-  // PT: "EUR",
-  PW: "USD",
-  // PY: "PYG",
-  // QA: "QAR",
-  // RE: "EUR",
-  // RO: "RON",
-  // RS: "RSD",
-  // RU: "RUB",
-  // RW: "RWF",
-  // SA: "SAR",
-  // SB: "SBD",
-  // SC: "SCR",
-  // SD: "SDG",
-  // SE: "SEK",
-  // SG: "SGD",
-  // SH: "SHP",
-  // SI: "EUR",
-  // SJ: "NOK",
-  // SK: "EUR",
-  // SL: "SLL",
-  // SM: "EUR",
-  // SN: "XOF",
-  // SO: "SOS",
-  // SR: "SRD",
-  // ST: "STD",
-  // SV: "SVC",
-  // SX: "ANG",
-  // SY: "SYP",
-  // SZ: "SZL",
-  TC: "USD",
-  // TD: "XAF",
-  // TF: "EUR",
-  // TG: "XOF",
-  // TH: "THB",
-  // TJ: "TJS",
-  // TK: "NZD",
-  TL: "USD",
-  // TM: "TMT",
-  // TN: "TND",
-  // TO: "TOP",
-  // TR: "TRY",
-  // TT: "TTD",
-  // TV: "AUD",
-  // TW: "TWD",
-  // TZ: "TZS",
-  // UA: "UAH",
-  // UG: "UGX",
-  UM: "USD",
-  US: "USD",
-  // UY: "UYU",
-  // UZ: "UZS",
-  // VA: "EUR",
-  // VC: "XCD",
-  // VE: "VEF",
-  VG: "USD",
-  VI: "USD",
-  // VN: "VND",
-  // VU: "VUV",
-  // WF: "XPF",
-  // WS: "WST",
-  // YE: "YER",
-  // YT: "EUR",
-  // ZA: "ZAR",
-  // ZM: "ZMW",
-  // ZW: "ZWL",
-};
-
-function getCountryCode(localeString: string) {
-  let components = localeString.split("_");
-  if (components.length === 2) {
-    return components.pop() as string;
-  }
-  components = localeString.split("-");
-  if (components.length === 2) {
-    return components.pop() as string;
-  }
-  return localeString;
-}
-
-function localeToCurrencyCode(locale: string): string {
-  const countryCode = getCountryCode(locale).toUpperCase() as CurrencyLocales;
-  if (countryCode in localeToCurrencyCodes) {
-    return localeToCurrencyCodes[countryCode];
-  }
-  return defaultCurrencyCode;
-}
-
-export const currentLocaleCurrencyCode = localeToCurrencyCode(
-  currentLocale as CurrencyLocales
-);
-
-// Will be returned in CurrencyAmount soon
-export const btcPrice = 19500;
-
-export function mapCurrencyAmount(currencyAmount: CurrencyAmount): CurrencyMap {
-  const { value, unit } = {
-    value: currencyAmount?.originalValue || 0,
-    unit: currencyAmount?.originalUnit || CurrencyUnit.SATOSHI,
-  };
-  let sats = value;
-  let msats = value * 1000;
-  let btc = value / 1e8;
-  let usd = round(btc * btcPrice, 2);
-
-  if (unit === CurrencyUnit.BITCOIN) {
-    sats = value * 1e8;
-    msats = value * 1e11;
-    btc = value;
-    usd = round(btc * btcPrice, 2);
-  } else if (unit === CurrencyUnit.MILLISATOSHI) {
-    sats = value / 1000;
-    msats = value;
-    btc = value / 1e11;
-    usd = round(btc * btcPrice, 2);
-  } else if (unit === CurrencyUnit.USD) {
-    usd = value;
-    btc = value / btcPrice;
-    sats = btc * 1e8;
-    msats = sats * 1000;
-  }
-
-  const mapWithCurrencyUnits = {
-    [CurrencyUnit.BITCOIN]: btc,
-    [CurrencyUnit.SATOSHI]: sats,
-    [CurrencyUnit.FUTURE_VALUE]: sats,
-    [CurrencyUnit.MILLISATOSHI]: msats,
-    [CurrencyUnit.USD]: usd,
-    [CurrencyUnit.MICROBITCOIN]: 0,
-    [CurrencyUnit.MILLIBITCOIN]: 0,
-    [CurrencyUnit.NANOBITCOIN]: 0,
-    formatted: {
-      [CurrencyUnit.BITCOIN]: formatCurrencyStr({
-        value: btc,
-        unit: CurrencyUnit.BITCOIN,
-      }),
-      [CurrencyUnit.SATOSHI]: formatCurrencyStr({
-        value: sats,
-        unit: CurrencyUnit.SATOSHI,
-      }),
-      [CurrencyUnit.FUTURE_VALUE]: formatCurrencyStr({
-        value: sats,
-        unit: CurrencyUnit.SATOSHI,
-      }),
-      [CurrencyUnit.MILLISATOSHI]: formatCurrencyStr({
-        value: msats,
-        unit: CurrencyUnit.MILLISATOSHI,
-      }),
-      [CurrencyUnit.MICROBITCOIN]: "0",
-      [CurrencyUnit.MILLIBITCOIN]: "0",
-      [CurrencyUnit.NANOBITCOIN]: "0",
-      [CurrencyUnit.USD]: formatCurrencyStr({
-        value: usd,
-        unit: CurrencyUnit.USD,
-      }),
-    },
-  };
-
-  return {
-    ...mapWithCurrencyUnits,
-    btc,
-    sats,
-    msats,
-    isZero: msats === 0,
-    isLessThan: (other: CurrencyMap) => msats < other.msats,
-    isGreaterThan: (other: CurrencyMap) => msats > other.msats,
-    isEqualTo: (other: CurrencyMap) => msats === other.msats,
-    formatted: {
-      ...mapWithCurrencyUnits.formatted,
-      btc: mapWithCurrencyUnits.formatted[CurrencyUnit.BITCOIN],
-      sats: mapWithCurrencyUnits.formatted[CurrencyUnit.SATOSHI],
-      msats: mapWithCurrencyUnits.formatted[CurrencyUnit.MILLISATOSHI],
-    },
-    type: "CurrencyMap" as const,
-  };
-}
-
-export const isCurrencyMap = (currencyMap: any): currencyMap is CurrencyMap =>
-  currencyMap && currencyMap.type === "CurrencyMap";
-
-export const abbrCurrencyUnit = (unit: CurrencyUnit) => {
-  switch (unit) {
-    case CurrencyUnit.BITCOIN:
-      return "BTC";
-    case CurrencyUnit.SATOSHI:
-      return "SAT";
-    case CurrencyUnit.MILLISATOSHI:
-      return "MSAT";
-    case CurrencyUnit.USD:
-      return "USD";
-  }
-  return "";
-};
-
-export function formatCurrencyStr(
-  amount: CurrencyAmountArg,
-  maxFractionDigits?: number,
-  compact?: boolean,
-  showBtcSymbol = false,
-  options: Intl.NumberFormatOptions = {}
-) {
-  const num = typeof amount?.value === "number" ? amount.value : 0;
-  const unit = amount?.unit || CurrencyUnit.SATOSHI;
-
-  function getDefaultMaxFractionDigits(defaultDigits: number) {
-    return typeof maxFractionDigits === "undefined"
-      ? compact
-        ? 1
-        : defaultDigits
-      : maxFractionDigits;
-  }
-
-  // Symbol handled by toLocaleString for USD. These rely on the LightsparkIcons font
-  const symbol = !showBtcSymbol
-    ? ""
-    : unit === CurrencyUnit.BITCOIN
-    ? ""
-    : unit === CurrencyUnit.SATOSHI
-    ? ""
-    : "";
-
-  switch (unit) {
-    case CurrencyUnit.BITCOIN:
-    case CurrencyUnit.MILLISATOSHI:
-    case CurrencyUnit.SATOSHI:
-    default:
-      return `${symbol}${num.toLocaleString(currentLocale, {
-        notation: compact ? ("compact" as const) : undefined,
-        maximumFractionDigits: getDefaultMaxFractionDigits(3),
-        ...options,
-      })}`;
-    case CurrencyUnit.USD:
-      return num.toLocaleString(currentLocale, {
-        style: "currency",
-        currency: defaultCurrencyCode,
-        notation: compact ? ("compact" as const) : undefined,
-        maximumFractionDigits: getDefaultMaxFractionDigits(2),
-        ...options,
-      });
-  }
-}
-
-function round(num: number, decimalPlaces = 0) {
-  var p = Math.pow(10, decimalPlaces);
-  var n = num * p * (1 + Number.EPSILON);
-  return Math.round(n) / p;
-}
diff --git a/packages/static/images/lightspark-logo.svg b/packages/static/images/lightspark-logo.svg
new file mode 100644
index 000000000..da641c776
--- /dev/null
+++ b/packages/static/images/lightspark-logo.svg
@@ -0,0 +1,55 @@
+<svg
+  viewBox="0 0 169 34"
+  width="100%"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M44.898 21.7971H39.3337V11.6397H37.8989V23.2049H46.3245V18.0239H44.898V21.7971Z"
+    fill="currentColor"
+  />
+  <path
+    d="M50.796 13.0393H53.8242V21.7971H50.796V23.2049H58.2456V21.7971H55.2591V13.0393H58.2456V11.6397H50.796V13.0393Z"
+    fill="currentColor"
+  />
+  <path
+    d="M70.3 21.7972H67.2217C65.6868 21.7972 65.1445 21.5516 64.9527 21.4125C64.6607 21.1915 64.5189 20.7577 64.5189 20.1275V14.7582C64.5189 14.1116 64.6523 13.645 64.9193 13.4158C65.0778 13.2767 65.545 13.0393 66.838 13.0393H70.8339V11.6315H66.838C65.3948 11.6315 64.4605 11.8689 63.9099 12.3682C63.3676 12.8675 63.0923 13.6696 63.0923 14.75V20.1193C63.0923 20.6267 63.1507 21.0687 63.2675 21.437C63.401 21.8708 63.6513 22.231 64.0183 22.5093C64.352 22.763 64.8025 22.9512 65.3531 23.0576C65.8453 23.1559 66.4793 23.205 67.2301 23.205H71.7349V18.1385H70.3V21.7972Z"
+    fill="currentColor"
+  />
+  <path
+    d="M84.8156 16.7143H78.5506V11.6397H77.1157V23.2049H78.5506V18.1221H84.8156V23.2049H86.2504V11.6397H84.8156V16.7143Z"
+    fill="currentColor"
+  />
+  <path
+    d="M90.7968 13.0393H94.8011V23.2049H96.2359V13.0393H100.24V11.6397H90.7968V13.0393Z"
+    fill="currentColor"
+  />
+  <path
+    d="M110.493 17.0744L106.355 16.2477C106.18 16.215 106.055 16.1659 105.963 16.0677C105.963 16.0677 105.871 15.9613 105.871 15.5602V13.9887C105.871 13.7104 105.963 13.5058 106.163 13.3257C106.372 13.1375 106.655 13.0475 107.056 13.0475H112.011V11.6397H107.056C106.297 11.6397 105.671 11.8607 105.195 12.2863C104.695 12.7283 104.445 13.3012 104.445 13.9887V15.5602C104.445 16.2641 104.612 16.7634 104.962 17.0826C105.262 17.3609 105.646 17.541 106.096 17.631L110.209 18.4577C110.451 18.5068 110.635 18.5968 110.76 18.7278C110.776 18.7441 110.91 18.9078 110.91 19.5463V20.6594C110.91 21.0032 110.801 21.2569 110.568 21.4697C110.326 21.6907 109.992 21.7971 109.55 21.7971H104.069V23.2049H109.55C110.376 23.2049 111.052 22.9675 111.561 22.4928C112.078 22.0099 112.336 21.396 112.336 20.6594V19.5463C112.336 18.7114 112.153 18.1221 111.777 17.7456C111.435 17.4018 111.002 17.1808 110.493 17.0744Z"
+    fill="currentColor"
+  />
+  <path
+    d="M125.233 12.5891C124.958 12.2863 124.574 12.0407 124.091 11.877C123.64 11.7215 123.064 11.6397 122.389 11.6397H117.55V23.2049H118.985V19.4317H122.389C123.064 19.4317 123.64 19.358 124.082 19.2107C124.566 19.047 124.95 18.8178 125.233 18.515C125.509 18.2203 125.701 17.8602 125.809 17.4427C125.901 17.0826 125.943 16.6897 125.943 16.2723V14.8563C125.943 14.4389 125.901 14.046 125.809 13.6777C125.709 13.2603 125.517 12.9001 125.242 12.5891H125.233ZM118.977 13.0393H122.38C122.881 13.0393 123.281 13.0884 123.573 13.1866C123.832 13.2766 124.024 13.383 124.141 13.5222C124.266 13.6613 124.358 13.8332 124.408 14.0296C124.466 14.2752 124.499 14.5535 124.499 14.8481V16.2641C124.499 16.5588 124.466 16.8289 124.408 17.0662C124.358 17.2627 124.274 17.41 124.149 17.5491C124.024 17.6801 123.84 17.7865 123.582 17.8684C123.29 17.9666 122.881 18.0075 122.38 18.0075H118.977V13.0311V13.0393Z"
+    fill="currentColor"
+  />
+  <path
+    d="M139.148 16.436L137.797 13.3012C137.622 12.8919 137.43 12.54 137.23 12.2617C137.021 11.9752 136.612 11.6397 135.82 11.6397H133.901C133.092 11.6397 132.675 11.9752 132.466 12.2535C132.249 12.54 132.066 12.8838 131.899 13.293L130.648 16.4524C130.531 16.7634 130.439 17.0826 130.381 17.4182C130.314 17.7538 130.281 18.1303 130.281 18.5231V23.2131H131.715V19.9146H138.097V23.2131H139.532V18.5231C139.532 18.1303 139.499 17.762 139.432 17.4182C139.365 17.0826 139.274 16.7552 139.157 16.4442L139.148 16.436ZM133.592 13.1129C133.592 13.1129 133.709 13.0393 133.901 13.0393H135.82C135.903 13.0393 136.045 13.0475 136.095 13.1129C136.229 13.3012 136.362 13.5467 136.487 13.8414L137.822 16.9271C137.905 17.1563 137.972 17.41 138.022 17.6719C138.072 17.9257 138.097 18.2039 138.097 18.4986H131.715C131.715 18.1958 131.74 17.9175 131.791 17.6719C131.841 17.41 131.907 17.1645 131.982 16.9517L133.234 13.8087C133.342 13.5304 133.467 13.3012 133.601 13.1129H133.592Z"
+    fill="currentColor"
+  />
+  <path
+    d="M152.462 17.5328C152.462 17.5328 152.496 17.4592 152.512 17.4264C152.696 16.9763 152.796 16.4115 152.796 15.7485V14.4226C152.796 13.6532 152.563 12.9902 152.095 12.4664C151.612 11.9098 150.886 11.6315 149.943 11.6315H144.871V23.1968H146.306V18.7524H151.219C151.795 18.7524 152.212 18.8588 152.446 19.0634C152.663 19.2599 152.771 19.5709 152.771 20.021V23.1968H154.206V20.021C154.206 19.1862 153.939 18.5232 153.422 18.0485C153.163 17.8193 152.846 17.6474 152.471 17.5328H152.462ZM149.943 13.0393C150.444 13.0393 150.802 13.1539 151.011 13.3913C151.244 13.6532 151.353 13.9806 151.353 14.4308V15.7731C151.353 16.346 151.253 16.7798 151.053 17.0581C150.911 17.2627 150.51 17.3773 149.935 17.3773H146.289V13.0475H149.935L149.943 13.0393Z"
+    fill="currentColor"
+  />
+  <path
+    d="M167.629 17.3036C167.153 16.9435 166.477 16.7552 165.61 16.7388L167.854 11.6397H166.294L164.05 16.7388H160.83V11.6397H159.395V23.2049H160.83V18.1466H165.468C166.044 18.1466 166.477 18.2367 166.728 18.4167C166.803 18.4659 167.02 18.6214 167.02 19.227V23.2049H168.454V19.227C168.454 18.3676 168.179 17.721 167.629 17.3036Z"
+    fill="currentColor"
+  />
+  <path
+    d="M14.2652 18.1213H3.94587L18.5197 5.60665L15.6667 11.6716H17.3017L22.7909 0L0 19.5782H13.5811L14.2652 18.1213Z"
+    fill="currentColor"
+  />
+  <path
+    d="M14.3736 14.4218L13.6896 15.8787H24.0089L9.43506 28.3934L12.2881 22.3284H10.653L5.16385 34L27.9548 14.4218H14.3736Z"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/packages/static/package.json b/packages/static/package.json
new file mode 100644
index 000000000..1e9971691
--- /dev/null
+++ b/packages/static/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@lightsparkdev/static",
+  "version": "0.0.0",
+  "private": true,
+  "engines": {
+    "node": ">=18"
+  }
+}
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 9213214e1..4410ebc5e 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -50,8 +50,8 @@
 
 ### Patch Changes
 
-- df7bd3f: - Updates to LightTooltip
-- 20fb70b: - Add Badge, FileInput, LightTooltip, Pill
+- df7bd3f: - Updates to Tooltip
+- 20fb70b: - Add Badge, FileInput, Tooltip, Pill
   - Single character Button should be round
   - Allow "divider" in ButtonRow
 - Updated dependencies [20fb70b]
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 2fe3689fc..6c3a073a3 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -11,7 +11,7 @@ $ npm install @lightsparkdev/ui
 ```
 
 ```jsx
-import { LightsparkProvider, Button } from "@lightsparkdev/ui/components";
+import { LightsparkProvider, Button } from "@lightsparkdev/ui/src/components";
 
 function App() {
   return (
diff --git a/packages/ui/esbuild-svgr-plugin.ts b/packages/ui/esbuild-svgr-plugin.ts
new file mode 100644
index 000000000..2fe3e1610
--- /dev/null
+++ b/packages/ui/esbuild-svgr-plugin.ts
@@ -0,0 +1,54 @@
+/* Originally from https://github.com/kazijawad/esbuild-plugin-svgr. Modified to allow ?url
+   loader to resolve as dataurl instead of as JSX components */
+
+import { transform } from "@svgr/core";
+import { readFile } from "node:fs/promises";
+
+export function svgr(options = {}) {
+  return {
+    name: "svgr",
+    setup(build) {
+      build.onResolve({ filter: /\.svg$/ }, async (args) => {
+        switch (args.kind) {
+          case "import-statement":
+          case "require-call":
+          case "dynamic-import":
+          case "require-resolve":
+            return;
+          default:
+            return {
+              external: true,
+            };
+        }
+      });
+
+      build.onLoad({ filter: /\.svg$/ }, async (args) => {
+        const svg = await readFile(args.path, { encoding: "utf8" });
+
+        if (options.plugins && !options.plugins.includes("@svgr/plugin-jsx")) {
+          options.plugins.push("@svgr/plugin-jsx");
+        } else if (!options.plugins) {
+          options.plugins = ["@svgr/plugin-jsx"];
+        }
+
+        const contents = await transform(
+          svg,
+          { ...options },
+          { filePath: args.path },
+        );
+
+        if (args.suffix === "?url") {
+          return {
+            contents: svg,
+            loader: "dataurl",
+          };
+        }
+
+        return {
+          contents,
+          loader: options.typescript ? "tsx" : "jsx",
+        };
+      });
+    },
+  };
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 50d9f26d4..56fd7164e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -10,6 +10,7 @@
     "./components": "./dist/components/index.js",
     "./components/*": "./dist/components/*.js",
     "./components/": "./dist/components/",
+    "./components/typography": "./dist/components/typography/index.js",
     "./hooks/*": "./dist/hooks/*.js",
     "./hooks": "./dist/hooks/index.js",
     "./icons": "./dist/icons/index.js",
@@ -21,7 +22,22 @@
     "./utils/*": "./dist/utils/*.js",
     "./utils": "./dist/utils/index.js",
     "./static/": "./dist/static/",
-    "./router": "./dist/router.js"
+    "./router": "./dist/router.js",
+    "./src/components": "./src/components/index.js",
+    "./src/components/*": "./src/components/*.js",
+    "./src/components/typography": "./src/components/typography/index.js",
+    "./src/hooks/*": "./src/hooks/*.js",
+    "./src/hooks": "./src/hooks/index.js",
+    "./src/icons": "./src/icons/index.js",
+    "./src/icons/*": "./src/icons/*.js",
+    "./src/styles/*": "./src/styles/*.js",
+    "./src/styles/fonts.css": "./src/styles/fonts.css",
+    "./src/types/*": "./src/types/*.js",
+    "./src/types": "./src/types/index.js",
+    "./src/utils/*": "./src/utils/*.js",
+    "./src/utils": "./src/utils/index.js",
+    "./src/static/": "./src/static/",
+    "./src/router": "./src/router.js"
   },
   "scripts": {
     "build-tsup": "tsup --dts",
@@ -34,28 +50,35 @@
     "lint:fix": "eslint --fix .",
     "lint:watch": "esw . -w --ext .ts,.tsx,.js --color",
     "lint": "eslint .",
-    "test": "node --experimental-vm-modules $(yarn bin jest) --no-cache --runInBand --bail",
+    "test": "echo \"ui package tests are located in apps/examples/ui-test-app\"",
     "types": "yarn tsc",
     "types:watch": "tsc-absolute --watch"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.11",
     "@emotion/css": "^11.11.0",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@lightsparkdev/core": "1.0.22",
+    "@rollup/plugin-url": "^8.0.2",
     "@simbathesailor/use-what-changed": "^2.0.0",
+    "@svgr/core": "^8.1.0",
+    "deepmerge": "^4.3.1",
     "gql": "^1.1.2",
+    "graphql-tag": "^2.12.6",
+    "libphonenumber-js": "^1.11.1",
     "lodash-es": "^4.17.21",
     "nanoid": "^4.0.0",
+    "next": "^13.4.19",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.1.0",
     "react-router-dom": "6.11.2",
     "react-select": "^5.4.0",
     "react-tooltip": "^5.10.1"
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "^11.11.0",
     "@lightsparkdev/eslint-config": "*",
     "@lightsparkdev/tsconfig": "0.0.1",
     "@svgr/plugin-jsx": "^8.1.0",
@@ -81,6 +104,16 @@
     "tsup": "^7.2.0",
     "typescript": "^5.0.0"
   },
+  "madge": {
+    "detectiveOptions": {
+      "ts": {
+        "skipTypeImports": true
+      },
+      "tsx": {
+        "skipTypeImports": true
+      }
+    }
+  },
   "files": [
     "dist/*",
     "CHANGELOG.md"
diff --git a/packages/ui/src/components/Badge.tsx b/packages/ui/src/components/Badge.tsx
index 6d6d00a87..02f141943 100644
--- a/packages/ui/src/components/Badge.tsx
+++ b/packages/ui/src/components/Badge.tsx
@@ -1,22 +1,37 @@
 import styled from "@emotion/styled";
-import { isLight } from "../styles/colors.js";
+import { LabelModerate } from "../components/typography/index.js";
 import { standardBorderRadius } from "../styles/common.js";
+import { getColor, isLight } from "../styles/themes.js";
+
+type BadgeColor = "text" | "danger";
 
 export type BadgeProps = {
   text?: string | undefined;
+  color?: BadgeColor | undefined;
   ml?: 0 | 4 | 6;
   mr?: 0 | 4 | 6;
 };
 
-export function Badge({ text, ml = 0, mr = 0 }: BadgeProps) {
-  return text ? <StyledBadge ml={ml}>{text}</StyledBadge> : null;
+export function Badge({ text, color, ml = 0, mr = 0 }: BadgeProps) {
+  return text ? (
+    <StyledBadge color={color} ml={ml}>
+      <LabelModerate size="Small" color={color}>
+        {text}
+      </LabelModerate>
+    </StyledBadge>
+  ) : null;
 }
 
 export const badgeVPadding = 2;
-const StyledBadge = styled.span<{ ml: number }>`
+const StyledBadge = styled.span<{ color: BadgeColor | undefined; ml: number }>`
   ${standardBorderRadius(4)}
   ${({ ml }) => (ml === 0 ? "" : `margin-left: ${ml}px;`)}
   padding: ${badgeVPadding}px 6px;
-  background-color: ${({ theme }) =>
-    isLight(theme) ? theme.c05Neutral : theme.c15Neutral};
+  background-color: ${({ theme, color }) => {
+    if (color === "danger") {
+      return getColor(theme, "red42a10");
+    } else {
+      return isLight(theme) ? theme.c05Neutral : theme.c15Neutral;
+    }
+  }};
 `;
diff --git a/packages/ui/src/components/Banner/Banner.tsx b/packages/ui/src/components/Banner/Banner.tsx
new file mode 100644
index 000000000..b7fceebf7
--- /dev/null
+++ b/packages/ui/src/components/Banner/Banner.tsx
@@ -0,0 +1,254 @@
+import styled from "@emotion/styled";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useResizeObserver } from "../../hooks/useResizeObserver.js";
+import { Link } from "../../router.js";
+import { bp } from "../../styles/breakpoints.js";
+import { colors } from "../../styles/colors.js";
+import { getColor, type ThemeOrColorKey } from "../../styles/themes.js";
+import { type TypographyTypeKey } from "../../styles/tokens/typography.js";
+import { z } from "../../styles/z-index.js";
+import { type NewRoutesType } from "../../types/index.js";
+import {
+  toReactNodes,
+  type ToReactNodesArgs,
+} from "../../utils/toReactNodes.js";
+import { Icon } from "../Icon/Icon.js";
+import { bannerTiming } from "./constants.js";
+
+type MaxMdContentJustify = "center" | "left";
+
+export type BannerProps<T extends TypographyTypeKey> = {
+  ref?: React.RefObject<HTMLDivElement>;
+  content?: ToReactNodesArgs<T> | undefined;
+  to?: NewRoutesType | null | undefined;
+  color?: ThemeOrColorKey | undefined;
+  bgProgressDuration?: number | undefined;
+  borderProgress?: number | undefined;
+  borderColor?: ThemeOrColorKey | undefined;
+  offsetTop?: number;
+  maxMdContentJustify?: MaxMdContentJustify;
+  onHeightChange?: (height: number) => void;
+  minHeight?: number | "auto" | undefined;
+  hPadding?: number | undefined;
+  right?: ReactNode | undefined;
+  left?: ReactNode | undefined;
+};
+
+export function Banner<T extends TypographyTypeKey>({
+  content,
+  to,
+  color,
+  maxMdContentJustify,
+  offsetTop = 0,
+  onHeightChange,
+  right,
+  left,
+  bgProgressDuration,
+  borderProgress,
+  minHeight = 0,
+  hPadding = 0,
+  borderColor,
+}: BannerProps<T>) {
+  const [width, setWidth] = useState(70);
+  const resizeProps = useMemo(() => ["height" as const], []);
+  const { ref, rect } = useResizeObserver(resizeProps);
+
+  useEffect(() => {
+    if (bgProgressDuration) {
+      setTimeout(() => {
+        setWidth(100);
+      }, 0);
+    }
+  }, [bgProgressDuration]);
+
+  useEffect(() => {
+    if (onHeightChange && typeof rect?.height === "number") {
+      onHeightChange(rect.height);
+    }
+  }, [onHeightChange, rect?.height]);
+
+  let contentNode = null;
+  if (content) {
+    const contentNodes = toReactNodes(content);
+
+    if (to) {
+      contentNode = (
+        <Link<NewRoutesType> to={to}>
+          <BannerFlexInnerContent>
+            {contentNodes}
+            <Icon name="RightArrow" width={12} ml={6} />
+          </BannerFlexInnerContent>
+        </Link>
+      );
+    } else {
+      contentNode = contentNodes;
+    }
+  }
+
+  const innerContent = content ? (
+    <BannerInnerContent
+      isVisible={Boolean(content)}
+      maxMdContentJustify={maxMdContentJustify || "center"}
+      minHeight={minHeight}
+    >
+      {contentNode}
+    </BannerInnerContent>
+  ) : null;
+
+  return (
+    <StyledBanner
+      colorProp={color}
+      borderColor={borderColor}
+      isVisible={Boolean(content)}
+      offsetTop={offsetTop}
+      hasSideContent={Boolean(right || left)}
+      ref={ref}
+      borderProgress={borderProgress}
+      hPadding={hPadding}
+    >
+      {left}
+      {innerContent}
+      {right}
+      {bgProgressDuration && (
+        <BannerGradientBg
+          duration={bgProgressDuration}
+          width={width}
+          isVisible={Boolean(content)}
+        />
+      )}
+    </StyledBanner>
+  );
+}
+
+const BannerInnerContent = styled.div<{
+  isVisible: boolean;
+  maxMdContentJustify: MaxMdContentJustify;
+  minHeight: number | "auto";
+}>`
+  z-index: 1;
+  padding: ${({ isVisible }) => (isVisible ? `0px 17.5px` : "0px")};
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: ${({ minHeight }) =>
+    typeof minHeight === "number" ? `${minHeight}px` : "auto"};
+
+  & > * {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+
+    ${({ maxMdContentJustify }) =>
+      bp.maxMd(
+        maxMdContentJustify ? `justify-content: ${maxMdContentJustify};` : "",
+      )};
+  }
+`;
+
+const StyledBanner = styled.div<{
+  colorProp: ThemeOrColorKey | undefined;
+  isVisible: boolean;
+  offsetTop: number;
+  hasSideContent: boolean;
+  borderProgress: number | undefined;
+  hPadding: number;
+  borderColor: ThemeOrColorKey | undefined;
+}>`
+  position: fixed;
+  left: 0;
+
+  width: 100%;
+  z-index: ${z.notificationBanner};
+  color: ${colors.white};
+  font-weight: 500;
+  background-color: ${({ colorProp, theme }) =>
+    colorProp ? getColor(theme, colorProp) : "none"};
+  display: flex;
+  justify-content: ${({ hasSideContent }) =>
+    hasSideContent ? "space-between" : "center"};
+  align-items: center;
+  padding: ${({ hPadding }) => `0 ${hPadding}px`};
+  ${({ borderColor, theme }) =>
+    borderColor
+      ? `border-bottom: 1px solid ${getColor(theme, borderColor)};`
+      : ""}
+
+  ${({ borderProgress }) => {
+    if (typeof borderProgress === "number") {
+      return `
+        &:before {
+          content: "";
+          position: absolute;
+          left: 0;
+          width: 100%;
+          background-color: #C1C5CD;
+          top: 0;
+          height: 4px;
+          ${bp.sm(`
+            height: 2px;
+            top: initial;
+            bottom: 0;
+          `)}
+        }
+        &:after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: ${borderProgress}%;
+          background-color: #2B66C2;
+          transition: width 0.3s ease-in;
+          top: 0;
+          height: 4px;
+          ${bp.sm(`
+            height: 2px;
+            top: initial;
+            bottom: 0;
+          `)}
+        }
+      `;
+    }
+    return "";
+  }}
+
+  ${bp.sm(`
+    z-index: ${z.smBanner};
+  `)}
+`;
+
+type BannerGradientBgProps = {
+  duration: number;
+  width: number;
+  isVisible: boolean;
+};
+
+const BannerGradientBg = styled.div<BannerGradientBgProps>`
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  width: ${({ width }) => width}%;
+  height: 100%;
+
+  background: linear-gradient(
+    90deg,
+    #000000 -25.9%,
+    #1b4077 14.55%,
+    #a152c7 82.22%,
+    #3f2e7e 115.32%
+  );
+
+  transition: all ${bannerTiming};
+  height: ${({ isVisible }) => (isVisible ? "auto" : "0")}px;
+
+  transition: width ${({ duration }) => duration}s
+    cubic-bezier(0.33, 0.54, 0.47, 0.87);
+`;
+
+const BannerFlexInnerContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/packages/ui/src/components/Banner/constants.ts b/packages/ui/src/components/Banner/constants.ts
new file mode 100644
index 000000000..9fc08f821
--- /dev/null
+++ b/packages/ui/src/components/Banner/constants.ts
@@ -0,0 +1,2 @@
+export const bannerTimingSecs = 0.2;
+export const bannerTiming = `${bannerTimingSecs}s ease`;
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
index af041ed50..fe42daf33 100644
--- a/packages/ui/src/components/Button.tsx
+++ b/packages/ui/src/components/Button.tsx
@@ -1,38 +1,64 @@
 /** @jsxImportSource @emotion/react */
 import type { Theme } from "@emotion/react";
-import { css } from "@emotion/react";
+import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import { uniqueId } from "lodash-es";
-import { Fragment, useRef, type ReactNode } from "react";
+import { Fragment, useRef } from "react";
 import { Link, type RouteParams } from "../router.js";
-import { colors, themeOr, type WithTheme } from "../styles/colors.js";
+import {
+  type AllowedButtonTypographyTypes,
+  type ButtonBorderRadius,
+  type ButtonsThemeKey,
+  type PaddingYKey,
+} from "../styles/buttons.js";
 import { getFocusOutline } from "../styles/common.js";
+import {
+  getBackgroundColor,
+  isThemeOrColorKey,
+  type ThemeOrColorKey,
+  type WithTheme,
+} from "../styles/themes.js";
+import { TokenSize, type TokenSizeKey } from "../styles/tokens/typography.js";
+import { applyTypography } from "../styles/typography.js";
 import { select } from "../utils/emotion.js";
-import { Icon } from "./Icon.js";
-import { LightTooltip } from "./LightTooltip.js";
+import { Icon } from "./Icon/Icon.js";
+import { type IconName } from "./Icon/types.js";
 import { Loading } from "./Loading.js";
+import { Tooltip } from "./Tooltip.js";
 import { UnstyledButton } from "./UnstyledButton.js";
-
-const ButtonSizes = ["sm", "md", "lg"] as const;
-type ButtonSize = (typeof ButtonSizes)[number];
+import { renderTypography } from "./typography/renderTypography.js";
 
 type IconSide = "left" | "right";
 
+export const buttonKinds = [
+  "secondary",
+  "primary",
+  "ghost",
+  "green33",
+  "purple55",
+  "blue43",
+  "blue39",
+  "danger",
+] as const;
+export type ButtonKind = (typeof buttonKinds)[number];
+
 export type ButtonProps<RoutesType extends string> = {
-  backgroundColor?: string | undefined;
-  color?: string | undefined;
-  hoverColor?: string | undefined;
+  kind?: ButtonKind | undefined;
+  typography?: {
+    type?: AllowedButtonTypographyTypes;
+    color?: ThemeOrColorKey;
+  };
+  size?: TokenSizeKey;
+  paddingY?: PaddingYKey | undefined;
   text?: string | undefined;
   disabled?: boolean | undefined;
   id?: string | undefined;
   to?: RoutesType | undefined;
   hash?: string | undefined;
-  href?: string;
+  href?: string | undefined;
+  hrefFilename?: string | undefined;
   toParams?: RouteParams | undefined;
-  primary?: boolean | undefined;
-  ghost?: boolean | undefined;
-  size?: ButtonSize;
-  icon?: string;
+  icon?: IconName | undefined;
   iconSide?: IconSide;
   loading?: boolean | undefined;
   onClick?: (() => void) | undefined;
@@ -40,184 +66,241 @@ export type ButtonProps<RoutesType extends string> = {
   ml?: number;
   fullWidth?: boolean | undefined;
   type?: "button" | "submit";
-  blue?: boolean | undefined;
   newTab?: boolean;
   tooltipText?: string;
   zIndex?: number | undefined;
+  borderRadius?: ButtonBorderRadius | undefined;
 };
 
-type PrimaryProps = WithTheme<{
-  color?: string | undefined;
-  backgroundColor?: string | undefined;
-  primary: boolean;
-  blue: boolean;
-  ghost?: boolean | undefined;
+type ButtonWithThemeProps = WithTheme<{
+  kind: ButtonKind;
 }>;
 
 type PaddingProps = {
-  size: ButtonSize;
+  paddingY: number;
+  size: TokenSizeKey;
   iconSide?: IconSide | undefined;
-  iconWidth?: number;
-  text?: string | undefined;
-  ghost: boolean;
   isRound: boolean;
+  kind: ButtonKind;
 };
 
-type BorderProps = {
-  ghost?: boolean;
-};
-
-function getTextColor({ color, theme, primary, blue }: PrimaryProps) {
-  if (color) {
-    return color;
-  }
-  if (blue) {
-    return colors.white;
-  }
-  if (primary) {
-    const color = theme.hcNeutralFromBg(theme.hcNeutral);
-    return color;
-  }
-  return theme.text;
-}
-
-function getBackgroundColor({
-  backgroundColor,
-  theme,
-  primary,
-  blue,
-  ghost,
-}: PrimaryProps) {
-  if (ghost) {
-    return "none";
-  }
-  if (backgroundColor) {
-    return backgroundColor;
-  }
-  if (blue) {
-    return colors.blue43;
-  }
-  if (primary) {
-    return themeOr(theme.c9Neutral, colors.white)({ theme });
+function getDefaultTextColor({ kind }: ButtonWithThemeProps) {
+  switch (kind) {
+    case "blue43":
+    case "green33":
+    case "purple55":
+    case "danger":
+      return "white";
+    case "blue39":
+      return "gray98";
+    case "primary": {
+      return "bg";
+    }
+    default:
+      return "text";
   }
-  return themeOr(colors.white, theme.c1Neutral)({ theme });
 }
 
-const paddingsY = {
-  lg: 14,
-  md: 9,
-  sm: 6,
-} as const;
-
 const roundPaddingsX = {
-  lg: 19,
-  md: 14,
-  sm: 10,
+  [TokenSize.ExtraSmall]: 10,
+  [TokenSize.Small]: 10,
+  [TokenSize.Schmedium]: 10,
+  [TokenSize.Medium]: 14,
+  [TokenSize.Mlarge]: 19,
+  [TokenSize.Large]: 19,
 } as const;
 
 const paddingsX = {
-  lg: 24,
-  md: 18,
-  sm: 16,
+  [TokenSize.ExtraSmall]: 16,
+  [TokenSize.Small]: 24,
+  [TokenSize.Schmedium]: 24,
+  [TokenSize.Medium]: 24,
+  [TokenSize.Mlarge]: 24,
+  [TokenSize.Large]: 24,
 } as const;
 
-function getPaddingX({
-  size,
-  ghost,
-  isRound,
-}: {
-  size: ButtonSize;
-  ghost?: boolean;
-  isRound: boolean;
-}) {
-  return ghost ? 0 : isRound ? roundPaddingsX[size] : paddingsX[size];
+function getPaddingX(size: TokenSizeKey, kind: ButtonKind, isRound: boolean) {
+  return kind === "ghost"
+    ? 0
+    : isRound
+    ? roundPaddingsX[size]
+    : paddingsX[size];
 }
 
-function getPadding({
-  iconWidth,
-  size,
-  ghost,
-  iconSide,
-  isRound,
-}: PaddingProps) {
-  const paddingY = ghost ? 0 : paddingsY[size];
-  const paddingX = getPaddingX({ size, ghost, isRound });
-  const paddingForIcon = iconWidth && !ghost ? iconWidth : 0;
+function getPadding({ paddingY, kind, size, iconSide, isRound }: PaddingProps) {
+  const paddingX = getPaddingX(size, kind, isRound);
+  const paddingForIcon = 0;
   return `${paddingY}px ${
     paddingX + (iconSide === "right" ? paddingForIcon : 0)
   }px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
 }
 
-function getBorder({ ghost }: BorderProps) {
-  if (ghost) {
-    return "none";
+function resolveBackgroundColorKey(
+  theme: Theme,
+  kind: ButtonKind,
+  defaultKey:
+    | "defaultBackgroundColor"
+    | "defaultHoverBackgroundColor"
+    | "defaultBorderColor"
+    | "defaultHoverBorderColor",
+) {
+  const defaultBackgroundColorKey = theme.buttons.kinds[kind]?.[defaultKey];
+  let backgroundColorKey = defaultBackgroundColorKey;
+  if (!backgroundColorKey && isThemeOrColorKey(kind)) {
+    backgroundColorKey = kind;
   }
-  return "1px solid";
+
+  const defaultBackgroundColor = theme.buttons[defaultKey];
+  const backgroundColor = getBackgroundColor(
+    theme,
+    backgroundColorKey,
+    defaultBackgroundColor,
+  );
+
+  return backgroundColor;
 }
 
-function getInnerBorderColor({
-  backgroundColor,
-  theme,
-  primary,
-  blue,
-}: PrimaryProps) {
-  if (primary || blue || backgroundColor) {
-    return getBackgroundColor({
-      backgroundColor,
-      theme,
-      primary,
-      blue,
-    });
-  }
-  return themeOr(colors.gray90, colors.gray20)({ theme });
+function resolveProp<T, K extends ButtonsThemeKey>(
+  prop: T,
+  kind: ButtonKind,
+  defaultKey: K,
+  theme: Theme,
+) {
+  return (
+    /** props may be unset for a given kind but theme defaults always exist,
+     * so this will always resolve a value: */
+    prop || theme.buttons.kinds[kind]?.[defaultKey] || theme.buttons[defaultKey]
+  );
 }
 
-export function Button<RoutesType extends string>({
-  backgroundColor,
-  color,
-  hoverColor,
-  primary = false,
-  ghost = false,
-  text,
-  to,
-  id,
-  hash,
-  href,
-  toParams,
-  onClick,
-  icon,
-  iconSide = "left",
-  loading = false,
-  fullWidth = false,
-  disabled = false,
-  size = "lg",
-  mt = 0,
-  ml = 0,
-  type = "button",
-  blue = false,
-  newTab = false,
-  zIndex = undefined,
-  tooltipText,
-}: ButtonProps<RoutesType>) {
+function resolveProps<RoutesType extends string>(
+  props: ButtonProps<RoutesType>,
+  theme: Theme,
+) {
+  const {
+    kind = "secondary",
+    size: sizeProp,
+    paddingY: paddingYType = "regular",
+    borderRadius,
+    ...rest
+  } = props;
+
+  const size = resolveProp(sizeProp, kind, "defaultSize", theme);
+  const defaultPaddingsY = resolveProp(null, kind, "defaultPaddingsY", theme);
+  const defaultPaddingY = defaultPaddingsY[size];
+
+  const backgroundColor = resolveBackgroundColorKey(
+    theme,
+    kind,
+    "defaultBackgroundColor",
+  );
+
+  const borderWidth = resolveProp(null, kind, "defaultBorderWidth", theme);
+  const borderColor = resolveBackgroundColorKey(
+    theme,
+    kind,
+    "defaultBorderColor",
+  );
+  const hoverBackgroundColor = resolveBackgroundColorKey(
+    theme,
+    kind,
+    "defaultHoverBackgroundColor",
+  );
+  const hoverBorderColor = resolveBackgroundColorKey(
+    theme,
+    kind,
+    "defaultHoverBorderColor",
+  );
+
+  return {
+    ...rest,
+    kind,
+    size,
+    paddingY:
+      typeof defaultPaddingY === "number"
+        ? defaultPaddingY
+        : defaultPaddingY[paddingYType],
+    borderRadius: resolveProp(borderRadius, kind, "defaultBorderRadius", theme),
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    hoverBackgroundColor,
+    hoverBorderColor,
+  };
+}
+
+export function Button<RoutesType extends string>(
+  props: ButtonProps<RoutesType>,
+) {
+  const theme = useTheme();
+  const {
+    kind,
+    typography,
+    size,
+    paddingY,
+    text,
+    to,
+    id,
+    hash,
+    href,
+    hrefFilename,
+    toParams,
+    onClick,
+    icon,
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    hoverBackgroundColor,
+    hoverBorderColor,
+    iconSide = "left",
+    loading = false,
+    fullWidth = false,
+    disabled = false,
+    mt = 0,
+    ml = 0,
+    type = "button",
+    newTab = false,
+    zIndex = undefined,
+    tooltipText,
+    borderRadius,
+  } = resolveProps(props, theme);
+
   const tooltipId = useRef(uniqueId());
-  const iconMarginRight = 6;
-  const iconSize = size === "lg" ? 16 : 12;
+
+  const fontColor = typography?.color || getDefaultTextColor({ kind, theme });
+  const buttonTypography = {
+    type: typography?.type || theme.buttons.defaultTypography,
+    size,
+    color: fontColor,
+  };
+
+  const iconSize = size === "ExtraSmall" ? 12 : 16;
   let currentIcon = null;
   if (loading) {
     currentIcon = (
-      <ButtonIcon ghost={ghost} iconSide={iconSide} text={text} size={size}>
+      <ButtonIcon
+        iconSide={iconSide}
+        text={text}
+        typography={buttonTypography}
+        kind={kind}
+      >
         <Loading size={iconSize} center={false} />
       </ButtonIcon>
     );
   } else if (icon) {
     currentIcon = (
-      <ButtonIcon ghost={ghost} iconSide={iconSide} text={text} size={size}>
-        <Icon name={icon} width={iconSize} />
+      <ButtonIcon
+        iconSide={iconSide}
+        text={text}
+        typography={buttonTypography}
+        kind={kind}
+      >
+        <Icon name={icon} width={iconSize} color={fontColor} />
       </ButtonIcon>
     );
   }
 
-  const content: ReactNode = (
+  const content = (
     <Fragment>
       <div
         {...(tooltipText ? { "data-tooltip-id": tooltipId.current } : {})}
@@ -225,21 +308,28 @@ export function Button<RoutesType extends string>({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
+          gap: "8px",
         }}
       >
         {iconSide === "left" && currentIcon}
-        <div
-          css={{
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-          }}
-        >
-          {text}
-        </div>
+        {text && (
+          <div
+            css={{
+              textOverflow: "ellipsis",
+              overflow: "hidden",
+            }}
+          >
+            {renderTypography(buttonTypography.type, {
+              content: text,
+              color: buttonTypography.color,
+              size: buttonTypography.size,
+            })}
+          </div>
+        )}
         {iconSide === "right" && currentIcon}
       </div>
       {tooltipText ? (
-        <LightTooltip id={tooltipId.current} content={tooltipText} />
+        <Tooltip id={tooltipId.current} content={tooltipText} />
       ) : null}
     </Fragment>
   );
@@ -248,19 +338,19 @@ export function Button<RoutesType extends string>({
 
   const commonProps = {
     id,
-    backgroundColor,
-    color,
-    hoverColor,
+    kind,
     type,
-    size,
+    typography: buttonTypography,
     onClick,
-    primary,
-    ghost,
     fullWidth,
-    blue,
     iconSide,
+    paddingY,
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    hoverBackgroundColor,
+    hoverBorderColor,
     isRound: isSingleCharRoundButton,
-    iconWidth: currentIcon ? iconSize + iconMarginRight : 0,
     isLoading: loading,
     disabled: disabled || loading,
     css: {
@@ -269,6 +359,7 @@ export function Button<RoutesType extends string>({
     },
     newTab,
     text,
+    borderRadius,
     zIndex,
   };
 
@@ -281,7 +372,12 @@ export function Button<RoutesType extends string>({
   }
 
   return href ? (
-    <ButtonHrefLink {...commonProps} href={href} target="_blank">
+    <ButtonHrefLink
+      {...commonProps}
+      href={href}
+      download={hrefFilename}
+      target="_blank"
+    >
       {content}
     </ButtonHrefLink>
   ) : (
@@ -289,107 +385,110 @@ export function Button<RoutesType extends string>({
   );
 }
 
-type StyledButtonProps = ButtonProps<string> & {
+type StyledButtonProps = {
+  paddingY: number;
+  kind: ButtonKind;
   isLoading: boolean;
-  blue: boolean;
-  primary: boolean;
-  ghost: boolean;
-  iconWidth: number;
   isRound: boolean;
-  size: ButtonSize;
+  typography: {
+    type: AllowedButtonTypographyTypes;
+    size: TokenSizeKey;
+    color: ThemeOrColorKey;
+  };
   disabled: boolean;
   fullWidth: boolean;
+  backgroundColor: string;
+  borderWidth: number;
+  borderColor: string;
+  hoverBackgroundColor: string;
+  hoverBorderColor: string;
   css: { marginTop: string | undefined; marginLeft: string | undefined };
+  borderRadius: ButtonBorderRadius;
+  iconSide: IconSide;
+  zIndex: number | undefined;
 };
 
 const buttonStyle = ({
-  color,
-  backgroundColor,
-  hoverColor,
+  paddingY,
+  kind,
   theme,
-  primary,
-  ghost,
   disabled,
   isLoading,
-  size,
+  typography,
   fullWidth,
-  iconWidth,
-  blue,
-  text,
   zIndex,
   iconSide,
+  borderWidth,
+  borderColor,
   isRound,
-}: StyledButtonProps & { theme: Theme }) => css`
-  display: inline-flex;
-  opacity: ${disabled && !isLoading ? 0.2 : 1};
-  transition: opacity 0.2s;
-  position: relative;
-
-  ${zIndex && `z-index: ${zIndex};`}
-
-  color: ${getTextColor({ color, theme, primary, blue })};
-  font-size: ${["lg", "md"].includes(size) ? "14px" : "12px"};
-  font-weight: 600;
-
-  &:focus-visible {
-    outline: ${getFocusOutline({ theme })};
-  }
-
-  width: ${fullWidth ? "100%" : "fit-content"};
-
-  & > * {
-    width: 100%;
-    text-align: center;
-    white-space: nowrap;
-    background-color: ${getBackgroundColor({
-      backgroundColor,
-      theme,
-      primary,
-      blue,
-      ghost,
-    })};
-    border: ${getBorder({ ghost })};
-    border-color: ${getInnerBorderColor({
-      backgroundColor,
+  borderRadius,
+  backgroundColor,
+  hoverBackgroundColor,
+  hoverBorderColor,
+}: StyledButtonProps & { theme: Theme }) => {
+  return css`
+    display: inline-flex;
+    opacity: ${disabled && !isLoading ? 0.2 : 1};
+    ${disabled ? "pointer-events: none;" : ""}
+    transition: opacity 0.2s;
+    position: relative;
+
+    ${zIndex && `z-index: ${zIndex};`}
+
+    ${applyTypography(
       theme,
-      primary,
-      blue,
-    })};
-    border-radius: ${isRound ? "100%" : "32px"};
-    padding: ${getPadding({
-      size,
-      iconWidth,
-      text,
-      ghost,
-      iconSide,
-      isRound,
-    })};
-    color: ${getTextColor({ color, theme, primary, blue })};
-    transition:
-      background-color 0.2s ease-out,
-      border-color 0.2s ease-out;
-
-    &:hover {
-      ${hoverColor && ghost
-        ? ""
-        : `background-color: ${hoverColor}; border-color: ${hoverColor};`}
+      typography.type,
+      typography.size,
+      typography.color,
+    )}
+
+    &:focus-visible {
+      outline: ${getFocusOutline({ theme })};
+      /* Slightly different offset for buttons so the outline is visible: */
+      outline-offset: 0px;
     }
-  }
-`;
+
+    width: ${fullWidth ? "100%" : "fit-content"};
+
+    & > * {
+      width: 100%;
+      text-align: center;
+      white-space: nowrap;
+      background-color: ${backgroundColor};
+      border: ${borderWidth}px solid;
+      border-color: ${borderColor};
+      border-radius: ${isRound ? "100%" : `${borderRadius}px`};
+      padding: ${getPadding({
+        paddingY,
+        kind,
+        size: typography.size,
+        iconSide,
+        isRound,
+      })};
+      transition:
+        background-color 0.2s ease-out,
+        border-color 0.2s ease-out;
+
+      &:hover {
+        background-color: ${hoverBackgroundColor};
+        border-color: ${hoverBorderColor};
+      }
+    }
+  `;
+};
 
 interface ButtonIconProps {
-  ghost: boolean;
+  typography: {
+    size: TokenSizeKey;
+  };
   iconSide?: IconSide | undefined;
   text?: string | undefined;
-  size: ButtonSize;
+  kind: ButtonKind;
 }
 
 const ButtonIcon = styled.div<ButtonIconProps>`
-  ${(props) => (props.ghost ? "" : "position: absolute;")}
-  ${({ iconSide, ghost, text, size }) =>
-    `${iconSide}: ${
-      ghost && text ? 0 : getPaddingX({ size, ghost, isRound: false })
-    }px;`}
+  ${({ iconSide, kind, typography }) =>
+    `${iconSide}: ${getPaddingX(typography.size, kind, false)}px;`}
 `;
 
 export const StyledButton = styled(UnstyledButton)<StyledButtonProps>`
diff --git a/packages/ui/src/components/CardPage.tsx b/packages/ui/src/components/CardPage.tsx
index 43ad45606..3f11da3b3 100644
--- a/packages/ui/src/components/CardPage.tsx
+++ b/packages/ui/src/components/CardPage.tsx
@@ -2,7 +2,6 @@
 import styled from "@emotion/styled";
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import { bp, useBreakpoints } from "../styles/breakpoints.js";
-import { themeOr } from "../styles/colors.js";
 import {
   cardBorderRadiusPx,
   darkGradientBg,
@@ -11,6 +10,7 @@ import {
   standardCardShadow,
   standardContentInset,
 } from "../styles/common.js";
+import { themeOr } from "../styles/themes.js";
 import { Heading } from "../styles/type.js";
 import {
   flexCenter,
diff --git a/packages/ui/src/components/Checkbox.tsx b/packages/ui/src/components/Checkbox.tsx
new file mode 100644
index 000000000..b887c514d
--- /dev/null
+++ b/packages/ui/src/components/Checkbox.tsx
@@ -0,0 +1,81 @@
+import styled from "@emotion/styled";
+import { standardLineHeightEms } from "@lightsparkdev/ui/src/styles/common";
+import CheckmarkUrl from "../static/images/Checkmark.svg?url";
+
+export type CheckboxProps = {
+  checked: boolean;
+  onChange: (newValue: boolean) => void;
+  id?: string;
+  label?: string;
+  mt?: number;
+  alignItems?: "center" | "flex-start";
+  disabled?: boolean;
+};
+
+export function Checkbox({
+  checked,
+  onChange,
+  id,
+  label,
+  mt = 0,
+  alignItems = "center",
+  disabled = false,
+}: CheckboxProps) {
+  return (
+    <CheckboxContainer mt={mt} alignItems={alignItems}>
+      <StyledCheckbox
+        id={id}
+        type="checkbox"
+        checked={checked}
+        onChange={() => onChange(!checked)}
+        disabled={disabled}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            onChange(!checked);
+          }
+        }}
+      />
+      {label && <CheckboxLabel htmlFor={id}>{label}</CheckboxLabel>}
+    </CheckboxContainer>
+  );
+}
+
+const StyledCheckbox = styled.input<{ checked: boolean; disabled: boolean }>`
+  margin: 0;
+  cursor: pointer;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  /* min-width needed when in flex container: */
+  min-width: 18px;
+  border-radius: 2.25px;
+  ${({ checked, theme }) => !checked && `border: 1px solid ${theme.mcNeutral};`}
+  background-color: ${({ theme, checked }) =>
+    checked ? theme.info : theme.bg};
+  background-image: ${({ checked }) =>
+    checked ? `url("${CheckmarkUrl}");` : "none;"}
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 9px auto;
+  ${({ disabled }) => disabled && "opacity: 0.2;"}
+`;
+
+export const CheckboxContainer = styled.span<{
+  mt: number;
+  alignItems: string;
+}>`
+  display: flex;
+  margin-top: ${({ mt }) => mt}px;
+  align-items: ${({ alignItems }) => alignItems};
+
+  & + & {
+    margin-top: 12px;
+  }
+`;
+
+const CheckboxLabel = styled.label`
+  margin-left: 12px;
+  cursor: pointer;
+  height: ${standardLineHeightEms}em;
+`;
diff --git a/packages/ui/src/components/CodeBlock.tsx b/packages/ui/src/components/CodeBlock.tsx
index ebcde3eab..f41fad60d 100644
--- a/packages/ui/src/components/CodeBlock.tsx
+++ b/packages/ui/src/components/CodeBlock.tsx
@@ -15,8 +15,9 @@ import "prismjs/themes/prism-tomorrow.css";
 import { useLayoutEffect } from "react";
 import type { StylesConfig } from "react-select";
 import Select from "react-select";
-import { colors, themeOr } from "../styles/colors.js";
+import { colors } from "../styles/colors.js";
 import { standardBorderRadius } from "../styles/common.js";
+import { themeOr } from "../styles/themes.js";
 import { overflowAutoWithoutScrollbars } from "../styles/utils.js";
 import { CopyToClipboardButton } from "./CopyToClipboardButton.js";
 
diff --git a/packages/ui/src/components/CodeInput/CodeInput.tsx b/packages/ui/src/components/CodeInput/CodeInput.tsx
new file mode 100644
index 000000000..01aa0b259
--- /dev/null
+++ b/packages/ui/src/components/CodeInput/CodeInput.tsx
@@ -0,0 +1,440 @@
+import type { SerializedStyles } from "@emotion/react";
+import styled from "@emotion/styled";
+import { isNumber } from "lodash-es";
+import { nanoid } from "nanoid";
+import type {
+  ClipboardEvent,
+  KeyboardEvent,
+  MutableRefObject,
+  Ref,
+} from "react";
+import { createRef, useCallback, useRef, useState } from "react";
+import { isChrome, isMobile, isMobileSafari } from "react-device-detect";
+import { textInputBorderColor } from "../../styles/fields.js";
+import { SingleCodeInput } from "./SingleCodeInput.js";
+
+type InputState = {
+  [inputId: string]: {
+    value: string;
+  };
+};
+
+export type OnSubmitCode = (code: string) => void;
+export type OnChangeCode = (code: string) => void;
+type CodeInputProps = {
+  onChange?: OnChangeCode | undefined;
+  onSubmit?: OnSubmitCode | undefined;
+  codeLength?: number;
+  inputCSS?: SerializedStyles;
+  autoFocus?: boolean;
+  onBlur?: (() => void) | undefined;
+};
+
+function codeFromInputState(inputState: InputState): string {
+  return Object.values(inputState)
+    .map((input) => input.value)
+    .join("");
+}
+
+type InputRefs = Record<string, MutableRefObject<HTMLInputElement | null>>;
+
+function getRef(key: string | undefined, refsObj: Ref<InputRefs>) {
+  if (key && refsObj && typeof refsObj === "object" && refsObj.current) {
+    const ref = refsObj.current[key];
+    if (
+      ref &&
+      typeof ref === "object" &&
+      ref.current &&
+      ref.current instanceof HTMLInputElement
+    ) {
+      return ref.current;
+    }
+  }
+  return null;
+}
+
+export function CodeInput({
+  codeLength = 8,
+  onChange,
+  onSubmit,
+  inputCSS,
+  autoFocus = true,
+  onBlur,
+}: CodeInputProps): JSX.Element {
+  const componentId = useRef(nanoid(5));
+  const inputRefs = useRef<InputRefs>({});
+  const autofillValuesRef = useRef("");
+
+  const getInputId = useCallback((index: number) => {
+    const idPrefix = `two-factor-input-${componentId.current}-`;
+    return `${idPrefix}-${index}`;
+  }, []);
+
+  function getInputIndex(id: string) {
+    return Number.parseInt(id.charAt(id.length - 1), 10);
+  }
+
+  const firstFieldRefCb = useCallback(
+    (ref: HTMLInputElement | null) => {
+      if (ref) {
+        inputRefs.current[ref.id] = createRef();
+        inputRefs.current[ref.id].current = ref;
+        if (ref.id === getInputId(0) && autoFocus) {
+          ref.focus();
+        }
+      }
+    },
+    [getInputId, autoFocus],
+  );
+
+  const [inputState, setInputState] = useState<InputState>(
+    Array(codeLength)
+      .fill(0)
+      .reduce((acc, item, i) => {
+        return {
+          ...acc,
+          [getInputId(i)]: {
+            value: "",
+          },
+        } as InputState;
+      }, {}) as InputState,
+  );
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>, inputId: string) => {
+      const handleKeys = new Set([
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+        "Enter",
+        "Escape",
+        "Backspace",
+        "Delete",
+        "ArrowLeft",
+        "ArrowRight",
+      ]);
+
+      if (["e", "E", "+", "-", "."].includes(event.key)) {
+        event.preventDefault();
+        return;
+      }
+
+      if (!handleKeys.has(event.key)) {
+        return;
+      }
+
+      let replaceEntireState: false | InputState = false;
+      const currentInputIndex = getInputIndex(inputId);
+      const isFirstInput = currentInputIndex === 0;
+      const isLastInput = currentInputIndex === codeLength - 1;
+      const nextInputIndex = isLastInput ? undefined : currentInputIndex + 1;
+      const prevInputIndex = isFirstInput ? undefined : currentInputIndex - 1;
+
+      const nextInputId = isNumber(nextInputIndex)
+        ? getInputId(nextInputIndex)
+        : undefined;
+      const prevInputId = isNumber(prevInputIndex)
+        ? getInputId(prevInputIndex)
+        : undefined;
+      const nextInput = nextInputId ? inputState[nextInputId] : undefined;
+      const prevInput = prevInputId ? inputState[prevInputId] : undefined;
+
+      const currentInputRef = getRef(inputId, inputRefs);
+      const nextInputRef = getRef(nextInputId, inputRefs);
+      const prevInputRef = getRef(prevInputId, inputRefs);
+      const firstInputRef = getRef(getInputId(0), inputRefs);
+      const lastInputRef = getRef(getInputId(codeLength - 1), inputRefs);
+
+      if (event.key === "ArrowLeft") {
+        if (firstInputRef && (event.metaKey || event.ctrlKey || event.altKey)) {
+          firstInputRef.focus();
+          return;
+        }
+
+        if (prevInput && prevInputRef) {
+          prevInputRef.focus();
+          prevInputRef.select();
+        }
+        return;
+      }
+
+      if (event.key === "ArrowRight") {
+        if (lastInputRef && (event.metaKey || event.ctrlKey || event.altKey)) {
+          lastInputRef.focus();
+          return;
+        }
+
+        if (nextInput && nextInputRef) {
+          nextInputRef.focus();
+          nextInputRef.select();
+        }
+        return;
+      }
+
+      if (event.key === "Enter" && onSubmit) {
+        const code = codeFromInputState(inputState);
+        onSubmit(code);
+        return;
+      }
+
+      if (event.key === "Escape" && currentInputRef) {
+        currentInputRef.blur();
+        return;
+      }
+
+      if (
+        event.key === "Backspace" &&
+        (event.metaKey || event.ctrlKey || event.altKey)
+      ) {
+        // clear all inputs
+        replaceEntireState = { ...inputState };
+        Object.keys(replaceEntireState).forEach((inputId) => {
+          const newState = replaceEntireState as InputState;
+          newState[inputId] = {
+            ...newState[inputId],
+            value: "",
+          };
+        });
+      }
+
+      let value = event.key;
+      if (
+        event.key === "Backspace" &&
+        !event.metaKey &&
+        !event.ctrlKey &&
+        !event.altKey
+      ) {
+        value = "";
+        if (!isFirstInput && prevInput && prevInputRef) {
+          prevInputRef.focus();
+        }
+      } else if (event.key === "Delete") {
+        value = "";
+        if (!isLastInput && nextInput && nextInputRef) {
+          nextInputRef.focus();
+        }
+      } else if (replaceEntireState) {
+        // focus the last index with a value
+        const lastInputWithValue = Object.entries(replaceEntireState)
+          .reverse()
+          .find(([, { value }]) => value !== "");
+        if (lastInputWithValue) {
+          const inputId = lastInputWithValue[0];
+          const inputRef = getRef(inputId, inputRefs);
+          inputRef?.focus();
+          inputRef?.select();
+        } else if (firstInputRef) {
+          firstInputRef.focus();
+        }
+      } else if (isLastInput) {
+        /*
+         * Focus gets weird here if we do this - probably more conventional to
+         * just leave the last input focused.
+         * Otherwise we could do something to focus the next focusable element
+         * to ensure tabbing back works properly. Comment out for now:
+         */
+        // currentInputRef.current.blur();
+      } else if (nextInput && nextInputRef) {
+        nextInputRef.focus();
+        nextInputRef.select();
+      }
+
+      const newState = replaceEntireState
+        ? replaceEntireState
+        : {
+            ...inputState,
+            [inputId]: { value },
+          };
+      const code = codeFromInputState(newState);
+      if (onChange) {
+        onChange(code);
+      }
+      setInputState(newState);
+    },
+    [onChange, setInputState, onSubmit, getInputId, inputState, codeLength],
+  );
+
+  const onPasteCb = useCallback(
+    (event: ClipboardEvent<HTMLInputElement>) => {
+      event.preventDefault();
+      const rawText = event.clipboardData.getData("text");
+      const text = rawText?.replace(/[\s.]/g, "");
+      if (!text || Number.isNaN(Number.parseInt(text))) {
+        return;
+      }
+      const inputValues = text.split("");
+      const newState = { ...inputState };
+      inputValues.forEach((value, i) => {
+        const inputId = getInputId(i);
+        newState[inputId] = {
+          ...newState[inputId],
+          value,
+        };
+      });
+
+      // focus the last index with a value
+      const firstInputRef = getRef(getInputId(0), inputRefs);
+      const lastInputWithValue = Object.entries(newState)
+        .reverse()
+        .find(([, { value }]) => value !== "");
+      if (lastInputWithValue) {
+        const inputId = lastInputWithValue[0];
+        const inputRef = getRef(inputId, inputRefs);
+        inputRef?.focus();
+        inputRef?.select();
+      } else if (firstInputRef) {
+        firstInputRef.focus();
+      }
+
+      const code = codeFromInputState(newState);
+      if (onChange) {
+        onChange(code);
+      }
+      setInputState(newState);
+    },
+    [getInputId, inputState, onChange, setInputState],
+  );
+
+  const onBlurCb = useCallback(() => {
+    /**
+     * Need to move to the bottom of the stack to wait for the next focus event
+     * to potentially fire on another input
+     */
+    setTimeout(() => {
+      let hasCodeFocused = false;
+      if (inputRefs.current) {
+        Object.values(inputRefs.current).forEach((ref) => {
+          if (ref && ref.current && ref.current === document.activeElement) {
+            hasCodeFocused = true;
+          }
+        });
+        if (!hasCodeFocused && onBlur) {
+          onBlur();
+        }
+      }
+    }, 0);
+  }, [onBlur]);
+
+  const inputsPerGroup = Math.ceil(codeLength / 2);
+
+  const inputs = [];
+  for (let i = 0; i < codeLength; i += 1) {
+    const inputId = getInputId(i);
+    inputs.push(
+      <SingleCodeInput
+        value={inputState[inputId].value}
+        id={inputId}
+        key={inputId}
+        inputRef={firstFieldRefCb}
+        onPaste={onPasteCb}
+        onKeyDown={(event) => onKeyDown(event, inputId)}
+        onChange={(event) => {
+          if (isMobileSafari && event.nativeEvent instanceof CustomEvent) {
+            /*
+             * Assume iOS Safari autofill event - when autosubmitting an SMS
+             * code for example from iOS
+             * the event type is CustomEvent whereas normal inputs are
+             * InputEvent types. Mobile Safari sends each autofill digit as a
+             * separate CustomEvent
+             */
+            autofillValuesRef.current += event.target.value;
+            if (autofillValuesRef.current.length === codeLength) {
+              const newState = Array(codeLength)
+                .fill(0)
+                .reduce((acc, item, i) => {
+                  return {
+                    ...acc,
+                    [getInputId(i)]: {
+                      value: autofillValuesRef.current[i],
+                    },
+                  } as InputState;
+                }, {}) as InputState;
+              setInputState(newState);
+              if (onSubmit) {
+                onSubmit(autofillValuesRef.current);
+              }
+              autofillValuesRef.current = "";
+            }
+          } else if (
+            isMobile &&
+            isChrome &&
+            event.target.value.length === codeLength
+          ) {
+            /*
+             * Assume mobile Chrome autofill event - for some reason the event
+             * type is InputEvent vs Safari it is CustomEvent,
+             * also all digits are submitted at once vs one by one for Safari.
+             * This is the same both for iOS and android Pixel so far based on
+             * testing
+             */
+            const newState = Array(codeLength)
+              .fill(0)
+              .reduce((acc, item, i) => {
+                return {
+                  ...acc,
+                  [getInputId(i)]: {
+                    value: event.target.value[i],
+                  },
+                } as InputState;
+              }, {}) as InputState;
+            setInputState(newState);
+            if (onSubmit) {
+              onSubmit(event.target.value);
+            }
+          }
+        }}
+        type="number"
+        ariaLabel={`Code input ${i + 1} of ${codeLength}`}
+        cssProp={inputCSS}
+        onBlur={onBlurCb}
+        width={`${(100 / inputsPerGroup).toFixed(2)}%`}
+        max={9}
+      />,
+    );
+  }
+
+  return (
+    <StyledCodeInput>
+      <CodeInputGroup>{inputs.slice(0, inputsPerGroup)}</CodeInputGroup>
+      <CodeInputGroupSeparator />
+      <CodeInputGroup>
+        {inputs.slice(inputsPerGroup, inputs.length)}
+      </CodeInputGroup>
+    </StyledCodeInput>
+  );
+}
+
+export const StyledCodeInput = styled.div`
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+`;
+
+const separatorWidth = 12;
+const separatorMargin = 8;
+
+const CodeInputGroup = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  width: calc(50% - ${(separatorWidth + separatorMargin * 2) / 2}px);
+`;
+
+const CodeInputGroupSeparator = styled.div`
+  width: ${separatorWidth}px;
+  height: 4px;
+  background-color: ${textInputBorderColor};
+  border-radius: 2px;
+  margin: 0 ${separatorMargin}px;
+`;
diff --git a/packages/ui/src/components/CodeInput/SingleCodeInput.tsx b/packages/ui/src/components/CodeInput/SingleCodeInput.tsx
new file mode 100644
index 000000000..e82cd45b1
--- /dev/null
+++ b/packages/ui/src/components/CodeInput/SingleCodeInput.tsx
@@ -0,0 +1,121 @@
+import type { SerializedStyles } from "@emotion/react";
+import { css, useTheme } from "@emotion/react";
+import type {
+  ChangeEvent,
+  ClipboardEvent,
+  HTMLInputTypeAttribute,
+  KeyboardEvent,
+  Ref,
+} from "react";
+import { textInputStyle } from "../../styles/fields.js";
+
+type CounterProps = {
+  id?: string;
+  maxLength?: number;
+  onChange?: (
+    event: ChangeEvent<HTMLInputElement>,
+    id: string | undefined,
+  ) => void;
+  value?: string;
+  inputRef?: Ref<HTMLInputElement>;
+  onKeyUp?: (
+    event: KeyboardEvent<HTMLInputElement>,
+    id: string | undefined,
+  ) => void;
+  onKeyDown?: (
+    event: KeyboardEvent<HTMLInputElement>,
+    id: string | undefined,
+  ) => void;
+  onPaste?: (event: ClipboardEvent<HTMLInputElement>) => void;
+  max?: number;
+  type: HTMLInputTypeAttribute;
+  ariaLabel?: string;
+  cssProp?: SerializedStyles | undefined;
+  disabled?: boolean;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  width: string;
+};
+
+const defaultWidth = "42px";
+const vPadding = 15;
+
+export function SingleCodeInput({
+  id,
+  maxLength,
+  onChange = () => {},
+  value,
+  inputRef = null,
+  onKeyUp = () => {},
+  onKeyDown = () => {},
+  onPaste = () => {},
+  type,
+  max,
+  cssProp,
+  ariaLabel,
+  disabled,
+  onBlur,
+  width = defaultWidth,
+}: CounterProps): JSX.Element {
+  const theme = useTheme();
+  const defaultCSS = css(
+    `
+      ${
+        textInputStyle({
+          theme,
+          disabled: Boolean(disabled),
+          hasError: false,
+        }).styles
+      }
+      width: ${width};
+      max-width: ${defaultWidth};
+      padding: ${vPadding}px 0px;
+      text-align: center;
+      &:not(:last-of-type):not(:focus-visible) {
+        border-right: none;
+      }
+      &:not(:first-of-type):not(:last-of-type) {
+        border-radius: 0;
+      }
+      &:first-of-type {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      &:last-of-type {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+      &:focus,
+      &:active {
+        padding: ${vPadding - 1}px 0px !important;
+      }
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        display: none;
+        margin: 0;
+      }
+      -moz-appearance:textfield; /* Firefox */
+    `,
+    cssProp,
+  );
+
+  return (
+    <input
+      id={id}
+      maxLength={maxLength}
+      onChange={(event) => onChange(event, id)}
+      value={value}
+      ref={inputRef}
+      type={type}
+      aria-label={ariaLabel}
+      onKeyUp={(event) => onKeyUp(event, id)}
+      onKeyDown={(event) => onKeyDown(event, id)}
+      onPaste={(event) => onPaste(event)}
+      max={max}
+      css={defaultCSS}
+      onBlur={onBlur}
+      inputMode="numeric"
+      pattern="[0-9]*"
+    />
+  );
+}
diff --git a/packages/ui/src/components/Collapsible.tsx b/packages/ui/src/components/Collapsible.tsx
index e3655332f..b6abb675a 100644
--- a/packages/ui/src/components/Collapsible.tsx
+++ b/packages/ui/src/components/Collapsible.tsx
@@ -3,7 +3,8 @@ import { useEffect, useState } from "react";
 import { standardBorderRadius } from "../styles/common.js";
 import { Spacing } from "../styles/tokens/spacing.js";
 import { overflowAutoWithoutScrollbars } from "../styles/utils.js";
-import { Icon } from "./Icon.js";
+import { Icon } from "./Icon/Icon.js";
+import { type IconName } from "./Icon/types.js";
 
 type CollapsibleProps = {
   children: React.ReactNode;
@@ -12,7 +13,8 @@ type CollapsibleProps = {
   color?: string;
   open?: boolean | undefined;
   handleToggle?: (open: boolean) => void | undefined;
-  hamburger?: boolean | undefined;
+  openIcon?: IconName | undefined;
+  closeIcon?: IconName | undefined;
   /**
    * Opens the collapsible to full screen height if true.
    */
@@ -34,7 +36,8 @@ export function Collapsible({
   color,
   open,
   handleToggle,
-  hamburger,
+  openIcon,
+  closeIcon,
   full,
   buttonTextElement,
   contentIndent = true,
@@ -52,7 +55,8 @@ export function Collapsible({
     setIsOpen(open);
   }, [open]);
 
-  const iconName = hamburger ? (isOpen ? "Close" : "StackedLines") : "Down";
+  const iconName =
+    openIcon && closeIcon ? (isOpen ? closeIcon : openIcon) : "Chevron";
   // This is a one-off because the close svg is much larger in comparison to
   // the designs
   const iconWidth = iconName === "Close" ? 12 : 14;
@@ -68,7 +72,10 @@ export function Collapsible({
     <StyledCollapsible className={className}>
       <StyledCollapsibleButton onClick={handleClick}>
         {textElement}
-        <IconContainer isOpen={isOpen} hamburger={hamburger}>
+        <IconContainer
+          isOpen={isOpen}
+          useCustomIcon={openIcon !== undefined && closeIcon !== undefined}
+        >
           <Icon width={iconWidth} name={iconName} />
         </IconContainer>
       </StyledCollapsibleButton>
@@ -98,10 +105,10 @@ export const StyledCollapsibleButton = styled.button`
 
 const IconContainer = styled.div<{
   isOpen?: boolean | undefined;
-  hamburger?: boolean | undefined;
+  useCustomIcon?: boolean | undefined;
 }>`
   ${(props) => {
-    if (props.hamburger) {
+    if (props.useCustomIcon) {
       return;
     }
     return props.isOpen
diff --git a/packages/ui/src/components/CommaNumberInput.tsx b/packages/ui/src/components/CommaNumberInput.tsx
new file mode 100644
index 000000000..dcbf13bf6
--- /dev/null
+++ b/packages/ui/src/components/CommaNumberInput.tsx
@@ -0,0 +1,131 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+import { clamp } from "@lightsparkdev/core";
+import type { ReactElement } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  addCommasToDigits,
+  removeChars,
+  removeCommas,
+  removeLeadingZeros,
+} from "../utils/strings.js";
+import { TextInput, type TextInputProps } from "./TextInput.js";
+
+export type CommaNumberInputProps = Omit<TextInputProps, "onChange"> & {
+  onChange: (newValue: string) => void;
+  maxValue?: number | undefined;
+};
+
+export function CommaNumberInput(props: CommaNumberInputProps): ReactElement {
+  const { onChange, value, ...rest } = props;
+  const inputRef: React.MutableRefObject<HTMLInputElement | null> =
+    useRef<HTMLInputElement | null>(null);
+  const cursorIndex = useRef<number | null>(null);
+  const [valueWithCommas, setValueWithCommas] = useState(value);
+
+  const handleOnChange = useCallback(
+    (newValue: string, event: React.ChangeEvent<HTMLInputElement> | null) => {
+      event?.preventDefault();
+      if (!inputRef.current) {
+        return;
+      }
+      const existingCommasRemoved = removeCommas(newValue);
+      const validInputChange = existingCommasRemoved.match(/^\d*$/);
+      if (validInputChange && validInputChange[0] !== value) {
+        onChange(existingCommasRemoved);
+        const leadingZerosRemoved = removeLeadingZeros(existingCommasRemoved);
+        const newValueWithCommas = addCommasToDigits(leadingZerosRemoved);
+        const diff = newValueWithCommas.length - valueWithCommas.length;
+        if (diff) {
+          cursorIndex.current =
+            (inputRef.current.selectionStart || 0) + (diff > 1 ? 1 : 0);
+        }
+      }
+    },
+    [onChange, valueWithCommas, value],
+  );
+
+  useEffect(() => {
+    const existingCommasRemoved = removeCommas(value);
+    const leadingZerosRemoved = removeLeadingZeros(existingCommasRemoved);
+    setValueWithCommas(addCommasToDigits(leadingZerosRemoved));
+  }, [value]);
+
+  useLayoutEffect(() => {
+    if (cursorIndex.current !== null) {
+      inputRef.current?.setSelectionRange(
+        cursorIndex.current,
+        cursorIndex.current,
+      );
+      cursorIndex.current = null;
+    }
+  }, [valueWithCommas]);
+
+  const handleKeyDown = useCallback(
+    (keyValue: string, event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!inputRef.current) {
+        return;
+      }
+      const hasModifiers = event.ctrlKey || event.metaKey || event.altKey;
+      const isBackspace = keyValue === "Backspace";
+      if ((isBackspace || keyValue === "Delete") && !hasModifiers) {
+        event.preventDefault();
+        const selectionStart = inputRef.current.selectionStart || 0;
+        const selectionEnd = inputRef.current.selectionEnd || 0;
+        let newValue = "";
+        let newCursorIndex = selectionStart;
+        if (selectionStart === selectionEnd) {
+          // deleting one character
+          if (selectionStart === 0 && isBackspace) {
+            return;
+          }
+          const isComma =
+            // if deleting a comma assume we want to delete the next character
+            valueWithCommas[selectionStart + (isBackspace ? -1 : 0)] === ",";
+          const deleteCharIndex = isBackspace
+            ? Math.max(selectionStart - (isComma ? 2 : 1), 0)
+            : selectionStart + (isComma ? 1 : 0);
+          newValue = addCommasToDigits(
+            removeChars(valueWithCommas, deleteCharIndex),
+          );
+          const diff = valueWithCommas.length - newValue.length;
+          newCursorIndex = deleteCharIndex - (diff > 1 ? 1 : 0);
+        } else {
+          // deleting a range of characters
+          newValue = addCommasToDigits(
+            removeChars(valueWithCommas, selectionStart, selectionEnd),
+          );
+        }
+        onChange(removeCommas(newValue));
+        cursorIndex.current = clamp(newCursorIndex, 0, newValue.length);
+      }
+    },
+    [valueWithCommas, onChange],
+  );
+
+  return (
+    <TextInput
+      placeholder="Enter a number"
+      {...rest}
+      onKeyDown={handleKeyDown}
+      onChange={handleOnChange}
+      value={valueWithCommas}
+      inputRef={inputRef}
+      pattern="[0-9,]*"
+      inputMode="numeric"
+      rightButtonText={props.maxValue ? "Max" : undefined}
+      onRightButtonClick={() => {
+        if (props.maxValue) {
+          handleOnChange(props.maxValue.toString(), null);
+        }
+      }}
+    />
+  );
+}
+
+export default CommaNumberInput;
diff --git a/packages/ui/src/components/ContentTable.tsx b/packages/ui/src/components/ContentTable.tsx
index fbf6b1b6c..ae187db06 100644
--- a/packages/ui/src/components/ContentTable.tsx
+++ b/packages/ui/src/components/ContentTable.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { Icon } from "./Icon.js";
+import { Icon } from "./Icon/Icon.js";
 
 type Column<Key extends string = string> = {
   key: Key;
diff --git a/packages/ui/src/components/CopyToClipboardButton.tsx b/packages/ui/src/components/CopyToClipboardButton.tsx
index 56b14b0c2..94c8b89ed 100644
--- a/packages/ui/src/components/CopyToClipboardButton.tsx
+++ b/packages/ui/src/components/CopyToClipboardButton.tsx
@@ -4,8 +4,9 @@ import type { CSSObject } from "@emotion/styled";
 import styled from "@emotion/styled";
 import { nanoid } from "nanoid";
 import React, { useState } from "react";
-import { Icon } from "./Icon.js";
-import { LightTooltip } from "./LightTooltip.js";
+import { Icon } from "./Icon/Icon.js";
+import { type IconName } from "./Icon/types.js";
+import { Tooltip } from "./Tooltip.js";
 import { UnstyledButton } from "./UnstyledButton.js";
 
 type Props = {
@@ -16,7 +17,7 @@ type Props = {
   buttonCSS?: CSSObject;
   ml?: number;
   place?: "top" | "bottom" | "left" | "right";
-  icon?: string;
+  icon?: IconName;
   id?: string;
 };
 
@@ -52,7 +53,7 @@ const CopyToClipboardButton = (props: Props) => {
         {props.children ? <Children>{props.children}</Children> : null}
         <Icon name={icon} width={props.isSm ? 12 : 16} />
       </Button>
-      <LightTooltip
+      <Tooltip
         id={id}
         place={props.place || "right"}
         content={tooltipContent}
diff --git a/packages/ui/src/components/CurrencyAmount.tsx b/packages/ui/src/components/CurrencyAmount.tsx
index d745a9630..710d7293f 100644
--- a/packages/ui/src/components/CurrencyAmount.tsx
+++ b/packages/ui/src/components/CurrencyAmount.tsx
@@ -1,5 +1,4 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-import { gql } from "@apollo/client";
 import styled from "@emotion/styled";
 import type {
   CurrencyAmountArg,
@@ -12,7 +11,8 @@ import {
   isCurrencyMap,
   mapCurrencyAmount,
 } from "@lightsparkdev/core";
-import { Icon } from "./Icon.js";
+import { gql } from "graphql-tag";
+import { Icon } from "./Icon/Icon.js";
 
 type CurrencyAmountProps = {
   amount: CurrencyAmountArg | CurrencyMap;
@@ -21,7 +21,7 @@ type CurrencyAmountProps = {
   showUnits?: boolean;
   ml?: number;
   includeEstimatedIndicator?: boolean;
-  showSubSatDigits?: boolean;
+  fullPrecision?: boolean | undefined;
 };
 
 export function CurrencyAmount({
@@ -30,9 +30,7 @@ export function CurrencyAmount({
   shortNumber = false,
   showUnits = false,
   includeEstimatedIndicator = false,
-  /* Product has voted to hide msats from end users.
-     showSubSatDigits should only be used in ops tools: */
-  showSubSatDigits = false,
+  fullPrecision = false,
   ml = 0,
 }: CurrencyAmountProps) {
   const unit = displayUnit;
@@ -47,13 +45,12 @@ export function CurrencyAmount({
   if (shortNumber) {
     formattedNumber = formatCurrencyStr(
       { value: Number(value), unit },
-      1,
-      true,
+      { precision: 1, compact: true },
     );
-  } else if (showSubSatDigits) {
+  } else if (fullPrecision) {
     formattedNumber = formatCurrencyStr(
-      { value: Number(value), unit: CurrencyUnit.SATOSHI },
-      3,
+      { value: Number(value), unit },
+      { precision: "full" },
     );
   }
 
diff --git a/packages/ui/src/components/Drawer.tsx b/packages/ui/src/components/Drawer.tsx
new file mode 100644
index 000000000..d3a0a3d47
--- /dev/null
+++ b/packages/ui/src/components/Drawer.tsx
@@ -0,0 +1,209 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { useRef, useState } from "react";
+import { colors } from "../styles/colors.js";
+import { Spacing } from "../styles/tokens/spacing.js";
+import { z } from "../styles/z-index.js";
+import { Button } from "./Button.js";
+
+interface Props {
+  children?: React.ReactNode;
+  onClose?: () => void;
+  grabber?: boolean;
+  closeButton?: boolean;
+}
+
+export const Drawer = (props: Props) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [lastY, setLastY] = useState<number | null>(null);
+  const [totalDeltaY, setTotalDeltaY] = useState<number>(0);
+  const [fractionVisible, setFractionVisible] = useState<number>(1);
+  const [grabbing, setGrabbing] = useState(false);
+  const drawerContainerRef = useRef<null | HTMLDivElement>(null);
+
+  const handleClose = () => {
+    setIsOpen(false);
+
+    setTimeout(() => {
+      props.onClose && props.onClose();
+      setTotalDeltaY(0);
+      setLastY(null);
+    }, 300);
+  };
+
+  const handleTouchMove = (event: React.TouchEvent) => {
+    if (lastY === null) {
+      setLastY(event.touches[0].clientY);
+    } else {
+      const deltaY = event.touches[0].clientY - lastY;
+
+      const topOfDrawer =
+        (drawerContainerRef.current?.getBoundingClientRect().top || 0) +
+        window.scrollY;
+      const drawerContainerHeight =
+        drawerContainerRef.current?.getBoundingClientRect().height || 1;
+      const newFractionVisible = Math.min(
+        1,
+        (window.innerHeight - topOfDrawer) / drawerContainerHeight,
+      );
+      setFractionVisible(newFractionVisible);
+      setLastY(event.touches[0].clientY);
+      setTotalDeltaY((prev) => Math.max(prev + deltaY, 0));
+    }
+  };
+
+  const handleTouchStart = () => {
+    setGrabbing(true);
+  };
+
+  const handleTouchEnd = () => {
+    setGrabbing(false);
+    if (fractionVisible < 0.8) {
+      handleClose();
+    }
+    setTotalDeltaY(0);
+    setLastY(null);
+  };
+
+  return (
+    <>
+      <Background
+        isOpen={isOpen}
+        fractionVisible={fractionVisible}
+        onClick={handleClose}
+      />
+      <DrawerContainer
+        isOpen={isOpen}
+        onTouchMove={handleTouchMove}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+        totalDeltaY={totalDeltaY}
+        grabbing={grabbing}
+        ref={drawerContainerRef}
+      >
+        {props.grabber && (
+          <Grabber onClick={handleClose}>
+            <GrabberBar />
+          </Grabber>
+        )}
+        {props.closeButton && (
+          <CloseButtonContainer>
+            <Button
+              onClick={handleClose}
+              icon="Close"
+              kind="ghost"
+              size="ExtraSmall"
+            ></Button>
+          </CloseButtonContainer>
+        )}
+        {props.children}
+      </DrawerContainer>
+    </>
+  );
+};
+
+const Background = styled.div<{ isOpen: boolean; fractionVisible: number }>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: ${z.modalOverlay};
+
+  // Animate opacity
+  transition: opacity 0.3s ease-in-out;
+  opacity: ${(props) => (props.isOpen ? props.fractionVisible : "0")};
+
+  animation: open 0.3s ease-in-out;
+
+  @keyframes open {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
+const DrawerContainer = styled.div<{
+  isOpen: boolean;
+  totalDeltaY: number;
+  grabbing: boolean;
+}>`
+  position: absolute;
+  width: 100%;
+  background-color: ${({ theme }) => theme.bg};
+  right: 0;
+  bottom: 0;
+  transform: translateY(${(props) => `${props.totalDeltaY}px`});
+  z-index: ${z.modalContainer};
+  border-radius: ${Spacing.lg} ${Spacing.lg} 0 0;
+  display: flex;
+  flex-direction: column;
+  padding: ${Spacing["6xl"]} ${Spacing.xl} ${Spacing["2xl"]} ${Spacing.xl};
+
+  // Only smooth transition when not grabbing, otherwise dragging will feel very laggy
+  ${(props) =>
+    props.grabbing && props.isOpen
+      ? ""
+      : "transition: transform 0.3s ease-in-out;"};
+
+  // Animate the drawer opening and closing, and make sure the the drawer stays closed.
+  animation: 0.3s ease-in-out
+    ${(props) => (props.isOpen ? "openDrawer" : "closeDrawer forwards")};
+
+  @keyframes openDrawer {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0%);
+    }
+  }
+
+  @keyframes closeDrawer {
+    from {
+      transform: translateY(${(props) => `${props.totalDeltaY}px`});
+    }
+    to {
+      transform: translateY(100%);
+    }
+  }
+`;
+
+const Grabber = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: ${Spacing.lg};
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 9px;
+  cursor: pointer;
+`;
+
+const CloseButtonContainer = styled.div`
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  border-radius: 50%;
+  background-color: ${colors.grayBlue94};
+  padding: ${Spacing.xs};
+
+  * > * {
+    line-height: 14px;
+  }
+`;
+
+const GrabberBar = styled.div`
+  width: 36px;
+  height: 5px;
+  border-radius: 2.5px;
+  background: #c0c9d6;
+`;
diff --git a/packages/ui/src/components/Dropdown.tsx b/packages/ui/src/components/Dropdown.tsx
new file mode 100644
index 000000000..1d11c835f
--- /dev/null
+++ b/packages/ui/src/components/Dropdown.tsx
@@ -0,0 +1,498 @@
+import type { CSSInterpolation } from "@emotion/css";
+import { css, useTheme } from "@emotion/react";
+import type { CSSObject } from "@emotion/styled";
+import styled from "@emotion/styled";
+import type { ReactNode, RefObject } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import ReactDOM from "react-dom";
+import {
+  Link,
+  type ExternalLink,
+  type LinkProps,
+  type RouteHash,
+  type RouteParams,
+} from "../router.js";
+import { bp } from "../styles/breakpoints.js";
+import {
+  overlaySurface,
+  standardBorderRadius,
+  standardFocusOutline,
+} from "../styles/common.js";
+import { smHeaderLogoMarginLeft } from "../styles/constants.js";
+import { themeOr, type ThemeProp, type WithTheme } from "../styles/themes.js";
+import { z } from "../styles/z-index.js";
+import { Icon } from "./Icon/Icon.js";
+import { type IconName } from "./Icon/types.js";
+import { UnstyledButton } from "./UnstyledButton.js";
+
+type DropdownItemGetProps<RoutesType extends string> = WithTheme<{
+  dropdownItem: DropdownItemType<RoutesType>;
+}>;
+
+type DropdownItemType<RoutesType extends string> = {
+  label: string;
+  getIcon?:
+    | (({ theme, dropdownItem }: DropdownItemGetProps<RoutesType>) =>
+        | {
+            name: IconName;
+            color?: string;
+            width?: number;
+          }
+        | undefined)
+    | undefined;
+  onClick?: ((dropdownItem: DropdownItemType<RoutesType>) => void) | undefined;
+  getCSS?: ({
+    dropdownItem,
+    theme,
+  }: DropdownItemGetProps<RoutesType>) => CSSInterpolation;
+  to?: RoutesType | undefined;
+  externalLink?: ExternalLink | undefined;
+  params?: RouteParams | undefined;
+  selected?: boolean;
+  hash?: RouteHash;
+};
+
+type DropdownGetProps = WithTheme<{ isOpen: boolean }>;
+
+type DropdownProps<RoutesType extends string> = {
+  button: {
+    label?: string;
+    id?: string;
+    getContent?: ({ isOpen, theme }: DropdownGetProps) => ReactNode;
+    getCSS?: ({ isOpen, theme }: DropdownGetProps) => CSSInterpolation;
+  };
+  dropdownItems?: DropdownItemType<RoutesType>[];
+  dropdownContent?: ReactNode;
+  openOnHover?: boolean;
+  horizontalScrollRef?: RefObject<HTMLElement | null>;
+  minDropdownItemsWidth?: number;
+  maxDropdownItemsWidth?: number;
+  onClickDropdownItems?: () => void;
+  closeOnScroll?: boolean;
+  align?: "left" | "right" | "center";
+  footer?: ReactNode | null;
+  getCSS?: ({ isOpen, theme }: DropdownGetProps) => CSSObject;
+  onOpen?: () => void;
+  onClose?: () => void;
+};
+
+export function Dropdown<RoutesType extends string>({
+  button,
+  dropdownItems,
+  horizontalScrollRef,
+  onClickDropdownItems,
+  getCSS,
+  onOpen,
+  onClose,
+  closeOnScroll = false,
+  openOnHover = false,
+  minDropdownItemsWidth = 200,
+  maxDropdownItemsWidth = 300,
+  align = "center" as const,
+  footer = null,
+  dropdownContent = null,
+}: DropdownProps<RoutesType>) {
+  const theme = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const [dropdownButtonHeight, setDropdownButtonHeight] = useState(0);
+  const [dropdownButtonWidth, setDropdownButtonWidth] = useState(0);
+  const [dropdownCoords, setDropdownCoords] = useState({
+    top: 0,
+    left: 0,
+    right: 0,
+  });
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const dropdownButtonRef = useRef<HTMLButtonElement | null>(null);
+  const dropdownItemsRef = useRef<HTMLUListElement | null>(null);
+  const [dropdownItemsWidth, setDropdownItemsWidth] = useState(0);
+  const nodeRef = useRef<null | HTMLDivElement>(null);
+  const [nodeReady, setNodeReady] = useState(false);
+
+  useEffect(() => {
+    if (!nodeRef.current) {
+      nodeRef.current = document.createElement("div");
+      document.body.appendChild(nodeRef.current);
+    }
+    setNodeReady(true);
+    return () => {
+      if (nodeRef.current) {
+        document.body.removeChild(nodeRef.current);
+        nodeRef.current = null;
+      }
+    };
+  }, []);
+
+  const setOpen = useCallback(
+    (newValue: boolean) => {
+      setIsOpen(newValue);
+      if (newValue && onOpen) {
+        onOpen();
+      } else if (!newValue && onClose) {
+        onClose();
+      }
+    },
+    [onOpen, onClose],
+  );
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setOpen(false);
+    } else if (["Enter", "Return"].includes(event.key)) {
+      event.preventDefault();
+      setOpen(!isOpen);
+    }
+  }
+
+  function handleBlur(
+    event: React.FocusEvent<HTMLButtonElement | HTMLLIElement, Element>,
+  ) {
+    const targetOutsideDropdownItems =
+      dropdownItemsRef.current &&
+      !dropdownItemsRef.current.contains(event.relatedTarget) &&
+      event.relatedTarget !== null;
+    if (targetOutsideDropdownItems) {
+      setOpen(false);
+    }
+  }
+
+  const handleRef = useCallback((ref: HTMLButtonElement | null) => {
+    if (ref && !dropdownButtonRef.current) {
+      dropdownButtonRef.current = ref;
+    }
+    return ref;
+  }, []);
+
+  // close dropdown when clicking outside of it
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      const targetOutsideDropdownItems =
+        dropdownItemsRef.current &&
+        !dropdownItemsRef.current.contains(event.target as Node);
+      const targetOutsideDropdownButton =
+        dropdownButtonRef.current &&
+        !dropdownButtonRef.current.contains(event.target as Node);
+      if (
+        isOpen &&
+        event.target &&
+        targetOutsideDropdownItems &&
+        targetOutsideDropdownButton
+      ) {
+        setOpen(false);
+      }
+    }
+    window.document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      window.document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, setOpen]);
+
+  const reposition = useCallback(() => {
+    if (dropdownButtonRef.current && dropdownItemsRef.current) {
+      const dropdownButtonRect =
+        dropdownButtonRef.current.getBoundingClientRect();
+      setDropdownCoords({
+        top: dropdownButtonRect.top,
+        left: dropdownButtonRect.left,
+        right: dropdownButtonRect.right,
+      });
+      setDropdownButtonHeight(dropdownButtonRect.height);
+      setDropdownButtonWidth(dropdownButtonRect.width);
+
+      const dropdownItemsRect =
+        dropdownItemsRef.current.getBoundingClientRect();
+      setDropdownItemsWidth(dropdownItemsRect.width);
+    }
+  }, []);
+
+  // handle all cases where a dropdown nav needs to be repositioned:
+  useLayoutEffect(() => {
+    function onWindowResize() {
+      setOpen(false);
+      reposition();
+    }
+
+    function handleScroll() {
+      if (closeOnScroll) {
+        setOpen(false);
+      }
+      reposition();
+    }
+
+    reposition();
+
+    let dropdownButtonResizeObserver: ResizeObserver | null = null;
+    if (dropdownButtonRef.current) {
+      dropdownButtonResizeObserver = new ResizeObserver(reposition);
+      dropdownButtonResizeObserver.observe(dropdownButtonRef.current);
+    }
+
+    let dropdownResizeObserver: ResizeObserver | null = null;
+    if (dropdownButtonRef.current) {
+      dropdownResizeObserver = new ResizeObserver(reposition);
+      dropdownResizeObserver.observe(dropdownButtonRef.current);
+    }
+
+    window.addEventListener("resize", onWindowResize);
+
+    let navItemsResizeObserver: ResizeObserver | null = null;
+    window.addEventListener("scroll", handleScroll);
+    if (horizontalScrollRef?.current) {
+      horizontalScrollRef.current.addEventListener("scroll", handleScroll);
+      navItemsResizeObserver = new ResizeObserver(reposition);
+      navItemsResizeObserver.observe(horizontalScrollRef.current);
+    }
+    return () => {
+      window.removeEventListener("resize", onWindowResize);
+      window.removeEventListener("scroll", handleScroll);
+      dropdownButtonResizeObserver?.disconnect();
+      navItemsResizeObserver?.disconnect();
+      dropdownResizeObserver?.disconnect();
+    };
+  }, [setOpen, horizontalScrollRef, closeOnScroll, reposition]);
+
+  const handleClickDropdownItems = useCallback(() => {
+    setOpen(false);
+    onClickDropdownItems && onClickDropdownItems();
+  }, [onClickDropdownItems, setOpen]);
+
+  const dropdownTopMargin = 8;
+  const dropdownItemOffsetTop =
+    dropdownCoords.top + dropdownButtonHeight + dropdownTopMargin;
+
+  let dropdownItemOffsetLeft = 0;
+
+  if (align === "center") {
+    dropdownItemOffsetLeft =
+      dropdownCoords.left - (dropdownItemsWidth - dropdownButtonWidth) / 2;
+  } else if (align === "right") {
+    dropdownItemOffsetLeft = dropdownCoords.right - dropdownItemsWidth;
+  }
+
+  const buttonContent =
+    button.label || (button.getContent && button.getContent({ isOpen, theme }));
+
+  const containerCSS = getCSS && getCSS({ isOpen, theme });
+
+  return (
+    <div
+      css={{ position: "relative", display: "inline-flex", ...containerCSS }}
+      ref={dropdownRef}
+    >
+      <DropdownButton
+        id={button.id}
+        type="button"
+        onMouseEnter={
+          openOnHover
+            ? () => {
+                reposition();
+                setOpen(true);
+              }
+            : undefined
+        }
+        onMouseLeave={
+          openOnHover
+            ? () => {
+                setOpen(false);
+              }
+            : undefined
+        }
+        onMouseDown={(e) => {
+          reposition();
+          setOpen(!isOpen);
+        }}
+        onKeyDown={handleKeyDown}
+        onFocus={(e) => {
+          reposition();
+          setOpen(true);
+        }}
+        onBlur={handleBlur}
+        ref={handleRef}
+        css={button.getCSS && button.getCSS({ isOpen, theme })}
+      >
+        {buttonContent}
+      </DropdownButton>
+      {nodeReady && nodeRef.current
+        ? ReactDOM.createPortal(
+            <DropdownItems
+              isOpen={isOpen}
+              left={dropdownItemOffsetLeft}
+              top={dropdownItemOffsetTop}
+              ref={dropdownItemsRef}
+              minWidth={minDropdownItemsWidth}
+              maxWidth={maxDropdownItemsWidth}
+            >
+              {dropdownItems?.map((dropdownItem, i) => {
+                return (
+                  <li key={dropdownItem.label} onBlur={handleBlur}>
+                    <DropdownItem
+                      dropdownItem={dropdownItem}
+                      onClick={handleClickDropdownItems}
+                    />
+                  </li>
+                );
+              })}
+              {dropdownContent}
+              {footer && <DropdownFooter>{footer}</DropdownFooter>}
+            </DropdownItems>,
+            nodeRef.current,
+          )
+        : null}
+    </div>
+  );
+}
+
+const DropdownFooter = styled.div`
+  padding: 24px 16px 0;
+  border-top: 1px solid ${({ theme }) => theme.c2Neutral};
+  margin-top: 16px;
+`;
+
+type DropdownItemsProps = {
+  isOpen: boolean;
+  left: number;
+  top: number;
+  minWidth?: number;
+  maxWidth?: number;
+};
+
+const DropdownItems = styled.ul<DropdownItemsProps>`
+  ${overlaySurface}
+  color: ${({ theme }) => themeOr(theme.c6Neutral, theme.c8Neutral)};
+  ${standardBorderRadius(8)}
+  padding: 12px 0;
+  visibility: ${({ isOpen }) => (isOpen ? "visible" : "hidden")};
+  position: fixed;
+  ${({ minWidth }) => (minWidth ? `min-width: ${minWidth}px;` : "")}
+  ${({ maxWidth }) => (maxWidth ? `max-width: ${maxWidth}px;` : "")}
+  left: ${({ left }) => left}px;
+  top: ${({ top }) => top}px;
+  z-index: ${z.dropdown};
+  list-style: none;
+  margin: 0;
+`;
+
+type DropdownItemProps<RoutesType extends string> = {
+  dropdownItem: DropdownItemType<RoutesType> & { selected?: boolean };
+  onClick?: () => void;
+  getCSS?: ({
+    dropdownItem,
+    theme,
+  }: DropdownItemGetProps<RoutesType>) => CSSInterpolation;
+};
+
+function DropdownItem<RoutesType extends string>({
+  dropdownItem,
+  onClick,
+}: DropdownItemProps<RoutesType>) {
+  const theme = useTheme();
+
+  const dropdownItemIcon =
+    dropdownItem.getIcon && dropdownItem.getIcon({ dropdownItem, theme });
+  const dropdownItemIconNode = dropdownItemIcon ? (
+    <Icon
+      name={dropdownItemIcon.name}
+      width={dropdownItemIcon.width || 12}
+      mr={10}
+    />
+  ) : null;
+
+  const cssProp =
+    dropdownItem.getCSS && dropdownItem.getCSS({ theme, dropdownItem });
+
+  const onClickDropdownItem = useCallback(() => {
+    dropdownItem.onClick && dropdownItem.onClick(dropdownItem);
+    onClick && onClick();
+  }, [dropdownItem, onClick]);
+
+  // to may be '' for the current route so check !== undefined
+  if (dropdownItem.to !== undefined || dropdownItem.externalLink) {
+    // single nav item
+
+    return (
+      <DropdownItemLink<RoutesType>
+        selected={Boolean(dropdownItem.selected)}
+        to={dropdownItem.to}
+        externalLink={dropdownItem.externalLink}
+        params={dropdownItem.params}
+        onClick={onClickDropdownItem}
+        css={cssProp}
+        hash={dropdownItem.hash}
+      >
+        {dropdownItemIconNode}
+        {dropdownItem.label}
+      </DropdownItemLink>
+    );
+  }
+
+  return (
+    <DropdownItemDiv
+      selected={false}
+      css={cssProp}
+      onClick={onClickDropdownItem}
+    >
+      {dropdownItemIconNode}
+      {dropdownItem.label}
+    </DropdownItemDiv>
+  );
+}
+
+const DropdownButton = styled(UnstyledButton)`
+  ${standardFocusOutline}
+`;
+
+type DropdownItemStyleProps = WithTheme<{ selected?: boolean }>;
+
+const dropdownItemStyle = ({ selected, theme }: DropdownItemStyleProps) => `
+  background-color: ${selected ? theme.primary : "transparent"};
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+  outline-color: ${selected ? theme.onPrimaryText : theme.hcNeutral} !important;
+  white-space: nowrap;
+
+  padding: 8px 16px;
+  ${bp.sm(`padding-left: ${smHeaderLogoMarginLeft};`)}
+
+  &:hover {
+    color: ${theme.hcNeutral} !important;
+  }
+`;
+
+type StyledDropdownItemProps = {
+  selected?: boolean;
+};
+
+const cssProp = ({
+  theme,
+  selected,
+}: ThemeProp & StyledDropdownItemProps) => css`
+  ${dropdownItemStyle({ theme, selected: Boolean(selected) })}
+  ${standardFocusOutline({ theme })}
+`;
+
+function DropdownItemLink<RoutesType extends string>(
+  props: StyledDropdownItemProps & LinkProps<RoutesType>,
+) {
+  const theme = useTheme();
+  return (
+    <Link<RoutesType>
+      {...props}
+      css={cssProp({ theme, selected: Boolean(props.selected) })}
+    />
+  );
+}
+
+const DropdownItemDiv = styled.div<StyledDropdownItemProps>`
+  ${dropdownItemStyle}
+  ${standardFocusOutline}
+`;
diff --git a/packages/ui/src/components/FileInput.tsx b/packages/ui/src/components/FileInput.tsx
index 53a889578..a3e9abc34 100644
--- a/packages/ui/src/components/FileInput.tsx
+++ b/packages/ui/src/components/FileInput.tsx
@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { Fragment, useRef, useState } from "react";
 import { InputSubtext, inputBlockStyle } from "../styles/fields.js";
-import { Icon } from "./Icon.js";
+import { Icon } from "./Icon/Icon.js";
 import { Pill } from "./Pill.js";
 
 type FileInputProps = {
diff --git a/packages/ui/src/components/Icon.tsx b/packages/ui/src/components/Icon.tsx
deleted file mode 100644
index 7cb949cc0..000000000
--- a/packages/ui/src/components/Icon.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import styled from "@emotion/styled";
-import { useLayoutEffect, useState } from "react";
-import { rootFontSizePx } from "../styles/common.js";
-import { isString } from "../utils/strings.js";
-
-type Component = () => JSX.Element;
-
-type IconMap = {
-  [key: string]: Component;
-};
-
-const iconMap: IconMap = {};
-
-async function loadIcon(iconName: string) {
-  let IconComp: Component;
-  try {
-    ({ default: IconComp } = (await import(
-      /* webpackMode: "eager" */
-      // this can't be a variable only, needs to have some string constraints:
-      `./icons/${iconName}.js`
-    )) as { default: Component });
-  } catch (e) {
-    throw new Error(`Icon ${iconName} not found`);
-  }
-  iconMap[iconName] = IconComp;
-}
-
-type IconProps = {
-  className?: string;
-  name: string;
-  width: number;
-  mr?: number;
-  ml?: number;
-  verticalAlign?: "middle" | "top" | "bottom" | "super" | number;
-  color?: string | undefined;
-  tutorialStep?: number;
-};
-
-export function Icon({
-  className,
-  name,
-  width,
-  tutorialStep,
-  mr = 0,
-  ml = 0,
-  verticalAlign = "middle",
-  color = undefined,
-}: IconProps) {
-  const [, setLoading] = useState(false);
-
-  const IconComponent = iconMap[name] || null;
-
-  useLayoutEffect(() => {
-    void (async () => {
-      if (!iconMap[name]) {
-        setLoading(true);
-        await loadIcon(name);
-        setLoading(false);
-      }
-    })();
-  }, [name]);
-
-  // Assume width is px relative to the root font size but specify in ems to
-  // preserve scale for larger font sizes
-  const w = parseFloat((width / rootFontSizePx).toFixed(2));
-  const mrRems = parseFloat((mr / rootFontSizePx).toFixed(2));
-  const mlRems = parseFloat((ml / rootFontSizePx).toFixed(2));
-  const va =
-    typeof verticalAlign === "string"
-      ? verticalAlign
-      : parseFloat((verticalAlign / rootFontSizePx).toFixed(2));
-
-  return (
-    <IconContainer
-      className={className}
-      w={w}
-      mr={mrRems}
-      ml={mlRems}
-      verticalAlign={va}
-      fontColor={color}
-      data-tutorial-tip={tutorialStep?.toString()}
-    >
-      {IconComponent ? <IconComponent /> : null}
-    </IconContainer>
-  );
-}
-
-type IconContainerProps = {
-  w: number;
-  mr: number;
-  ml: number;
-  verticalAlign: string | number;
-  fontColor?: string | undefined;
-};
-
-export const IconContainer = styled.span<IconContainerProps>`
-  pointer-events: none;
-  display: inline-flex;
-  ${({ mr, ml, w }) => `
-    width: ${w}em;
-    /* ensure no shrink in flex containers: */
-    min-width: ${w}em;
-    ${mr ? `margin-right: ${mr}em;` : ""}
-    ${ml ? `margin-left: ${ml}em;` : ""}
-  `}
-
-  vertical-align: ${({ verticalAlign }) =>
-    isString(verticalAlign) ? verticalAlign : `${verticalAlign}em`};
-
-  ${({ fontColor }) => `
-    & svg {
-      color: ${fontColor || "inherit"};
-    }
-  `}
-`;
diff --git a/packages/ui/src/components/Icon/Icon.tsx b/packages/ui/src/components/Icon/Icon.tsx
new file mode 100644
index 000000000..72a31124a
--- /dev/null
+++ b/packages/ui/src/components/Icon/Icon.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { invertFillColor, invertStrokeColor } from "../../icons/constants.js";
+import * as icons from "../../icons/index.js";
+import { rootFontSizePx } from "../../styles/common.js";
+import { getFontColor, type FontColorKey } from "../../styles/themes.js";
+import { isString } from "../../utils/strings.js";
+import type { IconName } from "./types.js";
+
+type IconProps = {
+  className?: string | undefined;
+  name: IconName;
+  width: number;
+  mr?: number | undefined;
+  ml?: number | undefined;
+  verticalAlign?: "middle" | "top" | "bottom" | "super" | number;
+  color?: FontColorKey | undefined;
+  tutorialStep?: number;
+};
+
+export function Icon({
+  className,
+  name,
+  width,
+  tutorialStep,
+  mr = 0,
+  ml = 0,
+  color = undefined,
+  verticalAlign = "middle",
+}: IconProps) {
+  const IconComponent = icons[name] || null;
+
+  /** Assume width is px relative to the root font size but specify
+   * in ems to preserve scale for larger font sizes */
+  const w = parseFloat((width / rootFontSizePx).toFixed(2));
+  const mrRems = parseFloat((mr / rootFontSizePx).toFixed(2));
+  const mlRems = parseFloat((ml / rootFontSizePx).toFixed(2));
+  const va =
+    typeof verticalAlign === "string"
+      ? verticalAlign
+      : parseFloat((verticalAlign / rootFontSizePx).toFixed(2));
+
+  return (
+    <IconContainer
+      className={className}
+      w={w}
+      mr={mrRems}
+      ml={mlRems}
+      verticalAlign={va}
+      fontColor={color}
+      data-tutorial-tip={tutorialStep?.toString()}
+    >
+      {IconComponent ? <IconComponent /> : null}
+    </IconContainer>
+  );
+}
+
+type IconContainerProps = {
+  w: number;
+  mr: number;
+  ml: number;
+  verticalAlign: string | number;
+  fontColor?: FontColorKey | undefined;
+};
+
+export const IconContainer = styled.span<IconContainerProps>`
+  pointer-events: none;
+  display: inline-flex;
+  ${({ mr, ml, w }) => `
+    width: ${w}em;
+    /* ensure no shrink in flex containers: */
+    min-width: ${w}em;
+    ${mr ? `margin-right: ${mr}em;` : ""}
+    ${ml ? `margin-left: ${ml}em;` : ""}
+  `}
+
+  vertical-align: ${({ verticalAlign }) =>
+    isString(verticalAlign) ? verticalAlign : `${verticalAlign}em`};
+
+  ${({ theme, fontColor }) => {
+    const color = getFontColor(theme, fontColor, "inherit");
+    return `
+    & svg {
+      color: ${getFontColor(theme, fontColor, "inherit")};
+
+      /* 
+        Provide a way for an SVG to invert relative to a specified color for
+        dark mode support. Ideally we would just use filters, which works in
+        Chrome even if the color is not specified, but doesn't work at all for
+        SVG paths in Safari:
+        filter: invert(100%); -webkit-filter: invert(100%);
+
+        Instead we'll need a class for fills and a class for strokes. Icons
+        that need inverted colors should use these classes on their paths.
+      */
+
+      .${invertFillColor} {
+        fill: ${fontColor ? theme.hcNeutralFromBg(color) : "currentColor"};
+      }
+      .${invertStrokeColor} {
+        stroke: ${fontColor ? theme.hcNeutralFromBg(color) : "currentColor"};
+      }
+    }
+  `;
+  }}
+`;
diff --git a/packages/ui/src/components/Icon/types.tsx b/packages/ui/src/components/Icon/types.tsx
new file mode 100644
index 000000000..a3e94fd9c
--- /dev/null
+++ b/packages/ui/src/components/Icon/types.tsx
@@ -0,0 +1,3 @@
+import type * as icons from "../../icons/index.js";
+
+export type IconName = keyof typeof icons;
diff --git a/packages/ui/src/components/InfoIconTooltip.tsx b/packages/ui/src/components/InfoIconTooltip.tsx
new file mode 100644
index 000000000..5ef37e620
--- /dev/null
+++ b/packages/ui/src/components/InfoIconTooltip.tsx
@@ -0,0 +1,30 @@
+import { Fragment } from "react";
+import { type TypographyTypeKey } from "../styles/tokens/typography.js";
+import { toReactNodes, type ToReactNodesArgs } from "../utils/toReactNodes.js";
+import { Icon } from "./Icon/Icon.js";
+import { Tooltip } from "./Tooltip.js";
+
+type InfoIconTooltipProps<T extends TypographyTypeKey> = {
+  id: string;
+  content: ToReactNodesArgs<T>;
+  verticalAlign?: "middle" | number;
+};
+
+export function InfoIconTooltip<T extends TypographyTypeKey>({
+  id,
+  content,
+  verticalAlign = "middle",
+}: InfoIconTooltipProps<T>) {
+  const contentNodes = toReactNodes(content);
+  return (
+    <Fragment>
+      <div
+        data-tooltip-id={id}
+        style={{ display: "inline-flex", alignItems: "center", verticalAlign }}
+      >
+        <Icon name="Info" width={12} ml={4} />
+      </div>
+      <Tooltip id={id} render={() => contentNodes} clickable />
+    </Fragment>
+  );
+}
diff --git a/packages/ui/src/components/LightsparkProvider.tsx b/packages/ui/src/components/LightsparkProvider.tsx
index 2c306a10e..b885b25a8 100644
--- a/packages/ui/src/components/LightsparkProvider.tsx
+++ b/packages/ui/src/components/LightsparkProvider.tsx
@@ -1,6 +1,6 @@
 import { ThemeProvider } from "@emotion/react";
-import { themes } from "../styles/colors.js";
 import { GlobalStyles } from "../styles/global.js";
+import { themes } from "../styles/themes.js";
 
 type LightsparkProviderProps = {
   children: React.ReactNode;
diff --git a/packages/ui/src/components/Loading.tsx b/packages/ui/src/components/Loading.tsx
index 80b916939..0522a53da 100644
--- a/packages/ui/src/components/Loading.tsx
+++ b/packages/ui/src/components/Loading.tsx
@@ -1,5 +1,6 @@
+import { useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Icon } from "./Icon.js";
+import { Icon } from "./Icon/Icon.js";
 
 type Props = {
   center?: boolean;
@@ -18,10 +19,11 @@ export function Loading({
   size = defaultProps.size,
   ml = defaultProps.ml,
 }: Props) {
+  const theme = useTheme();
   return (
     <LoadingWrapper center={center} ml={ml}>
       <Rotate>
-        <Icon name="LoadingSpinner" width={size} />
+        <Icon name={theme.loading} width={size} />
       </Rotate>
     </LoadingWrapper>
   );
diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx
index 0222eb7fb..4d5f40932 100644
--- a/packages/ui/src/components/Modal.tsx
+++ b/packages/ui/src/components/Modal.tsx
@@ -12,20 +12,46 @@ import {
   standardContentInset,
   standardFocusOutline,
 } from "../styles/common.js";
-import { overflowAutoWithoutScrollbars, pxToRems } from "../styles/utils.js";
+import { Spacing } from "../styles/tokens/spacing.js";
+import { TokenSize } from "../styles/tokens/typography.js";
+import { overflowAutoWithoutScrollbars } from "../styles/utils.js";
 import { z } from "../styles/z-index.js";
 import { select } from "../utils/emotion.js";
-import { toReactNodes } from "../utils/toReactNodes.js";
-import { Button } from "./Button.js";
-import { Icon } from "./Icon.js";
+import { toReactNodes, type ToReactNodesArgs } from "../utils/toReactNodes.js";
+import { Button, ButtonSelector } from "./Button.js";
+import { Drawer } from "./Drawer.js";
+import { Icon } from "./Icon/Icon.js";
 import { ProgressBar, type ProgressBarProps } from "./ProgressBar.js";
 import { UnstyledButton } from "./UnstyledButton.js";
+import { Body } from "./typography/Body.js";
+import { Headline, headlineSelector } from "./typography/Headline.js";
 
-type ModalProps = {
+export interface ExtraAction {
+  /** Determines the placement relative to the submission/cancel buttons. */
+  placement: "above" | "below";
+  content: React.ReactNode;
+}
+
+type SubmitLinkWithRoute<RoutesType extends string> = {
+  to: RoutesType;
+};
+
+type SubmitLinkWithHref = {
+  href: string;
+  filename?: string;
+};
+
+function isSubmitLinkWithHref<RoutesType extends string>(
+  submitLink: SubmitLinkWithRoute<RoutesType> | SubmitLinkWithHref | undefined,
+): submitLink is SubmitLinkWithHref {
+  return Boolean(submitLink && "href" in submitLink);
+}
+
+type ModalProps<RoutesType extends string> = {
   visible: boolean;
   onClose: () => void;
-  title?: string;
-  description?: string | undefined;
+  title?: ToReactNodesArgs;
+  description?: ToReactNodesArgs;
   cancelText?: string | undefined;
   cancelDisabled?: boolean;
   cancelHidden?: boolean;
@@ -35,6 +61,11 @@ type ModalProps = {
   submitDisabled?: boolean;
   submitLoading?: boolean;
   submitText?: string;
+  submitLink?:
+    | {
+        to: RoutesType;
+      }
+    | SubmitLinkWithHref;
   children?: React.ReactNode;
   /* most of the time this is an Element but not in the case of Select - it
    * just extends .focus method: */
@@ -42,12 +73,17 @@ type ModalProps = {
   /* This should always be true for accessibility purposes unless you are
    * managing focus in a child component */
   autoFocus?: boolean;
+  smDrawer?: boolean;
   nonDismissable?: boolean;
   width?: 460 | 600;
   progressBar?: ProgressBarProps;
+  /** Determines if buttons are laid out horizontally or vertically */
+  buttonLayout?: "horizontal" | "vertical";
+  /** Allows placing extra buttons in the same button layout */
+  extraActions?: ExtraAction[];
 };
 
-export function Modal({
+export function Modal<RoutesType extends string>({
   visible,
   title,
   description,
@@ -61,13 +97,17 @@ export function Modal({
   submitDisabled,
   submitLoading,
   submitText,
+  submitLink,
   cancelText = "Cancel",
   firstFocusRef,
+  smDrawer,
   nonDismissable = false,
   autoFocus = true,
   width = 460,
   progressBar,
-}: ModalProps) {
+  buttonLayout = "horizontal",
+  extraActions,
+}: ModalProps<RoutesType>) {
   const visibleChangedRef = useRef(false);
   const nodeRef = useRef<null | HTMLDivElement>(null);
   const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
@@ -78,7 +118,6 @@ export function Modal({
   const modalContainerRef = useRef<null | HTMLDivElement>(null);
   const bp = useBreakpoints();
   const isSm = bp.current(Breakpoints.sm);
-  const formattedDescription = description ? toReactNodes(description) : null;
 
   useEffect(() => {
     if (visible !== visibleChangedRef.current) {
@@ -160,8 +199,8 @@ export function Modal({
     }
   }, [visible, visibleChanged, ref, autoFocus]);
 
-  function onClickCloseButton(event: React.MouseEvent) {
-    event.stopPropagation();
+  function onClickCloseButton(event?: React.MouseEvent) {
+    event?.stopPropagation();
     onClose();
   }
 
@@ -180,75 +219,134 @@ export function Modal({
     }
   }
 
+  const linkIsHref = isSubmitLinkWithHref(submitLink);
+  const linkIsRoute = !linkIsHref && submitLink;
+
+  const buttonContent = (
+    <>
+      {extraActions
+        ?.filter((action) => action.placement === "above")
+        .map((action) => action.content)}
+      {!isSm && !cancelHidden && (
+        <Button
+          disabled={cancelDisabled}
+          onClick={onClickCancel}
+          text={cancelText}
+        />
+      )}
+      {onSubmit && (
+        <Button
+          kind="primary"
+          disabled={submitDisabled}
+          text={submitText ?? "Continue"}
+          loading={submitLoading}
+          to={linkIsRoute ? submitLink.to : undefined}
+          href={linkIsHref ? submitLink.href : undefined}
+          hrefFilename={linkIsHref ? submitLink.filename : undefined}
+          /* If submit button is a link we should not attempt to submit the form and
+                    should call onClick instead for onSubmit side-effects: */
+          type={submitLink ? "button" : "submit"}
+          /* The form element handles submit events when submit button is not a link: */
+          onClick={submitLink ? onSubmit : undefined}
+        />
+      )}
+      {isSm && !cancelHidden && <Button onClick={onClose} text={cancelText} />}
+      {extraActions
+        ?.filter((action) => action.placement === "below")
+        .map((action) => action.content)}
+    </>
+  );
+
+  let titleContent: React.ReactNode | null = null;
+  if (title) {
+    if (typeof title === "string") {
+      titleContent = (
+        <Headline heading="h4" size={TokenSize.Small}>
+          {title}
+        </Headline>
+      );
+    } else {
+      titleContent = toReactNodes(title);
+    }
+  }
+
+  let descriptionContent: React.ReactNode | null = null;
+  if (description) {
+    if (typeof description === "string") {
+      descriptionContent = (
+        <Description>
+          <Body size={"ExtraSmall"} content={description} />
+        </Description>
+      );
+    } else {
+      descriptionContent = (
+        <Description>{toReactNodes(description)}</Description>
+      );
+    }
+  }
+
   const modalContent = (
     <Fragment>
-      <ModalOverlay ref={overlayRef} />
-      <ModalContainer
-        aria-modal
-        aria-hidden
-        tabIndex={-1}
-        role="dialog"
-        ref={modalContainerRef}
-      >
-        <ModalContent width={width} ghost={ghost}>
-          {!firstFocusRef && (
-            <DefaultFocusTarget ref={defaultFirstFocusRefCb} />
-          )}
-          {!(nonDismissable || ghost) && (
-            <CloseButton onClick={onClickCloseButton} type="button">
-              <Icon name="Close" width={9} />
-            </CloseButton>
-          )}
-          <ModalContentInner ghost={ghost}>
-            {progressBar ? (
-              <div css={{ marginBottom: "20px" }}>
-                <ProgressBar
-                  progressPercentage={progressBar.progressPercentage}
-                  isSm={progressBar.isSm}
-                />
-              </div>
-            ) : null}
-            {title ? <h4>{title}</h4> : null}
-            {formattedDescription ? (
-              <Description>{formattedDescription}</Description>
-            ) : null}
-            <div>{children}</div>
-            {onSubmit || onCancel ? (
-              <ModalButtonRow>
-                {!isSm && !cancelHidden && (
-                  <Button
-                    disabled={cancelDisabled}
-                    onClick={onClickCancel}
-                    text={cancelText}
-                  />
-                )}
-                {onSubmit && (
-                  <Button
-                    disabled={submitDisabled}
-                    primary
-                    text={submitText ?? "Continue"}
-                    loading={submitLoading}
-                    type="submit"
-                  />
-                )}
-                {isSm && !cancelHidden && (
-                  <Button onClick={onClose} text={cancelText} />
-                )}
-              </ModalButtonRow>
-            ) : null}
-          </ModalContentInner>
-        </ModalContent>
-      </ModalContainer>
+      {progressBar ? (
+        <div css={{ marginBottom: "20px" }}>
+          <ProgressBar
+            progressPercentage={progressBar.progressPercentage}
+            isSm={progressBar.isSm}
+          />
+        </div>
+      ) : null}
+      {titleContent}
+      {descriptionContent}
+      {children}
+      {onSubmit || onCancel ? (
+        buttonLayout === "horizontal" ? (
+          <ModalButtonRow>{buttonContent}</ModalButtonRow>
+        ) : (
+          <ModalButtonColumn>{buttonContent}</ModalButtonColumn>
+        )
+      ) : null}
     </Fragment>
   );
 
+  let content: React.ReactNode;
+  if (smDrawer && isSm) {
+    content = (
+      <Drawer onClose={() => onClickCloseButton()} closeButton>
+        {modalContent}
+      </Drawer>
+    );
+  } else {
+    content = (
+      <Fragment>
+        <ModalOverlay ref={overlayRef} />
+        <ModalContainer
+          aria-modal
+          aria-hidden
+          tabIndex={-1}
+          role="dialog"
+          ref={modalContainerRef}
+        >
+          <ModalContent width={width} ghost={ghost}>
+            {!firstFocusRef && (
+              <DefaultFocusTarget ref={defaultFirstFocusRefCb} />
+            )}
+            {!(nonDismissable || ghost) && (
+              <CloseButtonContainer>
+                <CloseButton onClick={onClickCloseButton} type="button">
+                  <Icon name="Close" width={9} />
+                </CloseButton>
+              </CloseButtonContainer>
+            )}
+            <ModalContentInner ghost={ghost}>{modalContent}</ModalContentInner>
+          </ModalContent>
+        </ModalContainer>
+      </Fragment>
+    );
+  }
+
   return visible && nodeReady && nodeRef.current
     ? ReactDOM.createPortal(
-        onSubmit ? (
-          <form onSubmit={onSubmitForm}>{modalContent}</form>
-        ) : (
-          modalContent
-        ),
+        onSubmit ? <form onSubmit={onSubmitForm}>{content}</form> : content,
         nodeRef.current,
       )
     : null;
@@ -269,7 +367,6 @@ const ModalOverlay = styled.div`
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(2px);
 `;
 
 const ModalContainer = styled.div`
@@ -293,29 +390,35 @@ const ModalContainer = styled.div`
 const contentTopMarginPx = 24;
 const Description = styled.div`
   color: ${({ theme }) => theme.mcNeutral};
-  margin-top: 4px;
+  margin-top: ${Spacing.sm};
   & + * {
     margin-top: ${contentTopMarginPx}px;
   }
 `;
 
 const ModalButtonRow = styled.div`
-  margin-top: 32px;
+  margin-top: ${Spacing.lg};
   ${bp.minSm(`display: flex;`)}
   gap: 10px;
 
-  button {
+  ${ButtonSelector()} {
     width: 50%;
     ${bp.sm(`
       width: 100%;
     `)}
   }
+`;
 
-  button:last-of-type {
-    ${bp.sm(`
-      margin-top: 16px;
-    `)}
+const ModalButtonColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${Spacing.sm};
+
+  ${ButtonSelector()} {
+    width: 100%;
   }
+
+  margin-top: ${Spacing.lg};
 `;
 
 const ModalContent = styled.div<{
@@ -324,7 +427,7 @@ const ModalContent = styled.div<{
 }>`
   ${overflowAutoWithoutScrollbars}
   ${standardContentInset.smCSS}
-  ${standardBorderRadius(16)}
+  ${(props) => (props.ghost ? "" : standardBorderRadius(16))}
   ${(props) => (props.ghost ? "" : overlaySurface)}
   pointer-events: auto;
   transition: width 0.25s ease-in;
@@ -334,16 +437,21 @@ const ModalContent = styled.div<{
   position: absolute;
   ${(props) => (props.ghost ? "" : "padding: 16px 16px 40px;")}
 
-  h4 {
+  ${headlineSelector("h4")} { {
     margin: 0;
-    font-weight: 800;
-    font-size: ${pxToRems(21)};
     & + *:not(${select(Description)}) {
       margin-top: ${contentTopMarginPx}px;
     }
   }
 `;
 
+const CloseButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: flex-end;
+`;
+
 const CloseButton = styled(UnstyledButton)`
   ${standardFocusOutline}
   width: 24px;
diff --git a/packages/ui/src/components/PageSection/PageSection.tsx b/packages/ui/src/components/PageSection/PageSection.tsx
new file mode 100644
index 000000000..19a31e1de
--- /dev/null
+++ b/packages/ui/src/components/PageSection/PageSection.tsx
@@ -0,0 +1,426 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import React, { Fragment } from "react";
+import { bp } from "../../styles/breakpoints.js";
+import { colors } from "../../styles/colors.js";
+import {
+  standardBorderRadius,
+  standardLineHeightEms,
+} from "../../styles/common.js";
+import { standardBorderColor } from "../../styles/fields.js";
+import { Heading, headingWithDefaults } from "../../styles/type.js";
+import { select } from "../../utils/emotion.js";
+import { toReactNodes } from "../../utils/toReactNodes.js";
+import { Badge, badgeVPadding } from "../Badge.js";
+import { Dropdown } from "../Dropdown.js";
+import { Icon } from "../Icon/Icon.js";
+import { type IconName } from "../Icon/types.js";
+import { Loading } from "../Loading.js";
+import { TextButton } from "../TextButton.js";
+import { UnstyledButton } from "../UnstyledButton.js";
+import { pageSectionScrollOffset } from "./constants.js";
+
+export type PageSectionProps = {
+  children?: React.ReactNode;
+  title?: string | undefined;
+  sectionId: string;
+  headerOffset?: number;
+};
+
+export function PageSection({
+  children,
+  title,
+  sectionId,
+  headerOffset = 0,
+}: PageSectionProps) {
+  return (
+    <StyledPageSection scrollMarginTop={headerOffset + pageSectionScrollOffset}>
+      {title ? (
+        <Heading type="h3" id={sectionId} mt={0} mb={40}>
+          {title}
+        </Heading>
+      ) : null}
+      {children}
+    </StyledPageSection>
+  );
+}
+
+const StyledPageSection = styled.div<{ scrollMarginTop: number }>`
+  &:first-of-type {
+    ${bp.minSm(`
+      margin-top: 4px;
+    `)}
+  }
+
+  &:not(:first-of-type) {
+    margin-top: 72px;
+  }
+
+  h3,
+  h4 {
+    scroll-margin-top: ${({ scrollMarginTop }) => scrollMarginTop}px !important;
+  }
+`;
+
+export const PageSectionSubheading = headingWithDefaults({
+  type: "h4",
+  mb: 32,
+});
+
+type PageSectionBoxActionColumnProps = {
+  label: string;
+  value?: string | null | undefined;
+  valueId?: string | undefined;
+};
+
+export const PageSectionBoxActionColumn = ({
+  label,
+  value,
+  valueId,
+}: PageSectionBoxActionColumnProps) => (
+  <StyledPageSectionBoxActionColumn>
+    <PageSectionBoxActionColumnLabel>{label}</PageSectionBoxActionColumnLabel>
+    {value ? (
+      <PageSectionBoxActionColumnValue id={valueId}>
+        {value}
+      </PageSectionBoxActionColumnValue>
+    ) : (
+      <PageSectionBoxActionColumnNoValue>
+        Unknown
+      </PageSectionBoxActionColumnNoValue>
+    )}
+  </StyledPageSectionBoxActionColumn>
+);
+
+const StyledPageSectionBoxActionColumn = styled.div``;
+
+const PageSectionBoxActionColumnLabel = styled.div`
+  color: ${colors.gray40};
+  font-weight: 500;
+  margin: 0;
+`;
+
+const PageSectionBoxActionColumnValue = styled.div`
+  font-weight: 700;
+  margin-bottom: 0;
+  margin-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const PageSectionBoxActionColumnNoValue = styled(
+  PageSectionBoxActionColumnValue,
+)`
+  color: ${colors.gray80};
+  font-style: italic;
+`;
+
+type PageSectionBoxActionProps<RoutesType extends string> = {
+  label?: string | undefined;
+  to?: RoutesType | undefined;
+  toParams?: Record<string, string> | undefined;
+  onClick?: (() => void) | undefined;
+  isDelete?: boolean;
+  loading?: boolean;
+  dropdownItems?:
+    | {
+        label: string;
+        to?: RoutesType;
+        onClick?: () => void;
+      }[]
+    | undefined;
+  icon?:
+    | {
+        name: IconName;
+        onClick: () => void;
+      }
+    | undefined
+    | null;
+};
+
+function PageSectionBoxAction<RoutesType extends string>({
+  dropdownItems,
+  icon,
+  isDelete = false,
+  label,
+  loading = false,
+  onClick,
+  to,
+  toParams,
+}: PageSectionBoxActionProps<RoutesType>) {
+  const theme = useTheme();
+  return loading ? (
+    <div>
+      <Loading size={12} center={false} />
+    </div>
+  ) : icon ? (
+    <div>
+      <UnstyledButton onClick={icon.onClick}>
+        <Icon name={icon.name} width={12} color="mcNeutral" />
+      </UnstyledButton>
+    </div>
+  ) : dropdownItems ? (
+    <Dropdown
+      button={{
+        getContent: () => <Icon name="DotGrid1x3Horizontal" width={16} />,
+      }}
+      dropdownItems={dropdownItems}
+    />
+  ) : isDelete ? (
+    <UnstyledButton css={{ color: theme.mcNeutral }} onClick={onClick}>
+      Delete
+    </UnstyledButton>
+  ) : label ? (
+    /* Extra div for proper default alignment inside flex contexts */
+    <div>
+      <TextButton<RoutesType>
+        /* actionIcon may be null to explicitly hide or undefined for default TextButton icon: */
+        leftIcon={icon}
+        text={label}
+        to={to}
+        toParams={toParams}
+        onClick={onClick}
+      />
+    </div>
+  ) : null;
+}
+
+type PageSectionBoxActionRowProps<RoutesType extends string> = {
+  action?: PageSectionBoxActionProps<RoutesType> | undefined;
+  title?: string;
+  titleBadge?: string | undefined;
+  description?: string;
+  separator?: boolean;
+  children?: React.ReactNode;
+  smFlexColumn?: boolean;
+};
+
+export const PageSectionBoxActionRow = <RoutesType extends string>({
+  title,
+  titleBadge,
+  description,
+  separator,
+  children,
+  action,
+  smFlexColumn = true,
+}: PageSectionBoxActionRowProps<RoutesType>) => {
+  return (
+    <Fragment>
+      <SPageSectionBoxActionRow
+        separator={Boolean(separator)}
+        smFlexColumn={Boolean(smFlexColumn)}
+      >
+        {title ? (
+          <div>
+            <PageSectionBoxTitle>
+              {title}
+              {titleBadge ? <Badge text={titleBadge} ml={4} /> : null}
+            </PageSectionBoxTitle>
+            {description ? (
+              <PageSectionBoxDescription>
+                {description}
+              </PageSectionBoxDescription>
+            ) : null}
+          </div>
+        ) : null}
+        {children}
+        <PageSectionBoxAction {...action} />
+      </SPageSectionBoxActionRow>
+    </Fragment>
+  );
+};
+
+const SPageSectionBoxActionRow = styled.div<{
+  separator: boolean;
+  smFlexColumn: boolean;
+}>`
+  display: flex;
+  gap: 12px;
+  align-items: top;
+  flex-direction: row;
+  justify-content: space-between;
+
+  & + & {
+    margin-top: 32px;
+  }
+
+  ${({ smFlexColumn }) =>
+    smFlexColumn ? bp.sm(`flex-direction: column;`) : ""}
+
+  &:has(> ${StyledPageSectionBoxActionColumn}) {
+    ${select(StyledPageSectionBoxActionColumn)} {
+      width: 150px;
+    }
+    ${bp.maxMd(`
+      ${select(StyledPageSectionBoxActionColumn)} {
+        width: auto;
+      }
+    `)}
+  }
+
+  ${({ separator, theme }) =>
+    separator &&
+    `
+      border-top: 1px solid;
+      ${standardBorderColor({ theme }).styles};
+      padding-top: 32px;
+    `}
+`;
+
+export const PageSectionBoxColumn = styled.div``;
+export const PageSectionBoxRow = styled.div`
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(215px, 1fr)
+  ); /* This creates as many columns as can fit, each at least 150px wide */
+`;
+
+type PageSectionBoxProps<RoutesType extends string> = {
+  action?: PageSectionBoxActionProps<RoutesType> | undefined;
+  description?: string;
+  children?: React.ReactNode;
+};
+
+export function PageSectionBox<RoutesType extends string>({
+  action,
+  description,
+  children,
+}: PageSectionBoxProps<RoutesType>) {
+  return (
+    <StyledPageSectionBox>
+      {description && (
+        <PageSectionBoxDescription>
+          {toReactNodes(description)}
+        </PageSectionBoxDescription>
+      )}
+      {children}
+      {action?.label ? (
+        <div css={{ marginTop: "12px" }}>
+          <PageSectionBoxAction {...action} />
+        </div>
+      ) : null}
+    </StyledPageSectionBox>
+  );
+}
+
+export const StyledPageSectionBox = styled.div`
+  & + & {
+    margin-top: 32px;
+  }
+
+  & > ${PageSectionBoxRow}, & {
+    border: 1px solid;
+    ${standardBorderColor}
+  }
+
+  ${standardBorderRadius(8)}
+  padding: 16px;
+
+  /* PageSectionBoxRow and PageSectionBoxColumn manage their own borders: */
+  &:has(> ${PageSectionBoxRow}) {
+    border: none;
+    padding: 0;
+    ${standardBorderRadius(0)}
+  }
+
+  & > ${PageSectionBoxRow} {
+    &:first-of-type {
+      ${standardBorderRadius([12, 12, 0, 0])}
+    }
+
+    &:last-of-type {
+      ${standardBorderRadius([0, 0, 12, 12])}
+    }
+
+    &:only-of-type {
+      ${standardBorderRadius(12)}
+    }
+
+    &:not(:last-of-type) {
+      border-bottom: 0;
+    }
+
+    ${PageSectionBoxColumn} {
+      padding: 32px;
+      ${bp.sm(`padding: 16px;`)}
+      &:not(:first-of-type) {
+        border-left: solid 1px;
+        ${standardBorderColor}
+      }
+    }
+
+    ${({ theme }) =>
+      bp.maxMd(`
+        grid-template-columns: none;
+        ${select(PageSectionBoxColumn)} {
+          &:not(:first-of-type) {
+            border-left: 0 !important;
+            border-top: solid 1px;
+            ${standardBorderColor({ theme }).styles};
+          }
+        }
+      `)}
+  }
+`;
+
+export const PageSectionBoxTitle = styled.div<{ lg?: boolean }>`
+  display: flex;
+  align-items: center;
+  font-size: ${({ lg }) => (lg ? 14 : 12)}px;
+  font-weight: 600;
+  line-height: ${({ lg }) =>
+    standardLineHeightEms * (lg ? 14 : 12) + badgeVPadding * 2}px;
+`;
+
+export const PageSectionBoxDescription = styled.div`
+  color: ${({ theme }) => theme.mcNeutral};
+  ${PageSectionBoxTitle} + & {
+    margin-top: 6px;
+  }
+`;
+
+const gapPx = 24;
+export const PageSectionRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${gapPx}px;
+
+  ${bp.minSm(`
+    flex-direction: row;
+  `)}
+
+  margin-top: 40px;
+  &:first-of-type {
+    margin-top: 0;
+  }
+`;
+
+export const PageSectionRowSubSection = styled.div`
+  box-sizing: border-box;
+  width: 100%;
+
+  &:first-of-type {
+    margin-right: 0px;
+  }
+
+  &:last-of-type {
+    margin-left: 0px;
+    margin-top: ${gapPx}px;
+  }
+
+  ${StyledPageSectionBox} + ${StyledPageSectionBox} {
+    /* Less margin for boxes within a single SubSection: */
+    margin-top: 16px;
+  }
+
+  ${bp.minSm(`
+    width: calc(50% - ${gapPx / 2}px);
+
+    &:last-of-type {
+      margin-top: 0;
+    }
+  `)}
+`;
diff --git a/packages/ui/src/components/PageSection/PageSectionNav.tsx b/packages/ui/src/components/PageSection/PageSectionNav.tsx
new file mode 100644
index 000000000..d71b8bff2
--- /dev/null
+++ b/packages/ui/src/components/PageSection/PageSectionNav.tsx
@@ -0,0 +1,100 @@
+import styled from "@emotion/styled";
+import { notNullUndefined } from "@lightsparkdev/core";
+import { bp } from "../../styles/breakpoints.js";
+import { colors } from "../../styles/colors.js";
+import { IconContainer } from "../Icon/Icon.js";
+import { type IconName } from "../Icon/types.js";
+import { TextButton } from "../TextButton.js";
+import { pageSectionScrollOffset } from "./constants.js";
+
+const StyledPageSectionNav = styled.div`
+  display: none;
+  flex-direction: column;
+  margin-right: 32px;
+  position: relative;
+
+  ${bp.minMd(`
+    display: flex;
+    width: 150px;
+  `)}
+
+  ${bp.lg(`
+    width: 200px;
+  `)}
+`;
+
+const PageSectionList = styled.ul<{ top: number }>`
+  margin: 0;
+  padding: 0;
+  position: sticky;
+  top: ${({ top }) => top}px;
+`;
+
+const StyledPageSectionNavItem = styled.li`
+  align-items: center;
+  color: ${colors.gray40};
+  display: flex;
+  list-style: none;
+
+  ${IconContainer}:not(:first-of-type) {
+    visibility: hidden;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.hcNeutral};
+
+    ${IconContainer} {
+      visibility: visible;
+    }
+  }
+`;
+
+type ListItemProps = {
+  leftIcon: IconName;
+  label: string;
+  sectionId: string | null;
+};
+
+const PageSectionListItem = ({ leftIcon, label, sectionId }: ListItemProps) => (
+  <StyledPageSectionNavItem>
+    <TextButton
+      text={label}
+      padding="8px 0"
+      leftIcon={{ name: leftIcon }}
+      onClick={() => {
+        if (sectionId) {
+          window.location.replace(`#${sectionId}`);
+        } else {
+          window.location.replace("#");
+        }
+      }}
+    />
+  </StyledPageSectionNavItem>
+);
+
+type PageSectionNavProps = {
+  pageSectionNavItems: ListItemProps[];
+  headerOffset?: number;
+};
+
+export function PageSectionNav({
+  headerOffset = 0,
+  pageSectionNavItems,
+}: PageSectionNavProps) {
+  return (
+    <StyledPageSectionNav>
+      <PageSectionList top={headerOffset + pageSectionScrollOffset}>
+        {pageSectionNavItems.filter(notNullUndefined).map((item) => {
+          return (
+            <PageSectionListItem
+              leftIcon={item.leftIcon}
+              label={item.label}
+              sectionId={item.sectionId}
+              key={item.sectionId}
+            />
+          );
+        })}
+      </PageSectionList>
+    </StyledPageSectionNav>
+  );
+}
diff --git a/packages/ui/src/components/PageSection/constants.tsx b/packages/ui/src/components/PageSection/constants.tsx
new file mode 100644
index 000000000..f042e7d9d
--- /dev/null
+++ b/packages/ui/src/components/PageSection/constants.tsx
@@ -0,0 +1 @@
+export const pageSectionScrollOffset = 20;
diff --git a/packages/ui/src/components/PhoneInput.tsx b/packages/ui/src/components/PhoneInput.tsx
new file mode 100644
index 000000000..38422e408
--- /dev/null
+++ b/packages/ui/src/components/PhoneInput.tsx
@@ -0,0 +1,126 @@
+import {
+  AsYouType,
+  getCountries,
+  getCountryCallingCode,
+  type CountryCode,
+} from "libphonenumber-js";
+import { useCallback, useState, type ComponentProps } from "react";
+import { type SimpleTypographyProps } from "../styles/typography.js";
+import { countryCodesToNames } from "../utils/countryCodesToNames.js";
+import { TextInput } from "./TextInput.js";
+
+const countries = getCountries();
+const defaultOptions = countries
+  .map((countryCode) => {
+    if (countryCodesToNames[countryCode] === undefined) {
+      console.log("no name", countryCode);
+    }
+    return {
+      value: countryCode,
+      label: `${getCountryCallingCode(countryCode)} (${
+        countryCodesToNames[countryCode]
+      })`,
+    };
+  })
+  .sort((a, b) => a.label.localeCompare(b.label));
+
+function getSelectWidth(value: CountryCode, pxPerChar: number) {
+  const label = getCountryCallingCode(value);
+  const chars = label.length;
+  return chars * pxPerChar + 30;
+}
+
+export type PhoneInputOnChangeArg = {
+  number: string;
+  formatted: string;
+  isValid: boolean;
+};
+
+type PhoneInputProps = {
+  pxPerChar?: number;
+  onChange?: ({ number, formatted, isValid }: PhoneInputOnChangeArg) => void;
+  typography?: SimpleTypographyProps | undefined;
+};
+
+export function PhoneInput({
+  typography,
+  onChange: onChangeProp,
+  pxPerChar = 6,
+}: PhoneInputProps) {
+  /* countryCode only controls the country used for parsing phone number input. User may
+     still enter or paste the country phone code */
+  const [countryCode, setCountryCode] = useState<CountryCode>("US");
+  const [value, setValue] = useState("");
+  const [width, setWidth] = useState(getSelectWidth(countryCode, pxPerChar));
+  const [wasBlurred, setWasBlurred] = useState(false);
+
+  const onChangeSelect = useCallback(
+    (newValue: string) => {
+      setCountryCode(newValue as CountryCode);
+      const newWidth = getSelectWidth(newValue as CountryCode, pxPerChar);
+      setWidth(newWidth);
+    },
+    [setCountryCode, setWidth, pxPerChar],
+  );
+
+  const options = defaultOptions.map((option) => {
+    if (option.value === countryCode) {
+      return {
+        ...option,
+        label: `+ ${getCountryCallingCode(countryCode)}`,
+      };
+    }
+    return option;
+  });
+
+  const onChange = useCallback<ComponentProps<typeof TextInput>["onChange"]>(
+    (newValue) => {
+      /* Prevent putting the formatter into international mode, which
+         causes an undesirable formatting style. We can still derive the number
+         with the correct international code from the formatter without it. */
+      const parsedValue = newValue.startsWith("+")
+        ? newValue.slice(1)
+        : newValue;
+      const formatter = new AsYouType(countryCode);
+      const formattedValue = formatter.input(parsedValue);
+      setValue(formattedValue);
+      const phoneNumber = formatter.getNumber();
+
+      if (onChangeProp && phoneNumber) {
+        onChangeProp({
+          number: phoneNumber.number,
+          formatted: formattedValue,
+          isValid: phoneNumber.isValid(),
+        });
+      }
+    },
+    [setValue, countryCode, onChangeProp],
+  );
+
+  const formatter = new AsYouType(countryCode);
+  const formattedValue = formatter.input(value);
+  const isValidPhone = formatter.isValid();
+
+  const error =
+    !isValidPhone && wasBlurred
+      ? "Please enter a valid phone number."
+      : undefined;
+
+  return (
+    <TextInput
+      select={{
+        options,
+        value: countryCode,
+        onChange: onChangeSelect,
+        width,
+      }}
+      pattern="[0-9,]*"
+      inputMode="numeric"
+      value={formattedValue}
+      onBlur={() => setWasBlurred(true)}
+      onChange={onChange}
+      error={error}
+      typography={typography}
+    />
+  );
+}
diff --git a/packages/ui/src/components/Pill.tsx b/packages/ui/src/components/Pill.tsx
index 93cc1d150..bf2edfbc1 100644
--- a/packages/ui/src/components/Pill.tsx
+++ b/packages/ui/src/components/Pill.tsx
@@ -3,7 +3,8 @@ import styled from "@emotion/styled";
 import { useEffect, useRef } from "react";
 import { colors } from "../styles/colors.js";
 import { flexCenter } from "../styles/utils.js";
-import { Icon } from "./Icon.js";
+import { Icon } from "./Icon/Icon.js";
+import { type IconName } from "./Icon/types.js";
 import { Loading } from "./Loading.js";
 import { UnstyledButton } from "./UnstyledButton.js";
 
@@ -17,7 +18,7 @@ type PillProps = {
   onDeleteFromKeyboard?: () => void;
   text: string;
   loading?: boolean;
-  icon?: string;
+  icon?: IconName;
   cursor?: "pointer" | "text";
   isEditing?: boolean;
   onChangeTextInput?: (newValue: string) => void;
@@ -115,7 +116,7 @@ export function Pill({
             </UnstyledButton>
           )}
           {!loading && icon && !onDeleteMouseDown && (
-            <Icon name={icon} width={16.1} color={colors.white} />
+            <Icon name={icon} width={16.1} color="white" />
           )}
         </PillIconContainer>
       )}
diff --git a/packages/ui/src/components/ProgressBar.tsx b/packages/ui/src/components/ProgressBar.tsx
index 9ed31b3d8..7462eb1e4 100644
--- a/packages/ui/src/components/ProgressBar.tsx
+++ b/packages/ui/src/components/ProgressBar.tsx
@@ -2,8 +2,8 @@
 
 import styled from "@emotion/styled";
 import { useEffect, useState } from "react";
-import { themeOr } from "../styles/colors.js";
 import { standardBorderRadius } from "../styles/common.js";
+import { themeOr } from "../styles/themes.js";
 
 export type ProgressBarProps = {
   background?: string | undefined;
diff --git a/packages/ui/src/components/Radio.tsx b/packages/ui/src/components/Radio.tsx
new file mode 100644
index 000000000..e3ebd0f38
--- /dev/null
+++ b/packages/ui/src/components/Radio.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import styled from "@emotion/styled";
+
+import { Label } from "@lightsparkdev/ui/src/components/typography";
+import { Spacing } from "@lightsparkdev/ui/src/styles/tokens/spacing";
+import React, { useState } from "react";
+
+interface RadioOption<Option extends string> {
+  label: Option;
+}
+
+interface Props<Option extends string> {
+  radioOptions: RadioOption<Option>[];
+  defaultOption: Option;
+  onChange: (label: Option) => void;
+}
+
+export function Radio<Option extends string>({
+  radioOptions,
+  onChange,
+  defaultOption,
+}: Props<Option>) {
+  const [selectedOption, setSelectedOption] = useState<Option>(defaultOption);
+
+  const handleRadioClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value as Option);
+    setSelectedOption(e.target.value as Option);
+  };
+
+  return (
+    <RadioContainer>
+      {radioOptions.map((option) => (
+        <RadioRow key={option.label} htmlFor={option.label as string}>
+          <RadioInput
+            id={option.label as string}
+            type="radio"
+            value={option.label}
+            checked={selectedOption === option.label}
+            onChange={handleRadioClick}
+          />
+          <Label>{option.label}</Label>
+        </RadioRow>
+      ))}
+    </RadioContainer>
+  );
+}
+
+const RadioContainer = styled.div`
+  label: flex;
+  flex-direction: column;
+`;
+
+const RadioRow = styled.label`
+  display: flex;
+  align-items: center;
+  gap: ${Spacing.sm};
+`;
+
+const RadioInput = styled.input``;
diff --git a/packages/ui/src/components/TextButton.tsx b/packages/ui/src/components/TextButton.tsx
new file mode 100644
index 000000000..a8dab74d3
--- /dev/null
+++ b/packages/ui/src/components/TextButton.tsx
@@ -0,0 +1,151 @@
+import type { Theme } from "@emotion/react";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { type ComponentProps } from "react";
+import { Link, type RouteParams } from "../router.js";
+import { getFocusOutline } from "../styles/common.js";
+import { type SimpleTypographyProps } from "../styles/typography.js";
+import { elide, type ElideArgs } from "../utils/strings.js";
+import { TextIconAligner } from "./TextIconAligner.js";
+import { UnstyledButton } from "./UnstyledButton.js";
+
+export type TextButtonProps<RoutesType extends string> = Omit<
+  ComponentProps<typeof TextIconAligner>,
+  "content"
+> & {
+  disabled?: boolean;
+  to?: RoutesType | undefined;
+  href?: string;
+  elide?: ElideArgs;
+  toParams?: RouteParams | undefined;
+  onClick?: (() => void) | undefined;
+  mt?: number;
+  ml?: number;
+  mr?: number;
+  padding?: string;
+  iconMatchTextColor?: boolean;
+  text: string;
+  typography?: SimpleTypographyProps | undefined;
+};
+
+export function TextButton<RoutesType extends string>({
+  text: textProp,
+  to,
+  href,
+  toParams,
+  onClick,
+  rightIcon,
+  leftIcon,
+  elide: elideArgs,
+  disabled = false,
+  mt = 0,
+  ml = 0,
+  mr = 0,
+  padding = "0",
+  iconMatchTextColor = false,
+  typography,
+}: TextButtonProps<RoutesType>) {
+  const text = elideArgs ? elide(textProp, elideArgs) : textProp;
+
+  let rightIconProp = rightIcon;
+  if (typeof rightIcon === "undefined" && typeof leftIcon === "undefined") {
+    rightIconProp = {
+      name: "RightArrow",
+    };
+  }
+
+  const defaultIconColor = iconMatchTextColor ? undefined : "mcNeutral";
+
+  const content = (
+    <TextIconAligner
+      onClick={onClick}
+      leftIcon={
+        leftIcon
+          ? {
+              name: leftIcon.name,
+              color: leftIcon.color || defaultIconColor,
+              width: leftIcon.width,
+            }
+          : null
+      }
+      content={text}
+      typography={{ size: "ExtraSmall", ...typography }}
+      rightIcon={
+        rightIconProp
+          ? {
+              name: rightIconProp.name,
+              color: rightIconProp.color || defaultIconColor,
+              width: rightIconProp.width,
+            }
+          : null
+      }
+    />
+  );
+
+  const commonProps = {
+    type: "button" as const,
+    onClick,
+    disabled: disabled,
+    padding,
+    css: {
+      marginTop: mt ? `${mt}px` : undefined,
+      marginLeft: ml ? `${ml}px` : undefined,
+      marginRight: mr ? `${mr}px` : undefined,
+    },
+  };
+
+  if (to) {
+    return (
+      <ButtonLink {...commonProps} to={to} params={toParams}>
+        {content}
+      </ButtonLink>
+    );
+  }
+
+  return href ? (
+    <ButtonHrefLink {...commonProps} href={href} target="_blank">
+      {content}
+    </ButtonHrefLink>
+  ) : (
+    <StyledButton {...commonProps}>{content}</StyledButton>
+  );
+}
+
+type StyledButtonProps = {
+  type: "button";
+  disabled: boolean;
+  padding: string;
+};
+
+const buttonStyle = ({
+  theme,
+  disabled,
+  padding,
+}: StyledButtonProps & { theme: Theme }) => css`
+  display: inline-flex;
+  opacity: ${disabled ? 0.2 : 1};
+  align-items: center;
+  transition: opacity 0.2s;
+  padding: ${padding};
+
+  &:focus-visible {
+    outline: ${getFocusOutline({ theme })};
+  }
+
+  & > * {
+    width: 100%;
+    text-align: center;
+    white-space: nowrap;
+    cursor: ${disabled ? "not-allowed" : "pointer"};
+  }
+`;
+
+const StyledButton = styled(UnstyledButton)<StyledButtonProps>`
+  ${(props) => buttonStyle(props)}
+`;
+const ButtonLink = styled(Link)<StyledButtonProps>`
+  ${(props) => buttonStyle(props)}
+`;
+const ButtonHrefLink = styled.a<StyledButtonProps>`
+  ${(props) => buttonStyle(props)}
+`;
diff --git a/packages/ui/src/components/TextIconAligner.tsx b/packages/ui/src/components/TextIconAligner.tsx
index 21f104dfd..625e154bc 100644
--- a/packages/ui/src/components/TextIconAligner.tsx
+++ b/packages/ui/src/components/TextIconAligner.tsx
@@ -1,27 +1,36 @@
 /** @jsxImportSource @emotion/react */
-import { Icon } from "./Icon.js";
+import { type ThemeOrColorKey } from "../styles/themes.js";
+import { type SimpleTypographyProps } from "../styles/typography.js";
+import { type ToNonTypographicReactNodesArgs } from "../utils/toNonTypographicReactNodes.js";
+import { Icon } from "./Icon/Icon.js";
+import { type IconName } from "./Icon/types.js";
+import { renderTypography } from "./typography/renderTypography.js";
 
 /* The goal here is to constrain allowed spacings and avoid one-offs
    to ensure spacings are as consistent as possible throughout the UI. */
-const marginPx = [6, 12] as const;
+const marginPx = [4, 6, 8, 10, 12] as const;
 type MarginPx = (typeof marginPx)[number];
 
-export type TextIconAlignerProps = {
-  text: string;
+const width = [12, 14, 16] as const;
+export type TextIconAlignerIconWidth = (typeof width)[number];
+
+type TextIconAlignerProps = {
+  content?: ToNonTypographicReactNodesArgs | undefined;
+  typography?: SimpleTypographyProps | undefined;
   rightIcon?:
     | {
-        name: string;
-        color?: string;
-        lg?: boolean | undefined;
+        name: IconName;
+        color?: ThemeOrColorKey | undefined;
+        width?: TextIconAlignerIconWidth | undefined;
         ml?: MarginPx | undefined;
       }
     | undefined
     | null;
   leftIcon?:
     | {
-        name: string;
-        color?: string;
-        lg?: boolean | undefined;
+        name: IconName;
+        color?: ThemeOrColorKey | undefined;
+        width?: TextIconAlignerIconWidth | undefined;
         mr?: MarginPx | undefined;
       }
     | undefined
@@ -30,15 +39,22 @@ export type TextIconAlignerProps = {
 };
 
 export function TextIconAligner({
-  text,
+  content,
+  typography,
   rightIcon,
   leftIcon,
   onClick,
 }: TextIconAlignerProps) {
+  const nodes = renderTypography(typography?.type || "Body", {
+    content,
+    size: typography?.size || "Small",
+    color: typography?.color || "inherit",
+  });
+
   const leftIconNode = leftIcon ? (
     <Icon
       name={leftIcon.name}
-      width={leftIcon.lg ? 16 : 12}
+      width={leftIcon.width ? leftIcon.width : 12}
       mr={leftIcon.mr || 6}
       color={leftIcon.color}
     />
@@ -46,7 +62,7 @@ export function TextIconAligner({
   const rightIconNode = rightIcon ? (
     <Icon
       name={rightIcon.name}
-      width={rightIcon.lg ? 16 : 12}
+      width={rightIcon.width ? rightIcon.width : 12}
       ml={rightIcon.ml || 6}
       color={rightIcon.color}
     />
@@ -62,7 +78,7 @@ export function TextIconAligner({
       onClick={onClick}
     >
       {leftIconNode}
-      {text}
+      {nodes}
       {rightIconNode}
     </span>
   );
diff --git a/packages/ui/src/components/TextInput.tsx b/packages/ui/src/components/TextInput.tsx
new file mode 100644
index 000000000..b0987777b
--- /dev/null
+++ b/packages/ui/src/components/TextInput.tsx
@@ -0,0 +1,399 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+import styled from "@emotion/styled";
+import type {
+  ClipboardEvent,
+  CompositionEvent,
+  KeyboardEvent,
+  RefCallback,
+  RefObject,
+  SyntheticEvent,
+} from "react";
+import React, { useState } from "react";
+import { standardBorderRadius } from "../styles/common.js";
+import {
+  InputSubtext,
+  defaultTextInputTypography,
+  inputSpacingPx,
+  textInputPlaceholderColor,
+  textInputStyle,
+} from "../styles/fields.js";
+import { getFontColor, type FontColorKey } from "../styles/themes.js";
+import {
+  applyTypography,
+  type RequiredSimpleTypographyProps,
+  type SimpleTypographyProps,
+} from "../styles/typography.js";
+import { z } from "../styles/z-index.js";
+import { CheckboxContainer } from "./Checkbox.js";
+import { Icon, IconContainer } from "./Icon/Icon.js";
+import { type IconName } from "./Icon/types.js";
+import { ToggleContainer } from "./Toggle.js";
+import { Tooltip } from "./Tooltip.js";
+import { UnstyledButton } from "./UnstyledButton.js";
+
+const selectLeftOffset = 10;
+
+export type TextInputProps = {
+  disabled?: boolean;
+  error?: string | undefined;
+  icon?:
+    | {
+        name: IconName;
+        width?: 8 | 12 | 16;
+        side?: "left" | "right";
+        offset?: "small" | "large";
+      }
+    | undefined;
+  maxLength?: number;
+  name?: string;
+  onBlur?: () => void;
+  onChange: (
+    newValue: string,
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => void;
+  onEnter?: () => void;
+  onFocus?: () => void;
+  onPaste?: (event: ClipboardEvent<HTMLInputElement>) => void;
+  onKeyDown?: (
+    keyValue: string,
+    event: React.KeyboardEvent<HTMLInputElement>,
+  ) => void;
+  placeholder?: string;
+  inputRef?: RefObject<HTMLInputElement>;
+  inputRefCb?: RefCallback<HTMLInputElement>;
+  id?: string;
+  type?: "text" | "password" | "hidden" | undefined;
+  value: string;
+  onClickIcon?: () => void;
+  testId?: string;
+  autoComplete?: "off" | "new-password" | "current-password" | "username";
+  onBeforeInput?: (e: CompositionEvent) => void;
+  pattern?: string;
+  inputMode?: "numeric";
+  hint?: string | undefined;
+  hintTooltip?: string | undefined;
+  label?: string;
+  rightButtonText?: string | undefined;
+  onRightButtonClick?: () => void;
+  typography?: SimpleTypographyProps | undefined;
+  select?:
+    | {
+        options: { value: string; label: string }[];
+        value: string;
+        onChange: (value: string) => void;
+        /* A specified width is required to ensure left input padding is correct */
+        width: number;
+      }
+    | undefined;
+};
+
+export function TextInput(props: TextInputProps) {
+  const [focused, setFocused] = useState(false);
+
+  const inputRef = props.inputRef || React.createRef<HTMLInputElement>();
+  /* props.inputRefCb should have priority if provided: */
+  const ref = props.inputRefCb || inputRef;
+  if (props.inputRefCb && !props.inputRef) {
+    console.warn("TextInput: inputRef should be provided with inputRefCb.");
+  }
+
+  const typography = {
+    ...defaultTextInputTypography,
+    ...props.typography,
+  } as RequiredSimpleTypographyProps;
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Enter" && props.onEnter) {
+      props.onEnter();
+    }
+  };
+
+  const hasError = Boolean(props.error);
+
+  /* Default to right side icon if not specified: */
+  const isIconRight = Boolean(props.icon && props.icon.side !== "left");
+  const iconWidth = props.icon?.width || 12;
+  /* Where the icon center should be regardless of width */
+  const iconCenterOffset = props.icon?.offset === "large" ? 26 : 18;
+  const iconOffset = iconCenterOffset - iconWidth / 2;
+  const iconTextOffset = iconCenterOffset === 18 ? 4 : 14;
+
+  let paddingLeftPx: number | undefined;
+  if (props.icon && !isIconRight) {
+    paddingLeftPx = iconOffset + iconWidth + iconTextOffset;
+  } else if (props.select && typeof props.select.width === "number") {
+    paddingLeftPx = selectLeftOffset + props.select.width + 5;
+  }
+
+  let input = (
+    <Input
+      disabled={Boolean(props.disabled)}
+      maxLength={props.maxLength}
+      inputMode={props.inputMode}
+      pattern={props.pattern}
+      onBlur={() => {
+        setFocused(false);
+        if (props.onBlur) {
+          props.onBlur();
+        }
+      }}
+      onChange={(e) => {
+        // needed to prevent default chrome error message when in a form element
+        e.target.setCustomValidity("");
+        props.onChange(e.target.value, e);
+      }}
+      onFocus={() => {
+        setFocused(true);
+        if (props.onFocus) {
+          props.onFocus();
+        }
+      }}
+      onKeyDown={(e) => {
+        if (props.onKeyDown) {
+          props.onKeyDown(e.key, e);
+        }
+        handleKeyDown(e);
+      }}
+      id={props.id}
+      onPaste={props.onPaste}
+      placeholder={props.placeholder}
+      ref={ref}
+      name={props.name}
+      type={props.type || "text"}
+      value={props.value}
+      paddingLeftPx={paddingLeftPx}
+      paddingRightPx={isIconRight ? 28 : undefined}
+      hasError={hasError}
+      data-test-id={props.testId}
+      typography={typography}
+      autoComplete={
+        props.autoComplete === "off" ? "new-password" : props.autoComplete
+      }
+      onBeforeInput={(e: SyntheticEvent) => {
+        // more on the typings here - the default doesn't work for referencing
+        // event.data https://stackoverflow.com/a/68108756/9808766
+        if (props.onBeforeInput) {
+          const event = e as CompositionEvent;
+          props.onBeforeInput(event);
+        }
+      }}
+    />
+  );
+
+  if (props.icon) {
+    input = (
+      <WithIcon hasError={hasError} withFocus={focused}>
+        {isIconRight ? <>{input}</> : null}
+        <TextInputIconContainer
+          onClick={props.onClickIcon ? props.onClickIcon : () => {}}
+          isIconRight={isIconRight}
+          iconOffset={iconOffset}
+          focused={focused}
+          hasValue={Boolean(props.value)}
+          colorProp={typography.color}
+        >
+          <Icon name={props.icon.name} width={iconWidth} />
+        </TextInputIconContainer>
+        {isIconRight ? null : <>{input}</>}
+        {props.rightButtonText && (
+          <TextInputIconContainer
+            isIconRight={true}
+            iconOffset={iconOffset}
+            hasValue={Boolean(props.value)}
+            focused={focused}
+            colorProp={typography.color}
+          >
+            <RightButton onClick={props.onRightButtonClick}>
+              {props.rightButtonText}
+            </RightButton>
+          </TextInputIconContainer>
+        )}
+      </WithIcon>
+    );
+  }
+
+  const hintTooltipId = props.hintTooltip
+    ? `${props.id || "input"}-hint-tooltip`
+    : undefined;
+
+  const { select } = props;
+
+  return (
+    <InputContainer>
+      {props.label ? (
+        <TextInputLabel hasError={hasError}>{props.label}</TextInputLabel>
+      ) : null}
+      {select && (
+        <TextInputSelect
+          value={select.value}
+          widthProp={select.width}
+          typography={typography}
+          onChange={(event) => {
+            select.onChange(event.target.value);
+            inputRef.current?.focus();
+          }}
+        >
+          {select.options.map((option) => (
+            <option value={option.value} key={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </TextInputSelect>
+      )}
+      {input}
+      <InputSubtext
+        text={props.error || props.hint}
+        hasError={hasError}
+        tooltipId={hintTooltipId}
+      />
+      {props.hintTooltip ? (
+        <Tooltip id={hintTooltipId} content={props.hintTooltip} place="right" />
+      ) : null}
+    </InputContainer>
+  );
+}
+
+TextInput.defaultProps = {
+  disabled: false,
+  autoComplete: undefined,
+  hint: null,
+};
+
+const TextInputSelect = styled.select<{
+  widthProp: number;
+  typography: RequiredSimpleTypographyProps;
+}>`
+  ${({ typography, theme }) =>
+    applyTypography(theme, typography.type, typography.size, typography.color)}
+  position: absolute;
+  z-index: ${z.textInput + 1};
+  border: none;
+  background-color: transparent;
+  top: 0;
+  left: ${selectLeftOffset}px;
+  height: 48px;
+  width: ${({ widthProp }) => `${widthProp}px`};
+`;
+
+interface WithIconProps {
+  hasError: boolean;
+  withFocus: boolean;
+}
+
+const WithIcon = styled.div<WithIconProps>`
+  ${standardBorderRadius(8)}
+  position: relative;
+
+  input {
+    padding-right: 34px;
+  }
+
+  & ${IconContainer.toString()} {
+    z-index: ${z.textInput + 1};
+  }
+`;
+
+interface TextInputIconContainerProps {
+  onClick?: () => void;
+  isIconRight: boolean;
+  focused: boolean;
+  hasValue: boolean;
+  colorProp: FontColorKey;
+  iconOffset: number;
+}
+
+const TextInputIconContainer = styled.div<TextInputIconContainerProps>`
+  position: absolute;
+  z-index: ${z.textInput + 1};
+  ${({ isIconRight, iconOffset }) =>
+    isIconRight ? `right: ${iconOffset}px` : `left: ${iconOffset}px`};
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: ${({ onClick }) => (onClick ? "pointer" : "auto")};
+  color: ${({ focused, hasValue, theme, colorProp }) =>
+    focused || hasValue
+      ? getFontColor(theme, colorProp)
+      : textInputPlaceholderColor({ theme })};
+`;
+
+interface InputProps {
+  hasError: boolean;
+  disabled: boolean;
+  paddingLeftPx?: number | undefined;
+  paddingRightPx?: number | undefined;
+  typography: RequiredSimpleTypographyProps;
+}
+
+const Input = styled.input<InputProps>`
+  ${textInputStyle};
+
+  // disable autofill styles in chrome https://stackoverflow.com/a/68240841/9808766
+  &:-webkit-autofill,
+  &:-webkit-autofill:focus,
+  &:-internal-autofill-selected,
+  &:-internal-autofill-selected:focus {
+    background-color: ${({ theme, disabled }) => theme.bg} !important;
+    color: ${({ theme }) => theme.text} !important;
+    transition:
+      background-color 600000s 0s,
+      color 600000s 0s !important;
+  }
+`;
+
+const RightButton = styled(UnstyledButton)`
+  border-radius: 4px;
+  border: none;
+  background-color: ${({ theme }) => theme.vlcNeutral};
+  color: ${({ theme }) => theme.mcNeutral};
+  font-size: 14px;
+  font-weight: 600;
+  padding: 8px 10px;
+`;
+
+const TextInputLabel = styled.label<{ hasError: boolean }>`
+  ${standardBorderRadius(8)}
+  font-size: 10px;
+  position: absolute;
+  z-index: ${z.textInput + 1};
+  background-color: ${({ theme }) => theme.bg};
+  color: ${({ theme, hasError }) =>
+    hasError ? theme.danger : theme.mcNeutral};
+  font-weight: 600;
+  padding: 4px 6px;
+  left: 12px;
+  top: -10px;
+`;
+
+export const TextInputHalfRow = styled.div`
+  margin-top: ${inputSpacingPx}px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  & > * {
+    width: 50%;
+  }
+`;
+
+const InputContainer = styled.div`
+  width: 100%;
+  position: relative;
+
+  /* eg forms, should be left consistent: */
+  & + & {
+    margin-top: ${inputSpacingPx}px;
+  }
+
+  ${TextInputHalfRow.toString()} & + & {
+    margin-top: 0;
+  }
+
+  ${CheckboxContainer.toString()} + &,
+  ${ToggleContainer.toString()} + &,
+  & + ${CheckboxContainer.toString()},
+  & + ${ToggleContainer.toString()} {
+    margin-top: ${inputSpacingPx}px;
+  }
+`;
diff --git a/packages/ui/src/components/Toasts.tsx b/packages/ui/src/components/Toasts.tsx
new file mode 100644
index 000000000..674415a1b
--- /dev/null
+++ b/packages/ui/src/components/Toasts.tsx
@@ -0,0 +1,429 @@
+import styled from "@emotion/styled";
+import { isEqual } from "lodash-es";
+import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import { colors } from "../styles/colors.js";
+import { standardContentInset } from "../styles/common.js";
+import { themeOr } from "../styles/themes.js";
+import { type TypographyTypeKey } from "../styles/tokens/typography.js";
+import { extend, flexCenter, pxToRems } from "../styles/utils.js";
+import { z } from "../styles/z-index.js";
+import { toReactNodes, type ToReactNodesArgs } from "../utils/toReactNodes.js";
+import { Icon } from "./Icon/Icon.js";
+import { UnstyledButton } from "./UnstyledButton.js";
+
+type ToastQueueArg<T extends TypographyTypeKey> = {
+  text: ToReactNodesArgs<T>;
+  duration: number | null;
+  id: string;
+  expires: number;
+};
+
+type Toast<T extends TypographyTypeKey> = ToastQueueArg<T> & {
+  isActive: boolean;
+  isHiding: boolean;
+};
+
+export type ToastsProps<T extends TypographyTypeKey> = {
+  queue: ToastQueueArg<T>[];
+  onHide: (id: string) => void;
+  fromTop?: number;
+  stackDir?: "above" | "below";
+  removeExpiredAndNotVisible?: boolean;
+  dedupeConsecutive?: boolean;
+  maxVisible?: number;
+};
+
+type TimeoutRef = ReturnType<typeof setTimeout> | null;
+
+const firstDur = 0.3;
+
+export function Toasts<T extends TypographyTypeKey>({
+  queue,
+  onHide,
+  fromTop = 29,
+  stackDir = "above",
+  maxVisible = 3,
+  removeExpiredAndNotVisible = true,
+  dedupeConsecutive = true,
+}: ToastsProps<T>) {
+  const queuedToastIds = useRef(new Set<string>());
+  const prevToastQueue = useRef<ToastQueueArg<T>[]>([]);
+  const [toastQueue, setToastQueue] = useState<Toast<T>[]>([]);
+  /* There should only ever be one autoHideTimeoutRef at a time: */
+  const autoHideTimeoutRef = useRef<TimeoutRef>(null);
+  /* Multiple hidingTimeoutRefs may exist if the user is manually hiding toasts: */
+  const hidingTimeoutRefs = useRef<{ [id: string]: TimeoutRef }>({});
+  const nodeRef = useRef<null | HTMLDivElement>(null);
+  const [nodeReady, setNodeReady] = useState(false);
+
+  const hideToast = useCallback(
+    (id: string) => {
+      setToastQueue((currentToastQueue) => {
+        const hideToastIndex = currentToastQueue.findIndex((t) => t.id === id);
+        const newToastQueue = currentToastQueue.map((toast, i) => {
+          if (i === hideToastIndex) {
+            return {
+              ...toast,
+              isActive: false,
+              isHiding: true,
+            };
+          }
+          return toast;
+        });
+        return newToastQueue;
+      });
+      const hidingTimeoutRef = hidingTimeoutRefs.current[id];
+      if (hidingTimeoutRef) {
+        clearTimeout(hidingTimeoutRef);
+      }
+      hidingTimeoutRefs.current[id] = setTimeout(() => {
+        setToastQueue((currentToastQueue) => {
+          /* Remove the toast that's done hiding: */
+          const newToastQueue = currentToastQueue.filter((t) => t.id !== id);
+          /* Ensure external state updating function is called outside of this state update: */
+          setTimeout(() => onHide(id), 0);
+          hidingTimeoutRefs.current[id] = null;
+          return newToastQueue;
+        });
+      }, firstDur * 1000);
+
+      /* If hide was triggered from manual click remove any existing timeout: */
+      if (autoHideTimeoutRef.current) {
+        clearTimeout(autoHideTimeoutRef.current);
+        autoHideTimeoutRef.current = null;
+      }
+    },
+    [onHide, setToastQueue],
+  );
+
+  useEffect(() => {
+    const newToastQueueArgs = queue.reduce((acc, toast) => {
+      if (toast.expires < Date.now()) {
+        onHide(toast.id);
+        return acc;
+      }
+      if (!queuedToastIds.current.has(toast.id)) {
+        return [...acc, toast];
+      }
+      return acc;
+    }, [] as ToastQueueArg<T>[]);
+    if (newToastQueueArgs.length) {
+      const newToasts = newToastQueueArgs.reduce((acc, toast) => {
+        if (dedupeConsecutive && acc.length) {
+          const lastToast = acc[acc.length - 1];
+          if (isEqual(toast.text, lastToast.text)) {
+            return acc;
+          }
+        }
+        queuedToastIds.current.add(toast.id);
+        return [
+          ...acc,
+          {
+            ...toast,
+            isActive: true,
+            isHiding: false,
+          },
+        ] as Toast<T>[];
+      }, [] as Toast<T>[]);
+      setToastQueue((currentToastQueue) => {
+        const currentToast = currentToastQueue[currentToastQueue.length - 1];
+        if (
+          dedupeConsecutive &&
+          currentToast &&
+          isEqual(newToasts[0].text, currentToast.text)
+        ) {
+          return currentToastQueue;
+        }
+        return [...currentToastQueue, ...newToasts];
+      });
+    }
+  }, [queue, hideToast, onHide, dedupeConsecutive]);
+
+  /* Schedule autohide for the next toast when a toast is removed or added: */
+  useEffect(() => {
+    if (prevToastQueue.current.length !== toastQueue.length) {
+      const currentToast = toastQueue[toastQueue.length - 1];
+      if (currentToast && !currentToast.isHiding) {
+        if (autoHideTimeoutRef.current) {
+          clearTimeout(autoHideTimeoutRef.current);
+          autoHideTimeoutRef.current = null;
+        }
+        if (currentToast.duration) {
+          autoHideTimeoutRef.current = setTimeout(() => {
+            hideToast(currentToast.id);
+          }, currentToast.duration);
+        }
+      }
+      prevToastQueue.current = toastQueue;
+    }
+  }, [toastQueue, hideToast, onHide]);
+
+  useEffect(() => {
+    if (!nodeRef.current) {
+      nodeRef.current = document.createElement("div");
+      document.body.appendChild(nodeRef.current);
+    }
+    setNodeReady(true);
+    return () => {
+      if (nodeRef.current) {
+        document.body.removeChild(nodeRef.current);
+        nodeRef.current = null;
+      }
+    };
+  }, []);
+
+  const currentToastIndex = toastQueue.length - 1;
+  /* If a toast has expired and is not currently visible due to maxVisible, remove from queue */
+  useEffect(() => {
+    if (removeExpiredAndNotVisible) {
+      setToastQueue((currentToastQueue) => {
+        const newToastQueue = currentToastQueue.filter((toast, i) => {
+          const fromCurrent =
+            i === currentToastIndex ? 0 : currentToastIndex - i;
+          return toast.expires > Date.now() || fromCurrent < maxVisible;
+        });
+        return newToastQueue;
+      });
+    }
+  }, [currentToastIndex, maxVisible, removeExpiredAndNotVisible]);
+
+  const currentToast = toastQueue[currentToastIndex];
+
+  return nodeReady
+    ? toastQueue.map((toast, i) => {
+        if (!nodeRef.current) {
+          return null;
+        }
+
+        const fromCurrent = i === currentToastIndex ? 0 : currentToastIndex - i;
+        const movingToCurrent =
+          currentToast.isHiding && i === currentToastIndex - 1;
+        const hidingFromCurrent = currentToast.isHiding
+          ? fromCurrent - 1
+          : fromCurrent;
+
+        const textNode = (
+          <span>{toast.text ? toReactNodes(toast.text) : null}</span>
+        );
+        return (
+          <Fragment key={toast.id}>
+            {ReactDOM.createPortal(
+              <StyledToast
+                isActive={toast.isActive}
+                isHiding={toast.isHiding}
+                isVisible={fromCurrent < maxVisible}
+                duration={toast.duration}
+                fromTop={Math.floor(fromTop)}
+                isCurrent={i === currentToastIndex}
+                fromCurrent={hidingFromCurrent}
+                currentToastHiding={currentToast.isHiding}
+                maxVisible={maxVisible}
+                activeCount={Math.min(
+                  toastQueue.length - (currentToast.isHiding ? 1 : 0),
+                  maxVisible,
+                )}
+                stackDir={stackDir === "above" ? -1 : 1}
+                movingToCurrent={movingToCurrent}
+              >
+                {textNode}
+                <UnstyledButton
+                  css={extend(flexCenter, {
+                    position: "absolute",
+                    right: "5px",
+                    top: "-1px",
+                    height: "50px",
+                    width: "50px",
+                    outlineColor: `${colors.white} !important`,
+                  })}
+                  onClick={() => hideToast(toast.id)}
+                >
+                  <Icon name="Close" width={9} />
+                </UnstyledButton>
+              </StyledToast>,
+              nodeRef.current,
+            )}
+          </Fragment>
+        );
+      })
+    : null;
+}
+
+const width = 400;
+const beginTopPx = -100;
+const beginHeightPx = 50;
+const minScale = 0.95;
+
+const StyledToast = styled.div<{
+  activeCount: number;
+  currentToastHiding: boolean;
+  duration: number | null;
+  fromCurrent: number;
+  fromTop: number;
+  isActive: boolean;
+  isCurrent: boolean;
+  isHiding: boolean;
+  isVisible: boolean;
+  maxVisible: number;
+  movingToCurrent: boolean;
+  stackDir: 1 | -1;
+}>`
+  position: fixed;
+  z-index: ${z.toast};
+  line-height: ${pxToRems(16)};
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  font-weight: 500;
+  background-color: ${({ isCurrent, movingToCurrent }) =>
+    isCurrent || movingToCurrent
+      ? colors.blue43
+      : themeOr("#2A50B2", colors.blue43)};
+  color: rgba(255, 255, 255, 0);
+  padding: 16px 24px;
+  ${({ duration }) => !duration && "padding-right: 50px;"}
+  ${({ isVisible, isCurrent, movingToCurrent, stackDir }) => {
+    if (!isVisible) {
+      return "";
+    }
+    const sharpOverlayShadow = `0 ${1 * stackDir}px 0px 0px rgba(0, 0, 0, 0.5)`;
+    return isCurrent || movingToCurrent
+      ? `box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.08), ${sharpOverlayShadow};`
+      : `box-shadow: ${sharpOverlayShadow};`;
+  }}
+  left: 50%;
+  transform: translateX(-50%);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: calc(100% - ${standardContentInset.smPx * 2}px);
+
+  max-height: ${beginHeightPx}px;
+  width: 0px;
+  border-radius: 3rem;
+  transition:
+    width 0.25s ${firstDur}s cubic-bezier(0.41, 0.52, 0.38, 1.33),
+    border-radius 0.1s ${firstDur}s linear,
+    color 0.1s ${firstDur * 2.1}s linear,
+    opacity 0.1s linear,
+    transform 0.25s cubic-bezier(0.41, 0.52, 0.38, 1.33),
+    background-color 0.3s linear,
+    max-height 0.2s 0.5s linear;
+  top: ${beginTopPx}px;
+
+  a {
+    text-decoration: underline;
+  }
+
+  button {
+    opacity: ${({ duration }) => (duration ? "0" : "1")};
+    transition: opacity 0.1s linear;
+  }
+  &:hover {
+    ${({ duration }) => (duration ? "button { opacity: 1; }" : "")}
+  }
+
+  ${({
+    isVisible,
+    fromCurrent,
+    movingToCurrent,
+    activeCount,
+    stackDir,
+    maxVisible,
+    currentToastHiding,
+  }) => {
+    if (fromCurrent && !movingToCurrent) {
+      if (!isVisible) {
+        fromCurrent = maxVisible - 1;
+      }
+      const secondToastTranslateY = 7;
+      const translateY =
+        stackDir * secondToastTranslateY * Math.pow(fromCurrent, 0.75);
+
+      const scale = Math.max(
+        1 - ((1 - minScale) / activeCount) * fromCurrent,
+        0,
+      );
+      return `transform: translateX(-50%) translateY(${translateY}px) scale(${scale});`;
+    }
+    return "";
+  }}
+
+  ${({ fromTop }) => `
+    /* Animations with different values still interfere with each other if they have the same name.
+       Append the variable value to get a unique name for each animation: */
+    @keyframes slideOut-${fromTop} {
+      0% {
+        top: ${fromTop}px;
+      }
+      100% {
+        top: ${beginTopPx}px;
+      }
+    }
+
+    @keyframes slideIn-${fromTop} {
+      0% {
+        top: ${beginTopPx}px;
+      }
+      100% {
+        top: ${fromTop}px;
+      }
+    }
+  `}
+
+  &:before {
+    ${({ duration }) => (duration ? 'content: "";' : "")}
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0%;
+    background-color: rgba(0, 0, 0, 0.1);
+    z-index: -1;
+    // switch back to minimal state instantly so it's ready for the next notification:
+  }
+
+  ${({ duration }) =>
+    duration
+      ? `
+        @keyframes progressBar-${duration} {
+          0% {
+            width: 0%;
+          }
+          100% {
+            width: 100%;
+          }
+        }
+      `
+      : ""}
+
+  ${({ isActive, duration, isHiding, fromTop, isCurrent }) =>
+    isActive
+      ? `
+      width: ${width}px;
+      top: ${fromTop}px;
+      border-radius: 1.3rem;
+      animation: ${firstDur}s cubic-bezier(.25,.15,.59,1.28) 0s slideIn-${fromTop};
+      color: rgba(255, 255, 255, 1);
+      max-height: 100px;
+      &:before {
+        ${
+          isCurrent && duration
+            ? `animation: progressBar-${duration} ${duration / 1000}s linear;`
+            : ""
+        };
+      }
+      `
+      : `
+      ${
+        isHiding
+          ? `
+          animation: ${firstDur}s cubic-bezier(.57,-0.43,.78,.81) 0s slideOut-${fromTop};
+          &:before {
+            width: 100%;
+          }
+          `
+          : ""
+      }
+      top: ${beginTopPx}px;
+    `}
+`;
diff --git a/packages/ui/src/components/Toggle.tsx b/packages/ui/src/components/Toggle.tsx
new file mode 100644
index 000000000..86b12e002
--- /dev/null
+++ b/packages/ui/src/components/Toggle.tsx
@@ -0,0 +1,115 @@
+import styled from "@emotion/styled";
+import { UnstyledButton } from "@lightsparkdev/ui/src/components/UnstyledButton";
+import { colors } from "@lightsparkdev/ui/src/styles/colors";
+import { standardLineHeightEms } from "@lightsparkdev/ui/src/styles/common";
+import { themeOr } from "@lightsparkdev/ui/src/styles/themes";
+
+type ToggleProps = {
+  on: boolean;
+  onChange: (on: boolean) => void;
+  ml?: number;
+  mt?: number;
+  mb?: number;
+  bg?: string;
+  disabled?: boolean;
+  label?: string;
+  /* id is required to ensure label click affects toggle: */
+  id: string;
+};
+
+const defaultProps = {
+  on: false,
+  ml: 0,
+  mt: 0,
+  mb: 0,
+  disabled: false,
+};
+
+export function Toggle({
+  onChange,
+  bg,
+  ml = defaultProps.ml,
+  mt = defaultProps.mt,
+  mb = defaultProps.mb,
+  on = defaultProps.on,
+  disabled = defaultProps.disabled,
+  label,
+  id,
+}: ToggleProps) {
+  return (
+    <ToggleContainer mb={mb} ml={ml} mt={mt}>
+      <ToggleButton
+        bg={bg}
+        isOn={on}
+        onClick={() => onChange(!on)}
+        disabled={disabled}
+        type="button"
+        id={id}
+      />
+      {label && <ToggleLabel htmlFor={id}>{label}</ToggleLabel>}
+    </ToggleContainer>
+  );
+}
+
+type ToggleButtonProps = {
+  bg?: string | undefined;
+  isOn: boolean;
+  disabled: boolean;
+};
+
+const width = 44;
+const circleDim = 20;
+const circleOffset = 2;
+const ToggleButton = styled(UnstyledButton)<ToggleButtonProps>`
+  color: ${colors.white};
+  font-weight: 500;
+  border-radius: 44px;
+  width: ${width}px;
+  height: 24px;
+  opacity: ${({ disabled }) => (disabled ? 0.3 : 1)};
+  background-color: ${({ bg, theme, isOn }) => {
+    if (bg) {
+      return bg;
+    } else if (isOn) {
+      return theme.success;
+    }
+    return themeOr(theme.c1Neutral, theme.c4Neutral)({ theme });
+  }};
+  position: relative;
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    border-radius: 50%;
+    transition: right 0.1s;
+    box-shadow:
+      0 3px 8px 0 rgba(0, 0, 0, 0.15),
+      0 3px 1px 0 rgba(0, 0, 0, 0.06);
+    background-color: ${colors.white};
+    width: ${circleDim}px;
+    height: ${circleDim}px;
+    top: ${circleOffset}px;
+    right: ${({ isOn }) =>
+      isOn ? `${circleOffset}px` : `${width - circleDim - circleOffset}px`};
+  }
+`;
+
+type ToggleContainerProps = {
+  ml: number;
+  mt: number;
+  mb: number;
+};
+
+export const ToggleContainer = styled.span<ToggleContainerProps>`
+  display: flex;
+  margin-bottom: ${({ mb }) => mb}px;
+  margin-top: ${({ mt }) => mt}px;
+  margin-left: ${({ ml }) => ml}px;
+  align-items: center;
+`;
+
+const ToggleLabel = styled.label`
+  margin-left: 12px;
+  cursor: pointer;
+  height: ${standardLineHeightEms}em;
+`;
diff --git a/packages/ui/src/components/LightTooltip.tsx b/packages/ui/src/components/Tooltip.tsx
similarity index 77%
rename from packages/ui/src/components/LightTooltip.tsx
rename to packages/ui/src/components/Tooltip.tsx
index 81be90d35..4ae17b6b2 100644
--- a/packages/ui/src/components/LightTooltip.tsx
+++ b/packages/ui/src/components/Tooltip.tsx
@@ -2,16 +2,16 @@ import { css } from "@emotion/css";
 import { useTheme, type Theme } from "@emotion/react";
 import React, { useEffect, useRef, type ComponentProps } from "react";
 import ReactDOM from "react-dom";
-import { Tooltip } from "react-tooltip";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 import { overlaySurface } from "../styles/common.js";
 import { z } from "../styles/z-index.js";
 
-type TooltipProps = Omit<ComponentProps<typeof Tooltip>, "id"> & {
+type TooltipProps = Omit<ComponentProps<typeof ReactTooltip>, "id"> & {
   /* Make 3rd party types compatible with our undefined rule: */
   id?: string | undefined;
 };
 
-export function LightTooltip(props: TooltipProps) {
+export function Tooltip(props: TooltipProps) {
   const nodeRef = useRef<null | HTMLDivElement>(null);
   const [nodeReady, setNodeReady] = React.useState(false);
 
@@ -30,11 +30,10 @@ export function LightTooltip(props: TooltipProps) {
   }, []);
 
   const theme = useTheme();
-  console.log("LightTooltip.tsx: tooltipProps:", props);
 
   return nodeReady && nodeRef.current
     ? ReactDOM.createPortal(
-        <Tooltip
+        <ReactTooltip
           {...props}
           id={props.id || ""}
           content={props.content || ""}
@@ -42,7 +41,6 @@ export function LightTooltip(props: TooltipProps) {
           border="0.05rem solid rgba(0, 0, 0, 0.1)"
           className={styles({ theme })}
           variant="light"
-          delayShow={180}
         />,
         nodeRef.current,
       )
@@ -50,13 +48,15 @@ export function LightTooltip(props: TooltipProps) {
 }
 
 const styles = ({ theme }: { theme: Theme }) => css`
-  font-size: "10px",
-  color: ${theme.c2Neutral};
+  font-size: "10px";
+  color: ${theme.c8Neutral} !important;
   border-radius: 8px !important;
   padding: 16px !important;
   z-index: ${z.tooltip};
   ${overlaySurface({ theme, important: true })};
 
   max-width: 260px;
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.08) !important;
+  box-shadow:
+    0px 1px 4px 0px rgba(0, 0, 0, 0.1),
+    0px 4px 8px 0px rgba(0, 0, 0, 0.08) !important;
 `;
diff --git a/packages/ui/src/components/documentation/AnchorLinkHeader.tsx b/packages/ui/src/components/documentation/AnchorLinkHeader.tsx
index c90295bc9..ba5622d71 100644
--- a/packages/ui/src/components/documentation/AnchorLinkHeader.tsx
+++ b/packages/ui/src/components/documentation/AnchorLinkHeader.tsx
@@ -1,25 +1,20 @@
 "use client";
-import { useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
-import {
-  Headline,
-  type Props,
-} from "../../styles/fonts/typography/Headline.js";
+import { type ComponentProps } from "react";
+import { type FontColorKey } from "../../styles/themes.js";
 import { select } from "../../utils/emotion.js";
-import { Icon } from "../Icon.js";
+import { Icon } from "../Icon/Icon.js";
+import { DocsHeadline } from "./DocsHeadline.js";
 
-export const AnchorLinkHeader = (props: Props) => {
-  const theme = useTheme();
+export const AnchorLinkHeader = (
+  props: ComponentProps<typeof DocsHeadline>,
+) => {
   return (
-    <StyledAnchorLinkHeader {...props}>
-      <Headline {...props}>
+    <StyledAnchorLinkHeader colorProp={props.color}>
+      <DocsHeadline {...props}>
         {props.children}
-        <IconWrapper
-          name="AnchorLink"
-          color={props.color || theme.text}
-          width={0}
-        />
-      </Headline>
+        <IconWrapper name="AnchorLink" color={props.color} width={0} />
+      </DocsHeadline>
     </StyledAnchorLinkHeader>
   );
 };
@@ -38,7 +33,13 @@ const IconWrapper = styled(Icon)`
   }
 `;
 
-const StyledAnchorLinkHeader = styled.div`
+type StyledAnchorLinkHeaderProps = {
+  children: React.ReactNode;
+  /* color is an inherent html prop so we need to use colorProp instead */
+  colorProp?: FontColorKey | undefined;
+};
+
+const StyledAnchorLinkHeader = styled.div<StyledAnchorLinkHeaderProps>`
   display: flex;
   flex-direction: row;
   align-items: center;
diff --git a/packages/ui/src/components/documentation/DocsBodyParagraph.tsx b/packages/ui/src/components/documentation/DocsBodyParagraph.tsx
new file mode 100644
index 000000000..afa2bfd18
--- /dev/null
+++ b/packages/ui/src/components/documentation/DocsBodyParagraph.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { type PartialBy } from "@lightsparkdev/core";
+import { type ComponentProps } from "react";
+import { StyledBody } from "../typography/Body.js";
+
+/* NOTE: Should only be used in documentation sites where we can't currently control 
+   the MDX to ReactNode rendering. Instead we allow these components to render any
+   children. */
+
+type DocsBodyParagraphProps = PartialBy<
+  ComponentProps<typeof StyledBody>,
+  "size" | "block"
+>;
+
+export function DocsBodyParagraph({
+  size = "Medium",
+  ...rest
+}: DocsBodyParagraphProps) {
+  return <StyledBody {...rest} size={size} block as="div" />;
+}
diff --git a/packages/ui/src/components/documentation/DocsBodyStrongParagraph.tsx b/packages/ui/src/components/documentation/DocsBodyStrongParagraph.tsx
new file mode 100644
index 000000000..f06d135e5
--- /dev/null
+++ b/packages/ui/src/components/documentation/DocsBodyStrongParagraph.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { type PartialBy } from "@lightsparkdev/core";
+import { type ComponentProps } from "react";
+import { StyledBodyStrong } from "../typography/BodyStrong.js";
+
+/* NOTE: Should only be used in documentation sites where we can't currently control 
+   the MDX to ReactNode rendering. Instead we allow these components to render any
+   children. */
+
+type DocsBodyStrongParagraphProps = PartialBy<
+  ComponentProps<typeof StyledBodyStrong>,
+  "size" | "block"
+>;
+
+export function DocsBodyStrongParagraph({
+  size = "Medium",
+  block = false,
+  ...rest
+}: DocsBodyStrongParagraphProps) {
+  return (
+    <StyledBodyStrongBlock>
+      <StyledBodyStrong {...rest} size={size} block={block} />
+    </StyledBodyStrongBlock>
+  );
+}
+
+/** Images rendered by the markdown renderer are wrapped in a paragraph tag,
+ * so we should wrap all Body tags in a paragraph tag to ensure images are display: block. */
+const StyledBodyStrongBlock = styled.p``;
diff --git a/packages/ui/src/styles/fonts/typography/Headline.tsx b/packages/ui/src/components/documentation/DocsHeadline.tsx
similarity index 52%
rename from packages/ui/src/styles/fonts/typography/Headline.tsx
rename to packages/ui/src/components/documentation/DocsHeadline.tsx
index 03ad99ba2..70339081e 100644
--- a/packages/ui/src/styles/fonts/typography/Headline.tsx
+++ b/packages/ui/src/components/documentation/DocsHeadline.tsx
@@ -1,35 +1,14 @@
 "use client";
 
-import styled from "@emotion/styled";
 import React from "react";
-import { select } from "../../../utils/emotion.js";
-import { colors } from "../../colors.js";
-import { getTypographyString, TokenSize } from "../typographyTokens.js";
+import { type FontColorKey } from "../../styles/themes.js";
+import { type TokenSizeKey } from "../../styles/tokens/typography.js";
+import { isReactNodeWithChildren } from "../../utils/isReactNodeWithChildren.js";
+import { StyledHeadline, type Heading } from "../typography/Headline.js";
 
-export const HEADINGS = ["h1", "h2", "h3", "h4", "h5", "h6"] as const;
-type Heading = (typeof HEADINGS)[number];
-
-export interface Props {
-  children: React.ReactNode;
-  size?: TokenSize;
-  heading?: Heading;
-  color?: string | undefined;
-}
-
-type ReactNodeWithChildren = React.ReactElement<{
-  children: React.ReactNode;
-}>;
-
-function isReactNodeWithChildren(node: unknown): node is ReactNodeWithChildren {
-  return Boolean(
-    node &&
-      React.isValidElement(node) &&
-      typeof node.props === "object" &&
-      node.props !== null &&
-      "children" in node.props &&
-      node.props.children !== undefined,
-  );
-}
+/* NOTE: Should only be used for documentation sites where we can't currently control 
+   the MDX to ReactNode rendering. Instead we allow these components to render any
+   children. */
 
 export const getHeadlineText = (element: React.ReactNode): string => {
   if (typeof element === "string") {
@@ -88,40 +67,29 @@ const toKebabCase = (str: string) => {
   return str.replaceAll(" ", "-").toLowerCase();
 };
 
-export const Headline = ({
+type DocsHeadlineProps = {
+  children: React.ReactNode;
+  size?: TokenSizeKey;
+  heading?: Heading;
+  color?: FontColorKey | undefined;
+};
+
+export const DocsHeadline = ({
   children,
   color,
-  size = TokenSize.Medium,
+  size = "Medium",
   heading = "h1",
-}: Props) => {
+}: DocsHeadlineProps) => {
   const id = toKebabCase(getHeaderId(children as React.ReactElement));
   return (
-    <StyledHeadline as={heading} id={id} size={size} color={color}>
+    <StyledHeadline
+      as={heading}
+      id={id}
+      size={size}
+      colorProp={color}
+      displayProp="block"
+    >
       {children}
     </StyledHeadline>
   );
 };
-
-const StyledHeadline = styled.span<Props>`
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-    return size
-      ? getTypographyString(theme.typography[theme.app].Headline[size])
-      : "";
-  }}
-
-  * {
-    color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-    ${({ theme, size }) => {
-      return size
-        ? getTypographyString(theme.typography[theme.app].Headline[size])
-        : "";
-    }}
-  }
-`;
-
-export function headlineSelector(heading: Heading) {
-  return `${heading}${select(StyledHeadline)}`;
-}
-
-export const ALL_HEADLINE_SELECTORS = HEADINGS.map(headlineSelector).join(",");
diff --git a/packages/ui/src/components/documentation/Video.tsx b/packages/ui/src/components/documentation/Video.tsx
new file mode 100644
index 000000000..1633ba861
--- /dev/null
+++ b/packages/ui/src/components/documentation/Video.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { standardBorderRadius } from "../../styles/common.js";
+
+interface VideoProps {
+  children: React.ReactNode;
+  controls?: boolean;
+  preload?: string;
+}
+
+export const Video = (props: VideoProps) => {
+  return <StyledVideo controls {...props} />;
+};
+
+const StyledVideo = styled.video`
+  width: 100%;
+  height: auto;
+  ${standardBorderRadius(16)};
+`;
diff --git a/packages/ui/src/components/index.tsx b/packages/ui/src/components/index.tsx
index 86b6e1aaa..1cfe187db 100644
--- a/packages/ui/src/components/index.tsx
+++ b/packages/ui/src/components/index.tsx
@@ -1,4 +1,5 @@
-export { Badge, BadgeProps } from "./Badge.js";
+export { Badge, type BadgeProps } from "./Badge.js";
+export { Banner, type BannerProps } from "./Banner/Banner.js";
 export {
   Button,
   ButtonSelector,
@@ -8,6 +9,7 @@ export {
 export {
   ButtonRow,
   ButtonRowContainer,
+  StyledButtonRow,
   type ButtonRowProps,
 } from "./ButtonRow.js";
 export {
@@ -18,28 +20,67 @@ export {
   CardPageRightContentInner,
   CardPageSubtitle,
 } from "./CardPage.js";
+export { Checkbox, CheckboxContainer, type CheckboxProps } from "./Checkbox.js";
 export { CodeBlock, InlineCode, StyledCodeBlock } from "./CodeBlock.js";
-export { Collapsible } from "./Collapsible.js";
+export {
+  CodeInput,
+  StyledCodeInput,
+  type OnChangeCode,
+  type OnSubmitCode,
+} from "./CodeInput/CodeInput.js";
+export { Collapsible, StyledCollapsible } from "./Collapsible.js";
+export {
+  CommaNumberInput,
+  type CommaNumberInputProps,
+} from "./CommaNumberInput.js";
 export { CommandKey } from "./CommandKey.js";
 export { CopyToClipboardButton } from "./CopyToClipboardButton.js";
 export { CurrencyAmount, CurrencyIcon } from "./CurrencyAmount.js";
+export { Drawer } from "./Drawer.js";
+export { Dropdown } from "./Dropdown.js";
+export { FileInput, StyledFileInput } from "./FileInput.js";
 export { GradientCardHeader } from "./GradientCardHeader.js";
-export { Icon, IconContainer } from "./Icon.js";
-export { LightTooltip } from "./LightTooltip.js";
+export { Icon, IconContainer } from "./Icon/Icon.js";
+export type { IconName } from "./Icon/types.js";
+export { InfoIconTooltip } from "./InfoIconTooltip.js";
 export { LightboxImage } from "./LightboxImage.js";
 export { LightsparkProvider } from "./LightsparkProvider.js";
 export { Loading, LoadingWrapper } from "./Loading.js";
 export { Modal } from "./Modal.js";
+export {
+  PageSection,
+  PageSectionBox,
+  PageSectionBoxActionColumn,
+  PageSectionBoxActionRow,
+  PageSectionBoxColumn,
+  PageSectionBoxDescription,
+  PageSectionBoxRow,
+  PageSectionBoxTitle,
+  PageSectionRow,
+  PageSectionRowSubSection,
+  PageSectionSubheading,
+  StyledPageSectionBox,
+  type PageSectionProps,
+} from "./PageSection/PageSection.js";
+export { PageSectionNav } from "./PageSection/PageSectionNav.js";
+export { PhoneInput } from "./PhoneInput.js";
 export { Pill } from "./Pill.js";
 export { ProgressBar, type ProgressBarProps } from "./ProgressBar.js";
+export { Radio } from "./Radio.js";
 export { SecretContainer } from "./SecretContainer.js";
 export {
   StatusIndicator,
   type StatusIndicatorColors,
   type StatusIndicatorProps,
 } from "./StatusIndicator.js";
+export { TextButton } from "./TextButton.js";
+export { TextIconAligner } from "./TextIconAligner.js";
 export {
-  TextIconAligner,
-  type TextIconAlignerProps,
-} from "./TextIconAligner.js";
+  TextInput,
+  TextInputHalfRow,
+  type TextInputProps,
+} from "./TextInput.js";
+export { Toasts, type ToastsProps } from "./Toasts.js";
+export { Toggle, ToggleContainer } from "./Toggle.js";
+export { Tooltip } from "./Tooltip.js";
 export { UnstyledButton } from "./UnstyledButton.js";
diff --git a/packages/ui/src/styles/fonts/typography/Article.tsx b/packages/ui/src/components/typography/Article.tsx
similarity index 60%
rename from packages/ui/src/styles/fonts/typography/Article.tsx
rename to packages/ui/src/components/typography/Article.tsx
index 94a3d0025..de4ef117d 100644
--- a/packages/ui/src/styles/fonts/typography/Article.tsx
+++ b/packages/ui/src/components/typography/Article.tsx
@@ -1,19 +1,50 @@
 "use client";
 import styled from "@emotion/styled";
-import { StyledContentTable } from "../../../components/ContentTable.js";
-import { select } from "../../../utils/emotion.js";
-import { colors } from "../../colors.js";
-import { standardBorderRadius } from "../../common.js";
-import { Spacing } from "../../tokens/spacing.js";
-import { overflowAutoWithoutScrollbars } from "../../utils.js";
-import { getTypographyString, TokenSize } from "../typographyTokens.js";
+import { type ReactNode } from "react";
+import { StyledContentTable } from "../../components/ContentTable.js";
+import { colors } from "../../styles/colors.js";
+import { standardBorderRadius } from "../../styles/common.js";
+import { Spacing } from "../../styles/tokens/spacing.js";
+import {
+  getTypographyString,
+  type TokenSizeKey,
+  type TypographyTypeKey,
+} from "../../styles/tokens/typography.js";
+import { overflowAutoWithoutScrollbars } from "../../styles/utils.js";
+import { select } from "../../utils/emotion.js";
 import { StyledBody } from "./Body.js";
 import { StyledCode } from "./Code.js";
 import { displaySelector } from "./Display.js";
 import { ALL_HEADLINE_SELECTORS, headlineSelector } from "./Headline.js";
 import { StyledTitle } from "./Title.js";
 
-export const Article = styled.article`
+type ArticleProps = {
+  defaultTypography?: {
+    type: TypographyTypeKey;
+    size: TokenSizeKey;
+  };
+  children: ReactNode;
+};
+
+export function Article({ defaultTypography, children }: ArticleProps) {
+  return (
+    <StyledArticle
+      type={defaultTypography?.type || "Body"}
+      size={defaultTypography?.size || "Medium"}
+    >
+      {children}
+    </StyledArticle>
+  );
+}
+
+type StyledArticleProps = {
+  type: TypographyTypeKey;
+  size: TokenSizeKey;
+};
+
+export const StyledArticle = styled.article<StyledArticleProps>`
+  ${({ theme, type, size }) => getTypographyString(theme, type, size)}
+
   ${displaySelector("h1")} {
     margin: 0;
   }
@@ -62,7 +93,8 @@ export const Article = styled.article`
     margin: ${Spacing["2xl"]} 0;
   }
 
-  img {
+  img,
+  video {
     margin-top: ${Spacing.md};
     margin-bottom: ${Spacing.md};
   }
@@ -73,10 +105,7 @@ export const Article = styled.article`
 
   *:not(${ALL_HEADLINE_SELECTORS},${select(StyledTitle)},${select(StyledCode)})
     > a {
-    ${({ theme }) =>
-      getTypographyString(
-        theme.typography[theme.app]["Label Strong"][TokenSize.Large],
-      )}
+    ${({ theme }) => getTypographyString(theme, "Label Strong", "Large")}
     font-size: inherit;
     color: ${({ theme }) => theme.link};
   }
@@ -92,17 +121,15 @@ export const Article = styled.article`
   }
 
   li {
-    ${({ theme }) =>
-      getTypographyString(theme.typography[theme.app].Body[TokenSize.Medium])}
+    ${({ theme }) => getTypographyString(theme, "Body", "Medium")}
     :not(:last-child) {
       margin-bottom: ${Spacing["3xs"]};
     }
   }
 
   code:not([class|="language"]) {
-    ${({ theme }) =>
-      getTypographyString(theme.typography[theme.app].Code[TokenSize.Medium])}
-    background: ${colors.uma.blue90};
+    ${({ theme }) => getTypographyString(theme, "Code", "Medium")}
+    background: ${colors.grayBlue94};
     padding: ${Spacing["4xs"]} ${Spacing["2xs"]};
     margin: ${Spacing["4xs"]};
     border-radius: 4px;
@@ -118,8 +145,7 @@ export const Article = styled.article`
   // Must match specificity of prismjs to get proper line height!
   pre[class|="language"],
   code[class|="language"] {
-    ${({ theme }) =>
-      getTypographyString(theme.typography[theme.app].Code[TokenSize.Small])}
+    ${({ theme }) => getTypographyString(theme, "Code", "Small")}
 
     ${overflowAutoWithoutScrollbars}
   }
diff --git a/packages/ui/src/components/typography/Body.tsx b/packages/ui/src/components/typography/Body.tsx
new file mode 100644
index 000000000..3b617da56
--- /dev/null
+++ b/packages/ui/src/components/typography/Body.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { type ReactNode } from "react";
+import { type FontColorKey } from "../../styles/themes.js";
+import { type TokenSizeKey } from "../../styles/tokens/typography.js";
+import { applyTypography } from "../../styles/typography.js";
+import {
+  toNonTypographicReactNodes,
+  type ToNonTypographicReactNodesArgs,
+} from "../../utils/toNonTypographicReactNodes.js";
+
+type AllowedBodyTags = "span" | "p" | "pre" | "div";
+
+type BodyProps = {
+  content?: ToNonTypographicReactNodesArgs | undefined | null;
+  /* children must be a string. use content prop for more complex content */
+  children?: string | undefined | null;
+  size?: TokenSizeKey;
+  color?: FontColorKey | undefined;
+  block?: boolean | undefined;
+  tag?: AllowedBodyTags | undefined;
+};
+
+export const Body = ({
+  content,
+  color,
+  size = "Medium",
+  children,
+  block = false,
+  tag = "span",
+}: BodyProps) => {
+  let reactNodes: ReactNode = children || null;
+  if (content) {
+    reactNodes = toNonTypographicReactNodes(content);
+  }
+
+  return (
+    <StyledBody size={size} colorProp={color} block={block} as={tag}>
+      {reactNodes}
+    </StyledBody>
+  );
+};
+
+type StyledBodyProps = {
+  children: ReactNode;
+  size: TokenSizeKey;
+  /* color is an inherent html prop so we need to use colorProp instead */
+  colorProp?: FontColorKey | undefined;
+  block: boolean;
+};
+
+export const StyledBody = styled.span<StyledBodyProps>`
+  ${({ theme, size, colorProp }) =>
+    applyTypography(theme, "Body", size, colorProp)}
+  ${({ block }) => (block ? "display: block;" : "")}
+`;
diff --git a/packages/ui/src/components/typography/BodyStrong.tsx b/packages/ui/src/components/typography/BodyStrong.tsx
new file mode 100644
index 000000000..b7ae90fd6
--- /dev/null
+++ b/packages/ui/src/components/typography/BodyStrong.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { type ReactNode } from "react";
+import { type FontColorKey } from "../../styles/themes.js";
+import { type TokenSizeKey } from "../../styles/tokens/typography.js";
+import { applyTypography } from "../../styles/typography.js";
+import {
+  toNonTypographicReactNodes,
+  type ToNonTypographicReactNodesArgs,
+} from "../../utils/toNonTypographicReactNodes.js";
+
+type BodyStrongProps = {
+  content?: ToNonTypographicReactNodesArgs | undefined | null;
+  /* children must be a string. use content prop for more complex content */
+  children?: string | undefined | null;
+  size?: TokenSizeKey;
+  color?: FontColorKey | undefined;
+  block?: boolean | undefined;
+};
+
+export const BodyStrong = ({
+  content,
+  children,
+  color,
+  size = "Medium",
+  block = false,
+}: BodyStrongProps) => {
+  let reactNodes: ReactNode = children || null;
+  if (content) {
+    reactNodes = toNonTypographicReactNodes(content);
+  }
+  return (
+    <StyledBodyStrong size={size} colorProp={color} block={block}>
+      {reactNodes}
+    </StyledBodyStrong>
+  );
+};
+
+type StyledBodyStrongProps = {
+  children: ReactNode;
+  size: TokenSizeKey;
+  /* color is an inherent html prop so we need to use colorProp instead */
+  colorProp?: FontColorKey | undefined;
+  block: boolean;
+};
+
+export const StyledBodyStrong = styled.span<StyledBodyStrongProps>`
+  ${({ theme, size, colorProp }) =>
+    applyTypography(theme, "Body Strong", size, colorProp)}
+  display: ${({ block }) => (block ? "block" : "inline")};
+`;
diff --git a/packages/ui/src/components/typography/Code.tsx b/packages/ui/src/components/typography/Code.tsx
new file mode 100644
index 000000000..07868bb56
--- /dev/null
+++ b/packages/ui/src/components/typography/Code.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { type ReactNode } from "react";
+import { type FontColorKey } from "../../styles/themes.js";
+import { type TokenSizeKey } from "../../styles/tokens/typography.js";
+import { applyTypography } from "../../styles/typography.js";
+import {
+  toNonTypographicReactNodes,
+  type ToNonTypographicReactNodesArgs,
+} from "../../utils/toNonTypographicReactNodes.js";
+
+export type CodeProps = {
+  content?: ToNonTypographicReactNodesArgs | undefined | null;
+  /* children must be a string. use content prop for more complex content */
+  children?: string | undefined | null;
+  size?: TokenSizeKey;
+  color?: FontColorKey | undefined;
+};
+
+export const Code = ({
+  content,
+  color,
+  size = "Medium",
+  children,
+}: CodeProps) => {
+  let reactNodes: ReactNode = children || null;
+  if (content) {
+    reactNodes = toNonTypographicReactNodes(content);
+  }
+  return (
+    <StyledCode size={size} colorProp={color}>
+      {reactNodes}
+    </StyledCode>
+  );
+};
+
+type StyledCodeProps = {
+  /* color is an inherent html prop so we need to use colorProp instead */
+  colorProp?: FontColorKey | undefined;
+  children: ReactNode;
+  size: TokenSizeKey;
+};
+
+export const StyledCode = styled.div<StyledCodeProps>`
+  ${({ theme, size, colorProp }) =>
+    applyTypography(theme, "Code", size, colorProp)}
+`;
diff --git a/packages/ui/src/components/typography/Display.tsx b/packages/ui/src/components/typography/Display.tsx
new file mode 100644
index 000000000..3bbc965b9
--- /dev/null
+++ b/packages/ui/src/components/typography/Display.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { type ReactNode } from "react";
+import { type FontColorKey } from "../../styles/themes.js";
+import { type TokenSizeKey } from "../../styles/tokens/typography.js";
+import { applyTypography } from "../../styles/typography.js";
+import { select } from "../../utils/emotion.js";
+import {
+  toNonTypographicReactNodes,
+  type ToNonTypographicReactNodesArgs,
+} from "../../utils/toNonTypographicReactNodes.js";
+
+export const displayElements = ["h1", "h2", "h3", "h4", "h5", "h6"] as const;
+type DisplayElement = (typeof displayElements)[number];
+
+export type DisplayProps = {
+  content?: ToNonTypographicReactNodesArgs | undefined | null;
+  /* children must be a string. use content prop for more complex content */
+  children?: string | undefined | null;
+  size?: TokenSizeKey;
+  element?: DisplayElement;
+  color?: FontColorKey | undefined;
+};
+
+export const Display = ({
+  content,
+  children,
+  color,
+  size = "Medium",
+  element = "h1",
+}: DisplayProps) => {
+  let reactNodes: ReactNode = children || null;
+  if (content) {
+    reactNodes = toNonTypographicReactNodes(content);
+  }
+  return (
+    <StyledDisplay as={element} size={size} colorProp={color}>
+      {reactNodes}
+    </StyledDisplay>
+  );
+};
+
+type StyledDisplayProps = {
+  children: ReactNode;
+  size: TokenSizeKey;
+  /* color is an inherent html prop so we need to use colorProp instead */
+  colorProp?: FontColorKey | undefined;
+};
+
+const StyledDisplay = styled.span<StyledDisplayProps>`
+  ${({ theme, size, colorProp }) =>
+    applyTypography(theme, "Display", size, colorProp)}
+`;
+
+export function displaySelector(element: DisplayElement) {
+  return `${element}${select(StyledDisplay)}`;
+}
diff --git a/packages/ui/src/components/typography/Headline.tsx b/packages/ui/src/components/typography/Headline.tsx
new file mode 100644
index 000000000..ddc529f33
--- /dev/null
+++ b/packages/ui/src/components/typography/Headline.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { type ReactNode } from "react";
+import { type FontColorKey } from "../../styles/themes.js";
+import { type TokenSizeKey } from "../../styles/tokens/typography.js";
+import { applyTypography } from "../../styles/typography.js";
+import { select } from "../../utils/emotion.js";
+import {
+  toNonTypographicReactNodes,
+  type ToNonTypographicReactNodesArgs,
+} from "../../utils/toNonTypographicReactNodes.js";
+
+export const headlineElements = ["h1", "h2", "h3", "h4", "h5", "h6"] as const;
+export type Heading = (typeof headlineElements)[number];
+
+type AllowedDisplay = "flex" | "block" | "inline-flex";
+
+type HeadlineProps = {
+  content?: ToNonTypographicReactNodesArgs | undefined | null;
+  /* children must be a string. use content prop for more complex content */
+  children?: string | undefined | null;
+  size?: TokenSizeKey;
+  color?: FontColorKey | undefined;
+  heading?: Heading;
+  id?: string | undefined;
+  display?: AllowedDisplay;
+};
+
+export const Headline = ({
+  content,
+  color,
+  size = "Medium",
+  children,
+  heading = "h1",
+  id,
+  display = "block",
+}: HeadlineProps) => {
+  let reactNodes: ReactNode = children || null;
+  if (content) {
+    reactNodes = toNonTypographicReactNodes(content);
+  }
+  return (
+    <StyledHeadline
+      as={heading}
+      id={id}
+      size={size}
+      colorProp={color}
+      displayProp={display}
+    >
+      {reactNodes}
+    </StyledHeadline>
+  );
+};
+
+type StyledHeadlineProps = {
+  /* color is an inherent html prop so we need to use colorProp instead */
+  colorProp?: FontColorKey | undefined;
+  children: ReactNode;
+  size: TokenSizeKey;
+  displayProp: AllowedDisplay;
+};
+
+export const StyledHeadline = styled.span<StyledHeadlineProps>`
+  /* Margins should always be set in display contexts eg Article */
+  margin: 0;
+
+  display: ${({ displayProp }) => displayProp};
+
+  ${({ theme, size, colorProp }) =>
+    applyTypography(theme, "Headline", size, colorProp)}
+`;
+
+export function headlineSelector(heading: Heading) {
+  return `${heading}${select(StyledHeadline)}`;
+}
+
+export const ALL_HEADLINE_SELECTORS = headlineElements
+  .map(headlineSelector)
+  .join(",");
diff --git a/packages/ui/src/components/typography/Label.tsx b/packages/ui/src/components/typography/Label.tsx
new file mode 100644
index 000000000..26257a003
--- /dev/null
+++ b/packages/ui/src/components/typography/Label.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { type ReactNode } from "react";
+import { type FontColorKey } from "../../styles/themes.js";
+import { type TokenSizeKey } from "../../styles/tokens/typography.js";
+import { applyTypography } from "../../styles/typography.js";
+import {
+  toNonTypographicReactNodes,
+  type ToNonTypographicReactNodesArgs,
+} from "../../utils/toNonTypographicReactNodes.js";
+
+type LabelProps = {
+  content?: ToNonTypographicReactNodesArgs | undefined | null;
+  /* children must be a string. use content prop for more complex content */
+  children?: string | undefined | null;
+  size?: TokenSizeKey;
+  color?: FontColorKey | undefined;
+};
+
+export const Label = ({
+  content,
+  color,
+  size = "Medium",
+  children,
+}: LabelProps) => {
+  let reactNodes: ReactNode = children || null;
+  if (content) {
+    reactNodes = toNonTypographicReactNodes(content);
+  }
+  return (
+    <StyledLabel size={size} colorProp={color}>
+      {reactNodes}
+    </StyledLabel>
+  );
+};
+
+type StyledLabelProps = {
+  children: React.ReactNode;
+  size: TokenSizeKey;
+  /* color is an inherent html prop so we need to use colorProp instead */
+  colorProp?: FontColorKey | undefined;
+};
+
+export const StyledLabel = styled.label<StyledLabelProps>`
+  ${({ theme, size, colorProp }) =>
+    applyTypography(theme, "Label", size, colorProp)}
+  cursor: inherit;
+`;
diff --git a/packages/ui/src/components/typography/LabelModerate.tsx b/packages/ui/src/components/typography/LabelModerate.tsx
new file mode 100644
index 000000000..c32814946
--- /dev/null
+++ b/packages/ui/src/components/typography/LabelModerate.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { type ReactNode } from "react";
+import { type FontColorKey } from "../../styles/themes.js";
+import { type TokenSizeKey } from "../../styles/tokens/typography.js";
+import { applyTypography } from "../../styles/typography.js";
+import {
+  toNonTypographicReactNodes,
+  type ToNonTypographicReactNodesArgs,
+} from "../../utils/toNonTypographicReactNodes.js";
+
+export type LabelModerateProps = {
+  content?: ToNonTypographicReactNodesArgs | undefined | null;
+  /* children must be a string. use content prop for more complex content */
+  children?: string | undefined | null;
+  size?: TokenSizeKey;
+  color?: FontColorKey | undefined;
+};
+
+export const LabelModerate = ({
+  content,
+  color,
+  size = "Medium",
+  children,
+}: LabelModerateProps) => {
+  let reactNodes: ReactNode = children || null;
+  if (content) {
+    reactNodes = toNonTypographicReactNodes(content);
+  }
+  return (
+    <StyledLabelModerate size={size} colorProp={color}>
+      {reactNodes}
+    </StyledLabelModerate>
+  );
+};
+
+type StyledLabelModerateProps = {
+  /* color is an inherent html prop so we need to use colorProp instead */
+  colorProp?: FontColorKey | undefined;
+  children: React.ReactNode;
+  size: TokenSizeKey;
+};
+
+export const StyledLabelModerate = styled.label<StyledLabelModerateProps>`
+  ${({ theme, size, colorProp }) =>
+    applyTypography(theme, "Label Moderate", size, colorProp)}
+  cursor: inherit;
+`;
diff --git a/packages/ui/src/components/typography/LabelStrong.tsx b/packages/ui/src/components/typography/LabelStrong.tsx
new file mode 100644
index 000000000..bb68480a1
--- /dev/null
+++ b/packages/ui/src/components/typography/LabelStrong.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { type ReactNode } from "react";
+import { type FontColorKey } from "../../styles/themes.js";
+import { type TokenSizeKey } from "../../styles/tokens/typography.js";
+import { applyTypography } from "../../styles/typography.js";
+import {
+  toNonTypographicReactNodes,
+  type ToNonTypographicReactNodesArgs,
+} from "../../utils/toNonTypographicReactNodes.js";
+
+export type LabelStrongProps = {
+  content?: ToNonTypographicReactNodesArgs | undefined | null;
+  /* children must be a string. use content prop for more complex content */
+  children?: string | undefined | null;
+  size?: TokenSizeKey;
+  color?: FontColorKey | undefined;
+  block?: boolean | undefined;
+};
+
+export const LabelStrong = ({
+  content,
+  color,
+  size = "Medium",
+  children,
+  block = false,
+}: LabelStrongProps) => {
+  let reactNodes: ReactNode = children || null;
+  if (content) {
+    reactNodes = toNonTypographicReactNodes(content);
+  }
+  return (
+    <StyledLabelStrong size={size} colorProp={color} block={block}>
+      {reactNodes}
+    </StyledLabelStrong>
+  );
+};
+
+type StyledLabelStrongProps = {
+  /* color is an inherent html prop so we need to use colorProp instead */
+  colorProp?: FontColorKey | undefined;
+  children: React.ReactNode;
+  size: TokenSizeKey;
+  block: boolean;
+};
+
+export const StyledLabelStrong = styled.label<StyledLabelStrongProps>`
+  ${({ theme, size, colorProp }) =>
+    applyTypography(theme, "Label Strong", size, colorProp)}
+  ${({ block }) => (block ? "display: block;" : "")}
+  cursor: inherit;
+`;
diff --git a/packages/ui/src/components/typography/Overline.tsx b/packages/ui/src/components/typography/Overline.tsx
new file mode 100644
index 000000000..4fa3f226c
--- /dev/null
+++ b/packages/ui/src/components/typography/Overline.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { type ReactNode } from "react";
+import { type FontColorKey } from "../../styles/themes.js";
+import { type TokenSizeKey } from "../../styles/tokens/typography.js";
+import { applyTypography } from "../../styles/typography.js";
+import {
+  toNonTypographicReactNodes,
+  type ToNonTypographicReactNodesArgs,
+} from "../../utils/toNonTypographicReactNodes.js";
+
+export type OverlineProps = {
+  content?: ToNonTypographicReactNodesArgs | undefined | null;
+  /* children must be a string. use content prop for more complex content */
+  children?: string | undefined | null;
+  size?: TokenSizeKey;
+  color?: FontColorKey | undefined;
+};
+
+export const Overline = ({
+  content,
+  color,
+  size = "Medium",
+  children,
+}: OverlineProps) => {
+  let reactNodes: ReactNode = children || null;
+  if (content) {
+    reactNodes = toNonTypographicReactNodes(content);
+  }
+  return (
+    <StyledOverline size={size} colorProp={color}>
+      {reactNodes}
+    </StyledOverline>
+  );
+};
+
+type StyledOverlineProps = {
+  /* color is an inherent html prop so we need to use colorProp instead */
+  colorProp?: FontColorKey | undefined;
+  children: React.ReactNode;
+  size: TokenSizeKey;
+};
+
+export const StyledOverline = styled.span<StyledOverlineProps>`
+  ${({ theme, size, colorProp }) =>
+    applyTypography(theme, "Overline", size, colorProp)}
+  cursor: inherit;
+`;
diff --git a/packages/ui/src/components/typography/Title.tsx b/packages/ui/src/components/typography/Title.tsx
new file mode 100644
index 000000000..da15e5705
--- /dev/null
+++ b/packages/ui/src/components/typography/Title.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import styled from "@emotion/styled";
+import { type ReactNode } from "react";
+import { type FontColorKey } from "../../styles/themes.js";
+import { type TokenSizeKey } from "../../styles/tokens/typography.js";
+import { applyTypography } from "../../styles/typography.js";
+import {
+  toNonTypographicReactNodes,
+  type ToNonTypographicReactNodesArgs,
+} from "../../utils/toNonTypographicReactNodes.js";
+
+export type TitleProps = {
+  content?: ToNonTypographicReactNodesArgs | undefined | null;
+  /* children must be a string. use content prop for more complex content */
+  children?: string | undefined | null;
+  size?: TokenSizeKey;
+  color?: FontColorKey | undefined;
+  block?: boolean;
+};
+
+export const Title = ({
+  content,
+  color,
+  size = "Medium",
+  children,
+  block = false,
+}: TitleProps) => {
+  let reactNodes: ReactNode = children || null;
+  if (content) {
+    reactNodes = toNonTypographicReactNodes(content);
+  }
+  return (
+    <StyledTitle size={size} colorProp={color} block={block}>
+      {reactNodes}
+    </StyledTitle>
+  );
+};
+
+type StyledTitleStrongProps = {
+  children: ReactNode;
+  size: TokenSizeKey;
+  /* color is an inherent html prop so we need to use colorProp instead */
+  colorProp?: FontColorKey | undefined;
+  block: boolean;
+};
+
+export const StyledTitle = styled.span<StyledTitleStrongProps>`
+  ${({ block }) => (block ? "display: block;" : "")}
+  ${({ theme, size, colorProp }) =>
+    applyTypography(theme, "Title", size, colorProp)}
+`;
diff --git a/packages/ui/src/components/typography/index.tsx b/packages/ui/src/components/typography/index.tsx
new file mode 100644
index 000000000..8dfb5ca86
--- /dev/null
+++ b/packages/ui/src/components/typography/index.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+export { Article } from "./Article.js";
+export { Body, StyledBody } from "./Body.js";
+export { BodyStrong } from "./BodyStrong.js";
+export { Code, StyledCode } from "./Code.js";
+export { Display, displayElements, displaySelector } from "./Display.js";
+export { Headline, headlineElements, headlineSelector } from "./Headline.js";
+export { Label, StyledLabel } from "./Label.js";
+export { LabelModerate, StyledLabelModerate } from "./LabelModerate.js";
+export { LabelStrong } from "./LabelStrong.js";
+export { Overline, StyledOverline } from "./Overline.js";
+export { StyledTitle, Title } from "./Title.js";
diff --git a/packages/ui/src/components/typography/renderTypography.tsx b/packages/ui/src/components/typography/renderTypography.tsx
new file mode 100644
index 000000000..862176925
--- /dev/null
+++ b/packages/ui/src/components/typography/renderTypography.tsx
@@ -0,0 +1,43 @@
+import { type ComponentProps } from "react";
+import { type TypographyTypeKey } from "../../styles/tokens/typography.js";
+import { Body } from "./Body.js";
+import { BodyStrong } from "./BodyStrong.js";
+import { Code } from "./Code.js";
+import { Display } from "./Display.js";
+import { Headline } from "./Headline.js";
+import { Label } from "./Label.js";
+import { LabelModerate } from "./LabelModerate.js";
+import { LabelStrong } from "./LabelStrong.js";
+import { Overline } from "./Overline.js";
+import { Title } from "./Title.js";
+
+export const typographyMap = {
+  Display: Display,
+  Headline: Headline,
+  Title: Title,
+  Body: Body,
+  "Body Strong": BodyStrong,
+  Label: Label,
+  "Label Moderate": LabelModerate,
+  "Label Strong": LabelStrong,
+  Overline: Overline,
+  Code: Code,
+  "Code Strong": () => <div>Unimplemented</div>,
+} as const;
+
+export type RenderTypographyArgs<
+  T extends TypographyTypeKey = TypographyTypeKey,
+> = {
+  type: T;
+  props?: ComponentProps<(typeof typographyMap)[T]>;
+};
+
+export const renderTypography = <T extends TypographyTypeKey>(
+  type: T,
+  props: ComponentProps<(typeof typographyMap)[T]>,
+) => {
+  const TypographyComponent = typographyMap[type];
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any -- see https://bit.ly/3WdmdhT - rare case
+  where we need `any` to enable more complete type checking on props arg for callers to this function */
+  return <TypographyComponent {...(props as any)} />;
+};
diff --git a/packages/ui/src/hooks/useDebounce.tsx b/packages/ui/src/hooks/useDebounce.tsx
new file mode 100644
index 000000000..be7089da7
--- /dev/null
+++ b/packages/ui/src/hooks/useDebounce.tsx
@@ -0,0 +1,31 @@
+import { type DebounceSettings } from "lodash";
+import { debounce } from "lodash-es";
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(
+  value: T,
+  delay: number = 0,
+  options?: DebounceSettings,
+): T {
+  const [current, setCurrent] = useState(value);
+  const jsonOptions = JSON.stringify(options);
+
+  useEffect(() => {
+    const debounced = debounce(
+      () => {
+        setCurrent(value);
+      },
+      delay,
+      options,
+    );
+
+    debounced();
+
+    return () => {
+      debounced.cancel();
+    };
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [value, delay, jsonOptions]);
+
+  return current;
+}
diff --git a/packages/ui/src/hooks/useResizeObserver.tsx b/packages/ui/src/hooks/useResizeObserver.tsx
new file mode 100644
index 000000000..081d8b999
--- /dev/null
+++ b/packages/ui/src/hooks/useResizeObserver.tsx
@@ -0,0 +1,85 @@
+import { pick } from "lodash-es";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+type ResizeProperties = {
+  width: number;
+  height: number;
+  bottom: number;
+  left: number;
+  right: number;
+  top: number;
+  x: number;
+  y: number;
+};
+
+/* Returns an updated contentRect object with the selected properties when they change.
+   Only select the properties you need to avoid running a function on every change to the rect. */
+export function useResizeObserver<K extends keyof ResizeProperties>(
+  resizeProperties?: K[] | null | undefined,
+) {
+  type RectType = { [P in K]: ResizeProperties[P] } | null;
+  const resizeObserver = useRef<ResizeObserver | null>(null);
+  const [rect, setRect] = useState<RectType>(null);
+  const [selectedProperties, setSelectedProperties] = useState<RectType>(null);
+
+  const mounted = useRef(false);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  const onResize = useCallback(
+    (entries: ResizeObserverEntry[]) => {
+      /* First observation may occur before mounted effect runs - move to bottom of the stack: */
+      setTimeout(() => {
+        if (mounted.current) {
+          const changedRect = entries[0].contentRect;
+          setRect(changedRect);
+        } else if (resizeObserver.current) {
+          resizeObserver.current.disconnect();
+        }
+      }, 0);
+    },
+    [setRect],
+  );
+
+  const ref = useCallback(
+    (node: unknown) => {
+      if (
+        node &&
+        node instanceof Element &&
+        resizeProperties &&
+        resizeProperties.length > 0
+      ) {
+        resizeObserver.current = new ResizeObserver(onResize);
+        resizeObserver.current.observe(node);
+      }
+    },
+    [onResize, resizeProperties],
+  );
+
+  useEffect(() => {
+    if (resizeProperties) {
+      const selectedProps = pick(rect, resizeProperties);
+      if (
+        JSON.stringify(selectedProperties) !== JSON.stringify(selectedProps)
+      ) {
+        setSelectedProperties(selectedProps as RectType);
+      }
+    }
+  }, [rect, resizeProperties, setSelectedProperties, selectedProperties]);
+
+  return {
+    ref,
+    rect: selectedProperties,
+  } as {
+    ref: typeof ref;
+    rect: RectType;
+  };
+}
+
+// const C = useResizeObserver(["height"])["rect"]["width"];
+// const B = useResizeObserver(["height"])["rect"]["height"];
+// const C = useResizeObserver(["height", "bottom"])["rect"]["bottom"];
diff --git a/packages/ui/src/icons/AI.tsx b/packages/ui/src/icons/AI.tsx
index 88cf7c867..3dcca386a 100644
--- a/packages/ui/src/icons/AI.tsx
+++ b/packages/ui/src/icons/AI.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-function AI() {
+export function AI() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -19,5 +19,3 @@ function AI() {
     </svg>
   );
 }
-
-export default AI;
diff --git a/packages/ui/src/icons/AnchorLink.tsx b/packages/ui/src/icons/AnchorLink.tsx
index 3628f266c..6727f235a 100644
--- a/packages/ui/src/icons/AnchorLink.tsx
+++ b/packages/ui/src/icons/AnchorLink.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-function AnchorLink() {
+export function AnchorLink() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -18,5 +18,3 @@ function AnchorLink() {
     </svg>
   );
 }
-
-export default AnchorLink;
diff --git a/packages/ui/src/icons/ApiConnection.tsx b/packages/ui/src/icons/ApiConnection.tsx
index 681383edf..1526b2879 100644
--- a/packages/ui/src/icons/ApiConnection.tsx
+++ b/packages/ui/src/icons/ApiConnection.tsx
@@ -1,18 +1,18 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const ApiConnection = () => (
-  <svg
-    width="22"
-    height="18"
-    viewBox="0 0 22 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M1 8H0V10H1V8ZM21 10H22V8H21V10ZM11 16C7.13401 16 4 12.866 4 9H2C2 13.9706 6.02944 18 11 18V16ZM4 9C4 5.13401 7.13401 2 11 2V0C6.02944 0 2 4.02944 2 9H4ZM14 9C14 10.6569 12.6569 12 11 12V14C13.7614 14 16 11.7614 16 9H14ZM11 12C9.34315 12 8 10.6569 8 9H6C6 11.7614 8.23858 14 11 14V12ZM8 9C8 7.34315 9.34315 6 11 6V4C8.23858 4 6 6.23858 6 9H8ZM11 6C12.6569 6 14 7.34315 14 9H16C16 6.23858 13.7614 4 11 4V6ZM3 8H1V10H3V8ZM11 2C13.9361 2 16.4524 3.80802 17.4915 6.37522L19.3454 5.62478C18.011 2.32832 14.7786 0 11 0V2ZM17.5628 11.4413C16.5714 14.1051 14.0058 16 11 16V18C14.8681 18 18.1639 15.5602 19.4372 12.1389L17.5628 11.4413ZM15 10H21V8H15V10Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default ApiConnection;
+export function ApiConnection() {
+  return (
+    <svg
+      width="22"
+      height="18"
+      viewBox="0 0 22 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 8H0V10H1V8ZM21 10H22V8H21V10ZM11 16C7.13401 16 4 12.866 4 9H2C2 13.9706 6.02944 18 11 18V16ZM4 9C4 5.13401 7.13401 2 11 2V0C6.02944 0 2 4.02944 2 9H4ZM14 9C14 10.6569 12.6569 12 11 12V14C13.7614 14 16 11.7614 16 9H14ZM11 12C9.34315 12 8 10.6569 8 9H6C6 11.7614 8.23858 14 11 14V12ZM8 9C8 7.34315 9.34315 6 11 6V4C8.23858 4 6 6.23858 6 9H8ZM11 6C12.6569 6 14 7.34315 14 9H16C16 6.23858 13.7614 4 11 4V6ZM3 8H1V10H3V8ZM11 2C13.9361 2 16.4524 3.80802 17.4915 6.37522L19.3454 5.62478C18.011 2.32832 14.7786 0 11 0V2ZM17.5628 11.4413C16.5714 14.1051 14.0058 16 11 16V18C14.8681 18 18.1639 15.5602 19.4372 12.1389L17.5628 11.4413ZM15 10H21V8H15V10Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/AppIcon.tsx b/packages/ui/src/icons/AppIcon.tsx
index 2799d49fb..d0b8c54f0 100644
--- a/packages/ui/src/icons/AppIcon.tsx
+++ b/packages/ui/src/icons/AppIcon.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function AppIcon() {
+export function AppIcon() {
   return (
     <svg
       width="100%"
@@ -47,5 +47,3 @@ function AppIcon() {
     </svg>
   );
 }
-
-export default AppIcon;
diff --git a/packages/ui/src/icons/ArrowCircle.tsx b/packages/ui/src/icons/ArrowCircle.tsx
new file mode 100644
index 000000000..c7a771f11
--- /dev/null
+++ b/packages/ui/src/icons/ArrowCircle.tsx
@@ -0,0 +1,23 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+import { invertStrokeColor } from "./constants.js";
+
+export function ArrowCircle() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 31 31"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="15" cy="15" r="15" fill="currentColor" />
+      <path
+        className={invertStrokeColor}
+        d="M21 18V9M21 9H12M21 9L9.5 20.5"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/ArrowCircleTier1.tsx b/packages/ui/src/icons/ArrowCircleTier1.tsx
index 5c6b670d6..aa37712bd 100644
--- a/packages/ui/src/icons/ArrowCircleTier1.tsx
+++ b/packages/ui/src/icons/ArrowCircleTier1.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function ArrowCircleTier1() {
+export function ArrowCircleTier1() {
   return (
     <svg
       width="100%"
@@ -16,5 +16,3 @@ function ArrowCircleTier1() {
     </svg>
   );
 }
-
-export default ArrowCircleTier1;
diff --git a/packages/ui/src/icons/ArrowCircleTier2.tsx b/packages/ui/src/icons/ArrowCircleTier2.tsx
index f77b10f17..3e6804c2c 100644
--- a/packages/ui/src/icons/ArrowCircleTier2.tsx
+++ b/packages/ui/src/icons/ArrowCircleTier2.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function ArrowCircleTier2() {
+export function ArrowCircleTier2() {
   return (
     <svg
       width="100%"
@@ -16,5 +16,3 @@ function ArrowCircleTier2() {
     </svg>
   );
 }
-
-export default ArrowCircleTier2;
diff --git a/packages/ui/src/icons/ArrowCircleTier3.tsx b/packages/ui/src/icons/ArrowCircleTier3.tsx
index 4cb688174..4dc65638a 100644
--- a/packages/ui/src/icons/ArrowCircleTier3.tsx
+++ b/packages/ui/src/icons/ArrowCircleTier3.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function ArrowCircleTier3() {
+export function ArrowCircleTier3() {
   return (
     <svg
       width="100%"
@@ -16,5 +16,3 @@ function ArrowCircleTier3() {
     </svg>
   );
 }
-
-export default ArrowCircleTier3;
diff --git a/packages/ui/src/icons/ArrowCornerDownRight.tsx b/packages/ui/src/icons/ArrowCornerDownRight.tsx
index 8c29f2135..f5fd9c13b 100644
--- a/packages/ui/src/icons/ArrowCornerDownRight.tsx
+++ b/packages/ui/src/icons/ArrowCornerDownRight.tsx
@@ -1,10 +1,9 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-function ArrowCornerDownRight() {
+export function ArrowCornerDownRight() {
   return (
     <svg
-      width="16"
-      height="16"
+      width="100%"
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -19,5 +18,3 @@ function ArrowCornerDownRight() {
     </svg>
   );
 }
-
-export default ArrowCornerDownRight;
diff --git a/packages/ui/src/icons/ArrowDown.tsx b/packages/ui/src/icons/ArrowDown.tsx
index f1e84cb78..5182f255a 100644
--- a/packages/ui/src/icons/ArrowDown.tsx
+++ b/packages/ui/src/icons/ArrowDown.tsx
@@ -16,5 +16,3 @@ export function ArrowDown() {
     </svg>
   );
 }
-
-export default ArrowDown;
diff --git a/packages/ui/src/icons/ArrowUp.tsx b/packages/ui/src/icons/ArrowUp.tsx
index 77b7ce6d2..8340dccb6 100644
--- a/packages/ui/src/icons/ArrowUp.tsx
+++ b/packages/ui/src/icons/ArrowUp.tsx
@@ -16,5 +16,3 @@ export function ArrowUp() {
     </svg>
   );
 }
-
-export default ArrowUp;
diff --git a/packages/ui/src/icons/ArrowUpRightCircleFill.tsx b/packages/ui/src/icons/ArrowUpRightCircleFill.tsx
new file mode 100644
index 000000000..ac52a912d
--- /dev/null
+++ b/packages/ui/src/icons/ArrowUpRightCircleFill.tsx
@@ -0,0 +1,20 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function ArrowUpRightCircleFill() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20 1.25C30.3553 1.25 38.75 9.64468 38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64468 38.75 1.25 30.3553 1.25 20C1.25 9.64468 9.64468 1.25 20 1.25ZM15.4392 12.4122C14.8869 12.4122 14.4392 12.8599 14.4392 13.4122C14.4392 13.9644 14.8869 14.4122 15.4392 14.4122H24.1736L12.7051 25.8807C12.3146 26.2713 12.3146 26.9044 12.7051 27.2949C13.0956 27.6855 13.7288 27.6855 14.1193 27.2949L25.5879 15.8263V24.5608C25.5879 25.1131 26.0356 25.5608 26.5879 25.5608C27.1402 25.5608 27.5879 25.1131 27.5879 24.5608V13.4122C27.5879 12.8599 27.1402 12.4122 26.5879 12.4122H15.4392Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Bank.tsx b/packages/ui/src/icons/Bank.tsx
new file mode 100644
index 000000000..865b30d05
--- /dev/null
+++ b/packages/ui/src/icons/Bank.tsx
@@ -0,0 +1,20 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function Bank() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.2297 8.83298V17.6817M15.6892 17.6817V8.83298M3.77027 8.83298V17.6817M8.31081 17.6817V8.83298M20.5467 17.6817H3.4533C2.9647 17.6817 2.53092 17.9863 2.37642 18.4381L1.99803 19.5442C1.75302 20.2604 2.30012 21 3.07492 21H20.9251C21.6998 21 22.247 20.2604 22.002 19.5442L21.6236 18.4381C21.4691 17.9863 21.0353 17.6817 20.5467 17.6817ZM21.3649 8.83298H2.63514C2.00822 8.83298 1.5 8.33776 1.5 7.72689V7.21615C1.5 6.79885 1.74102 6.41707 2.12328 6.22889L11.4882 1.61883C11.81 1.46039 12.19 1.46039 12.5118 1.61883L21.8767 6.22889C22.259 6.41707 22.5 6.79885 22.5 7.21615V7.72689C22.5 8.33776 21.9918 8.83298 21.3649 8.83298Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Bell.tsx b/packages/ui/src/icons/Bell.tsx
deleted file mode 100644
index 288e8e7a7..000000000
--- a/packages/ui/src/icons/Bell.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-type Props = {
-  color: "black" | "gray";
-};
-
-const Bell = (props: Props) => (
-  <svg
-    width="21"
-    height="20"
-    viewBox="0 0 21 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M3.19964 13.5193C2.46828 14.2557 3.1996 15.7286 4.66232 15.7286H16.3641C17.8269 15.7286 18.5582 14.2557 17.8268 13.5193C17.0955 12.7829 15.7471 11.31 15.7471 9.83715V6.15501C15.7471 3.20929 14.17 1 10.5132 1C6.85638 1 5.2109 3.20929 5.2109 6.15501V9.83715C5.2109 11.31 3.931 12.7829 3.19964 13.5193Z"
-      stroke={props.color === "black" ? "#000000" : "#999999"}
-      strokeWidth="2"
-      strokeLinecap="round"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M7.76683 18.0752C8.17914 19.199 9.25257 20.0001 10.5118 20.0001C11.7711 20.0001 12.8445 19.199 13.2569 18.0752H7.76683Z"
-      fill={props.color === "black" ? "#000000" : "#999999"}
-    />
-  </svg>
-);
-
-export default Bell;
diff --git a/packages/ui/src/icons/BellOn.tsx b/packages/ui/src/icons/BellOn.tsx
deleted file mode 100644
index 7b228072a..000000000
--- a/packages/ui/src/icons/BellOn.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-type Props = {
-  color: "black" | "gray";
-};
-
-const BellOn = (props: Props) => (
-  <svg
-    width="21"
-    height="20"
-    viewBox="0 0 21 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M7.76685 18.0752C8.17915 19.1989 9.25259 20.0001 10.5119 20.0001C11.7711 20.0001 12.8446 19.1989 13.2569 18.0752H7.76685Z"
-      fill={props.color === "black" ? "#000000" : "#999999"}
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M6.21091 6.15501C6.21091 4.86073 6.57105 3.84498 7.21814 3.1591C7.85497 2.48409 8.89099 2 10.5132 2C11.1507 2 11.6943 2.0747 12.1568 2.20597C12.8051 1.6419 13.6185 1.26276 14.5149 1.15073C13.4852 0.395364 12.1368 0 10.5132 0C8.47864 0 6.8635 0.620552 5.76338 1.78662C4.67352 2.94181 4.21091 4.50356 4.21091 6.15501V9.83715C4.21091 10.2986 4.00298 10.8425 3.63668 11.4163C3.27946 11.9758 2.83163 12.4708 2.49011 12.8146C1.71799 13.5921 1.80913 14.6735 2.24916 15.412C2.70321 16.174 3.57755 16.7286 4.66234 16.7286H16.3641C17.4489 16.7286 18.3233 16.174 18.7773 15.412C19.2174 14.6735 19.3085 13.5921 18.5364 12.8146C18.1846 12.4604 17.7193 11.9629 17.3454 11.4006C16.9607 10.8222 16.7471 10.2848 16.7471 9.83715V9.67322C16.23 9.88404 15.6642 10.0002 15.0713 10.0002C14.9634 10.0002 14.8564 9.99635 14.7504 9.98879C14.7927 10.9545 15.231 11.833 15.68 12.5081C16.1615 13.2322 16.7339 13.8378 17.1135 14.2202L17.1136 14.2224C17.1147 14.2444 17.1087 14.3052 17.0592 14.3882C16.9648 14.5467 16.7421 14.7286 16.3641 14.7286H4.66234C4.28441 14.7286 4.06173 14.5467 3.96728 14.3882C3.91782 14.3052 3.91181 14.2444 3.91285 14.2224L3.91299 14.2202C4.30265 13.8275 4.85835 13.2194 5.32242 12.4925C5.7789 11.7775 6.21091 10.8486 6.21091 9.83715V6.15501Z"
-      fill={props.color === "black" ? "#000000" : "#999999"}
-    />
-    <ellipse
-      cx="15.0713"
-      cy="5.55818"
-      rx="2.6294"
-      ry="2.62947"
-      fill="#FFF14E"
-    />
-  </svg>
-);
-
-export default BellOn;
diff --git a/packages/ui/src/icons/BitcoinB.tsx b/packages/ui/src/icons/BitcoinB.tsx
index f4fe3e162..bc43fef83 100644
--- a/packages/ui/src/icons/BitcoinB.tsx
+++ b/packages/ui/src/icons/BitcoinB.tsx
@@ -1,20 +1,20 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const BitcoinB = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 9 13"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M2.52899 2.51568H1M2.52899 2.51568V6.30488M2.52899 2.51568H3.12195M2.52899 6.30488H6.25472M2.52899 6.30488V10.0941M6.25472 6.30488C7.61193 6.30488 8.42683 7.15312 8.42683 8.19948C8.42683 9.24584 7.61193 10.0941 6.25472 10.0941M6.25472 6.30488C7.61193 6.30488 8.42683 5.45664 8.42683 4.41028C8.42683 3.36392 7.61193 2.51568 6.25472 2.51568M6.25472 10.0941V11.875M6.25472 10.0941H3.12195M2.52899 10.0941H1M2.52899 10.0941H3.12195M6.25472 2.51568V1M6.25472 2.51568H3.12195M3.12195 1V2.51568M3.12195 10.0941V11.875"
-      stroke="currentColor"
-      strokeWidth="1.125"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default BitcoinB;
+export function BitcoinB() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 9 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.52899 2.51568H1M2.52899 2.51568V6.30488M2.52899 2.51568H3.12195M2.52899 6.30488H6.25472M2.52899 6.30488V10.0941M6.25472 6.30488C7.61193 6.30488 8.42683 7.15312 8.42683 8.19948C8.42683 9.24584 7.61193 10.0941 6.25472 10.0941M6.25472 6.30488C7.61193 6.30488 8.42683 5.45664 8.42683 4.41028C8.42683 3.36392 7.61193 2.51568 6.25472 2.51568M6.25472 10.0941V11.875M6.25472 10.0941H3.12195M2.52899 10.0941H1M2.52899 10.0941H3.12195M6.25472 2.51568V1M6.25472 2.51568H3.12195M3.12195 1V2.51568M3.12195 10.0941V11.875"
+        stroke="currentColor"
+        strokeWidth="1.125"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/BitcoinBOnRoundedSquare.tsx b/packages/ui/src/icons/BitcoinBOnRoundedSquare.tsx
index 0877350dc..226f84544 100644
--- a/packages/ui/src/icons/BitcoinBOnRoundedSquare.tsx
+++ b/packages/ui/src/icons/BitcoinBOnRoundedSquare.tsx
@@ -1,20 +1,20 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const BitcoinBOnRoundedSquare = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect width="16" height="16" rx="2" fill="#F7931A" />
-    <path
-      d="M6.02512 4.51426H4.66602M6.02512 4.51426V7.88244M6.02512 4.51426H6.55219M6.02512 7.88244H9.33688M6.02512 7.88244V11.2506M9.33688 7.88244C10.5433 7.88244 11.2676 8.63643 11.2676 9.56653C11.2676 10.4966 10.5433 11.2506 9.33688 11.2506M9.33688 7.88244C10.5433 7.88244 11.2676 7.12845 11.2676 6.19835C11.2676 5.26826 10.5433 4.51426 9.33688 4.51426M9.33688 11.2506V12.8337M9.33688 11.2506H6.55219M6.02512 11.2506H4.66602M6.02512 11.2506H6.55219M9.33688 4.51426V3.16699M9.33688 4.51426H6.55219M6.55219 3.16699V4.51426M6.55219 11.2506V12.8337"
-      stroke="white"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default BitcoinBOnRoundedSquare;
+export function BitcoinBOnRoundedSquare() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="16" height="16" rx="2" fill="#F7931A" />
+      <path
+        d="M6.02512 4.51426H4.66602M6.02512 4.51426V7.88244M6.02512 4.51426H6.55219M6.02512 7.88244H9.33688M6.02512 7.88244V11.2506M9.33688 7.88244C10.5433 7.88244 11.2676 8.63643 11.2676 9.56653C11.2676 10.4966 10.5433 11.2506 9.33688 11.2506M9.33688 7.88244C10.5433 7.88244 11.2676 7.12845 11.2676 6.19835C11.2676 5.26826 10.5433 4.51426 9.33688 4.51426M9.33688 11.2506V12.8337M9.33688 11.2506H6.55219M6.02512 11.2506H4.66602M6.02512 11.2506H6.55219M9.33688 4.51426V3.16699M9.33688 4.51426H6.55219M6.55219 3.16699V4.51426M6.55219 11.2506V12.8337"
+        stroke="white"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Bolt.tsx b/packages/ui/src/icons/Bolt.tsx
deleted file mode 100644
index acd2a8de6..000000000
--- a/packages/ui/src/icons/Bolt.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-type Props = {
-  color?: "black" | "white";
-  fill: "full" | "empty" | "partial" | "hollow";
-};
-
-const Bolt = (props: Props) => {
-  const emptyColor = props.color === "black" ? "#ccc" : "#444";
-  switch (props.fill) {
-    case "full":
-      return (
-        <svg
-          width="13"
-          height="15"
-          viewBox="0 0 13 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M4.71758 10.9019L2.84114 15.0003L12.6244 6.36297H7.49643L8.05148 5.14969L10.4078 0.000488281L0.624512 8.63786H5.75248L5.19743 9.85114L4.71758 10.9019Z"
-            fill={props.color || "black"}
-          />
-        </svg>
-      );
-    case "empty":
-      return (
-        <svg
-          width="13"
-          height="15"
-          viewBox="0 0 16 19"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M5.68382 13.8085L3.307 18.9998L15.6991 8.05914H9.20369L9.90676 6.52233L12.8914 0L0.499268 10.9407H6.9947L6.29163 12.4775L5.68382 13.8085Z"
-            fill={emptyColor}
-          />
-        </svg>
-      );
-    case "partial":
-      return (
-        <svg
-          width="13"
-          height="15"
-          viewBox="86 0 15 19"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M90.6838 13.8085L88.307 18.9998L100.699 8.05914H94.2037L94.9068 6.52233L97.8914 0L85.4993 10.9407H91.9947L91.2916 12.4775L90.6838 13.8085Z"
-            fill={emptyColor}
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M93.0942 4.23541L85.4993 10.9408H91.9947L91.2916 12.4776L90.6838 13.8086L88.307 19L93.0942 14.7734V4.23541Z"
-            fill={props.color || "black"}
-          />
-        </svg>
-      );
-    case "hollow":
-      return (
-        <svg
-          width="11"
-          height="13"
-          viewBox="0 0 11 13"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M5.95 5.27778L5.47703 5.11562L5.25 5.77778H5.95V5.27778ZM7.41667 1L7.88964 1.16216C7.96581 0.939994 7.87709 0.694756 7.6764 0.572753C7.47571 0.450751 7.21716 0.484872 7.05499 0.654762L7.41667 1ZM1 7.72222L0.638322 7.37698C0.500146 7.52174 0.46159 7.73494 0.540316 7.91892C0.619042 8.1029 0.799883 8.22222 1 8.22222V7.72222ZM4.85 7.72222L5.32297 7.88438L5.55 7.22222H4.85V7.72222ZM3.38333 12L2.91036 11.8378C2.83419 12.06 2.92291 12.3052 3.1236 12.4272C3.32429 12.5492 3.58284 12.5151 3.74501 12.3452L3.38333 12ZM9.8 5.27778L10.1617 5.62302C10.2999 5.47826 10.3384 5.26506 10.2597 5.08108C10.181 4.8971 10.0001 4.77778 9.8 4.77778V5.27778ZM6.42297 5.43994L7.88964 1.16216L6.94369 0.837838L5.47703 5.11562L6.42297 5.43994ZM7.05499 0.654762L0.638322 7.37698L1.36168 8.06746L7.77834 1.34524L7.05499 0.654762ZM1 8.22222H4.85V7.22222H1V8.22222ZM4.37703 7.56006L2.91036 11.8378L3.85631 12.1622L5.32297 7.88438L4.37703 7.56006ZM3.74501 12.3452L10.1617 5.62302L9.43832 4.93254L3.02166 11.6548L3.74501 12.3452ZM9.8 4.77778H5.95V5.77778H9.8V4.77778Z"
-            fill={props.color || "black"}
-          />
-        </svg>
-      );
-  }
-  return null;
-};
-export default Bolt;
diff --git a/packages/ui/src/icons/Camera.tsx b/packages/ui/src/icons/Camera.tsx
deleted file mode 100644
index ea9e9bb95..000000000
--- a/packages/ui/src/icons/Camera.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-const Camera = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M1 4.74771C1 3.69052 1.85702 2.8335 2.91421 2.8335H3.26256C4.05488 2.8335 4.81475 2.51875 5.375 1.9585C5.93525 1.39824 6.69512 1.0835 7.48744 1.0835H8.51256C9.30488 1.0835 10.0647 1.39824 10.625 1.9585C11.1853 2.51875 11.9451 2.8335 12.7374 2.8335H13.0858C14.143 2.8335 15 3.69052 15 4.74771V11.8835C15 13.0036 15 13.5637 14.782 13.9915C14.5903 14.3678 14.2843 14.6738 13.908 14.8655C13.4802 15.0835 12.9201 15.0835 11.8 15.0835H4.2C3.07989 15.0835 2.51984 15.0835 2.09202 14.8655C1.71569 14.6738 1.40973 14.3678 1.21799 13.9915C1 13.5637 1 13.0036 1 11.8835V4.74771Z"
-      stroke="#999999"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M11 8.56364C11 10.2205 9.65685 11.5636 8 11.5636C6.34315 11.5636 5 10.2205 5 8.56364C5 6.90678 6.34315 5.56364 8 5.56364C9.65685 5.56364 11 6.90678 11 8.56364Z"
-      stroke="#999999"
-      strokeWidth="1.5"
-    />
-  </svg>
-);
-
-export default Camera;
diff --git a/packages/ui/src/icons/CameraCapture.tsx b/packages/ui/src/icons/CameraCapture.tsx
index f7e8217b5..f4b4ce1e4 100644
--- a/packages/ui/src/icons/CameraCapture.tsx
+++ b/packages/ui/src/icons/CameraCapture.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function CameraCapture() {
+export function CameraCapture() {
   return (
     <svg
       width="68"
@@ -50,5 +50,3 @@ function CameraCapture() {
     </svg>
   );
 }
-
-export default CameraCapture;
diff --git a/packages/ui/src/icons/CaretRight.tsx b/packages/ui/src/icons/CaretRight.tsx
new file mode 100644
index 000000000..7b65aa8c2
--- /dev/null
+++ b/packages/ui/src/icons/CaretRight.tsx
@@ -0,0 +1,20 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function CaretRight() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.5 3.33301L13.5774 9.41042C13.9028 9.73584 13.9028 10.2635 13.5774 10.5889L7.5 16.6663"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/CentralArrowShareRight.tsx b/packages/ui/src/icons/CentralArrowShareRight.tsx
index c9d0658fc..33d2c6365 100644
--- a/packages/ui/src/icons/CentralArrowShareRight.tsx
+++ b/packages/ui/src/icons/CentralArrowShareRight.tsx
@@ -16,5 +16,3 @@ export function CentralArrowShareRight() {
     </svg>
   );
 }
-
-export default CentralArrowShareRight;
diff --git a/packages/ui/src/icons/Channel.tsx b/packages/ui/src/icons/Channel.tsx
deleted file mode 100644
index 73c13657b..000000000
--- a/packages/ui/src/icons/Channel.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-const Channel = () => {
-  return (
-    <svg
-      width="100%"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M8 8C8.83684 7.16316 9.16316 6.83684 10 6"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-      <path
-        d="M10 3.5C10 2.11929 11.1193 1 12.5 1C13.8807 1 15 2.11929 15 3.5C15 4.88071 13.8807 6 12.5 6C11.1193 6 10 4.88071 10 3.5Z"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-      <path
-        d="M1 11C1 8.79086 2.79086 7 5 7C7.20914 7 9 8.79086 9 11C9 13.2091 7.20914 15 5 15C2.79086 15 1 13.2091 1 11Z"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-};
-
-export default Channel;
diff --git a/packages/ui/src/icons/ChannelBalance.tsx b/packages/ui/src/icons/ChannelBalance.tsx
deleted file mode 100644
index 31dca0e78..000000000
--- a/packages/ui/src/icons/ChannelBalance.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-const ChannelBalance = () => (
-  <svg
-    width="15"
-    height="12"
-    viewBox="0 0 15 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5.42709 5.02463C5.42709 6.29477 4.43605 7.32442 3.21355 7.32442C1.99104 7.32442 1 6.29477 1 5.02463M5.42709 5.02463H1M5.42709 5.02463L3.21355 1L1 5.02463"
-      stroke="black"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M13.9792 5.02463C13.9792 6.29477 12.9882 7.32442 11.7657 7.32442C10.5432 7.32442 9.55212 6.29477 9.55212 5.02463M13.9792 5.02463H9.55212M13.9792 5.02463L11.7657 1L9.55212 5.02463"
-      stroke="black"
-      strokeLinejoin="round"
-    />
-    <path d="M7.48975 1L7.48975 11" stroke="black" strokeLinecap="round" />
-    <path d="M4.32751 10.9999H10.6519" stroke="black" strokeLinecap="round" />
-    <path d="M3.2135 1L11.7657 1" stroke="black" strokeLinecap="round" />
-  </svg>
-);
-
-export default ChannelBalance;
diff --git a/packages/ui/src/icons/ChannelOpen.tsx b/packages/ui/src/icons/ChannelOpen.tsx
deleted file mode 100644
index e9c7e2eb5..000000000
--- a/packages/ui/src/icons/ChannelOpen.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-function ChannelOpen() {
-  return (
-    <svg
-      width="100%"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M5.99706 5.99918C5.39942 6.59682 5.16637 6.82987 4.56873 7.42751"
-        stroke="currentColor"
-        strokeLinecap="round"
-      />
-      <path
-        d="M4.57084 9.21306C4.57084 10.1991 3.77148 10.9985 2.78542 10.9985C1.79936 10.9985 1 10.1991 1 9.21306C1 8.227 1.79936 7.42764 2.78542 7.42764C3.77148 7.42764 4.57084 8.227 4.57084 9.21306Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-      />
-      <path
-        d="M10.9994 3.85667C10.9994 5.43437 9.72038 6.71334 8.14268 6.71334C6.56499 6.71334 5.28601 5.43437 5.28601 3.85667C5.28601 2.27897 6.56499 1 8.14268 1C9.72038 1 10.9994 2.27897 10.9994 3.85667Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-export default ChannelOpen;
diff --git a/packages/ui/src/icons/CheckboxIcon.tsx b/packages/ui/src/icons/CheckboxIcon.tsx
deleted file mode 100644
index c045bfaf4..000000000
--- a/packages/ui/src/icons/CheckboxIcon.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-type Props = {
-  checked: boolean;
-};
-
-const CheckboxIcon = (props: Props) =>
-  props.checked ? (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect
-        x="0.5"
-        y="0.5"
-        width="11"
-        height="11"
-        rx="1.5"
-        fill="black"
-        stroke="black"
-      />
-      <path
-        d="M9 4L6.38691 7.18724C5.94268 7.72908 5.72056 8 5.44455 8C5.16854 8 4.94642 7.72908 4.50219 7.18724L4 6.57471"
-        stroke="white"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-    </svg>
-  ) : (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect
-        x="0.5"
-        y="0.5"
-        width="11"
-        height="11"
-        rx="1.5"
-        fill="white"
-        stroke="#999999"
-      />
-    </svg>
-  );
-
-export default CheckboxIcon;
diff --git a/packages/ui/src/icons/Checkmark.tsx b/packages/ui/src/icons/Checkmark.tsx
index c262b21d9..f2f8aa9bd 100644
--- a/packages/ui/src/icons/Checkmark.tsx
+++ b/packages/ui/src/icons/Checkmark.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function Checkmark() {
+export function Checkmark() {
   return (
     <svg
       width="100%"
@@ -17,5 +17,3 @@ function Checkmark() {
     </svg>
   );
 }
-
-export default Checkmark;
diff --git a/packages/ui/src/icons/CheckmarkCircleGreen.tsx b/packages/ui/src/icons/CheckmarkCircleGreen.tsx
index 17a931882..05970fbd3 100644
--- a/packages/ui/src/icons/CheckmarkCircleGreen.tsx
+++ b/packages/ui/src/icons/CheckmarkCircleGreen.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function CheckmarkCircleGreen() {
+export function CheckmarkCircleGreen() {
   return (
     <svg
       width="100%"
@@ -17,5 +17,3 @@ function CheckmarkCircleGreen() {
     </svg>
   );
 }
-
-export default CheckmarkCircleGreen;
diff --git a/packages/ui/src/icons/CheckmarkCircleTier1.tsx b/packages/ui/src/icons/CheckmarkCircleTier1.tsx
index 38f468776..d317b3876 100644
--- a/packages/ui/src/icons/CheckmarkCircleTier1.tsx
+++ b/packages/ui/src/icons/CheckmarkCircleTier1.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function CheckmarkCircleTier1() {
+export function CheckmarkCircleTier1() {
   return (
     <svg
       width="100%"
@@ -17,5 +17,3 @@ function CheckmarkCircleTier1() {
     </svg>
   );
 }
-
-export default CheckmarkCircleTier1;
diff --git a/packages/ui/src/icons/CheckmarkCircleTier2.tsx b/packages/ui/src/icons/CheckmarkCircleTier2.tsx
index 01575f6cc..a4e01be2f 100644
--- a/packages/ui/src/icons/CheckmarkCircleTier2.tsx
+++ b/packages/ui/src/icons/CheckmarkCircleTier2.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function CheckmarkCircleTier2() {
+export function CheckmarkCircleTier2() {
   return (
     <svg
       width="100%"
@@ -17,5 +17,3 @@ function CheckmarkCircleTier2() {
     </svg>
   );
 }
-
-export default CheckmarkCircleTier2;
diff --git a/packages/ui/src/icons/CheckmarkCircleTier3.tsx b/packages/ui/src/icons/CheckmarkCircleTier3.tsx
index e22487a5d..1e9c15083 100644
--- a/packages/ui/src/icons/CheckmarkCircleTier3.tsx
+++ b/packages/ui/src/icons/CheckmarkCircleTier3.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function CheckmarkCircleTier3() {
+export function CheckmarkCircleTier3() {
   return (
     <svg
       width="100%"
@@ -17,5 +17,3 @@ function CheckmarkCircleTier3() {
     </svg>
   );
 }
-
-export default CheckmarkCircleTier3;
diff --git a/packages/ui/src/icons/Chevron.tsx b/packages/ui/src/icons/Chevron.tsx
index 62d8410e4..a4eb44d45 100644
--- a/packages/ui/src/icons/Chevron.tsx
+++ b/packages/ui/src/icons/Chevron.tsx
@@ -1,19 +1,18 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-const Chevron = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 10 7"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M1 1L5 5L9 1"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-  </svg>
-);
-
-export default Chevron;
+export function Chevron() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <path
+        d="M3.3335 5.33337L8.00016 10L12.6668 5.33337"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/ChevronLeft.tsx b/packages/ui/src/icons/ChevronLeft.tsx
new file mode 100644
index 000000000..9aa1423e7
--- /dev/null
+++ b/packages/ui/src/icons/ChevronLeft.tsx
@@ -0,0 +1,19 @@
+// Copyright  ©, 2024, Lightspark Group, Inc. - All Rights Reserved
+
+export const ChevronLeft = () => (
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M15 20L7 12L15 4"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/CircleCheck.tsx b/packages/ui/src/icons/CircleCheck.tsx
index e20058e19..a647962f2 100644
--- a/packages/ui/src/icons/CircleCheck.tsx
+++ b/packages/ui/src/icons/CircleCheck.tsx
@@ -15,5 +15,3 @@ export function CircleCheck() {
     </svg>
   );
 }
-
-export default CircleCheck;
diff --git a/packages/ui/src/icons/CircleCheckOutline.tsx b/packages/ui/src/icons/CircleCheckOutline.tsx
index 25664ea15..95879dccc 100644
--- a/packages/ui/src/icons/CircleCheckOutline.tsx
+++ b/packages/ui/src/icons/CircleCheckOutline.tsx
@@ -14,5 +14,3 @@ export function CircleCheckOutline() {
     </svg>
   );
 }
-
-export default CircleCheckOutline;
diff --git a/packages/ui/src/icons/CirclePlus.tsx b/packages/ui/src/icons/CirclePlus.tsx
index e10322c68..61cb19d96 100644
--- a/packages/ui/src/icons/CirclePlus.tsx
+++ b/packages/ui/src/icons/CirclePlus.tsx
@@ -10,5 +10,3 @@ export function CirclePlus() {
     </svg>
   );
 }
-
-export default CirclePlus;
diff --git a/packages/ui/src/icons/Clock.tsx b/packages/ui/src/icons/Clock.tsx
index e8bb094a6..b95c91546 100644
--- a/packages/ui/src/icons/Clock.tsx
+++ b/packages/ui/src/icons/Clock.tsx
@@ -16,4 +16,3 @@ export function Clock() {
     </svg>
   );
 }
-export default Clock;
diff --git a/packages/ui/src/icons/Close.tsx b/packages/ui/src/icons/Close.tsx
index cd25f89f1..99e168353 100644
--- a/packages/ui/src/icons/Close.tsx
+++ b/packages/ui/src/icons/Close.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Close = () => {
+export function Close() {
   return (
     <svg
       width="100%"
@@ -16,6 +16,4 @@ const Close = () => {
       />
     </svg>
   );
-};
-
-export default Close;
+}
diff --git a/packages/ui/src/icons/Code.tsx b/packages/ui/src/icons/Code.tsx
index 4c0e12369..ecfffde1b 100644
--- a/packages/ui/src/icons/Code.tsx
+++ b/packages/ui/src/icons/Code.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Code = () => {
+export function Code() {
   return (
     <svg
       width="100%"
@@ -17,6 +17,4 @@ const Code = () => {
       />
     </svg>
   );
-};
-
-export default Code;
+}
diff --git a/packages/ui/src/icons/Copy.tsx b/packages/ui/src/icons/Copy.tsx
index 6e1251b12..75abae53d 100644
--- a/packages/ui/src/icons/Copy.tsx
+++ b/packages/ui/src/icons/Copy.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Copy = () => {
+export function Copy() {
   return (
     <svg
       width="100%"
@@ -15,6 +15,4 @@ const Copy = () => {
       />
     </svg>
   );
-};
-
-export default Copy;
+}
diff --git a/packages/ui/src/icons/CreditCard.tsx b/packages/ui/src/icons/CreditCard.tsx
index 2e620a3d3..aea7048da 100644
--- a/packages/ui/src/icons/CreditCard.tsx
+++ b/packages/ui/src/icons/CreditCard.tsx
@@ -1,24 +1,24 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const CreditCard = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 12 13"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M2.25 5.9375H9.375" stroke="currentColor" strokeWidth="1.125" />
-    <rect
-      x="1.5"
-      y="2.9375"
-      width="9"
-      height="7.125"
-      rx="1"
-      stroke="currentColor"
-      strokeWidth="1.125"
-      mask="url(#path-1-inside-1_865_26901)"
-    />
-  </svg>
-);
-
-export default CreditCard;
+export function CreditCard() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 12 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M2.25 5.9375H9.375" stroke="currentColor" strokeWidth="1.125" />
+      <rect
+        x="1.5"
+        y="2.9375"
+        width="9"
+        height="7.125"
+        rx="1"
+        stroke="currentColor"
+        strokeWidth="1.125"
+        mask="url(#path-1-inside-1_865_26901)"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/DeleteIcon.tsx b/packages/ui/src/icons/DeleteIcon.tsx
index 2adb947f9..16009ca01 100644
--- a/packages/ui/src/icons/DeleteIcon.tsx
+++ b/packages/ui/src/icons/DeleteIcon.tsx
@@ -1,7 +1,7 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 import { useTheme } from "@emotion/react";
 
-function DeleteIcon() {
+export function DeleteIcon() {
   const theme = useTheme();
   return (
     <svg
@@ -28,5 +28,3 @@ function DeleteIcon() {
     </svg>
   );
 }
-
-export default DeleteIcon;
diff --git a/packages/ui/src/icons/Dollar.tsx b/packages/ui/src/icons/Dollar.tsx
index 2339b2e52..f8bf585a6 100644
--- a/packages/ui/src/icons/Dollar.tsx
+++ b/packages/ui/src/icons/Dollar.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function Dollar() {
+export function Dollar() {
   return (
     <svg
       width="100%"
@@ -18,5 +18,3 @@ function Dollar() {
     </svg>
   );
 }
-
-export default Dollar;
diff --git a/packages/ui/src/icons/DollarManrope.tsx b/packages/ui/src/icons/DollarManrope.tsx
new file mode 100644
index 000000000..b5e3524e8
--- /dev/null
+++ b/packages/ui/src/icons/DollarManrope.tsx
@@ -0,0 +1,20 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function DollarManrope() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 10 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.00003 2.3291V0.84668M5.00003 15.6709V17.1533M8.53134 4.55273C7.82641 3.66654 6.50905 3.07031 5.00003 3.07031H4.54706C2.54571 3.07031 0.92334 4.25023 0.92334 5.70572V5.81886C0.92334 6.85997 1.73211 7.81163 3.01249 8.27722L6.98757 9.72275C8.26797 10.1883 9.07666 11.14 9.07666 12.1811C9.07666 13.699 7.3847 14.9296 5.29736 14.9296H5.00003C3.49101 14.9296 2.17365 14.3334 1.46872 13.4472"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/DollarManropeSmall.tsx b/packages/ui/src/icons/DollarManropeSmall.tsx
new file mode 100644
index 000000000..05a3b4601
--- /dev/null
+++ b/packages/ui/src/icons/DollarManropeSmall.tsx
@@ -0,0 +1,20 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function DollarManropeSmall() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.0005 3.3291V1.84668M10.0005 16.6709V18.1533M13.5318 5.55273C12.8269 4.66654 11.5095 4.07031 10.0005 4.07031H9.54754C7.5462 4.07031 5.92383 5.25023 5.92383 6.70572V6.81886C5.92383 7.85997 6.7326 8.81163 8.01298 9.27722L11.9881 10.7227C13.2685 11.1883 14.0771 12.14 14.0771 13.1811C14.0771 14.699 12.3852 15.9296 10.2978 15.9296H10.0005C8.4915 15.9296 7.17414 15.3334 6.46921 14.4472"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/DotGrid1x3Horizontal.tsx b/packages/ui/src/icons/DotGrid1x3Horizontal.tsx
index c815ad4f4..b68a286a4 100644
--- a/packages/ui/src/icons/DotGrid1x3Horizontal.tsx
+++ b/packages/ui/src/icons/DotGrid1x3Horizontal.tsx
@@ -1,30 +1,30 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const DotGrid1x3Horizontal = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g id="dot-grid-1x3-horizontal, menu, drag, grab">
-      <g id="Icon">
-        <path
-          d="M4.00001 6.66663H1.33334V9.33329H4.00001V6.66663Z"
-          fill="currentColor"
-        />
-        <path
-          d="M9.33334 6.66663H6.66668V9.33329H9.33334V6.66663Z"
-          fill="currentColor"
-        />
-        <path
-          d="M14.6667 6.66663H12V9.33329H14.6667V6.66663Z"
-          fill="currentColor"
-        />
+export function DotGrid1x3Horizontal() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="dot-grid-1x3-horizontal, menu, drag, grab">
+        <g id="Icon">
+          <path
+            d="M4.00001 6.66663H1.33334V9.33329H4.00001V6.66663Z"
+            fill="currentColor"
+          />
+          <path
+            d="M9.33334 6.66663H6.66668V9.33329H9.33334V6.66663Z"
+            fill="currentColor"
+          />
+          <path
+            d="M14.6667 6.66663H12V9.33329H14.6667V6.66663Z"
+            fill="currentColor"
+          />
+        </g>
       </g>
-    </g>
-  </svg>
-);
-
-export default DotGrid1x3Horizontal;
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Dots.tsx b/packages/ui/src/icons/Dots.tsx
deleted file mode 100644
index 8d1176629..000000000
--- a/packages/ui/src/icons/Dots.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-const Dots = () => (
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 24 24"
-    transform="rotate(90)"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path>
-  </svg>
-);
-
-export default Dots;
diff --git a/packages/ui/src/icons/Down.tsx b/packages/ui/src/icons/Down.tsx
deleted file mode 100644
index c5ec98ba1..000000000
--- a/packages/ui/src/icons/Down.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-const Down = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-  >
-    <path
-      d="M3.3335 5.33337L8.00016 10L12.6668 5.33337"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Down;
diff --git a/packages/ui/src/icons/Download.tsx b/packages/ui/src/icons/Download.tsx
index d4153856f..9bb2cb66a 100644
--- a/packages/ui/src/icons/Download.tsx
+++ b/packages/ui/src/icons/Download.tsx
@@ -1,25 +1,25 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Download = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M3.75 14C4.16421 14 4.5 14.3358 4.5 14.75V19.5H19.5V14.75C19.5 14.3358 19.8358 14 20.25 14C20.6642 14 21 14.3358 21 14.75V20.25C21 20.6642 20.6642 21 20.25 21H3.75C3.33579 21 3 20.6642 3 20.25V14.75C3 14.3358 3.33579 14 3.75 14Z"
-      fill="currentColor"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M12 15.75C12.1989 15.75 12.3897 15.671 12.5303 15.5303L16.0303 12.0303C16.3232 11.7374 16.3232 11.2626 16.0303 10.9697C15.7374 10.6768 15.2626 10.6768 14.9697 10.9697L12.75 13.1893V3.75C12.75 3.33579 12.4142 3 12 3C11.5858 3 11.25 3.33579 11.25 3.75V13.1893L9.03033 10.9697C8.73744 10.6768 8.26256 10.6768 7.96967 10.9697C7.67678 11.2626 7.67678 11.7374 7.96967 12.0303L11.4697 15.5303C11.6103 15.671 11.8011 15.75 12 15.75Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default Download;
+export function Download() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.75 14C4.16421 14 4.5 14.3358 4.5 14.75V19.5H19.5V14.75C19.5 14.3358 19.8358 14 20.25 14C20.6642 14 21 14.3358 21 14.75V20.25C21 20.6642 20.6642 21 20.25 21H3.75C3.33579 21 3 20.6642 3 20.25V14.75C3 14.3358 3.33579 14 3.75 14Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 15.75C12.1989 15.75 12.3897 15.671 12.5303 15.5303L16.0303 12.0303C16.3232 11.7374 16.3232 11.2626 16.0303 10.9697C15.7374 10.6768 15.2626 10.6768 14.9697 10.9697L12.75 13.1893V3.75C12.75 3.33579 12.4142 3 12 3C11.5858 3 11.25 3.33579 11.25 3.75V13.1893L9.03033 10.9697C8.73744 10.6768 8.26256 10.6768 7.96967 10.9697C7.67678 11.2626 7.67678 11.7374 7.96967 12.0303L11.4697 15.5303C11.6103 15.671 11.8011 15.75 12 15.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Envelope.tsx b/packages/ui/src/icons/Envelope.tsx
new file mode 100644
index 000000000..dd7c9b4ac
--- /dev/null
+++ b/packages/ui/src/icons/Envelope.tsx
@@ -0,0 +1,20 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function Envelope() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M35.0027 15.417C30.8238 18.5565 25.6293 20.417 20.0002 20.417C14.371 20.417 9.17645 18.5565 4.99773 15.417M4.5835 7.91699H35.4168V32.0837H4.5835V7.91699Z"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/ExclamationPoint.tsx b/packages/ui/src/icons/ExclamationPoint.tsx
index 05418a968..9f4e2110d 100644
--- a/packages/ui/src/icons/ExclamationPoint.tsx
+++ b/packages/ui/src/icons/ExclamationPoint.tsx
@@ -1,33 +1,33 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const ExclamationPoint = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 13 13"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M1.48828 6.5C1.48828 3.46243 3.95072 0.999999 6.98828 1C10.0258 1 12.4883 3.46243 12.4883 6.5C12.4883 9.53757 10.0258 12 6.98828 12C3.95072 12 1.48828 9.53757 1.48828 6.5Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M6.98828 4.14286L6.98828 6.5M6.98828 8.85707L6.98828 8.87549"
-      stroke="currentColor"
-      strokeWidth="1.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M6.98828 8.85707L6.98828 8.87549"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default ExclamationPoint;
+export function ExclamationPoint() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 13 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.48828 6.5C1.48828 3.46243 3.95072 0.999999 6.98828 1C10.0258 1 12.4883 3.46243 12.4883 6.5C12.4883 9.53757 10.0258 12 6.98828 12C3.95072 12 1.48828 9.53757 1.48828 6.5Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.98828 4.14286L6.98828 6.5M6.98828 8.85707L6.98828 8.87549"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.98828 8.85707L6.98828 8.87549"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Exit.tsx b/packages/ui/src/icons/Exit.tsx
deleted file mode 100644
index 09dbe86ce..000000000
--- a/packages/ui/src/icons/Exit.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-const Exit = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 23 22"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M13.3329 5.28571V1H1.9043M1.9043 1V15.2857L9.04715 21V6.71429L1.9043 1ZM13.3329 13.8571H21.9043M21.9043 13.8571L17.6186 9.57143M21.9043 13.8571L17.6186 18.1429"
-      stroke="#999999"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Exit;
diff --git a/packages/ui/src/icons/Explorer.tsx b/packages/ui/src/icons/Explorer.tsx
index 9357ac7ec..85007ba53 100644
--- a/packages/ui/src/icons/Explorer.tsx
+++ b/packages/ui/src/icons/Explorer.tsx
@@ -1,17 +1,17 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Explorer = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M8.90625 6.38889L8.21689 6.09345L7.76885 7.13889H8.90625V6.38889ZM11.3229 0.75L12.0123 1.04544C12.149 0.726338 12.0489 0.355085 11.7703 0.148013C11.4916 -0.0590584 11.1072 -0.0478189 10.8412 0.175182L11.3229 0.75ZM0.75 9.61111L0.268248 9.03629C0.0265337 9.23887 -0.0626239 9.57103 0.0451549 9.86742C0.152934 10.1638 0.43462 10.3611 0.75 10.3611L0.75 9.61111ZM7.09375 9.61111L7.78311 9.90655L8.23115 8.86111H7.09375V9.61111ZM4.67708 15.25L3.98772 14.9546C3.85097 15.2737 3.95109 15.6449 4.22974 15.852C4.5084 16.0591 4.89275 16.0478 5.15884 15.8248L4.67708 15.25ZM15.25 6.38889L15.7318 6.96371C15.9735 6.76113 16.0626 6.42897 15.9548 6.13258C15.8471 5.83619 15.5654 5.63889 15.25 5.63889V6.38889ZM9.59561 6.68433L12.0123 1.04544L10.6336 0.454561L8.21689 6.09345L9.59561 6.68433ZM10.8412 0.175182L0.268248 9.03629L1.23175 10.1859L11.8047 1.32482L10.8412 0.175182ZM0.75 10.3611H7.09375V8.86111H0.75V10.3611ZM6.40439 9.31567L3.98772 14.9546L5.36644 15.5454L7.78311 9.90655L6.40439 9.31567ZM5.15884 15.8248L15.7318 6.96371L14.7682 5.81407L4.19533 14.6752L5.15884 15.8248ZM15.25 5.63889H8.90625V7.13889H15.25V5.63889Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default Explorer;
+export function Explorer() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.90625 6.38889L8.21689 6.09345L7.76885 7.13889H8.90625V6.38889ZM11.3229 0.75L12.0123 1.04544C12.149 0.726338 12.0489 0.355085 11.7703 0.148013C11.4916 -0.0590584 11.1072 -0.0478189 10.8412 0.175182L11.3229 0.75ZM0.75 9.61111L0.268248 9.03629C0.0265337 9.23887 -0.0626239 9.57103 0.0451549 9.86742C0.152934 10.1638 0.43462 10.3611 0.75 10.3611L0.75 9.61111ZM7.09375 9.61111L7.78311 9.90655L8.23115 8.86111H7.09375V9.61111ZM4.67708 15.25L3.98772 14.9546C3.85097 15.2737 3.95109 15.6449 4.22974 15.852C4.5084 16.0591 4.89275 16.0478 5.15884 15.8248L4.67708 15.25ZM15.25 6.38889L15.7318 6.96371C15.9735 6.76113 16.0626 6.42897 15.9548 6.13258C15.8471 5.83619 15.5654 5.63889 15.25 5.63889V6.38889ZM9.59561 6.68433L12.0123 1.04544L10.6336 0.454561L8.21689 6.09345L9.59561 6.68433ZM10.8412 0.175182L0.268248 9.03629L1.23175 10.1859L11.8047 1.32482L10.8412 0.175182ZM0.75 10.3611H7.09375V8.86111H0.75V10.3611ZM6.40439 9.31567L3.98772 14.9546L5.36644 15.5454L7.78311 9.90655L6.40439 9.31567ZM5.15884 15.8248L15.7318 6.96371L14.7682 5.81407L4.19533 14.6752L5.15884 15.8248ZM15.25 5.63889H8.90625V7.13889H15.25V5.63889Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Eye.tsx b/packages/ui/src/icons/Eye.tsx
index 5266e62d2..e1e8e1d44 100644
--- a/packages/ui/src/icons/Eye.tsx
+++ b/packages/ui/src/icons/Eye.tsx
@@ -1,23 +1,23 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Eye = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10.0714 8.17857C10.0714 9.32259 9.14402 10.25 8 10.25C6.85598 10.25 5.92857 9.32259 5.92857 8.17857C5.92857 7.03455 6.85598 6.10714 8 6.10714C9.14402 6.10714 10.0714 7.03455 10.0714 8.17857Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M8 3C4.375 3 0.75 5.82468 0.75 8.17857C0.75 10.5325 4.375 13.3571 8 13.3571C11.625 13.3571 15.25 10.5325 15.25 8.17857C15.25 5.82468 11.625 3 8 3Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-  </svg>
-);
-
-export default Eye;
+export function Eye() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.0714 8.17857C10.0714 9.32259 9.14402 10.25 8 10.25C6.85598 10.25 5.92857 9.32259 5.92857 8.17857C5.92857 7.03455 6.85598 6.10714 8 6.10714C9.14402 6.10714 10.0714 7.03455 10.0714 8.17857Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M8 3C4.375 3 0.75 5.82468 0.75 8.17857C0.75 10.5325 4.375 13.3571 8 13.3571C11.625 13.3571 15.25 10.5325 15.25 8.17857C15.25 5.82468 11.625 3 8 3Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/EyeDropper.tsx b/packages/ui/src/icons/EyeDropper.tsx
index 2813317f1..943e9c2ee 100644
--- a/packages/ui/src/icons/EyeDropper.tsx
+++ b/packages/ui/src/icons/EyeDropper.tsx
@@ -1,20 +1,20 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const EyeDropper = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M14.1468 5.84804L13.8883 5.58948L15.21 4.26777C16.1863 3.29146 16.1863 1.70854 15.21 0.732233C14.2337 -0.244078 12.6508 -0.244078 11.6744 0.732233L10.3527 2.05394L10.0942 1.79538C9.50839 1.2096 8.55865 1.2096 7.97286 1.79538C7.38707 2.38117 7.38707 3.33092 7.97286 3.9167L8.26066 4.2045L2.12438 10.3408C2.02485 10.4403 1.9377 10.5515 1.8648 10.6719L0.326364 13.2129C-0.621051 14.7778 1.16487 16.5637 2.72972 15.6163L5.27078 14.0779C5.39118 14.005 5.50235 13.9178 5.60187 13.8183L11.7382 7.682L12.0255 7.96936C12.6113 8.55515 13.561 8.55515 14.1468 7.96936C14.7326 7.38357 14.7326 6.43383 14.1468 5.84804ZM9.32132 5.26516L10.6775 6.62134L4.54121 12.7576C4.527 12.7718 4.51112 12.7843 4.49391 12.7947L1.95286 14.3331C1.88025 14.3771 1.82762 14.3793 1.78992 14.3734C1.7446 14.3663 1.69213 14.3416 1.6466 14.2961C1.60107 14.2505 1.5764 14.198 1.56927 14.1527C1.56334 14.115 1.56556 14.0624 1.60952 13.9898L3.14796 11.4487C3.15837 11.4315 3.17082 11.4157 3.18504 11.4014L9.32132 5.26516Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default EyeDropper;
+export function EyeDropper() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.1468 5.84804L13.8883 5.58948L15.21 4.26777C16.1863 3.29146 16.1863 1.70854 15.21 0.732233C14.2337 -0.244078 12.6508 -0.244078 11.6744 0.732233L10.3527 2.05394L10.0942 1.79538C9.50839 1.2096 8.55865 1.2096 7.97286 1.79538C7.38707 2.38117 7.38707 3.33092 7.97286 3.9167L8.26066 4.2045L2.12438 10.3408C2.02485 10.4403 1.9377 10.5515 1.8648 10.6719L0.326364 13.2129C-0.621051 14.7778 1.16487 16.5637 2.72972 15.6163L5.27078 14.0779C5.39118 14.005 5.50235 13.9178 5.60187 13.8183L11.7382 7.682L12.0255 7.96936C12.6113 8.55515 13.561 8.55515 14.1468 7.96936C14.7326 7.38357 14.7326 6.43383 14.1468 5.84804ZM9.32132 5.26516L10.6775 6.62134L4.54121 12.7576C4.527 12.7718 4.51112 12.7843 4.49391 12.7947L1.95286 14.3331C1.88025 14.3771 1.82762 14.3793 1.78992 14.3734C1.7446 14.3663 1.69213 14.3416 1.6466 14.2961C1.60107 14.2505 1.5764 14.198 1.56927 14.1527C1.56334 14.115 1.56556 14.0624 1.60952 13.9898L3.14796 11.4487C3.15837 11.4315 3.17082 11.4157 3.18504 11.4014L9.32132 5.26516Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Figma.tsx b/packages/ui/src/icons/Figma.tsx
new file mode 100644
index 000000000..9c981e023
--- /dev/null
+++ b/packages/ui/src/icons/Figma.tsx
@@ -0,0 +1,20 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function Figma() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8.01074 9.04831C8.01074 5.43178 10.9425 2.5 14.5591 2.5L25.7952 2.5C29.4118 2.5 32.3435 5.43178 32.3435 9.04831C32.3435 11.3383 31.1681 13.3537 29.3876 14.5242C31.1681 15.6947 32.3435 17.7102 32.3435 20.0001C32.3435 23.6167 29.4118 26.5485 25.7952 26.5485H25.653C23.9575 26.5485 22.4126 25.9041 21.2496 24.847V30.8806C21.2496 34.5453 18.2412 37.5 14.5944 37.5C10.9868 37.5 8.01074 34.5772 8.01074 30.9517C8.01074 28.6617 9.18619 26.6463 10.9666 25.476C9.18618 24.3055 8.01074 22.2901 8.01074 20.0001C8.01074 17.7102 9.1862 15.6947 10.9667 14.5242C9.18621 13.3537 8.01074 11.3383 8.01074 9.04831ZM14.5591 13.4517C12.1272 13.4517 10.1557 11.4802 10.1557 9.04831C10.1557 6.61641 12.1272 4.64497 14.5591 4.64497L19.1047 4.64497V13.4517H14.5591ZM19.1047 15.5966H14.5591C12.1272 15.5966 10.1557 17.5682 10.1557 20.0001C10.1557 22.4321 12.1272 24.4035 14.5591 24.4035H19.1047V15.5966ZM19.1047 26.5485H14.5591C12.1271 26.5485 10.1557 28.5198 10.1557 30.9517C10.1557 33.3746 12.1535 35.355 14.5944 35.355C17.0746 35.355 19.1047 33.3428 19.1047 30.8806V26.5485ZM25.7952 15.5966L25.653 15.5968C23.2211 15.5968 21.2496 17.5682 21.2496 20.0001C21.2496 22.4321 23.2211 24.4035 25.653 24.4035H25.7952C28.2271 24.4035 30.1986 22.4321 30.1986 20.0001C30.1986 17.5682 28.227 15.5967 25.7952 15.5966C25.7953 15.5966 25.7952 15.5966 25.7952 15.5966ZM25.7952 14.5242V13.4517H21.2496V4.64497H25.7952C28.2271 4.64497 30.1986 6.61641 30.1986 9.04831C30.1986 11.4802 28.2271 13.4517 25.7952 13.4517"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/FlutterTwoTone.tsx b/packages/ui/src/icons/FlutterTwoTone.tsx
index 696e8972e..b3c0a88c4 100644
--- a/packages/ui/src/icons/FlutterTwoTone.tsx
+++ b/packages/ui/src/icons/FlutterTwoTone.tsx
@@ -1,15 +1,13 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-import { nanoid } from "nanoid";
-import { useRef } from "react";
+import { useId } from "react";
 
-function FlutterTwoTone() {
+export function FlutterTwoTone() {
   /**
    * unique id is required per instance to prevent interferring ids breaking
    * icon styles
    */
-  const idRef = useRef(nanoid());
-  const id = idRef.current;
+  const id = useId();
 
   return (
     <svg
@@ -38,5 +36,3 @@ function FlutterTwoTone() {
     </svg>
   );
 }
-
-export default FlutterTwoTone;
diff --git a/packages/ui/src/icons/FramedLetterI.tsx b/packages/ui/src/icons/FramedLetterI.tsx
index bd5a7c325..eae6c0b00 100644
--- a/packages/ui/src/icons/FramedLetterI.tsx
+++ b/packages/ui/src/icons/FramedLetterI.tsx
@@ -1,24 +1,24 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const FramedLetterI = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 13 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M9.8999 1.5H2.8999C2.34762 1.5 1.8999 1.94772 1.8999 2.5V9.5C1.8999 10.0523 2.34762 10.5 2.8999 10.5H9.8999C10.4522 10.5 10.8999 10.0523 10.8999 9.5V2.5C10.8999 1.94772 10.4522 1.5 9.8999 1.5Z"
-      stroke="currentColor"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M6.3999 4V8"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default FramedLetterI;
+export function FramedLetterI() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 13 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.8999 1.5H2.8999C2.34762 1.5 1.8999 1.94772 1.8999 2.5V9.5C1.8999 10.0523 2.34762 10.5 2.8999 10.5H9.8999C10.4522 10.5 10.8999 10.0523 10.8999 9.5V2.5C10.8999 1.94772 10.4522 1.5 9.8999 1.5Z"
+        stroke="currentColor"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.3999 4V8"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Gear.tsx b/packages/ui/src/icons/Gear.tsx
index 4ed891542..06c8c5d32 100644
--- a/packages/ui/src/icons/Gear.tsx
+++ b/packages/ui/src/icons/Gear.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function Gear() {
+export function Gear() {
   return (
     <svg
       width="100%"
@@ -19,5 +19,3 @@ function Gear() {
     </svg>
   );
 }
-
-export default Gear;
diff --git a/packages/ui/src/icons/Github.tsx b/packages/ui/src/icons/Github.tsx
index 6e2b287b6..ff5e641d1 100644
--- a/packages/ui/src/icons/Github.tsx
+++ b/packages/ui/src/icons/Github.tsx
@@ -1,4 +1,4 @@
-function Github() {
+export function Github() {
   return (
     <svg
       width="100%"
@@ -13,5 +13,3 @@ function Github() {
     </svg>
   );
 }
-
-export default Github;
diff --git a/packages/ui/src/icons/GoTwoTone.tsx b/packages/ui/src/icons/GoTwoTone.tsx
index 5d98b519d..73d47154b 100644
--- a/packages/ui/src/icons/GoTwoTone.tsx
+++ b/packages/ui/src/icons/GoTwoTone.tsx
@@ -2,7 +2,7 @@
 
 import { useTheme } from "@emotion/react";
 
-function GoTwoTone() {
+export function GoTwoTone() {
   const theme = useTheme();
   return (
     <svg
@@ -43,5 +43,3 @@ function GoTwoTone() {
     </svg>
   );
 }
-
-export default GoTwoTone;
diff --git a/packages/ui/src/icons/GraphQLTwoTone.tsx b/packages/ui/src/icons/GraphQLTwoTone.tsx
index a58a744eb..4fcb0e741 100644
--- a/packages/ui/src/icons/GraphQLTwoTone.tsx
+++ b/packages/ui/src/icons/GraphQLTwoTone.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function GraphQLTwoTone() {
+export function GraphQLTwoTone() {
   return (
     <svg
       width="100%"
@@ -71,5 +71,3 @@ function GraphQLTwoTone() {
     </svg>
   );
 }
-
-export default GraphQLTwoTone;
diff --git a/packages/ui/src/icons/HeartOutline.tsx b/packages/ui/src/icons/HeartOutline.tsx
index 0748ac436..37a741ca2 100644
--- a/packages/ui/src/icons/HeartOutline.tsx
+++ b/packages/ui/src/icons/HeartOutline.tsx
@@ -1,34 +1,9 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-type Props = {
-  size?: 12 | 16;
-};
-
-const HeartOutline = (props: Props) => {
-  const size = props.size || 16;
-
-  if (size === 12) {
-    return (
-      <svg
-        width="13"
-        height="13"
-        viewBox="0 0 13 13"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M11.5797 2.67974C10.4942 1.60285 8.73434 1.60285 7.64889 2.67973L6.99375 3.41493L6.33861 2.67975C5.25316 1.60286 3.49329 1.60286 2.40784 2.67975C1.32239 3.75663 1.32239 5.50261 2.40784 6.5795L6.99374 11.1292L11.5797 6.57949C12.6651 5.5026 12.6651 3.75662 11.5797 2.67974Z"
-          stroke="currentColor"
-          strokeWidth="1.2"
-          strokeLinejoin="round"
-        />
-      </svg>
-    );
-  }
-
+export function HeartOutline() {
   return (
     <svg
-      width="16"
+      width="100%"
       height="16"
       viewBox="0 0 16 16"
       fill="none"
@@ -42,6 +17,4 @@ const HeartOutline = (props: Props) => {
       />
     </svg>
   );
-};
-
-export default HeartOutline;
+}
diff --git a/packages/ui/src/icons/Home.tsx b/packages/ui/src/icons/Home.tsx
index e54168b4a..1f48896f1 100644
--- a/packages/ui/src/icons/Home.tsx
+++ b/packages/ui/src/icons/Home.tsx
@@ -15,5 +15,3 @@ export function Home() {
     </svg>
   );
 }
-
-export default Home;
diff --git a/packages/ui/src/icons/HorizontalArrows.tsx b/packages/ui/src/icons/HorizontalArrows.tsx
index 3759687f3..2a3f472cc 100644
--- a/packages/ui/src/icons/HorizontalArrows.tsx
+++ b/packages/ui/src/icons/HorizontalArrows.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const HorizontalArrows = () => {
+export function HorizontalArrows() {
   return (
     <svg
       width="100%"
@@ -24,6 +24,4 @@ const HorizontalArrows = () => {
       />
     </svg>
   );
-};
-
-export default HorizontalArrows;
+}
diff --git a/packages/ui/src/icons/Info.tsx b/packages/ui/src/icons/Info.tsx
index 177be890e..c1cc477ca 100644
--- a/packages/ui/src/icons/Info.tsx
+++ b/packages/ui/src/icons/Info.tsx
@@ -1,34 +1,34 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Info = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M15.351 8.00008C15.351 12.0502 12.0677 15.3334 8.01766 15.3334C3.96757 15.3334 0.684326 12.0502 0.684326 8.00008C0.684326 3.94999 3.96757 0.666748 8.01766 0.666748C12.0677 0.666748 15.351 3.94999 15.351 8.00008Z"
-      stroke="currentColor"
-      strokeWidth="1.33333"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M8.01758 11.1429V8.00008M8.01758 4.85732V4.83276"
-      stroke="currentColor"
-      strokeWidth="1.66667"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M8.01758 4.85732V4.83276"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Info;
+export function Info() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.351 8.00008C15.351 12.0502 12.0677 15.3334 8.01766 15.3334C3.96757 15.3334 0.684326 12.0502 0.684326 8.00008C0.684326 3.94999 3.96757 0.666748 8.01766 0.666748C12.0677 0.666748 15.351 3.94999 15.351 8.00008Z"
+        stroke="currentColor"
+        strokeWidth="1.33333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.01758 11.1429V8.00008M8.01758 4.85732V4.83276"
+        stroke="currentColor"
+        strokeWidth="1.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.01758 4.85732V4.83276"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/InvoiceNew.tsx b/packages/ui/src/icons/InvoiceNew.tsx
deleted file mode 100644
index 524110dcb..000000000
--- a/packages/ui/src/icons/InvoiceNew.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-const InvoiceNew = () => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M6.88851 2.9033L1 8.79181V11H3.20819L9.0967 5.11149M6.88851 2.9033L8.57623 1.21559C8.86367 0.928136 9.32974 0.928136 9.61717 1.21559L10.7844 2.38283C11.0719 2.67028 11.0719 3.13633 10.7844 3.42378L9.0967 5.11149M6.88851 2.9033L9.0967 5.11149"
-      stroke="black"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default InvoiceNew;
diff --git a/packages/ui/src/icons/JavaScriptTwoTone.tsx b/packages/ui/src/icons/JavaScriptTwoTone.tsx
index 5b60516dc..c2617cd3e 100644
--- a/packages/ui/src/icons/JavaScriptTwoTone.tsx
+++ b/packages/ui/src/icons/JavaScriptTwoTone.tsx
@@ -1,16 +1,14 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
 import { useTheme } from "@emotion/react";
-import { nanoid } from "nanoid";
-import { useRef } from "react";
+import { useId } from "react";
 
-function JavaScriptTwoTone() {
+export function JavaScriptTwoTone() {
   /**
    * unique id is required per instance to prevent interferring ids breaking
    * icon styles
    */
-  const idRef = useRef(nanoid());
-  const id = idRef.current;
+  const id = useId();
   const theme = useTheme();
 
   return (
@@ -54,5 +52,3 @@ function JavaScriptTwoTone() {
     </svg>
   );
 }
-
-export default JavaScriptTwoTone;
diff --git a/packages/ui/src/icons/JavaTwoTone.tsx b/packages/ui/src/icons/JavaTwoTone.tsx
index 5c3b2daa3..108fcb399 100644
--- a/packages/ui/src/icons/JavaTwoTone.tsx
+++ b/packages/ui/src/icons/JavaTwoTone.tsx
@@ -2,7 +2,7 @@
 
 import { useTheme } from "@emotion/react";
 
-function JavaTwoTone() {
+export function JavaTwoTone() {
   const theme = useTheme();
   return (
     <svg width="100%" viewBox="0 0 25 24" fill="none">
@@ -18,5 +18,3 @@ function JavaTwoTone() {
     </svg>
   );
 }
-
-export default JavaTwoTone;
diff --git a/packages/ui/src/icons/KotlinTwoTone.tsx b/packages/ui/src/icons/KotlinTwoTone.tsx
index 4c1bd2fc3..8a56b1846 100644
--- a/packages/ui/src/icons/KotlinTwoTone.tsx
+++ b/packages/ui/src/icons/KotlinTwoTone.tsx
@@ -1,16 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
 import { useTheme } from "@emotion/react";
-import { nanoid } from "nanoid";
-import { useRef } from "react";
+import { useId } from "react";
 
-function KotlinTwoTone() {
-  /**
-   * unique id is required per instance to prevent interferring ids breaking
-   * icon styles
-   */
-  const idRef = useRef(nanoid());
-  const id = idRef.current;
+export function KotlinTwoTone() {
+  /** unique id is required per instance to prevent interferring ids breaking
+   * icon styles */
+  const id = useId();
   const theme = useTheme();
 
   return (
@@ -39,5 +35,3 @@ function KotlinTwoTone() {
     </svg>
   );
 }
-
-export default KotlinTwoTone;
diff --git a/packages/ui/src/icons/LeftArrow.tsx b/packages/ui/src/icons/LeftArrow.tsx
index 45e2d605c..374b18e74 100644
--- a/packages/ui/src/icons/LeftArrow.tsx
+++ b/packages/ui/src/icons/LeftArrow.tsx
@@ -1,20 +1,20 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const LeftArrow = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 18 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M16.4744 8.00005L1.52344 8.00005M1.52344 8.00005L7.52344 14.2858M1.52344 8.00005L7.52344 1.71434"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default LeftArrow;
+export function LeftArrow() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 18 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.4744 8.00005L1.52344 8.00005M1.52344 8.00005L7.52344 14.2858M1.52344 8.00005L7.52344 1.71434"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/LightningOnRoundedSquare.tsx b/packages/ui/src/icons/LightningOnRoundedSquare.tsx
index 6459b832f..cae97a0e5 100644
--- a/packages/ui/src/icons/LightningOnRoundedSquare.tsx
+++ b/packages/ui/src/icons/LightningOnRoundedSquare.tsx
@@ -1,18 +1,18 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const LightningOnRoundedSquare = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect width="16" height="16" rx="2" fill="#FFF14E" />
-    <path
-      d="M6.73918 10.2677L5.48342 13L12.0306 7.24169H8.59885L8.9703 6.43284L10.5472 3L4 8.75831H7.43176L7.06031 9.56716L6.73918 10.2677Z"
-      fill="black"
-    />
-  </svg>
-);
-
-export default LightningOnRoundedSquare;
+export function LightningOnRoundedSquare() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="16" height="16" rx="2" fill="#FFF14E" />
+      <path
+        d="M6.73918 10.2677L5.48342 13L12.0306 7.24169H8.59885L8.9703 6.43284L10.5472 3L4 8.75831H7.43176L7.06031 9.56716L6.73918 10.2677Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/LinkIcon.tsx b/packages/ui/src/icons/LinkIcon.tsx
index f76572e71..70e871e51 100644
--- a/packages/ui/src/icons/LinkIcon.tsx
+++ b/packages/ui/src/icons/LinkIcon.tsx
@@ -1,31 +1,31 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const LinkIcon = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 11 11"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_1880_31045)">
-      <path
-        d="M10.5 0.5L5.5 5.5M10.5 0.5V3.5M10.5 0.5H7.5"
-        stroke="currentColor"
-        strokeLinecap="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5 1H2C0.895431 1 0 1.89543 0 3V9C0 10.1046 0.89543 11 2 11H8C9.10457 11 10 10.1046 10 9V6H9V9C9 9.55229 8.55229 10 8 10H2C1.44772 10 1 9.55229 1 9V3C1 2.44772 1.44772 2 2 2H5V1Z"
-        fill="currentColor"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_1880_31045">
-        <rect width="11" height="11" fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
-);
-
-export default LinkIcon;
+export function LinkIcon() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 11 11"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_1880_31045)">
+        <path
+          d="M10.5 0.5L5.5 5.5M10.5 0.5V3.5M10.5 0.5H7.5"
+          stroke="currentColor"
+          strokeLinecap="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5 1H2C0.895431 1 0 1.89543 0 3V9C0 10.1046 0.89543 11 2 11H8C9.10457 11 10 10.1046 10 9V6H9V9C9 9.55229 8.55229 10 8 10H2C1.44772 10 1 9.55229 1 9V3C1 2.44772 1.44772 2 2 2H5V1Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1880_31045">
+          <rect width="11" height="11" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/LoadingSpinner.tsx b/packages/ui/src/icons/LoadingSpinner.tsx
index b7a910e34..881f80406 100644
--- a/packages/ui/src/icons/LoadingSpinner.tsx
+++ b/packages/ui/src/icons/LoadingSpinner.tsx
@@ -1,14 +1,13 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-import { nanoid } from "nanoid";
-import { useRef } from "react";
 
-const LoadingSpinner = () => {
+import { useId } from "react";
+
+export function LoadingSpinner() {
   /**
    * unique id is required per instance to prevent interferring ids breaking
    * icon styles
    */
-  const idRef = useRef(nanoid());
-  const id = idRef.current;
+  const id = useId();
 
   return (
     <svg
@@ -138,6 +137,4 @@ const LoadingSpinner = () => {
       </defs>
     </svg>
   );
-};
-
-export default LoadingSpinner;
+}
diff --git a/packages/ui/src/icons/Lock.tsx b/packages/ui/src/icons/Lock.tsx
index e7c9834e1..d4c6c986e 100644
--- a/packages/ui/src/icons/Lock.tsx
+++ b/packages/ui/src/icons/Lock.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function Lock() {
+export function Lock() {
   return (
     <svg
       width="100%"
@@ -21,5 +21,3 @@ function Lock() {
     </svg>
   );
 }
-
-export default Lock;
diff --git a/packages/ui/src/icons/Logo.tsx b/packages/ui/src/icons/Logo.tsx
index dd223f350..371a90242 100644
--- a/packages/ui/src/icons/Logo.tsx
+++ b/packages/ui/src/icons/Logo.tsx
@@ -1,8 +1,6 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 import LogoSvg from "../static/images/Logo.svg";
 
-function Logo() {
+export function Logo() {
   return <LogoSvg />;
 }
-
-export default Logo;
diff --git a/packages/ui/src/icons/LogoBolt.tsx b/packages/ui/src/icons/LogoBolt.tsx
index a36bf6d11..58456d47e 100644
--- a/packages/ui/src/icons/LogoBolt.tsx
+++ b/packages/ui/src/icons/LogoBolt.tsx
@@ -1,68 +1,68 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Logo = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 20 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_1383_30073)">
-      <path
-        d="M31.6927 15.3862H27.765V8.21623H26.7521V16.3799H32.6996V12.7227H31.6927V15.3862Z"
-        fill="currentColor"
-      />
-      <path
-        d="M35.856 9.20419H37.9936V15.3862H35.856V16.3799H41.1146V15.3862H39.0064V9.20419H41.1146V8.21623H35.856V9.20419Z"
-        fill="currentColor"
-      />
-      <path
-        d="M49.6235 15.3862H47.4506C46.3671 15.3862 45.9844 15.2129 45.8489 15.1147C45.6428 14.9587 45.5427 14.6525 45.5427 14.2076V10.4175C45.5427 9.9611 45.6369 9.63178 45.8254 9.47001C45.9373 9.37179 46.267 9.20424 47.1798 9.20424H50.0004V8.2105H47.1798C46.161 8.2105 45.5015 8.37805 45.1129 8.73048C44.7301 9.08291 44.5358 9.64911 44.5358 10.4118V14.2018C44.5358 14.56 44.577 14.872 44.6594 15.132C44.7537 15.4382 44.9303 15.6924 45.1894 15.8889C45.425 16.068 45.7429 16.2009 46.1316 16.276C46.479 16.3453 46.9266 16.38 47.4565 16.38H50.6364V12.8037H49.6235V15.3862Z"
-        fill="currentColor"
-      />
-      <path
-        d="M59.8698 11.7983H55.4474V8.21623H54.4346V16.3799H55.4474V12.7921H59.8698V16.3799H60.8826V8.21623H59.8698V11.7983Z"
-        fill="currentColor"
-      />
-      <path
-        d="M64.0919 9.20419H66.9184V16.3799H67.9312V9.20419H70.7578V8.21623H64.0919V9.20419Z"
-        fill="currentColor"
-      />
-      <path
-        d="M77.9949 12.0525L75.0742 11.469C74.9505 11.4459 74.8622 11.4112 74.7974 11.3419C74.7974 11.3419 74.7326 11.2668 74.7326 10.9837V9.87439C74.7326 9.67795 74.7974 9.53352 74.9387 9.40641C75.0859 9.27353 75.2861 9.20997 75.5688 9.20997H79.0666V8.21623H75.5688C75.0329 8.21623 74.5913 8.37223 74.2556 8.67266C73.9023 8.98465 73.7257 9.38908 73.7257 9.87439V10.9837C73.7257 11.4806 73.8434 11.833 74.0908 12.0583C74.3027 12.2547 74.5736 12.3819 74.8916 12.4454L77.7947 13.0289C77.9655 13.0636 78.095 13.1272 78.1833 13.2196C78.1951 13.2312 78.2893 13.3467 78.2893 13.7974V14.5831C78.2893 14.8258 78.2128 15.0049 78.0479 15.1551C77.8771 15.3111 77.6416 15.3862 77.3295 15.3862H73.4607V16.3799H77.3295C77.9125 16.3799 78.3894 16.2124 78.7487 15.8773C79.1137 15.5364 79.2963 15.1031 79.2963 14.5831V13.7974C79.2963 13.208 79.1667 12.7921 78.9018 12.5263C78.6603 12.2836 78.3541 12.1276 77.9949 12.0525Z"
-        fill="currentColor"
-      />
-      <path
-        d="M88.4001 8.88643C88.2058 8.67266 87.9349 8.49933 87.5933 8.38378C87.2753 8.27401 86.869 8.21623 86.3921 8.21623H82.9767V16.3799H83.9895V13.7165H86.3921C86.869 13.7165 87.2754 13.6645 87.5875 13.5605C87.929 13.4449 88.1999 13.2832 88.4001 13.0694C88.5944 12.8614 88.7298 12.6072 88.8064 12.3125C88.8712 12.0583 88.9006 11.781 88.9006 11.4863V10.4868C88.9006 10.1922 88.8712 9.91484 88.8064 9.65484C88.7357 9.36019 88.6003 9.10598 88.406 8.88643H88.4001ZM83.9836 9.20419H86.3862C86.7395 9.20419 87.0221 9.23886 87.2282 9.30819C87.4108 9.37174 87.5462 9.44685 87.6287 9.54507C87.717 9.64329 87.7818 9.76462 87.8171 9.90328C87.8583 10.0766 87.8819 10.273 87.8819 10.481V11.4806C87.8819 11.6885 87.8583 11.8792 87.8171 12.0468C87.7818 12.1854 87.7229 12.2894 87.6346 12.3876C87.5462 12.4801 87.4167 12.5552 87.2341 12.613C87.028 12.6823 86.7395 12.7112 86.3862 12.7112H83.9836V9.19842V9.20419Z"
-        fill="currentColor"
-      />
-      <path
-        d="M98.2224 11.6019L97.2684 9.38908C97.1448 9.1002 97.0093 8.85176 96.868 8.65533C96.7208 8.45311 96.4322 8.21623 95.8728 8.21623H94.5184C93.9472 8.21623 93.6528 8.45311 93.5056 8.64955C93.3525 8.85176 93.2229 9.09442 93.1052 9.3833L92.2219 11.6134C92.1394 11.833 92.0747 12.0583 92.0334 12.2952C91.9863 12.5321 91.9628 12.7978 91.9628 13.0752V16.3857H92.9756V14.0573H97.4804V16.3857H98.4933V13.0752C98.4933 12.7978 98.4697 12.5378 98.4226 12.2952C98.3755 12.0583 98.3107 11.8272 98.2283 11.6077L98.2224 11.6019ZM94.3006 9.25619C94.3006 9.25619 94.383 9.20419 94.5184 9.20419H95.8728C95.9317 9.20419 96.0318 9.20997 96.0672 9.25619C96.1614 9.38908 96.2556 9.5624 96.3439 9.7704L97.2861 11.9485C97.345 12.1103 97.3921 12.2894 97.4274 12.4743C97.4627 12.6534 97.4804 12.8498 97.4804 13.0578H92.9756C92.9756 12.8441 92.9933 12.6476 93.0286 12.4743C93.0639 12.2894 93.1111 12.1161 93.1641 11.9659L94.0474 9.74729C94.1239 9.55085 94.2122 9.38908 94.3064 9.25619H94.3006Z"
-        fill="currentColor"
-      />
-      <path
-        d="M107.621 12.3761C107.621 12.3761 107.644 12.3241 107.656 12.301C107.785 11.9832 107.856 11.5846 107.856 11.1166V10.1806C107.856 9.63756 107.691 9.16957 107.361 8.79981C107.02 8.40694 106.508 8.2105 105.842 8.2105H102.262V16.3742H103.275V13.237H106.743C107.149 13.237 107.444 13.3121 107.609 13.4565C107.762 13.5952 107.838 13.8147 107.838 14.1325V16.3742H108.851V14.1325C108.851 13.5432 108.663 13.0752 108.298 12.7401C108.115 12.5783 107.891 12.457 107.626 12.3761H107.621ZM105.842 9.20424C106.195 9.20424 106.449 9.28513 106.596 9.45268C106.761 9.63756 106.837 9.86866 106.837 10.1864V11.1339C106.837 11.5384 106.767 11.8446 106.625 12.041C106.525 12.1855 106.243 12.2664 105.836 12.2664H103.263V9.21002H105.836L105.842 9.20424Z"
-        fill="currentColor"
-      />
-      <path
-        d="M118.326 12.2143C117.99 11.9601 117.513 11.8272 116.901 11.8157L118.485 8.21623H117.384L115.8 11.8157H113.527V8.21623H112.514V16.3799H113.527V12.8094H116.801C117.207 12.8094 117.513 12.8729 117.69 13.0001C117.743 13.0347 117.896 13.1445 117.896 13.572V16.3799H118.909V13.572C118.909 12.9654 118.715 12.509 118.326 12.2143Z"
-        fill="currentColor"
-      />
-      <path
-        d="M10.0695 12.7915H2.78532L13.0727 3.95763L11.0588 8.23881H12.213L16.0877 0L0 13.8199H9.58667L10.0695 12.7915Z"
-        fill="currentColor"
-      />
-      <path
-        d="M10.1461 10.1801L9.66324 11.2085H16.9475L6.66004 20.0424L8.67395 15.7612H7.51978L3.64507 24L19.7328 10.1801H10.1461Z"
-        fill="currentColor"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_1383_30073">
-        <rect width="20" height="24" fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
-);
-
-export default Logo;
+export function LogoBolt() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 20 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_1383_30073)">
+        <path
+          d="M31.6927 15.3862H27.765V8.21623H26.7521V16.3799H32.6996V12.7227H31.6927V15.3862Z"
+          fill="currentColor"
+        />
+        <path
+          d="M35.856 9.20419H37.9936V15.3862H35.856V16.3799H41.1146V15.3862H39.0064V9.20419H41.1146V8.21623H35.856V9.20419Z"
+          fill="currentColor"
+        />
+        <path
+          d="M49.6235 15.3862H47.4506C46.3671 15.3862 45.9844 15.2129 45.8489 15.1147C45.6428 14.9587 45.5427 14.6525 45.5427 14.2076V10.4175C45.5427 9.9611 45.6369 9.63178 45.8254 9.47001C45.9373 9.37179 46.267 9.20424 47.1798 9.20424H50.0004V8.2105H47.1798C46.161 8.2105 45.5015 8.37805 45.1129 8.73048C44.7301 9.08291 44.5358 9.64911 44.5358 10.4118V14.2018C44.5358 14.56 44.577 14.872 44.6594 15.132C44.7537 15.4382 44.9303 15.6924 45.1894 15.8889C45.425 16.068 45.7429 16.2009 46.1316 16.276C46.479 16.3453 46.9266 16.38 47.4565 16.38H50.6364V12.8037H49.6235V15.3862Z"
+          fill="currentColor"
+        />
+        <path
+          d="M59.8698 11.7983H55.4474V8.21623H54.4346V16.3799H55.4474V12.7921H59.8698V16.3799H60.8826V8.21623H59.8698V11.7983Z"
+          fill="currentColor"
+        />
+        <path
+          d="M64.0919 9.20419H66.9184V16.3799H67.9312V9.20419H70.7578V8.21623H64.0919V9.20419Z"
+          fill="currentColor"
+        />
+        <path
+          d="M77.9949 12.0525L75.0742 11.469C74.9505 11.4459 74.8622 11.4112 74.7974 11.3419C74.7974 11.3419 74.7326 11.2668 74.7326 10.9837V9.87439C74.7326 9.67795 74.7974 9.53352 74.9387 9.40641C75.0859 9.27353 75.2861 9.20997 75.5688 9.20997H79.0666V8.21623H75.5688C75.0329 8.21623 74.5913 8.37223 74.2556 8.67266C73.9023 8.98465 73.7257 9.38908 73.7257 9.87439V10.9837C73.7257 11.4806 73.8434 11.833 74.0908 12.0583C74.3027 12.2547 74.5736 12.3819 74.8916 12.4454L77.7947 13.0289C77.9655 13.0636 78.095 13.1272 78.1833 13.2196C78.1951 13.2312 78.2893 13.3467 78.2893 13.7974V14.5831C78.2893 14.8258 78.2128 15.0049 78.0479 15.1551C77.8771 15.3111 77.6416 15.3862 77.3295 15.3862H73.4607V16.3799H77.3295C77.9125 16.3799 78.3894 16.2124 78.7487 15.8773C79.1137 15.5364 79.2963 15.1031 79.2963 14.5831V13.7974C79.2963 13.208 79.1667 12.7921 78.9018 12.5263C78.6603 12.2836 78.3541 12.1276 77.9949 12.0525Z"
+          fill="currentColor"
+        />
+        <path
+          d="M88.4001 8.88643C88.2058 8.67266 87.9349 8.49933 87.5933 8.38378C87.2753 8.27401 86.869 8.21623 86.3921 8.21623H82.9767V16.3799H83.9895V13.7165H86.3921C86.869 13.7165 87.2754 13.6645 87.5875 13.5605C87.929 13.4449 88.1999 13.2832 88.4001 13.0694C88.5944 12.8614 88.7298 12.6072 88.8064 12.3125C88.8712 12.0583 88.9006 11.781 88.9006 11.4863V10.4868C88.9006 10.1922 88.8712 9.91484 88.8064 9.65484C88.7357 9.36019 88.6003 9.10598 88.406 8.88643H88.4001ZM83.9836 9.20419H86.3862C86.7395 9.20419 87.0221 9.23886 87.2282 9.30819C87.4108 9.37174 87.5462 9.44685 87.6287 9.54507C87.717 9.64329 87.7818 9.76462 87.8171 9.90328C87.8583 10.0766 87.8819 10.273 87.8819 10.481V11.4806C87.8819 11.6885 87.8583 11.8792 87.8171 12.0468C87.7818 12.1854 87.7229 12.2894 87.6346 12.3876C87.5462 12.4801 87.4167 12.5552 87.2341 12.613C87.028 12.6823 86.7395 12.7112 86.3862 12.7112H83.9836V9.19842V9.20419Z"
+          fill="currentColor"
+        />
+        <path
+          d="M98.2224 11.6019L97.2684 9.38908C97.1448 9.1002 97.0093 8.85176 96.868 8.65533C96.7208 8.45311 96.4322 8.21623 95.8728 8.21623H94.5184C93.9472 8.21623 93.6528 8.45311 93.5056 8.64955C93.3525 8.85176 93.2229 9.09442 93.1052 9.3833L92.2219 11.6134C92.1394 11.833 92.0747 12.0583 92.0334 12.2952C91.9863 12.5321 91.9628 12.7978 91.9628 13.0752V16.3857H92.9756V14.0573H97.4804V16.3857H98.4933V13.0752C98.4933 12.7978 98.4697 12.5378 98.4226 12.2952C98.3755 12.0583 98.3107 11.8272 98.2283 11.6077L98.2224 11.6019ZM94.3006 9.25619C94.3006 9.25619 94.383 9.20419 94.5184 9.20419H95.8728C95.9317 9.20419 96.0318 9.20997 96.0672 9.25619C96.1614 9.38908 96.2556 9.5624 96.3439 9.7704L97.2861 11.9485C97.345 12.1103 97.3921 12.2894 97.4274 12.4743C97.4627 12.6534 97.4804 12.8498 97.4804 13.0578H92.9756C92.9756 12.8441 92.9933 12.6476 93.0286 12.4743C93.0639 12.2894 93.1111 12.1161 93.1641 11.9659L94.0474 9.74729C94.1239 9.55085 94.2122 9.38908 94.3064 9.25619H94.3006Z"
+          fill="currentColor"
+        />
+        <path
+          d="M107.621 12.3761C107.621 12.3761 107.644 12.3241 107.656 12.301C107.785 11.9832 107.856 11.5846 107.856 11.1166V10.1806C107.856 9.63756 107.691 9.16957 107.361 8.79981C107.02 8.40694 106.508 8.2105 105.842 8.2105H102.262V16.3742H103.275V13.237H106.743C107.149 13.237 107.444 13.3121 107.609 13.4565C107.762 13.5952 107.838 13.8147 107.838 14.1325V16.3742H108.851V14.1325C108.851 13.5432 108.663 13.0752 108.298 12.7401C108.115 12.5783 107.891 12.457 107.626 12.3761H107.621ZM105.842 9.20424C106.195 9.20424 106.449 9.28513 106.596 9.45268C106.761 9.63756 106.837 9.86866 106.837 10.1864V11.1339C106.837 11.5384 106.767 11.8446 106.625 12.041C106.525 12.1855 106.243 12.2664 105.836 12.2664H103.263V9.21002H105.836L105.842 9.20424Z"
+          fill="currentColor"
+        />
+        <path
+          d="M118.326 12.2143C117.99 11.9601 117.513 11.8272 116.901 11.8157L118.485 8.21623H117.384L115.8 11.8157H113.527V8.21623H112.514V16.3799H113.527V12.8094H116.801C117.207 12.8094 117.513 12.8729 117.69 13.0001C117.743 13.0347 117.896 13.1445 117.896 13.572V16.3799H118.909V13.572C118.909 12.9654 118.715 12.509 118.326 12.2143Z"
+          fill="currentColor"
+        />
+        <path
+          d="M10.0695 12.7915H2.78532L13.0727 3.95763L11.0588 8.23881H12.213L16.0877 0L0 13.8199H9.58667L10.0695 12.7915Z"
+          fill="currentColor"
+        />
+        <path
+          d="M10.1461 10.1801L9.66324 11.2085H16.9475L6.66004 20.0424L8.67395 15.7612H7.51978L3.64507 24L19.7328 10.1801H10.1461Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1383_30073">
+          <rect width="20" height="24" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/LogoOnCircle.tsx b/packages/ui/src/icons/LogoOnCircle.tsx
index 32c27ca98..01ecb52f7 100644
--- a/packages/ui/src/icons/LogoOnCircle.tsx
+++ b/packages/ui/src/icons/LogoOnCircle.tsx
@@ -1,29 +1,29 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const LogoOnCircle = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 30 30"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_469_6261)">
-      <circle cx="15" cy="15" r="15" fill="#FFF14E" />
-      <path
-        d="M14.901 15.6596H8.94529L17.3565 8.29803L15.7099 11.8657H16.6535L19.8216 5L6.66797 16.5166H14.5062L14.901 15.6596Z"
-        fill="black"
-      />
-      <path
-        d="M14.9638 13.4834L14.569 14.3404H20.5247L12.1135 21.702L13.7601 18.1343H12.8165L12.1713 19.5354L9.64844 25L22.802 13.4834H14.9638Z"
-        fill="black"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_469_6261">
-        <rect width="30" height="30" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
-
-export default LogoOnCircle;
+export function LogoOnCircle() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 30 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_469_6261)">
+        <circle cx="15" cy="15" r="15" fill="#FFF14E" />
+        <path
+          d="M14.901 15.6596H8.94529L17.3565 8.29803L15.7099 11.8657H16.6535L19.8216 5L6.66797 16.5166H14.5062L14.901 15.6596Z"
+          fill="black"
+        />
+        <path
+          d="M14.9638 13.4834L14.569 14.3404H20.5247L12.1135 21.702L13.7601 18.1343H12.8165L12.1713 19.5354L9.64844 25L22.802 13.4834H14.9638Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_469_6261">
+          <rect width="30" height="30" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/MagicWand.tsx b/packages/ui/src/icons/MagicWand.tsx
index 83e4ffaa5..506aa1930 100644
--- a/packages/ui/src/icons/MagicWand.tsx
+++ b/packages/ui/src/icons/MagicWand.tsx
@@ -1,38 +1,38 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const MagicWand = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 22 22"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M9 9.99954L1 17.9995L2.5 19.4995L4 20.9995L12 12.9995M9 9.99954L11.2929 7.70665C11.6834 7.31612 12.3166 7.31612 12.7071 7.70665L14.2929 9.29243C14.6834 9.68296 14.6834 10.3161 14.2929 10.7067L12 12.9995M9 9.99954L12 12.9995"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M9 2.99951C10.3668 4.36635 10.5 4.49951 10.5 4.49951M10.5 2.99951L9 4.49951"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      d="M18 8.99969C20.7337 11.7334 21 11.9997 21 11.9997M21 8.99969L18 11.9997"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      d="M17.5977 0.999512C16.5971 4.73377 16.4996 5.09759 16.4996 5.09759M19.0977 3.59759L14.9996 2.49951"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-  </svg>
-);
-
-export default MagicWand;
+export function MagicWand() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9 9.99954L1 17.9995L2.5 19.4995L4 20.9995L12 12.9995M9 9.99954L11.2929 7.70665C11.6834 7.31612 12.3166 7.31612 12.7071 7.70665L14.2929 9.29243C14.6834 9.68296 14.6834 10.3161 14.2929 10.7067L12 12.9995M9 9.99954L12 12.9995"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9 2.99951C10.3668 4.36635 10.5 4.49951 10.5 4.49951M10.5 2.99951L9 4.49951"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M18 8.99969C20.7337 11.7334 21 11.9997 21 11.9997M21 8.99969L18 11.9997"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M17.5977 0.999512C16.5971 4.73377 16.4996 5.09759 16.4996 5.09759M19.0977 3.59759L14.9996 2.49951"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Mail.tsx b/packages/ui/src/icons/Mail.tsx
deleted file mode 100644
index dfe4d0439..000000000
--- a/packages/ui/src/icons/Mail.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-const Mail = () => (
-  <svg
-    width="19"
-    height="16"
-    viewBox="0 0 19 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M2.03545 4.99385L9.51318 8.00021L16.2652 4.99385M5.17033 14.8574H13.856C15.1362 14.8574 15.7762 14.8574 16.2652 14.6082C16.6952 14.3891 17.0449 14.0394 17.2641 13.6093C17.5132 13.1204 17.5132 12.4803 17.5132 11.2002V4.80021C17.5132 3.52009 17.5132 2.88003 17.2641 2.39109C17.0449 1.961 16.6952 1.61133 16.2652 1.39219C15.7762 1.14307 15.1362 1.14307 13.856 1.14307H5.17033C3.89021 1.14307 3.25015 1.14307 2.76121 1.39219C2.33112 1.61133 1.98145 1.961 1.76231 2.39109C1.51318 2.88003 1.51318 3.52009 1.51318 4.80021V11.2002C1.51318 12.4803 1.51318 13.1204 1.76231 13.6093C1.98145 14.0394 2.33112 14.3891 2.76121 14.6082C3.25015 14.8574 3.89021 14.8574 5.17033 14.8574Z"
-      stroke="#999999"
-      strokeWidth="2"
-      strokeLinecap="square"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Mail;
diff --git a/packages/ui/src/icons/Minus.tsx b/packages/ui/src/icons/Minus.tsx
new file mode 100644
index 000000000..419f33ea5
--- /dev/null
+++ b/packages/ui/src/icons/Minus.tsx
@@ -0,0 +1,19 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function Minus() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.75 12H17.25"
+        stroke="currentColor"
+        strokeWidth="1.40621"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Monitor.tsx b/packages/ui/src/icons/Monitor.tsx
index 7f67bc092..9f6cd54ed 100644
--- a/packages/ui/src/icons/Monitor.tsx
+++ b/packages/ui/src/icons/Monitor.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function Monitor() {
+export function Monitor() {
   return (
     <svg
       width="100%"
@@ -33,5 +33,3 @@ function Monitor() {
     </svg>
   );
 }
-
-export default Monitor;
diff --git a/packages/ui/src/icons/NodeAdd.tsx b/packages/ui/src/icons/NodeAdd.tsx
index a68357fb8..7298c71d3 100644
--- a/packages/ui/src/icons/NodeAdd.tsx
+++ b/packages/ui/src/icons/NodeAdd.tsx
@@ -1,18 +1,18 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const NodeAdd = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M6 3.25V8.75M3.25 6H8.75M11.5 6C11.5 9.03757 9.03757 11.5 6 11.5C2.96243 11.5 0.5 9.03757 0.5 6C0.5 2.96243 2.96243 0.5 6 0.5C9.03757 0.5 11.5 2.96243 11.5 6Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-    />
-  </svg>
-);
-
-export default NodeAdd;
+export function NodeAdd() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 3.25V8.75M3.25 6H8.75M11.5 6C11.5 9.03757 9.03757 11.5 6 11.5C2.96243 11.5 0.5 9.03757 0.5 6C0.5 2.96243 2.96243 0.5 6 0.5C9.03757 0.5 11.5 2.96243 11.5 6Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/NotEye.tsx b/packages/ui/src/icons/NotEye.tsx
index 44424705d..6e53cffda 100644
--- a/packages/ui/src/icons/NotEye.tsx
+++ b/packages/ui/src/icons/NotEye.tsx
@@ -1,25 +1,25 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const NotEye = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M1 14L15 2"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M1.5 7.99986C1.5 7.17871 2.17312 6.0791 3.46017 5.13192C4.7117 4.21088 6.37168 3.57129 8 3.57129C9.61784 3.57129 11.2669 4.20267 12.5156 5.11417L13.6804 4.11579C13.5977 4.05032 13.5138 3.9863 13.4289 3.92381C11.9617 2.84404 9.99667 2.07129 8 2.07129C6.00332 2.07129 4.0383 2.84404 2.57108 3.92381C1.13938 4.97744 0 6.46711 0 7.99986C0 9.5326 1.13938 11.0223 2.57108 12.0759C2.89623 12.3152 3.24581 12.5394 3.61478 12.7435L4.84569 11.6884C4.34877 11.4558 3.88134 11.1778 3.46017 10.8678C2.17312 9.92062 1.5 8.82101 1.5 7.99986ZM6.48982 12.2547L5.1284 13.4217C6.04079 13.741 7.01656 13.9284 8 13.9284C9.99667 13.9284 11.9617 13.1557 13.4289 12.0759C14.8606 11.0223 16 9.5326 16 7.99986C16 6.99641 15.5117 6.01143 14.7727 5.15516L13.6346 6.13069C14.2058 6.79245 14.5 7.457 14.5 7.99986C14.5 8.82101 13.8269 9.92062 12.5398 10.8678C11.2883 11.7888 9.62832 12.4284 8 12.4284C7.49528 12.4284 6.98752 12.367 6.48982 12.2547ZM10.7583 8.59603C10.4961 9.81498 9.44641 10.7413 8.16793 10.8164L10.7583 8.59603ZM10.5527 6.79664C10.1011 5.84021 9.12785 5.17843 8 5.17843C6.44177 5.17843 5.17857 6.44163 5.17857 7.99986C5.17857 8.97302 5.67126 9.83111 6.42081 10.3383L7.6591 9.2769C7.09451 9.12657 6.67857 8.61179 6.67857 7.99986C6.67857 7.27006 7.2702 6.67843 8 6.67843C8.68203 6.67843 9.24338 7.19514 9.31395 7.85845L10.5527 6.79664Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default NotEye;
+export function NotEye() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 14L15 2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.5 7.99986C1.5 7.17871 2.17312 6.0791 3.46017 5.13192C4.7117 4.21088 6.37168 3.57129 8 3.57129C9.61784 3.57129 11.2669 4.20267 12.5156 5.11417L13.6804 4.11579C13.5977 4.05032 13.5138 3.9863 13.4289 3.92381C11.9617 2.84404 9.99667 2.07129 8 2.07129C6.00332 2.07129 4.0383 2.84404 2.57108 3.92381C1.13938 4.97744 0 6.46711 0 7.99986C0 9.5326 1.13938 11.0223 2.57108 12.0759C2.89623 12.3152 3.24581 12.5394 3.61478 12.7435L4.84569 11.6884C4.34877 11.4558 3.88134 11.1778 3.46017 10.8678C2.17312 9.92062 1.5 8.82101 1.5 7.99986ZM6.48982 12.2547L5.1284 13.4217C6.04079 13.741 7.01656 13.9284 8 13.9284C9.99667 13.9284 11.9617 13.1557 13.4289 12.0759C14.8606 11.0223 16 9.5326 16 7.99986C16 6.99641 15.5117 6.01143 14.7727 5.15516L13.6346 6.13069C14.2058 6.79245 14.5 7.457 14.5 7.99986C14.5 8.82101 13.8269 9.92062 12.5398 10.8678C11.2883 11.7888 9.62832 12.4284 8 12.4284C7.49528 12.4284 6.98752 12.367 6.48982 12.2547ZM10.7583 8.59603C10.4961 9.81498 9.44641 10.7413 8.16793 10.8164L10.7583 8.59603ZM10.5527 6.79664C10.1011 5.84021 9.12785 5.17843 8 5.17843C6.44177 5.17843 5.17857 6.44163 5.17857 7.99986C5.17857 8.97302 5.67126 9.83111 6.42081 10.3383L7.6591 9.2769C7.09451 9.12657 6.67857 8.61179 6.67857 7.99986C6.67857 7.27006 7.2702 6.67843 8 6.67843C8.68203 6.67843 9.24338 7.19514 9.31395 7.85845L10.5527 6.79664Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/NoteLine.tsx b/packages/ui/src/icons/NoteLine.tsx
deleted file mode 100644
index e78739772..000000000
--- a/packages/ui/src/icons/NoteLine.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-const NoteLine = () => (
-  <svg
-    width="44"
-    height="5"
-    viewBox="0 0 44 5"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M1.15381 2.88535C17.2701 -4.91493 28.1028 10.8131 42.8867 1.11559"
-      stroke="#999999"
-    />
-  </svg>
-);
-
-export default NoteLine;
diff --git a/packages/ui/src/icons/PaperPlane.tsx b/packages/ui/src/icons/PaperPlane.tsx
index be1363cf9..b85fbed34 100644
--- a/packages/ui/src/icons/PaperPlane.tsx
+++ b/packages/ui/src/icons/PaperPlane.tsx
@@ -1,19 +1,19 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const PaperPlane = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5.10092 6.89819L6.93999 5.06257M11.5 0.5L0.5 4.16667L5.08333 6.91667L7.83333 11.5L11.5 0.5Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default PaperPlane;
+export function PaperPlane() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.10092 6.89819L6.93999 5.06257M11.5 0.5L0.5 4.16667L5.08333 6.91667L7.83333 11.5L11.5 0.5Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Pencil.tsx b/packages/ui/src/icons/Pencil.tsx
index dc05b3e19..7acaf7559 100644
--- a/packages/ui/src/icons/Pencil.tsx
+++ b/packages/ui/src/icons/Pencil.tsx
@@ -1,24 +1,19 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-type Props = {
-  color?: "black" | "white";
-};
-
-const Pencil = (props: Props) => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M6.88851 2.9033L1 8.79181V11H3.20819L9.0967 5.11149M6.88851 2.9033L8.57623 1.21559C8.86367 0.928136 9.32974 0.928136 9.61717 1.21559L10.7844 2.38283C11.0719 2.67028 11.0719 3.13633 10.7844 3.42378L9.0967 5.11149M6.88851 2.9033L9.0967 5.11149"
-      stroke={props.color || "black"}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Pencil;
+export function Pencil() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.88851 2.9033L1 8.79181V11H3.20819L9.0967 5.11149M6.88851 2.9033L8.57623 1.21559C8.86367 0.928136 9.32974 0.928136 9.61717 1.21559L10.7844 2.38283C11.0719 2.67028 11.0719 3.13633 10.7844 3.42378L9.0967 5.11149M6.88851 2.9033L9.0967 5.11149"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Person.tsx b/packages/ui/src/icons/Person.tsx
index 367cb3718..362795bbc 100644
--- a/packages/ui/src/icons/Person.tsx
+++ b/packages/ui/src/icons/Person.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Person = () => {
+export function Person() {
   return (
     <svg
       width="100%"
@@ -22,6 +22,4 @@ const Person = () => {
       />
     </svg>
   );
-};
-
-export default Person;
+}
diff --git a/packages/ui/src/icons/PersonCircle.tsx b/packages/ui/src/icons/PersonCircle.tsx
new file mode 100644
index 000000000..b07152b6d
--- /dev/null
+++ b/packages/ui/src/icons/PersonCircle.tsx
@@ -0,0 +1,25 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function PersonCircle() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 33 33"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.3721 0.248047C7.46702 0.248047 0.248047 7.46702 0.248047 16.3721C0.248047 21.0432 2.2344 25.2505 5.40849 28.1952C8.28546 30.8642 12.1382 32.4961 16.3721 32.4961C20.6059 32.4961 24.4588 30.8642 27.3356 28.1952C30.5098 25.2505 32.4961 21.0432 32.4961 16.3721C32.4961 7.46702 25.2771 0.248047 16.3721 0.248047ZM6.65904 26.0413C8.79248 23.1022 12.1978 21.2093 16.3721 21.2093C20.5464 21.2093 23.9517 23.1022 26.085 26.0413C23.6032 28.5344 20.1678 30.0775 16.3721 30.0775C12.5763 30.0775 9.14095 28.5344 6.65904 26.0413ZM21.2093 13.1473C21.2093 15.8189 19.0437 17.9845 16.3721 17.9845C13.7005 17.9845 11.5349 15.8189 11.5349 13.1473C11.5349 10.4758 13.7005 8.31006 16.3721 8.31006C19.0437 8.31006 21.2093 10.4758 21.2093 13.1473Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.49756 25.9241L6.39773 26.0617L6.51763 26.1821C9.03545 28.7113 12.5211 30.277 16.3721 30.277C20.223 30.277 23.7087 28.7113 26.2264 26.1821L26.3463 26.0617L26.2465 25.9241C24.076 22.9339 20.611 21.0098 16.3721 21.0098C12.1332 21.0098 8.66814 22.9339 6.49756 25.9241ZM27.1999 28.0489L27.3356 28.1952L27.1999 28.0489C24.3585 30.685 20.5536 32.2966 16.3721 32.2966C12.1905 32.2966 8.38573 30.685 5.5442 28.0489C2.4091 25.1403 0.447582 20.9854 0.447582 16.3721C0.447582 7.57722 7.57722 0.447582 16.3721 0.447582C25.1669 0.447582 32.2966 7.57722 32.2966 16.3721C32.2966 20.9854 30.3351 25.1403 27.1999 28.0489ZM16.3721 18.184C19.1539 18.184 21.4088 15.9291 21.4088 13.1473C21.4088 10.3656 19.1539 8.11053 16.3721 8.11053C13.5903 8.11053 11.3353 10.3656 11.3353 13.1473C11.3353 15.9291 13.5903 18.184 16.3721 18.184Z"
+        stroke="white"
+        strokeOpacity="0.05"
+        strokeWidth="0.39907"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Phone.tsx b/packages/ui/src/icons/Phone.tsx
deleted file mode 100644
index 1ae4f32a2..000000000
--- a/packages/ui/src/icons/Phone.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-const Phone = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10 0.75H6C4.34315 0.75 3 2.14112 3 3.85714V12.1429C3 13.8589 4.34315 15.25 6 15.25H10C11.6569 15.25 13 13.8589 13 12.1429V3.85714C13 2.14112 11.6569 0.75 10 0.75Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      d="M8 11.1064V11.0869"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-    />
-  </svg>
-);
-
-export default Phone;
diff --git a/packages/ui/src/icons/PiggyBank.tsx b/packages/ui/src/icons/PiggyBank.tsx
index 38f2ee638..9d4da2a92 100644
--- a/packages/ui/src/icons/PiggyBank.tsx
+++ b/packages/ui/src/icons/PiggyBank.tsx
@@ -27,5 +27,3 @@ export function PiggyBank() {
     </svg>
   );
 }
-
-export default PiggyBank;
diff --git a/packages/ui/src/icons/Plus.tsx b/packages/ui/src/icons/Plus.tsx
index c6d97e748..5de4f91f3 100644
--- a/packages/ui/src/icons/Plus.tsx
+++ b/packages/ui/src/icons/Plus.tsx
@@ -1,37 +1,37 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Plus = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 15 15"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M1.875 7.17828H7.1783V1.87498"
-      stroke="currentColor"
-      strokeWidth="1.40621"
-      strokeLinecap="round"
-    />
-    <path
-      d="M7.33203 1.875V7.1783H12.6353"
-      stroke="currentColor"
-      strokeWidth="1.40621"
-      strokeLinecap="round"
-    />
-    <path
-      d="M12.6367 7.33859H7.33342V12.6419"
-      stroke="currentColor"
-      strokeWidth="1.40621"
-      strokeLinecap="round"
-    />
-    <path
-      d="M7.17969 12.643L7.17969 7.33969L1.87639 7.33969"
-      stroke="currentColor"
-      strokeWidth="1.40621"
-      strokeLinecap="round"
-    />
-  </svg>
-);
-
-export default Plus;
+export function Plus() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.875 7.17828H7.1783V1.87498"
+        stroke="currentColor"
+        strokeWidth="1.40621"
+        strokeLinecap="round"
+      />
+      <path
+        d="M7.33203 1.875V7.1783H12.6353"
+        stroke="currentColor"
+        strokeWidth="1.40621"
+        strokeLinecap="round"
+      />
+      <path
+        d="M12.6367 7.33859H7.33342V12.6419"
+        stroke="currentColor"
+        strokeWidth="1.40621"
+        strokeLinecap="round"
+      />
+      <path
+        d="M7.17969 12.643L7.17969 7.33969L1.87639 7.33969"
+        stroke="currentColor"
+        strokeWidth="1.40621"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/PythonTwoTone.tsx b/packages/ui/src/icons/PythonTwoTone.tsx
index 60f7ccc7e..e79de3562 100644
--- a/packages/ui/src/icons/PythonTwoTone.tsx
+++ b/packages/ui/src/icons/PythonTwoTone.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function PythonTwoTone() {
+export function PythonTwoTone() {
   return (
     <svg
       width="100%"
@@ -19,5 +19,3 @@ function PythonTwoTone() {
     </svg>
   );
 }
-
-export default PythonTwoTone;
diff --git a/packages/ui/src/icons/QRCodeIcon.tsx b/packages/ui/src/icons/QRCodeIcon.tsx
index 91df8638d..4111a5b40 100644
--- a/packages/ui/src/icons/QRCodeIcon.tsx
+++ b/packages/ui/src/icons/QRCodeIcon.tsx
@@ -1,14 +1,13 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-import { nanoid } from "nanoid";
-import { useRef } from "react";
 
-function QRCodeIcon() {
+import { useId } from "react";
+
+export function QRCodeIcon() {
   /**
    * unique id is required per instance to prevent interferring ids breaking
    * icon styles
    */
-  const idRef = useRef(nanoid());
-  const id = idRef.current;
+  const id = useId();
 
   return (
     <svg
@@ -72,5 +71,3 @@ function QRCodeIcon() {
     </svg>
   );
 }
-
-export default QRCodeIcon;
diff --git a/packages/ui/src/icons/QuestionCircle.tsx b/packages/ui/src/icons/QuestionCircle.tsx
new file mode 100644
index 000000000..93508adb0
--- /dev/null
+++ b/packages/ui/src/icons/QuestionCircle.tsx
@@ -0,0 +1,20 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function QuestionCircle() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.75 7.25C8.5 5 12.25 5.19156 12.25 7.54132C12.25 9.2008 10 9.4614 10 11.25M10 14V13.99M19.25 10C19.25 15.1086 15.1086 19.25 10 19.25C4.89137 19.25 0.75 15.1086 0.75 10C0.75 4.89137 4.89137 0.75 10 0.75C15.1086 0.75 19.25 4.89137 19.25 10ZM10.25 14C10.25 14.1381 10.1381 14.25 10 14.25C9.8619 14.25 9.75 14.1381 9.75 14C9.75 13.8619 9.8619 13.75 10 13.75C10.1381 13.75 10.25 13.8619 10.25 14Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/QuestionCircleStrong.tsx b/packages/ui/src/icons/QuestionCircleStrong.tsx
new file mode 100644
index 000000000..8574bb81f
--- /dev/null
+++ b/packages/ui/src/icons/QuestionCircleStrong.tsx
@@ -0,0 +1,20 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function QuestionCircleStrong() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.50065 5.16634C6.00065 3.66634 8.50065 3.79405 8.50065 5.36055C8.50065 6.46687 7.00065 6.64061 7.00065 7.83301M7.00065 9.66634V9.65967M13.1673 6.99967C13.1673 10.4054 10.4064 13.1663 7.00065 13.1663C3.5949 13.1663 0.833984 10.4054 0.833984 6.99967C0.833984 3.59392 3.5949 0.833008 7.00065 0.833008C10.4064 0.833008 13.1673 3.59392 13.1673 6.99967ZM7.16732 9.66634C7.16732 9.75841 7.09272 9.83301 7.00065 9.83301C6.90858 9.83301 6.83398 9.75841 6.83398 9.66634C6.83398 9.57427 6.90858 9.49967 7.00065 9.49967C7.09272 9.49967 7.16732 9.57427 7.16732 9.66634Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/ReactTwoTone.tsx b/packages/ui/src/icons/ReactTwoTone.tsx
index 99acf1bb9..1c60a128b 100644
--- a/packages/ui/src/icons/ReactTwoTone.tsx
+++ b/packages/ui/src/icons/ReactTwoTone.tsx
@@ -1,16 +1,14 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
 import { useTheme } from "@emotion/react";
-import { nanoid } from "nanoid";
-import { useRef } from "react";
+import { useId } from "react";
 
-function ReactTwoTone() {
+export function ReactTwoTone() {
   /**
    * unique id is required per instance to prevent interferring ids breaking
    * icon styles
    */
-  const idRef = useRef(nanoid());
-  const id = idRef.current;
+  const id = useId();
   const theme = useTheme();
 
   return (
@@ -49,5 +47,3 @@ function ReactTwoTone() {
     </svg>
   );
 }
-
-export default ReactTwoTone;
diff --git a/packages/ui/src/icons/Receive.tsx b/packages/ui/src/icons/Receive.tsx
deleted file mode 100644
index f69136808..000000000
--- a/packages/ui/src/icons/Receive.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-type Props = Record<string, never>;
-
-const Receive = (props: Props) => (
-  <svg
-    width="17"
-    height="16"
-    viewBox="0 0 17 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M1 10.5212L3.88111 13.4023M3.88111 13.4023L6.76222 10.5212M3.88111 13.4023L3.88111 1.8779M9.73778 10.5212L12.6189 13.4023M12.6189 13.4023L15.5 10.5212M12.6189 13.4023L12.6189 1.8779"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Receive;
diff --git a/packages/ui/src/icons/Recycling.tsx b/packages/ui/src/icons/Recycling.tsx
index 0fc806c8f..76a942008 100644
--- a/packages/ui/src/icons/Recycling.tsx
+++ b/packages/ui/src/icons/Recycling.tsx
@@ -1,20 +1,20 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Recycling = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12 9.9987V4.66536C12 3.92898 11.4031 3.33203 10.6667 3.33203H7M12 9.9987L10 7.9987M12 9.9987L14 7.9987M4 5.9987V11.332C4 12.0684 4.59695 12.6654 5.33333 12.6654H9M4 5.9987L6 7.9987M4 5.9987L2 7.9987"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Recycling;
+export function Recycling() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 9.9987V4.66536C12 3.92898 11.4031 3.33203 10.6667 3.33203H7M12 9.9987L10 7.9987M12 9.9987L14 7.9987M4 5.9987V11.332C4 12.0684 4.59695 12.6654 5.33333 12.6654H9M4 5.9987L6 7.9987M4 5.9987L2 7.9987"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Remove.tsx b/packages/ui/src/icons/Remove.tsx
new file mode 100644
index 000000000..90dfedba9
--- /dev/null
+++ b/packages/ui/src/icons/Remove.tsx
@@ -0,0 +1,19 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function Remove() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.0203 5.72973L6.47973 10.2703M11.0203 10.2703L6.47973 5.72973M15.75 8C15.75 11.866 12.616 15 8.75 15C4.88401 15 1.75 11.866 1.75 8C1.75 4.13401 4.88401 1 8.75 1C12.616 1 15.75 4.13401 15.75 8Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Restart.tsx b/packages/ui/src/icons/Restart.tsx
index 4504410bd..12021b8b6 100644
--- a/packages/ui/src/icons/Restart.tsx
+++ b/packages/ui/src/icons/Restart.tsx
@@ -1,20 +1,19 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Restart = () => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M0.5 7.96429C1.28571 9.53571 2.85714 11.5 6 11.5C9.14286 11.5 10.7143 9.53571 11.5 7.96429M11.5 7.96429H8.75M11.5 7.96429V11.1071M11.5 4.03571C10.7143 2.46429 9.14286 0.5 6 0.5C2.85714 0.5 1.28571 2.46429 0.5 4.03571M0.5 4.03571H3.25M0.5 4.03571V0.892857"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Restart;
+export function Restart() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.5 7.96429C1.28571 9.53571 2.85714 11.5 6 11.5C9.14286 11.5 10.7143 9.53571 11.5 7.96429M11.5 7.96429H8.75M11.5 7.96429V11.1071M11.5 4.03571C10.7143 2.46429 9.14286 0.5 6 0.5C2.85714 0.5 1.28571 2.46429 0.5 4.03571M0.5 4.03571H3.25M0.5 4.03571V0.892857"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/RightArrow.tsx b/packages/ui/src/icons/RightArrow.tsx
index 7f3f07f66..5e73817e6 100644
--- a/packages/ui/src/icons/RightArrow.tsx
+++ b/packages/ui/src/icons/RightArrow.tsx
@@ -1,20 +1,20 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const RightArrow = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 12 10"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M1.01704 4.99993L10.9844 4.99993M10.9844 4.99993L6.98438 0.809448M10.9844 4.99993L6.98437 9.1904"
-      stroke="currentColor"
-      strokeWidth="1.33333"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default RightArrow;
+export function RightArrow() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 12 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.01704 4.99993L10.9844 4.99993M10.9844 4.99993L6.98438 0.809448M10.9844 4.99993L6.98437 9.1904"
+        stroke="currentColor"
+        strokeWidth="1.33333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Roadmap.tsx b/packages/ui/src/icons/Roadmap.tsx
index 38962f640..7fdbea949 100644
--- a/packages/ui/src/icons/Roadmap.tsx
+++ b/packages/ui/src/icons/Roadmap.tsx
@@ -1,18 +1,18 @@
-const Roadmap = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M4.66667 7.99996H11.3333M7.33333 11.3333H14M2 4.66663H8.66667"
-      stroke="black"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Roadmap;
+export function Roadmap() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.66667 7.99996H11.3333M7.33333 11.3333H14M2 4.66663H8.66667"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Route.tsx b/packages/ui/src/icons/Route.tsx
deleted file mode 100644
index d6f3a5f43..000000000
--- a/packages/ui/src/icons/Route.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-type Props = Record<string, never>;
-
-const Route = (props: Props) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M11.9036 0.749023L15.2501 4.09554M15.2501 4.09554L11.9036 7.44205M15.2501 4.09554H1.86401"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M4.09657 15.2505L0.750056 11.904M0.750056 11.904L4.09657 8.55746M0.750056 11.904L14.1361 11.904"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Route;
diff --git a/packages/ui/src/icons/RustTwoTone.tsx b/packages/ui/src/icons/RustTwoTone.tsx
index d1f378bcf..a7e436cc8 100644
--- a/packages/ui/src/icons/RustTwoTone.tsx
+++ b/packages/ui/src/icons/RustTwoTone.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function RustTwoTone() {
+export function RustTwoTone() {
   return (
     <svg
       width="100%"
@@ -25,5 +25,3 @@ function RustTwoTone() {
     </svg>
   );
 }
-
-export default RustTwoTone;
diff --git a/packages/ui/src/icons/Satoshi.tsx b/packages/ui/src/icons/Satoshi.tsx
index c1362dbe7..a41ad8407 100644
--- a/packages/ui/src/icons/Satoshi.tsx
+++ b/packages/ui/src/icons/Satoshi.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function Satoshi() {
+export function Satoshi() {
   return (
     <svg
       width="100%"
@@ -24,5 +24,3 @@ function Satoshi() {
     </svg>
   );
 }
-
-export default Satoshi;
diff --git a/packages/ui/src/icons/SatoshiRounded.tsx b/packages/ui/src/icons/SatoshiRounded.tsx
index 1fa2aff26..a708b7ca4 100644
--- a/packages/ui/src/icons/SatoshiRounded.tsx
+++ b/packages/ui/src/icons/SatoshiRounded.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function SatoshiRounded() {
+export function SatoshiRounded() {
   return (
     <svg
       viewBox="0 0 12 16"
@@ -41,5 +41,3 @@ function SatoshiRounded() {
     </svg>
   );
 }
-
-export default SatoshiRounded;
diff --git a/packages/ui/src/icons/Search.tsx b/packages/ui/src/icons/Search.tsx
index 65a7f1966..f2fcc8409 100644
--- a/packages/ui/src/icons/Search.tsx
+++ b/packages/ui/src/icons/Search.tsx
@@ -1,21 +1,21 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Search = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10.9972 10.9512C9.78136 12.1281 8.12781 12.6667 6.83333 12.6667C4.5 12.6667 1 10.9167 1 6.83333C1 2.75 4.5 1 6.83333 1C9.16667 1 12.6667 2.75 12.6667 6.83333C12.6667 8.65133 11.9729 10.0068 10.9972 10.9512ZM10.9972 10.9512L15 15"
-      stroke="#404040"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Search;
+export function Search() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.9972 10.9512C9.78136 12.1281 8.12781 12.6667 6.83333 12.6667C4.5 12.6667 1 10.9167 1 6.83333C1 2.75 4.5 1 6.83333 1C9.16667 1 12.6667 2.75 12.6667 6.83333C12.6667 8.65133 11.9729 10.0068 10.9972 10.9512ZM10.9972 10.9512L15 15"
+        stroke="#404040"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/SecurityKey.tsx b/packages/ui/src/icons/SecurityKey.tsx
index 9ba6a0dfa..5d1c5a618 100644
--- a/packages/ui/src/icons/SecurityKey.tsx
+++ b/packages/ui/src/icons/SecurityKey.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function SecurityKey() {
+export function SecurityKey() {
   return (
     <svg
       width="100%"
@@ -33,5 +33,3 @@ function SecurityKey() {
     </svg>
   );
 }
-
-export default SecurityKey;
diff --git a/packages/ui/src/icons/Selector.tsx b/packages/ui/src/icons/Selector.tsx
index 6d6b03723..29019d7be 100644
--- a/packages/ui/src/icons/Selector.tsx
+++ b/packages/ui/src/icons/Selector.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-function Selector() {
+export function Selector() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -26,5 +26,3 @@ function Selector() {
     </svg>
   );
 }
-
-export default Selector;
diff --git a/packages/ui/src/icons/SemiCircleOverlap.tsx b/packages/ui/src/icons/SemiCircleOverlap.tsx
index 22f3e6f76..c5c326f4d 100644
--- a/packages/ui/src/icons/SemiCircleOverlap.tsx
+++ b/packages/ui/src/icons/SemiCircleOverlap.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function SemiCircleOverlap() {
+export function SemiCircleOverlap() {
   return (
     <svg
       width="100%"
@@ -23,5 +23,3 @@ function SemiCircleOverlap() {
     </svg>
   );
 }
-
-export default SemiCircleOverlap;
diff --git a/packages/ui/src/icons/Send.tsx b/packages/ui/src/icons/Send.tsx
deleted file mode 100644
index 12870b6da..000000000
--- a/packages/ui/src/icons/Send.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-type Props = Record<string, never>;
-
-const Send = (props: Props) => (
-  <svg
-    width="17"
-    height="16"
-    viewBox="0 0 17 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M1 4.75904L3.88111 1.87793M3.88111 1.87793L6.76222 4.75904M3.88111 1.87793L3.88111 13.4024M9.73778 4.75904L12.6189 1.87793M12.6189 1.87793L15.5 4.75904M12.6189 1.87793L12.6189 13.4024"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Send;
diff --git a/packages/ui/src/icons/Share.tsx b/packages/ui/src/icons/Share.tsx
new file mode 100644
index 000000000..03c76d2d0
--- /dev/null
+++ b/packages/ui/src/icons/Share.tsx
@@ -0,0 +1,18 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function Share() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.74994 6.95207L10.0833 5.04728M6.74994 9.04727L10.0833 10.9521M14.2499 3.99967C14.2499 5.19629 13.2799 6.16634 12.0833 6.16634C10.8867 6.16634 9.91659 5.19629 9.91659 3.99967C9.91659 2.80305 10.8867 1.83301 12.0833 1.83301C13.2799 1.83301 14.2499 2.80305 14.2499 3.99967ZM14.2499 11.9997C14.2499 13.1963 13.2799 14.1663 12.0833 14.1663C10.8867 14.1663 9.91659 13.1963 9.91659 11.9997C9.91659 10.8031 10.8867 9.83301 12.0833 9.83301C13.2799 9.83301 14.2499 10.8031 14.2499 11.9997ZM6.91659 7.99967C6.91659 9.19627 5.94654 10.1663 4.74992 10.1663C3.5533 10.1663 2.58325 9.19627 2.58325 7.99967C2.58325 6.80307 3.5533 5.83301 4.74992 5.83301C5.94654 5.83301 6.91659 6.80307 6.91659 7.99967Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/ShieldCheck.tsx b/packages/ui/src/icons/ShieldCheck.tsx
new file mode 100644
index 000000000..f1b15b70c
--- /dev/null
+++ b/packages/ui/src/icons/ShieldCheck.tsx
@@ -0,0 +1,19 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+export function ShieldCheck() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.7628 2.03849C11.9168 1.98717 12.0832 1.98717 12.2372 2.03849L20.4872 4.78849C20.7934 4.89057 21 5.17718 21 5.5V11.9123C21 14.6497 19.8165 16.6701 18.1412 18.2596C16.4942 19.8225 14.3404 20.9975 12.3561 22.068C12.1338 22.1879 11.8662 22.1879 11.6439 22.068C9.65956 20.9975 7.5058 19.8225 5.85876 18.2596C4.18351 16.6701 3 14.6497 3 11.9123V5.5C3 5.17718 3.20657 4.89057 3.51283 4.78849L11.7628 2.03849ZM15.2803 10.0303C15.5732 9.73744 15.5732 9.26256 15.2803 8.96967C14.9874 8.67678 14.5126 8.67678 14.2197 8.96967L11 12.1893L9.78033 10.9697C9.48744 10.6768 9.01256 10.6768 8.71967 10.9697C8.42678 11.2626 8.42678 11.7374 8.71967 12.0303L10.4697 13.7803C10.6103 13.921 10.8011 14 11 14C11.1989 14 11.3897 13.921 11.5303 13.7803L15.2803 10.0303Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Sidebar.tsx b/packages/ui/src/icons/Sidebar.tsx
index 8ea268947..f60de18be 100644
--- a/packages/ui/src/icons/Sidebar.tsx
+++ b/packages/ui/src/icons/Sidebar.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Sidebar = () => {
+export function Sidebar() {
   return (
     <svg
       width="100%"
@@ -17,6 +17,4 @@ const Sidebar = () => {
       />
     </svg>
   );
-};
-
-export default Sidebar;
+}
diff --git a/packages/ui/src/icons/Sort.tsx b/packages/ui/src/icons/Sort.tsx
index e3d7d2a92..feaf25649 100644
--- a/packages/ui/src/icons/Sort.tsx
+++ b/packages/ui/src/icons/Sort.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-function Sort() {
+export function Sort() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -18,5 +18,3 @@ function Sort() {
     </svg>
   );
 }
-
-export default Sort;
diff --git a/packages/ui/src/icons/StackedLines.tsx b/packages/ui/src/icons/StackedLines.tsx
index 98306569f..4f6146676 100644
--- a/packages/ui/src/icons/StackedLines.tsx
+++ b/packages/ui/src/icons/StackedLines.tsx
@@ -15,5 +15,3 @@ export function StackedLines() {
     </svg>
   );
 }
-
-export default StackedLines;
diff --git a/packages/ui/src/icons/SwiftTwoTone.tsx b/packages/ui/src/icons/SwiftTwoTone.tsx
index a62ef9049..0e1ba1715 100644
--- a/packages/ui/src/icons/SwiftTwoTone.tsx
+++ b/packages/ui/src/icons/SwiftTwoTone.tsx
@@ -2,7 +2,7 @@
 
 import { useTheme } from "@emotion/react";
 
-function SwiftTwoTone() {
+export function SwiftTwoTone() {
   const theme = useTheme();
   return (
     <svg
@@ -29,5 +29,3 @@ function SwiftTwoTone() {
     </svg>
   );
 }
-
-export default SwiftTwoTone;
diff --git a/packages/ui/src/icons/TapSingle.tsx b/packages/ui/src/icons/TapSingle.tsx
new file mode 100644
index 000000000..cd43e68c1
--- /dev/null
+++ b/packages/ui/src/icons/TapSingle.tsx
@@ -0,0 +1,18 @@
+// Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
+
+export function TapSingle() {
+  return (
+    <svg
+      width="21"
+      height="28"
+      viewBox="0 0 21 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.3704 14H10.3704C10.3704 14.5523 10.8181 15 11.3704 15V14ZM7.22223 16.0556L6.77821 16.9516C7.08819 17.1052 7.45547 17.0876 7.74947 16.9052C8.04347 16.723 8.22227 16.4015 8.22227 16.0556H7.22223ZM3.07408 18.1111L2.14676 17.7368C2.02255 18.0446 2.05911 18.3939 2.24433 18.6692L3.07408 18.1111ZM16.4919 8.68545C16.5841 9.22998 17.1003 9.59669 17.6448 9.50451C18.1893 9.41233 18.556 8.89617 18.4639 8.35163L16.4919 8.68545ZM0.128733 11.4262C0.22092 11.9707 0.73708 12.3375 1.28161 12.2452C1.82615 12.1531 2.19287 11.637 2.10068 11.0924L0.128733 11.4262ZM12.3704 14V9.88891H10.3704V14H12.3704ZM6.22223 9.88891V16.0556H8.22227V9.88891H6.22223ZM7.66627 15.1596L7.58893 15.1212L6.70095 16.9134L6.77821 16.9516L7.66627 15.1596ZM2.41327 17.0766L2.14676 17.7368L4.0014 18.4854L4.26791 17.8251L2.41327 17.0766ZM2.24433 18.6692L6.13327 24.4506L7.7928 23.3343L3.90381 17.553L2.24433 18.6692ZM11.5649 27.3334H12.7531V25.3334H11.5649V27.3334ZM20.6667 19.4815V18.1111H18.6667V19.4815H20.6667ZM15.5185 13H11.3704V15H15.5185V13ZM20.6667 18.1111C20.6667 15.2799 18.3533 13 15.5185 13V15C17.2657 15 18.6667 16.4014 18.6667 18.1111H20.6667ZM7.58893 15.1212C5.62571 14.1484 3.23445 15.0419 2.41327 17.0766L4.26791 17.8251C4.64845 16.8822 5.77005 16.452 6.70095 16.9134L7.58893 15.1212ZM12.7531 27.3334C17.1152 27.3334 20.6667 23.8264 20.6667 19.4815H18.6667C18.6667 22.705 16.0276 25.3334 12.7531 25.3334V27.3334ZM9.29627 6.83335C7.60707 6.83335 6.22223 8.19294 6.22223 9.88891H8.22227C8.22227 9.31438 8.69467 8.83335 9.29627 8.83335V6.83335ZM6.13327 24.4506C7.34627 26.2538 9.38533 27.3334 11.5649 27.3334V25.3334C10.0461 25.3334 8.63133 24.581 7.7928 23.3343L6.13327 24.4506ZM12.3704 9.88891C12.3704 8.19294 10.9856 6.83335 9.29627 6.83335V8.83335C9.898 8.83335 10.3704 9.31438 10.3704 9.88891H12.3704ZM2 9.88891C2 5.90862 5.25819 2.66669 9.29627 2.66669V0.666687C4.17057 0.666687 0 4.78718 0 9.88891H2ZM9.29627 2.66669C12.9176 2.66669 15.9148 5.27615 16.4919 8.68545L18.4639 8.35163C17.7244 3.98349 13.8967 0.666687 9.29627 0.666687V2.66669ZM2.10068 11.0924C2.03453 10.7016 2 10.2996 2 9.88891H0C0 10.412 0.044 10.9256 0.128733 11.4262L2.10068 11.0924Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Team.tsx b/packages/ui/src/icons/Team.tsx
index 91976b1fa..aba96f404 100644
--- a/packages/ui/src/icons/Team.tsx
+++ b/packages/ui/src/icons/Team.tsx
@@ -1,20 +1,20 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Team = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M17.7498 19.25H21.4228C22.0042 19.25 22.468 18.754 22.3704 18.1808C21.8389 15.0624 20.0189 12.75 16.9998 12.75C16.5537 12.75 16.1338 12.8005 15.7404 12.8966M11.2497 7C11.2497 8.79493 9.79461 10.25 7.99969 10.25C6.20476 10.25 4.74969 8.79493 4.74969 7C4.74969 5.20507 6.20476 3.75 7.99969 3.75C9.79461 3.75 11.2497 5.20507 11.2497 7ZM19.7497 7.5C19.7497 9.01878 18.5185 10.25 16.9997 10.25C15.4809 10.25 14.2497 9.01878 14.2497 7.5C14.2497 5.98122 15.4809 4.75 16.9997 4.75C18.5185 4.75 19.7497 5.98122 19.7497 7.5ZM1.87029 19.1808C2.4382 15.4997 4.51686 12.75 7.99969 12.75C11.4825 12.75 13.5612 15.4997 14.1291 19.1808C14.2177 19.755 13.7549 20.25 13.1739 20.25H2.82547C2.24447 20.25 1.7817 19.755 1.87029 19.1808Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Team;
+export function Team() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.7498 19.25H21.4228C22.0042 19.25 22.468 18.754 22.3704 18.1808C21.8389 15.0624 20.0189 12.75 16.9998 12.75C16.5537 12.75 16.1338 12.8005 15.7404 12.8966M11.2497 7C11.2497 8.79493 9.79461 10.25 7.99969 10.25C6.20476 10.25 4.74969 8.79493 4.74969 7C4.74969 5.20507 6.20476 3.75 7.99969 3.75C9.79461 3.75 11.2497 5.20507 11.2497 7ZM19.7497 7.5C19.7497 9.01878 18.5185 10.25 16.9997 10.25C15.4809 10.25 14.2497 9.01878 14.2497 7.5C14.2497 5.98122 15.4809 4.75 16.9997 4.75C18.5185 4.75 19.7497 5.98122 19.7497 7.5ZM1.87029 19.1808C2.4382 15.4997 4.51686 12.75 7.99969 12.75C11.4825 12.75 13.5612 15.4997 14.1291 19.1808C14.2177 19.755 13.7549 20.25 13.1739 20.25H2.82547C2.24447 20.25 1.7817 19.755 1.87029 19.1808Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Terminal.tsx b/packages/ui/src/icons/Terminal.tsx
index 4a7e80455..7886a6362 100644
--- a/packages/ui/src/icons/Terminal.tsx
+++ b/packages/ui/src/icons/Terminal.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-function Terminal() {
+export function Terminal() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -19,5 +19,3 @@ function Terminal() {
     </svg>
   );
 }
-
-export default Terminal;
diff --git a/packages/ui/src/icons/Trash.tsx b/packages/ui/src/icons/Trash.tsx
index 737ae8f1d..c28d6e4a4 100644
--- a/packages/ui/src/icons/Trash.tsx
+++ b/packages/ui/src/icons/Trash.tsx
@@ -1,21 +1,21 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Trash = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M0.5 2.85714H11.5M4.07143 11.5H7.92857C8.79647 11.5 9.5 10.7965 9.5 9.92857L9.92857 2.07143C9.92857 1.20355 9.22504 0.5 8.35714 0.5H3.64286C2.77498 0.5 2.07143 1.20355 2.07143 2.07143L2.5 9.92857C2.5 10.7965 3.20355 11.5 4.07143 11.5Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path d="M5 5V9" stroke="currentColor" strokeLinecap="round" />
-    <path d="M7 5V9" stroke="currentColor" strokeLinecap="round" />
-  </svg>
-);
-
-export default Trash;
+export function Trash() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.5 2.85714H11.5M4.07143 11.5H7.92857C8.79647 11.5 9.5 10.7965 9.5 9.92857L9.92857 2.07143C9.92857 1.20355 9.22504 0.5 8.35714 0.5H3.64286C2.77498 0.5 2.07143 1.20355 2.07143 2.07143L2.5 9.92857C2.5 10.7965 3.20355 11.5 4.07143 11.5Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M5 5V9" stroke="currentColor" strokeLinecap="round" />
+      <path d="M7 5V9" stroke="currentColor" strokeLinecap="round" />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/TrashOld.tsx b/packages/ui/src/icons/TrashOld.tsx
deleted file mode 100644
index a6cfcc00a..000000000
--- a/packages/ui/src/icons/TrashOld.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-type Props = {
-  color?: "black" | "white";
-};
-
-const Trash = (props: Props) => (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M0.5 2.85714H11.5M4.07143 11.5H7.92857C8.79647 11.5 9.5 10.7965 9.5 9.92857L9.92857 2.07143C9.92857 1.20355 9.22504 0.5 8.35714 0.5H3.64286C2.77498 0.5 2.07143 1.20355 2.07143 2.07143L2.5 9.92857C2.5 10.7965 3.20355 11.5 4.07143 11.5Z"
-      stroke={props.color ?? "black"}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path d="M5 5V9" stroke={props.color ?? "black"} strokeLinecap="round" />
-    <path d="M7 5V9" stroke={props.color ?? "black"} strokeLinecap="round" />
-  </svg>
-);
-
-export default Trash;
diff --git a/packages/ui/src/icons/TwoArrowsDown.tsx b/packages/ui/src/icons/TwoArrowsDown.tsx
index 9341e5fea..737259a3d 100644
--- a/packages/ui/src/icons/TwoArrowsDown.tsx
+++ b/packages/ui/src/icons/TwoArrowsDown.tsx
@@ -16,5 +16,3 @@ export function TwoArrowsDown() {
     </svg>
   );
 }
-
-export default TwoArrowsDown;
diff --git a/packages/ui/src/icons/TwoArrowsUp.tsx b/packages/ui/src/icons/TwoArrowsUp.tsx
index a24c08361..b7d11682e 100644
--- a/packages/ui/src/icons/TwoArrowsUp.tsx
+++ b/packages/ui/src/icons/TwoArrowsUp.tsx
@@ -16,5 +16,3 @@ export function TwoArrowsUp() {
     </svg>
   );
 }
-
-export default TwoArrowsUp;
diff --git a/packages/ui/src/icons/Uma.tsx b/packages/ui/src/icons/Uma.tsx
index 4d9403894..463628a56 100644
--- a/packages/ui/src/icons/Uma.tsx
+++ b/packages/ui/src/icons/Uma.tsx
@@ -1,4 +1,4 @@
-function Uma() {
+export function Uma() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -9,16 +9,14 @@ function Uma() {
     >
       <path
         d="M30.6127 11.5888C30.9753 11.5888 31.2799 11.5259 31.5265 11.4002C31.778 11.2697 31.9762 11.1222 32.1213 10.9578C32.2712 10.7934 32.3727 10.6556 32.4259 10.5444C32.5274 10.3316 32.5854 10.085 32.6 9.80459C32.6126 9.61777 32.6211 9.45169 32.6255 9.30635C32.3053 9.38884 32.0235 9.44143 31.7972 9.48367L31.7876 9.48546C31.425 9.54832 31.1324 9.60634 30.91 9.65953C30.6876 9.71272 30.4918 9.77074 30.3225 9.8336C30.1291 9.91096 29.972 9.99558 29.8511 10.0875C29.7351 10.1745 29.648 10.2712 29.59 10.3776C29.5368 10.4839 29.5102 10.6024 29.5102 10.733C29.5102 10.9119 29.5537 11.0666 29.6408 11.1971C29.7326 11.3229 29.8608 11.4196 30.0252 11.4873C30.1896 11.555 30.3854 11.5888 30.6127 11.5888Z"
-        fill="#16171A"
+        fill="currentColor"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M0.506832 2.74799C0 3.7427 0 5.04485 0 7.64916V10.3512C0 12.9555 0 14.2577 0.506832 15.2524C0.952653 16.1274 1.66403 16.8387 2.539 17.2846C3.53372 17.7914 4.83587 17.7914 7.44018 17.7914H32.5163C35.1206 17.7914 36.4228 17.7914 37.4175 17.2846C38.2925 16.8387 39.0038 16.1274 39.4497 15.2524C39.9565 14.2577 39.9565 12.9555 39.9565 10.3512V7.64916C39.9565 5.04485 39.9565 3.7427 39.4497 2.74799C39.0038 1.87301 38.2925 1.16164 37.4175 0.715816C36.4228 0.208984 35.1206 0.208984 32.5163 0.208984H7.44018C4.83587 0.208984 3.53372 0.208984 2.539 0.715816C1.66403 1.16164 0.952653 1.87301 0.506832 2.74799ZM30.192 13.1409C29.6311 13.1409 29.1548 13.0345 28.7632 12.8218C28.3763 12.6042 28.0814 12.3165 27.8783 11.9587C27.6801 11.5961 27.5809 11.1971 27.5809 10.762C27.5809 10.3993 27.6101 10.1905 27.7213 9.89067C27.8326 9.59088 28.0075 9.32106 28.2541 9.0938C28.5055 8.86171 28.8516 8.70218 29.1317 8.61725C29.4118 8.53232 29.9345 8.40989 30.2676 8.35398C30.3758 8.33582 30.5032 8.31555 30.649 8.29235L30.6491 8.29234L30.6493 8.29231C30.9523 8.24411 31.3345 8.1833 31.7876 8.10271C32.1373 8.04051 32.4065 7.94077 32.649 7.80203C32.6185 7.44774 32.5103 7.17964 32.3243 6.99772C32.1019 6.78013 31.7296 6.67134 31.2074 6.67134C30.9173 6.67134 30.6151 6.74145 30.3008 6.88167C29.9865 7.02189 29.7665 7.27091 29.6408 7.62872L27.8566 7.06299C28.0548 6.41507 28.4271 5.88802 28.9735 5.48186C29.5199 5.0757 30.2645 4.87262 31.2074 4.87262C31.8988 4.87262 32.5129 4.97899 33.0496 5.19174C33.5863 5.4045 33.9925 5.77198 34.2681 6.29419C34.4228 6.5843 34.5147 6.87442 34.5437 7.16453C34.5727 7.45465 34.5872 7.77861 34.5872 8.13642V12.9233H32.8611V11.9618C32.5494 12.329 32.2182 12.606 31.8674 12.7928C31.4274 13.0249 30.8689 13.1409 30.192 13.1409ZM24.1572 12.9231V8.29575C24.1572 7.77837 24.0339 7.37705 23.7873 7.09177C23.5456 6.80165 23.2095 6.65659 22.7792 6.65659C22.5036 6.65659 22.2642 6.72187 22.0611 6.85242C21.8581 6.97814 21.6985 7.15704 21.5825 7.38914C21.4712 7.61639 21.4156 7.87992 21.4156 8.1797V12.9231H19.4428V8.29575C19.4428 7.77837 19.3195 7.37705 19.073 7.09177C18.8312 6.80165 18.4951 6.65659 18.0648 6.65659C17.6538 6.65659 17.3226 6.79923 17.0711 7.08451C16.8246 7.36496 16.7013 7.73002 16.7013 8.1797V12.9231H14.714V5.08997H16.4547V5.94818C16.6819 5.6683 16.9599 5.43784 17.2887 5.25678C17.7239 5.01986 18.2099 4.90139 18.7466 4.90139C19.3606 4.90139 19.8635 5.03194 20.2552 5.29305C20.5823 5.50848 20.8387 5.78317 21.0243 6.11711C21.2732 5.74915 21.5946 5.45996 21.9886 5.24953C22.419 5.01744 22.8952 4.90139 23.4174 4.90139C24.312 4.90139 24.9865 5.16733 25.441 5.69921C25.9003 6.22625 26.13 6.9177 26.13 7.77354V12.9231H24.1572ZM6.92079 12.8433C7.30762 13.0512 7.80807 13.1552 8.42214 13.1552C9.19095 13.1552 9.82679 12.9884 10.3297 12.6547C10.5683 12.4979 10.7786 12.3181 10.9607 12.1154V12.9231H12.7014V5.08997H10.7141V9.06456C10.7141 9.54809 10.6585 9.93975 10.5472 10.2395C10.4409 10.5345 10.3031 10.7593 10.1338 10.9141C9.96459 11.0639 9.78327 11.1655 9.58986 11.2187C9.39645 11.2719 9.21513 11.2985 9.04589 11.2985C8.62523 11.2985 8.29884 11.2042 8.06675 11.0156C7.83949 10.827 7.6751 10.5925 7.57355 10.3121C7.47201 10.0316 7.41157 9.75359 7.39223 9.47798C7.37289 9.19753 7.36322 8.96786 7.36322 8.78895V5.08997H5.36142V9.48523C5.36142 9.61578 5.37109 9.8237 5.39043 10.109C5.40977 10.3943 5.46538 10.711 5.55725 11.0591C5.64912 11.4024 5.80143 11.7336 6.01418 12.0528C6.23177 12.3719 6.53397 12.6354 6.92079 12.8433Z"
-        fill="#16171A"
+        fill="currentColor"
       />
     </svg>
   );
 }
-
-export default Uma;
diff --git a/packages/ui/src/icons/UmaBridgeLoading.tsx b/packages/ui/src/icons/UmaBridgeLoading.tsx
new file mode 100644
index 000000000..e9583044d
--- /dev/null
+++ b/packages/ui/src/icons/UmaBridgeLoading.tsx
@@ -0,0 +1,18 @@
+export function UmaBridgeLoading() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="11" cy="11" r="9" stroke="#EBEEF2" strokeWidth="2.5" />
+      <path
+        d="M19.9999 11C19.9999 9.57971 19.6638 8.17958 19.019 6.91409C18.3742 5.6486 17.439 4.55368 16.29 3.71885C15.1409 2.88402 13.8106 2.33299 12.4078 2.11081C11.005 1.88862 9.56953 2.0016 8.21875 2.44049"
+        stroke="black"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Upload.tsx b/packages/ui/src/icons/Upload.tsx
index c5af21882..094c46569 100644
--- a/packages/ui/src/icons/Upload.tsx
+++ b/packages/ui/src/icons/Upload.tsx
@@ -1,25 +1,25 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const Upload = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967L17.0303 7.71967C17.3232 8.01256 17.3232 8.48744 17.0303 8.78033C16.7374 9.07322 16.2626 9.07322 15.9697 8.78033L12.75 5.56066V15C12.75 15.4142 12.4142 15.75 12 15.75C11.5858 15.75 11.25 15.4142 11.25 15V5.56066L8.03033 8.78033C7.73744 9.07322 7.26256 9.07322 6.96967 8.78033C6.67678 8.48744 6.67678 8.01256 6.96967 7.71967L11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3Z"
-      fill="currentColor"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M3.75 12C4.16421 12 4.5 12.3358 4.5 12.75V19.5H19.5V12.75C19.5 12.3358 19.8358 12 20.25 12C20.6642 12 21 12.3358 21 12.75V20.25C21 20.6642 20.6642 21 20.25 21H3.75C3.33579 21 3 20.6642 3 20.25V12.75C3 12.3358 3.33579 12 3.75 12Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default Upload;
+export function Upload() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 3C12.1989 3 12.3897 3.07902 12.5303 3.21967L17.0303 7.71967C17.3232 8.01256 17.3232 8.48744 17.0303 8.78033C16.7374 9.07322 16.2626 9.07322 15.9697 8.78033L12.75 5.56066V15C12.75 15.4142 12.4142 15.75 12 15.75C11.5858 15.75 11.25 15.4142 11.25 15V5.56066L8.03033 8.78033C7.73744 9.07322 7.26256 9.07322 6.96967 8.78033C6.67678 8.48744 6.67678 8.01256 6.96967 7.71967L11.4697 3.21967C11.6103 3.07902 11.8011 3 12 3Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.75 12C4.16421 12 4.5 12.3358 4.5 12.75V19.5H19.5V12.75C19.5 12.3358 19.8358 12 20.25 12C20.6642 12 21 12.3358 21 12.75V20.25C21 20.6642 20.6642 21 20.25 21H3.75C3.33579 21 3 20.6642 3 20.25V12.75C3 12.3358 3.33579 12 3.75 12Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/VerticalArrows.tsx b/packages/ui/src/icons/VerticalArrows.tsx
deleted file mode 100644
index 10bc771a4..000000000
--- a/packages/ui/src/icons/VerticalArrows.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-type Props = {
-  color?: "green" | "gray";
-};
-
-const VerticalArrows = (props: Props) => (
-  <svg
-    width="25"
-    height="22"
-    viewBox="0 0 25 22"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M23.0044 16.3846L18.3881 21.0009M18.3881 21.0009L13.7718 16.3846M18.3881 21.0009L18.3881 2.53564"
-      stroke={props.color === "green" ? "#17C27C" : "#999999"}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M1 5.6164L5.61631 1.00009M5.61631 1.00009L10.2326 5.6164M5.61631 1.00009L5.61631 19.4653"
-      stroke={props.color === "green" ? "#17C27C" : "#999999"}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default VerticalArrows;
diff --git a/packages/ui/src/icons/ViewAll.tsx b/packages/ui/src/icons/ViewAll.tsx
deleted file mode 100644
index 772183284..000000000
--- a/packages/ui/src/icons/ViewAll.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-const ViewAll = () => (
-  <svg
-    width="13"
-    height="10"
-    viewBox="0 0 13 10"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M1.125 5H3.31152" stroke="black" strokeLinecap="round" />
-    <path d="M1.125 1H3.31152" stroke="black" strokeLinecap="round" />
-    <path d="M1.125 9H3.31152" stroke="black" strokeLinecap="round" />
-    <path d="M5.70288 5H12.125" stroke="black" strokeLinecap="round" />
-    <path d="M5.70288 1H12.125" stroke="black" strokeLinecap="round" />
-    <path d="M5.70288 9H12.125" stroke="black" strokeLinecap="round" />
-  </svg>
-);
-
-export default ViewAll;
diff --git a/packages/ui/src/icons/WalletSDKIcon.tsx b/packages/ui/src/icons/WalletSDKIcon.tsx
index 95d0b5068..58903ee41 100644
--- a/packages/ui/src/icons/WalletSDKIcon.tsx
+++ b/packages/ui/src/icons/WalletSDKIcon.tsx
@@ -1,6 +1,6 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-function WalletSDKIcon() {
+export function WalletSDKIcon() {
   return (
     <svg
       width="36"
@@ -24,5 +24,3 @@ function WalletSDKIcon() {
     </svg>
   );
 }
-
-export default WalletSDKIcon;
diff --git a/packages/ui/src/icons/WarningIcon.tsx b/packages/ui/src/icons/WarningIcon.tsx
deleted file mode 100644
index 6a1d609a7..000000000
--- a/packages/ui/src/icons/WarningIcon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-
-function WarningIcon() {
-  return (
-    <svg
-      width="100%"
-      viewBox="0 0 32 31"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M16.2584 21.6725V21.6243M16.2584 9.32965V15.5011M30.6584 15.5011C30.6584 23.454 24.2113 29.9011 16.2584 29.9011C8.3055 29.9011 1.8584 23.454 1.8584 15.5011C1.8584 7.54817 8.3055 1.10107 16.2584 1.10107C24.2113 1.10107 30.6584 7.54817 30.6584 15.5011Z"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-export default WarningIcon;
diff --git a/packages/ui/src/icons/WarningSign.tsx b/packages/ui/src/icons/WarningSign.tsx
index 89473f6ed..ec8bbc433 100644
--- a/packages/ui/src/icons/WarningSign.tsx
+++ b/packages/ui/src/icons/WarningSign.tsx
@@ -1,30 +1,30 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-const WarningSign = () => (
-  <svg
-    width="100%"
-    viewBox="0 0 12 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_3679_43594)">
-      <path
-        d="M1.23392 10.8195L1.52049 10.4097L1.23392 10.8195C1.40632 10.94 1.59783 10.9728 1.74858 10.9866C1.89495 11 2.07532 11 2.27188 11L2.29247 11H9.70362L9.72422 11C9.92078 11 10.1011 11 10.2475 10.9866C10.3983 10.9728 10.5898 10.94 10.7622 10.8195L10.4756 10.4097L10.7622 10.8195C10.9876 10.6618 11.1381 10.4183 11.1783 10.1462C11.209 9.93805 11.1527 9.75208 11.0977 9.61107C11.0442 9.47415 10.9635 9.31281 10.8756 9.13699L10.8664 9.11862L7.1608 1.70747L7.16096 1.7074L7.15786 1.7016L7.15094 1.68775C7.04427 1.47437 6.94927 1.28435 6.86007 1.14036C6.77215 0.998424 6.64092 0.816166 6.42657 0.714504C6.15537 0.585877 5.84073 0.585877 5.56952 0.714504C5.35517 0.816167 5.22394 0.998426 5.13602 1.14036C5.04682 1.28436 4.95182 1.47439 4.84514 1.68777L4.83529 1.70748L1.12972 9.11862L1.12051 9.13704C1.03259 9.31284 0.951915 9.47416 0.898437 9.61107C0.843361 9.75208 0.787055 9.93805 0.817803 10.1462C0.858007 10.4183 1.00852 10.6618 1.23392 10.8195Z"
-        stroke="currentColor"
-      />
-      <path
-        d="M6 8.5V8.48633M6 4V6.75"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_3679_43594">
-        <rect width="12" height="12" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
-
-export default WarningSign;
+export function WarningSign() {
+  return (
+    <svg
+      width="100%"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_3679_43594)">
+        <path
+          d="M1.23392 10.8195L1.52049 10.4097L1.23392 10.8195C1.40632 10.94 1.59783 10.9728 1.74858 10.9866C1.89495 11 2.07532 11 2.27188 11L2.29247 11H9.70362L9.72422 11C9.92078 11 10.1011 11 10.2475 10.9866C10.3983 10.9728 10.5898 10.94 10.7622 10.8195L10.4756 10.4097L10.7622 10.8195C10.9876 10.6618 11.1381 10.4183 11.1783 10.1462C11.209 9.93805 11.1527 9.75208 11.0977 9.61107C11.0442 9.47415 10.9635 9.31281 10.8756 9.13699L10.8664 9.11862L7.1608 1.70747L7.16096 1.7074L7.15786 1.7016L7.15094 1.68775C7.04427 1.47437 6.94927 1.28435 6.86007 1.14036C6.77215 0.998424 6.64092 0.816166 6.42657 0.714504C6.15537 0.585877 5.84073 0.585877 5.56952 0.714504C5.35517 0.816167 5.22394 0.998426 5.13602 1.14036C5.04682 1.28436 4.95182 1.47439 4.84514 1.68777L4.83529 1.70748L1.12972 9.11862L1.12051 9.13704C1.03259 9.31284 0.951915 9.47416 0.898437 9.61107C0.843361 9.75208 0.787055 9.93805 0.817803 10.1462C0.858007 10.4183 1.00852 10.6618 1.23392 10.8195Z"
+          stroke="currentColor"
+        />
+        <path
+          d="M6 8.5V8.48633M6 4V6.75"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3679_43594">
+          <rect width="12" height="12" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/constants.tsx b/packages/ui/src/icons/constants.tsx
new file mode 100644
index 000000000..b78e440fb
--- /dev/null
+++ b/packages/ui/src/icons/constants.tsx
@@ -0,0 +1,2 @@
+export const invertFillColor = "invert-fill-color";
+export const invertStrokeColor = "invert-stroke-color";
diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.tsx
index 0b611d8ad..69f0b7b10 100644
--- a/packages/ui/src/icons/index.tsx
+++ b/packages/ui/src/icons/index.tsx
@@ -1 +1,111 @@
-export { Icon, IconContainer } from "../components/Icon.js";
+export { AI } from "./AI.js";
+export { AnchorLink } from "./AnchorLink.js";
+export { ApiConnection } from "./ApiConnection.js";
+export { AppIcon } from "./AppIcon.js";
+export { ArrowCircle } from "./ArrowCircle.js";
+export { ArrowCircleTier1 } from "./ArrowCircleTier1.js";
+export { ArrowCircleTier2 } from "./ArrowCircleTier2.js";
+export { ArrowCircleTier3 } from "./ArrowCircleTier3.js";
+export { ArrowCornerDownRight } from "./ArrowCornerDownRight.js";
+export { ArrowDown } from "./ArrowDown.js";
+export { ArrowUp } from "./ArrowUp.js";
+export { ArrowUpRightCircleFill } from "./ArrowUpRightCircleFill.js";
+export { Bank } from "./Bank.js";
+export { BitcoinB } from "./BitcoinB.js";
+export { BitcoinBOnRoundedSquare } from "./BitcoinBOnRoundedSquare.js";
+export { CameraCapture } from "./CameraCapture.js";
+export { CaretRight } from "./CaretRight.js";
+export { CentralArrowShareRight } from "./CentralArrowShareRight.js";
+export { Checkmark } from "./Checkmark.js";
+export { CheckmarkCircleGreen } from "./CheckmarkCircleGreen.js";
+export { CheckmarkCircleTier1 } from "./CheckmarkCircleTier1.js";
+export { CheckmarkCircleTier2 } from "./CheckmarkCircleTier2.js";
+export { CheckmarkCircleTier3 } from "./CheckmarkCircleTier3.js";
+export { Chevron } from "./Chevron.js";
+export { ChevronLeft } from "./ChevronLeft.js";
+export { CircleCheck } from "./CircleCheck.js";
+export { CircleCheckOutline } from "./CircleCheckOutline.js";
+export { CirclePlus } from "./CirclePlus.js";
+export { Clock } from "./Clock.js";
+export { Close } from "./Close.js";
+export { Code } from "./Code.js";
+export { Copy } from "./Copy.js";
+export { CreditCard } from "./CreditCard.js";
+export { DeleteIcon } from "./DeleteIcon.js";
+export { Dollar } from "./Dollar.js";
+export { DollarManrope } from "./DollarManrope.js";
+export { DollarManropeSmall } from "./DollarManropeSmall.js";
+export { DotGrid1x3Horizontal } from "./DotGrid1x3Horizontal.js";
+export { Download } from "./Download.js";
+export { Envelope } from "./Envelope.js";
+export { ExclamationPoint } from "./ExclamationPoint.js";
+export { Explorer } from "./Explorer.js";
+export { Eye } from "./Eye.js";
+export { EyeDropper } from "./EyeDropper.js";
+export { Figma } from "./Figma.js";
+export { FlutterTwoTone } from "./FlutterTwoTone.js";
+export { FramedLetterI } from "./FramedLetterI.js";
+export { Gear } from "./Gear.js";
+export { Github } from "./Github.js";
+export { GoTwoTone } from "./GoTwoTone.js";
+export { GraphQLTwoTone } from "./GraphQLTwoTone.js";
+export { HeartOutline } from "./HeartOutline.js";
+export { Home } from "./Home.js";
+export { HorizontalArrows } from "./HorizontalArrows.js";
+export { Info } from "./Info.js";
+export { JavaScriptTwoTone } from "./JavaScriptTwoTone.js";
+export { JavaTwoTone } from "./JavaTwoTone.js";
+export { KotlinTwoTone } from "./KotlinTwoTone.js";
+export { LeftArrow } from "./LeftArrow.js";
+export { LightningOnRoundedSquare } from "./LightningOnRoundedSquare.js";
+export { LinkIcon } from "./LinkIcon.js";
+export { LoadingSpinner } from "./LoadingSpinner.js";
+export { Lock } from "./Lock.js";
+export { Logo } from "./Logo.js";
+export { LogoBolt } from "./LogoBolt.js";
+export { LogoOnCircle } from "./LogoOnCircle.js";
+export { MagicWand } from "./MagicWand.js";
+export { Minus } from "./Minus.js";
+export { Monitor } from "./Monitor.js";
+export { NodeAdd } from "./NodeAdd.js";
+export { NotEye } from "./NotEye.js";
+export { PaperPlane } from "./PaperPlane.js";
+export { Pencil } from "./Pencil.js";
+export { Person } from "./Person.js";
+export { PersonCircle } from "./PersonCircle.js";
+export { PiggyBank } from "./PiggyBank.js";
+export { Plus } from "./Plus.js";
+export { PythonTwoTone } from "./PythonTwoTone.js";
+export { QRCodeIcon } from "./QRCodeIcon.js";
+export { QuestionCircle } from "./QuestionCircle.js";
+export { QuestionCircleStrong } from "./QuestionCircleStrong.js";
+export { ReactTwoTone } from "./ReactTwoTone.js";
+export { Recycling } from "./Recycling.js";
+export { Remove } from "./Remove.js";
+export { Restart } from "./Restart.js";
+export { RightArrow } from "./RightArrow.js";
+export { Roadmap } from "./Roadmap.js";
+export { RustTwoTone } from "./RustTwoTone.js";
+export { Satoshi } from "./Satoshi.js";
+export { SatoshiRounded } from "./SatoshiRounded.js";
+export { Search } from "./Search.js";
+export { SecurityKey } from "./SecurityKey.js";
+export { Selector } from "./Selector.js";
+export { SemiCircleOverlap } from "./SemiCircleOverlap.js";
+export { Share } from "./Share.js";
+export { ShieldCheck } from "./ShieldCheck.js";
+export { Sidebar } from "./Sidebar.js";
+export { Sort } from "./Sort.js";
+export { StackedLines } from "./StackedLines.js";
+export { SwiftTwoTone } from "./SwiftTwoTone.js";
+export { TapSingle } from "./TapSingle.js";
+export { Team } from "./Team.js";
+export { Terminal } from "./Terminal.js";
+export { Trash } from "./Trash.js";
+export { TwoArrowsDown } from "./TwoArrowsDown.js";
+export { TwoArrowsUp } from "./TwoArrowsUp.js";
+export { Uma } from "./Uma.js";
+export { UmaBridgeLoading } from "./UmaBridgeLoading.js";
+export { Upload } from "./Upload.js";
+export { WalletSDKIcon } from "./WalletSDKIcon.js";
+export { WarningSign } from "./WarningSign.js";
diff --git a/packages/ui/src/modules.d.ts b/packages/ui/src/modules.d.ts
index 0c9d98896..53222acf0 100644
--- a/packages/ui/src/modules.d.ts
+++ b/packages/ui/src/modules.d.ts
@@ -60,6 +60,10 @@ declare module "*.svg" {
     React.SVGProps<SVGSVGElement> & { title?: string }
   >;
 
+  export default ReactComponent;
+}
+
+declare module "*?url" {
   const src: string;
   export default src;
 }
diff --git a/packages/ui/src/styles/buttons.tsx b/packages/ui/src/styles/buttons.tsx
new file mode 100644
index 000000000..c0729fffc
--- /dev/null
+++ b/packages/ui/src/styles/buttons.tsx
@@ -0,0 +1,85 @@
+/* type outside bracket is needed to pass madge for some reason: */
+import type { BackgroundColorKeyArg } from "./themes.js";
+import { type TokenSizeKey } from "./tokens/typography.js";
+
+export type PaddingYKey = "short" | "regular";
+export type PaddingY = number | { [key in PaddingYKey]: number };
+
+export const buttonBorderRadiuses = [8, 32] as const;
+export type ButtonBorderRadius = (typeof buttonBorderRadiuses)[number];
+export const allowedButtonTypographyTypes = [
+  "Body",
+  "Body Strong",
+  "Title",
+  "Label",
+  "Label Moderate",
+  "Label Strong",
+] as const;
+export type AllowedButtonTypographyTypes =
+  (typeof allowedButtonTypographyTypes)[number];
+
+export const buttonsThemeBase = {
+  defaultSize: "Small" as TokenSizeKey,
+  defaultTypography: "Body Strong" as AllowedButtonTypographyTypes,
+  defaultBorderRadius: 32 as ButtonBorderRadius,
+  defaultBorderWidth: 1,
+  defaultBackgroundColor: "bg" as BackgroundColorKeyArg,
+  defaultBorderColor: "bg" as BackgroundColorKeyArg,
+  defaultHoverBackgroundColor: "bg" as BackgroundColorKeyArg,
+  defaultHoverBorderColor: "bg" as BackgroundColorKeyArg,
+  defaultOutlineOffset: 1,
+  defaultPaddingsY: {
+    ExtraSmall: 4,
+    Small: {
+      short: 8,
+      regular: 12,
+    } as PaddingY,
+    Schmedium: 12,
+    Medium: 12,
+    Mlarge: 12,
+    Large: 12,
+  },
+  kinds: {},
+};
+export type ButtonsThemeKey = keyof typeof buttonsThemeBase;
+
+type ButtonKindsProps = Record<string, Partial<typeof buttonsThemeBase>>;
+
+/* Themes can selectively override properties per button kind. Undefined
+   properties will fallback to the theme default. These base kinds mirror
+   how button styles were behaving previously but themes can override these: */
+export const defaultButtonsTheme = {
+  ...buttonsThemeBase,
+  kinds: {
+    primary: {
+      defaultBorderWidth: 0,
+      defaultBackgroundColor: "c9Neutral",
+      defaultBorderColor: "c9Neutral",
+      defaultHoverBackgroundColor: "c8Neutral",
+      defaultHoverBorderColor: "c8Neutral",
+    },
+    ghost: {
+      defaultBackgroundColor: "transparent",
+      defaultBorderWidth: 0,
+      defaultHoverBackgroundColor: "transparent",
+      defaultHoverBorderColor: "transparent",
+      defaultPaddingsY: {
+        ExtraSmall: 0,
+        Small: 0,
+        Schmedium: 0,
+        Medium: 0,
+        Mlarge: 0,
+        Large: 0,
+      },
+    },
+    secondary: {
+      defaultBackgroundColor: ["bg", "c1Neutral"],
+      defaultBorderColor: ["gray90", "gray20"],
+      defaultHoverBackgroundColor: ["bg", "c1Neutral"],
+      defaultHoverBorderColor: ["gray90", "gray20"],
+    },
+    blue39: {
+      defaultBorderColor: "blue39",
+    },
+  } as ButtonKindsProps,
+};
diff --git a/packages/ui/src/styles/colors.tsx b/packages/ui/src/styles/colors.tsx
index e24895625..ba757b258 100644
--- a/packages/ui/src/styles/colors.tsx
+++ b/packages/ui/src/styles/colors.tsx
@@ -1,8 +1,4 @@
-import type { CSSInterpolation } from "@emotion/css";
 import type { Theme } from "@emotion/react";
-import { css, useTheme } from "@emotion/react";
-import { Breakpoints, useBreakpoints } from "./breakpoints.js";
-import { App, getTypography } from "./fonts/typographyTokens.js";
 
 const neutral = {
   black: "#000000",
@@ -14,50 +10,54 @@ const neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
+  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
   gray85: "#D9D9D9",
   gray90: "#E6E6E6",
+  gray91: "#171717",
   gray95: "#F2F2F2",
+  gray98: "#F9F9F9",
   white: "#FFFFFF",
 };
 
-const uma = {
-  background: "#F9F9F9",
-  black: "#16171A",
-  blue: "#0068C9",
-  blue50: "#C0C9D6",
-  blue80: "#DCE2EA",
-  blue90: "#EBEEF2",
-  blue95: "#F2F5F7",
-  grey300: "#DEDFE4",
-  secondary: "#686A72",
-  stroke: "#C0C9D6",
-  strokeProminent: "#9BA7B9",
-  fill: "#EBEEF2",
-};
-
 export const darkGradient =
   "#1d1d1d linear-gradient(180deg, #090909 63.08%, #1d1d1d 100.52%)";
 
-export enum Themes {
-  Light = "light",
-  Dark = "dark",
-}
-
 const primary = "#FFF14E";
 
-export const colors = {
+/**
+ * In general human readable colors are represented as
+ * [colorName][colorLightness 1-100][alpha 1-100]. For example:
+ * red with 42 lightness and 10 alpha is red4210.
+ */
+const baseColors = {
   ...neutral,
-  uma,
   // green
   success: "#17C27C",
+  green33: "#179257",
   // blue
   blue43: "#145BC6",
   blue22: "#0E2E60",
+  blue39: "#0068C9",
+  blue37: "#21529c",
   blue58: "#28BFFF",
-  blue95: "#EBEEF2",
+  // less than 50% saturated blue
+  grayBlue9: "#16171A",
+  grayBlue32: "#4F5156",
+  grayBlue43: "#686A72",
+  grayBlue45: "#676F80",
+  grayBlue67: "#9BA7B9",
+  grayBlue80: "#C0C9D6",
+  grayBlue88: "#DEDFE4",
+  grayBlue94: "#EBEEF2",
+  grayBlue96: "#F2F5F7",
+  // purple
+  purple43: "#820AD1",
+  purple55: "#8B38DE",
+  // red
+  red42a10: "#D800271A",
   // yellow
   primary,
   warning: primary,
@@ -65,74 +65,24 @@ export const colors = {
   danger: "#FD2C0F",
   // neutral
   secondary: neutral.black,
-  // billing
-  tier1: "#179257",
-  tier2: "#8B38DE",
-  tier3: "#0048F7",
-};
-
-interface BaseTheme {
-  type: Themes;
-  app: App;
-  bg: string;
-  smBg: string;
-  c05Neutral: string;
-  c1Neutral: string;
-  c15Neutral: string;
-  c2Neutral: string;
-  c3Neutral: string;
-  c4Neutral: string;
-  c5Neutral: string;
-  c6Neutral: string;
-  c7Neutral: string;
-  c8Neutral: string;
-  c9Neutral: string;
-  danger: string;
-  hcNeutral: string;
-  hcNeutralFromBg: (hex: string) => string;
-  info: string;
-  lcNeutral: string;
-  link: string;
-  mcNeutral: string;
-  onInfoText: string;
-  onPrimaryText: string;
-  onSuccessText: string;
-  primary: string;
-  secondary: string;
-  success: string;
-  text: string;
-  typography: ReturnType<typeof getTypography>;
-  vlcNeutral: string;
-  warning: string;
-}
+} as const;
 
-type LightsparkSurfaces = {
-  header: BaseTheme;
-  nav: BaseTheme; // eg nav bar
-  content: BaseTheme; // eg main contener
-  controls: BaseTheme; // eg secondary nav
+/* We only want `as const` to affect keys, the values should be widened to strings: */
+export const colors = baseColors as {
+  [K in keyof typeof baseColors]: string;
 };
-export type LightsparkTheme = BaseTheme & LightsparkSurfaces;
 
-declare module "@emotion/react" {
-  export interface Theme extends LightsparkTheme {}
-}
-
-function extend(obj: BaseTheme, rest: Partial<LightsparkTheme>) {
-  return {
-    ...obj,
-    ...rest,
-  } as LightsparkTheme;
-}
+export type ColorKey = keyof typeof colors;
 
-function extendBase(obj: BaseTheme, rest: Partial<BaseTheme>) {
-  return {
-    ...obj,
-    ...rest,
-  } as BaseTheme;
+export function isColorKey(key: string): key is ColorKey {
+  return key in colors;
 }
 
-function hcNeutralFromBg(bgHex: string, defaultHex: string, altHex: string) {
+export function hcNeutralFromBg(
+  bgHex: string,
+  defaultHex: string,
+  altHex: string,
+) {
   const bgRGB = hexToRGB(bgHex);
   const hcRGB = hexToRGB(defaultHex);
   if (!bgRGB || !hcRGB) return defaultHex;
@@ -143,185 +93,6 @@ function hcNeutralFromBg(bgHex: string, defaultHex: string, altHex: string) {
   return defaultHex;
 }
 
-const lightBaseTheme: BaseTheme = {
-  type: Themes.Light,
-  app: App.Lightspark,
-  bg: colors.white,
-  smBg: colors.white,
-  c05Neutral: neutral.gray95,
-  c1Neutral: neutral.gray90,
-  c15Neutral: neutral.gray85,
-  c2Neutral: neutral.gray80,
-  c3Neutral: neutral.gray70,
-  c4Neutral: neutral.gray60,
-  c5Neutral: neutral.gray50,
-  c6Neutral: neutral.gray40,
-  c7Neutral: neutral.gray30,
-  c8Neutral: neutral.gray20,
-  c9Neutral: neutral.gray10,
-  danger: colors.danger,
-  hcNeutral: colors.black,
-  hcNeutralFromBg: (bgHex) =>
-    hcNeutralFromBg(bgHex, colors.black, colors.white),
-  info: colors.blue43,
-  lcNeutral: neutral.gray80,
-  link: colors.blue43,
-  mcNeutral: neutral.gray40,
-  onInfoText: colors.white,
-  onPrimaryText: colors.black,
-  onSuccessText: colors.white,
-  primary: colors.primary,
-  secondary: colors.secondary,
-  success: colors.success,
-  text: colors.black,
-  typography: getTypography(),
-  vlcNeutral: neutral.gray95,
-  warning: colors.warning,
-};
-
-const darkBaseTheme: BaseTheme = {
-  type: Themes.Dark,
-  app: App.Lightspark,
-  bg: colors.black,
-  smBg: colors.black,
-  c05Neutral: neutral.gray5,
-  c1Neutral: neutral.gray10,
-  c15Neutral: neutral.gray15,
-  c2Neutral: neutral.gray20,
-  c3Neutral: neutral.gray30,
-  c4Neutral: neutral.gray40,
-  c5Neutral: neutral.gray50,
-  c6Neutral: neutral.gray60,
-  c7Neutral: neutral.gray70,
-  c8Neutral: neutral.gray80,
-  c9Neutral: neutral.gray90,
-  danger: colors.danger,
-  hcNeutral: colors.white,
-  hcNeutralFromBg: (bgHex) =>
-    hcNeutralFromBg(bgHex, colors.white, colors.black),
-  info: colors.white,
-  lcNeutral: neutral.gray40,
-  link: colors.blue43,
-  mcNeutral: neutral.gray60,
-  onInfoText: colors.white,
-  onPrimaryText: colors.black,
-  onSuccessText: colors.white,
-  primary: colors.primary,
-  secondary: colors.secondary,
-  success: colors.success,
-  text: colors.white,
-  typography: getTypography(),
-  vlcNeutral: neutral.gray20,
-  warning: colors.warning,
-};
-
-const lightTheme = extend(lightBaseTheme, {
-  header: extendBase(lightBaseTheme, {
-    text: colors.gray60,
-  }),
-  nav: extendBase(lightBaseTheme, {
-    text: colors.gray10,
-    secondary: colors.gray40,
-  }),
-  content: extendBase(lightBaseTheme, {
-    bg: colors.white,
-    smBg: colors.white,
-  }),
-  controls: extendBase(lightBaseTheme, {
-    bg: neutral.gray95,
-    smBg: neutral.gray95,
-    text: neutral.gray60,
-    secondary: colors.secondary,
-  }),
-});
-
-const darkTheme = extend(darkBaseTheme, {
-  header: extendBase(darkBaseTheme, {}),
-  nav: extendBase(darkBaseTheme, {}),
-  content: extendBase(darkBaseTheme, {}),
-  controls: extendBase(darkBaseTheme, {
-    bg: neutral.gray40,
-    smBg: neutral.gray40,
-    text: neutral.white,
-    secondary: colors.secondary,
-  }),
-});
-
-const umaLightTheme = extend(lightTheme, {
-  app: App.UmaDocs,
-  bg: uma.background,
-  smBg: uma.background,
-  secondary: uma.secondary,
-  text: uma.black,
-  link: uma.blue,
-  content: extendBase(lightBaseTheme, {
-    bg: uma.background,
-    smBg: uma.background,
-    text: uma.black,
-    secondary: uma.secondary,
-  }),
-  controls: extendBase(lightBaseTheme, {
-    text: uma.black,
-    secondary: uma.secondary,
-    bg: uma.blue90,
-  }),
-});
-
-/**
- * Allows setting typography in cases where a custom font is needed.
- * Setting custom fonts should only be necessary for next fonts.
- */
-export const themeWithTypography = (
-  theme: Theme,
-  typography: ReturnType<typeof getTypography>,
-) => {
-  return extendBase(theme, { typography });
-};
-
-export const themes: {
-  light: LightsparkTheme;
-  dark: LightsparkTheme;
-  uma: {
-    light: LightsparkTheme;
-  };
-} = {
-  light: lightTheme,
-  dark: darkTheme,
-  uma: {
-    light: umaLightTheme,
-  },
-};
-
-export const isDark = (theme: Theme) => theme.type === Themes.Dark;
-export const isLight = (theme: Theme) => theme.type === Themes.Light;
-export const themeOr =
-  (lightValue: string, darkValue: string) =>
-  ({ theme }: { theme: Theme }) => {
-    return isLight(theme) ? lightValue : darkValue;
-  };
-
-export function ifLight(style: CSSInterpolation) {
-  return function ({ theme }: { theme: LightsparkTheme }) {
-    if (theme.type === Themes.Light) {
-      return css`
-        ${style}
-      `;
-    }
-    return "";
-  };
-}
-
-export function ifDark(style: CSSInterpolation) {
-  return function ({ theme }: { theme: LightsparkTheme }) {
-    if (theme.type === Themes.Dark) {
-      return css`
-        ${style}
-      `;
-    }
-    return "";
-  };
-}
-
 /* https://bit.ly/3WUawKh */
 export function luminance(r: number, g: number, b: number) {
   const a = [r, g, b].map(function (v) {
@@ -366,16 +137,6 @@ export function hexToRGBAStr(hex: string, alpha: number) {
   return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
 }
 
-export function useThemeBg() {
-  const theme = useTheme();
-  const bp = useBreakpoints();
-  const isSm = bp.current(Breakpoints.sm);
-  if (isDark(theme)) {
-    return darkGradient;
-  }
-  return isSm ? theme.smBg : theme.bg;
-}
-
 export type ThemeProp = {
   theme: Theme;
 };
diff --git a/packages/ui/src/styles/common.tsx b/packages/ui/src/styles/common.tsx
index a7add4b13..7bc1ab850 100644
--- a/packages/ui/src/styles/common.tsx
+++ b/packages/ui/src/styles/common.tsx
@@ -2,13 +2,8 @@ import type { Theme } from "@emotion/react";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { bp } from "./breakpoints.js";
-import {
-  colors,
-  darkGradient,
-  themeOr,
-  type ThemeProp,
-  type WithTheme,
-} from "./colors.js";
+import { colors, darkGradient } from "./colors.js";
+import { themeOr, type ThemeProp, type WithTheme } from "./themes.js";
 
 export const rootFontSizePx = 12;
 export const rootFontSizeRems = rootFontSizePx / 16;
@@ -60,7 +55,7 @@ function buildStandardContentInset(
 
 export const standardContentInset = buildStandardContentInset(16, 24, 32);
 
-const standardBorderRadiusPx = [0, 4, 8, 12, 16] as const;
+const standardBorderRadiusPx = [0, 4, 8, 12, 16, 18] as const;
 type StandardBorderRadius = (typeof standardBorderRadiusPx)[number];
 export const cardBorderRadiusPx = 16;
 
@@ -80,6 +75,16 @@ export const standardCardShadow = css`
     0px 8px 24px 0px rgba(0, 0, 0, 0.04);
 `;
 
+export const standardCardShadowHard = css`
+  box-shadow:
+    0px 24px 24px -12px rgba(0, 0, 0, 0.06),
+    0px 12px 12px -6px rgba(0, 0, 0, 0.06),
+    0px 6px 6px -3px rgba(0, 0, 0, 0.06),
+    0px 3px 3px -1.5px rgba(0, 0, 0, 0.06),
+    0px 1px 1px -0.5px rgba(0, 0, 0, 0.06),
+    0px 0px 0px 1px rgba(0, 0, 0, 0.06);
+`;
+
 export const pageBorderRadiusPx = 16;
 export const pageBorderRadius = `
   border-radius: ${pageBorderRadiusPx}px;
diff --git a/packages/ui/src/styles/constants.ts b/packages/ui/src/styles/constants.ts
index 1841032a4..0822c067b 100644
--- a/packages/ui/src/styles/constants.ts
+++ b/packages/ui/src/styles/constants.ts
@@ -1,3 +1,8 @@
 export const cssVars = {
   docHeight: "--doc-height",
 };
+
+export const headerHeightPx = 102;
+export const smHeaderHeightPx = 60;
+export const smHeaderLogoMarginLeft = "30px";
+export const navBorderRadiusPx = 12;
diff --git a/packages/ui/src/styles/fields.tsx b/packages/ui/src/styles/fields.tsx
index b865822c9..cc56153fe 100644
--- a/packages/ui/src/styles/fields.tsx
+++ b/packages/ui/src/styles/fields.tsx
@@ -1,8 +1,9 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { useLayoutEffect, useRef, useState } from "react";
-import { colors, themeOr, type ThemeProp, type WithTheme } from "./colors.js";
 import { standardBorderRadius, subtext } from "./common.js";
+import { themeOr, type ThemeProp, type WithTheme } from "./themes.js";
+import { applyTypography, type SimpleTypographyProps } from "./typography.js";
 import { z } from "./z-index.js";
 
 export const maxFieldWidth = "100%";
@@ -35,7 +36,7 @@ export const inputBlockStyle = ({
   cursor: pointer;
   padding: 52.5px;
   ${hasError
-    ? `border-style: solid; border-color: ${colors.danger}; border-width: 2px;`
+    ? `border-style: solid; border-color: ${theme.danger}; border-width: 2px;`
     : hasValue
     ? `border-style: solid; border-color: ${theme.info};`
     : `border-style: dashed;`}
@@ -43,7 +44,6 @@ export const inputBlockStyle = ({
 
 export const textInputPlaceholderColor = ({ theme }: ThemeProp) =>
   theme.c4Neutral;
-export const textInputColor = ({ theme }: ThemeProp) => theme.text;
 export const textInputFontWeight = 600;
 export const textInputBorderRadiusPx = 8;
 export const textInputPaddingPx = 12;
@@ -64,12 +64,17 @@ const textInputActiveStyles = ({
 }>) => css`
   border-color: ${textInputBorderColorFocused({ theme })};
   border-width: 2px;
-  color: ${textInputColor({ theme })};
   padding: ${textInputPaddingPx - 1}px;
   ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
   ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
 `;
 
+export const defaultTextInputTypography = {
+  type: "Body",
+  size: "Small",
+  color: "text",
+} as const;
+
 export const textInputStyle = ({
   theme,
   active,
@@ -77,6 +82,7 @@ export const textInputStyle = ({
   hasError,
   paddingLeftPx,
   paddingRightPx,
+  typography,
 }: WithTheme<{
   // In some cases we want to show an active state when another element is focused.
   active?: boolean | undefined;
@@ -84,6 +90,7 @@ export const textInputStyle = ({
   hasError?: boolean | undefined;
   paddingLeftPx?: number | undefined;
   paddingRightPx?: number | undefined;
+  typography?: SimpleTypographyProps | undefined;
 }>) => css`
   border-radius: ${textInputBorderRadiusPx}px;
   background-color: ${disabled ? theme.vlcNeutral : theme.bg};
@@ -106,11 +113,14 @@ export const textInputStyle = ({
   border-color: ${hasError ? theme.danger : textInputBorderColor({ theme })};
   line-height: 22px;
   outline: none;
-  /* Use low contrast by default. Some fields, eg login, need high contrast simply
-     because of quirks with default autofill styles. Clicking in to an autofilled value
-     does not change the color of the text, it just uses the default field color */
-  color: ${textInputColor({ theme })};
-  font-size: 14px;
+
+  ${applyTypography(
+    theme,
+    typography?.type || defaultTextInputTypography.type,
+    typography?.size || defaultTextInputTypography.size,
+    typography?.color || defaultTextInputTypography.color,
+  )}
+
   width: ${fieldWidth};
   max-width: ${maxFieldWidth};
   text-overflow: ellipsis;
diff --git a/packages/ui/src/styles/fonts/typography/Body.tsx b/packages/ui/src/styles/fonts/typography/Body.tsx
deleted file mode 100644
index ce3f671a1..000000000
--- a/packages/ui/src/styles/fonts/typography/Body.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client";
-
-import styled from "@emotion/styled";
-import { colors } from "../../colors.js";
-import { getTypographyString, TokenSize } from "../typographyTokens.js";
-
-interface Props {
-  children: React.ReactNode;
-  size?: TokenSize;
-  color?: string | undefined;
-}
-
-export const Body = ({ children, color, size = TokenSize.Medium }: Props) => {
-  return (
-    <StyledBody size={size} color={color}>
-      {children}
-    </StyledBody>
-  );
-};
-
-/**
- * Images rendered by the markdown renderer are wrapped in a paragraph tag,
- * so we need to use a span and set it display: block to mimic a paragraph
- * element.
- */
-export const StyledBody = styled.span<Props>`
-  display: block;
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-    return size
-      ? getTypographyString(theme.typography[theme.app].Body[size])
-      : "";
-  }}
-`;
diff --git a/packages/ui/src/styles/fonts/typography/BodyStrong.tsx b/packages/ui/src/styles/fonts/typography/BodyStrong.tsx
deleted file mode 100644
index 799c3ca41..000000000
--- a/packages/ui/src/styles/fonts/typography/BodyStrong.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client";
-
-import styled from "@emotion/styled";
-import { colors } from "../../colors.js";
-import { getTypographyString, TokenSize } from "../typographyTokens.js";
-
-interface Props {
-  children: React.ReactNode;
-  size?: TokenSize;
-  color?: string | undefined;
-}
-
-export const BodyStrong = ({
-  children,
-  color,
-  size = TokenSize.Medium,
-}: Props) => {
-  return (
-    <StyledBodyStrong size={size} color={color}>
-      {children}
-    </StyledBodyStrong>
-  );
-};
-
-/**
- * Images rendered by the markdown renderer are wrapped in a paragraph tag,
- * so we need to use a span and set it display: block to mimic a paragraph
- * element.
- */
-export const StyledBodyStrong = styled.span<Props>`
-  display: block;
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-    return size
-      ? getTypographyString(theme.typography[theme.app]["Body Strong"][size])
-      : "";
-  }}
-`;
diff --git a/packages/ui/src/styles/fonts/typography/Code.tsx b/packages/ui/src/styles/fonts/typography/Code.tsx
deleted file mode 100644
index 55360be5b..000000000
--- a/packages/ui/src/styles/fonts/typography/Code.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client";
-
-import styled from "@emotion/styled";
-import { getTypographyString, TokenSize } from "../typographyTokens.js";
-
-interface Props {
-  children: React.ReactNode;
-  size?: TokenSize;
-}
-
-export const Code = ({ children, size = TokenSize.Medium }: Props) => {
-  return <StyledCode size={size}>{children}</StyledCode>;
-};
-
-export const StyledCode = styled.div<Props>`
-  ${({ theme, size }) => {
-    return size
-      ? getTypographyString(theme.typography[theme.app].Code[size])
-      : "";
-  }}
-`;
diff --git a/packages/ui/src/styles/fonts/typography/Display.tsx b/packages/ui/src/styles/fonts/typography/Display.tsx
deleted file mode 100644
index 29b2c8b3c..000000000
--- a/packages/ui/src/styles/fonts/typography/Display.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-
-import styled from "@emotion/styled";
-import { select } from "../../../utils/emotion.js";
-import { colors } from "../../colors.js";
-import { getTypographyString, TokenSize } from "../typographyTokens.js";
-
-export const ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"] as const;
-type Element = (typeof ELEMENTS)[number];
-
-interface Props {
-  children: React.ReactNode;
-  size?: TokenSize;
-  element?: Element;
-  color?: string | undefined;
-}
-
-export const Display = ({
-  children,
-  color,
-  size = TokenSize.Medium,
-  element = "h1",
-}: Props) => {
-  return (
-    <StyledDisplay as={element} size={size} color={color}>
-      {children}
-    </StyledDisplay>
-  );
-};
-
-const StyledDisplay = styled.span<Props>`
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-    return size
-      ? getTypographyString(theme.typography[theme.app].Display[size])
-      : "";
-  }}
-`;
-
-export function displaySelector(element: Element) {
-  return `${element}${select(StyledDisplay)}`;
-}
diff --git a/packages/ui/src/styles/fonts/typography/Label.tsx b/packages/ui/src/styles/fonts/typography/Label.tsx
deleted file mode 100644
index 7a9df0238..000000000
--- a/packages/ui/src/styles/fonts/typography/Label.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client";
-
-import styled from "@emotion/styled";
-import { colors } from "../../colors.js";
-import { getTypographyString, TokenSize } from "../typographyTokens.js";
-
-interface Props {
-  children: React.ReactNode;
-  size?: TokenSize;
-  color?: string | undefined;
-}
-
-export const Label = ({ children, color, size = TokenSize.Medium }: Props) => {
-  return (
-    <StyledLabel size={size} color={color}>
-      {children}
-    </StyledLabel>
-  );
-};
-
-export const StyledLabel = styled.label<Props>`
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-    return size
-      ? getTypographyString(theme.typography[theme.app].Label[size])
-      : "";
-  }}
-  cursor: inherit;
-`;
diff --git a/packages/ui/src/styles/fonts/typography/LabelModerate.tsx b/packages/ui/src/styles/fonts/typography/LabelModerate.tsx
deleted file mode 100644
index 2edfc0c3f..000000000
--- a/packages/ui/src/styles/fonts/typography/LabelModerate.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client";
-
-import styled from "@emotion/styled";
-import { colors } from "../../colors.js";
-import { getTypographyString, TokenSize } from "../typographyTokens.js";
-
-interface Props {
-  children: React.ReactNode;
-  size?: TokenSize;
-  color?: string | undefined;
-}
-
-export const LabelModerate = ({
-  children,
-  color,
-  size = TokenSize.Medium,
-}: Props) => {
-  return (
-    <StyledLabelModerate size={size} color={color}>
-      {children}
-    </StyledLabelModerate>
-  );
-};
-
-export const StyledLabelModerate = styled.label<Props>`
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-    return size
-      ? getTypographyString(theme.typography[theme.app]["Label Moderate"][size])
-      : "";
-  }}
-  cursor: inherit;
-
-  * {
-    color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-    ${({ theme, size }) => {
-      return size
-        ? getTypographyString(
-            theme.typography[theme.app]["Label Moderate"][size],
-          )
-        : "";
-    }}
-  }
-`;
diff --git a/packages/ui/src/styles/fonts/typography/LabelStrong.tsx b/packages/ui/src/styles/fonts/typography/LabelStrong.tsx
deleted file mode 100644
index 96d25c679..000000000
--- a/packages/ui/src/styles/fonts/typography/LabelStrong.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-
-import styled from "@emotion/styled";
-import { colors } from "../../colors.js";
-import { getTypographyString, TokenSize } from "../typographyTokens.js";
-
-interface Props {
-  children: React.ReactNode;
-  size?: TokenSize;
-  color?: string | undefined;
-}
-
-export const LabelStrong = ({
-  children,
-  color,
-  size = TokenSize.Medium,
-}: Props) => {
-  return (
-    <StyledLabelStrong size={size} color={color}>
-      {children}
-    </StyledLabelStrong>
-  );
-};
-
-export const StyledLabelStrong = styled.label<Props>`
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-    return size
-      ? getTypographyString(theme.typography[theme.app]["Label Strong"][size])
-      : "";
-  }}
-  cursor: inherit;
-
-  * {
-    color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-    ${({ theme, size }) => {
-      return size
-        ? getTypographyString(theme.typography[theme.app]["Label Strong"][size])
-        : "";
-    }}
-  }
-`;
diff --git a/packages/ui/src/styles/fonts/typography/Overline.tsx b/packages/ui/src/styles/fonts/typography/Overline.tsx
deleted file mode 100644
index c72d1ce67..000000000
--- a/packages/ui/src/styles/fonts/typography/Overline.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-import styled from "@emotion/styled";
-import { colors } from "../../colors.js";
-import { getTypographyString, TokenSize } from "../typographyTokens.js";
-
-interface Props {
-  children: React.ReactNode;
-  size?: TokenSize;
-  color?: string | undefined;
-}
-
-export const Overline = ({
-  children,
-  color,
-  size = TokenSize.Medium,
-}: Props) => {
-  return (
-    <StyledOverline size={size} color={color}>
-      {children}
-    </StyledOverline>
-  );
-};
-
-export const StyledOverline = styled.span<Props>`
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-    return size
-      ? getTypographyString(theme.typography[theme.app].Overline[size])
-      : "";
-  }}
-  cursor: inherit;
-`;
diff --git a/packages/ui/src/styles/fonts/typography/Title.tsx b/packages/ui/src/styles/fonts/typography/Title.tsx
deleted file mode 100644
index 400e0beb5..000000000
--- a/packages/ui/src/styles/fonts/typography/Title.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-
-import styled from "@emotion/styled";
-import { colors } from "../../colors.js";
-import { getTypographyString, TokenSize } from "../typographyTokens.js";
-
-interface Props {
-  children: React.ReactNode;
-  size?: TokenSize;
-  color?: string | undefined;
-  block?: boolean;
-}
-
-export const Title = ({
-  children,
-  color,
-  size = TokenSize.Medium,
-  block = false,
-}: Props) => {
-  return (
-    <StyledTitle size={size} color={color} block={block}>
-      {children}
-    </StyledTitle>
-  );
-};
-
-export const StyledTitle = styled.span<Props>`
-  ${({ block }) => (block ? "display: block;" : "")}
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-    return size
-      ? getTypographyString(theme.typography[theme.app].Title[size])
-      : "";
-  }}
-`;
diff --git a/packages/ui/src/styles/fonts/typography/index.ts b/packages/ui/src/styles/fonts/typography/index.ts
deleted file mode 100644
index 9e86f76fd..000000000
--- a/packages/ui/src/styles/fonts/typography/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export { Article } from "./Article.js";
-export { Body } from "./Body.js";
-export { BodyStrong } from "./BodyStrong.js";
-export { Code } from "./Code.js";
-export { Display } from "./Display.js";
-export { Headline } from "./Headline.js";
-export { Label } from "./Label.js";
-export { LabelModerate } from "./LabelModerate.js";
-export { LabelStrong } from "./LabelStrong.js";
-export { Overline } from "./Overline.js";
-export { Title } from "./Title.js";
diff --git a/packages/ui/src/styles/fonts/typographyTokens.ts b/packages/ui/src/styles/fonts/typographyTokens.ts
deleted file mode 100644
index 086a6e7d2..000000000
--- a/packages/ui/src/styles/fonts/typographyTokens.ts
+++ /dev/null
@@ -1,943 +0,0 @@
-export enum App {
-  Lightspark = "Lightspark",
-  UmaDocs = "UmaDocs",
-}
-
-const FONT_FAMILIES = {
-  main: "Montserrat",
-  code: "Monaco",
-};
-
-const LINE_HEIGHTS = {
-  [App.UmaDocs]: {
-    "5xl": "72px",
-    "4xl": "60px",
-    "3xl": "44px",
-    "2xl": "40px",
-    xl: "36px",
-    lg: "32px",
-    md: "28px",
-    sm: "24px",
-    xs: "20px",
-    "2xs": "16px",
-  },
-  [App.Lightspark]: {
-    "7xl": "72px",
-    "6xl": "60px",
-    "5xl": "44px",
-    "4xl": "40px",
-    "3xl": "36px",
-    "2xl": "32px",
-    xl: "28px",
-    lg: "24px",
-    md: "20px",
-    sm: "18px",
-    xs: "16px",
-    "2xs": "14px",
-  },
-};
-
-const FONT_WEIGHTS = {
-  main: {
-    Bold: 700,
-    SemiBold: 600,
-    Medium: 500,
-  },
-  code: {
-    Bold: 700,
-    Regular: 400,
-  },
-};
-
-const FONT_SIZE = {
-  [App.UmaDocs]: {
-    "2xs": "11px",
-    xs: "12px",
-    sm: "14px",
-    md: "16px",
-    lg: "20px",
-    xl: "24px",
-    "2xl": "28px",
-    "3xl": "32px",
-    "4xl": "36px",
-    "5xl": "48px",
-    "6xl": "64px",
-  },
-  [App.Lightspark]: {
-    "2xs": "10px",
-    xs: "12px",
-    sm: "14px",
-    md: "16px",
-    lg: "20px",
-    xl: "24px",
-    "2xl": "28px",
-    "3xl": "32px",
-    "4xl": "36px",
-    "5xl": "48px",
-    "6xl": "64px",
-  },
-};
-
-const LETTER_SPACING = {
-  [App.UmaDocs]: {
-    tight: "-.02em",
-    normal: "0",
-    loose: ".1em",
-  },
-  [App.Lightspark]: {
-    "tight-max": "-4%",
-    "tight-high": "-3%",
-    "tight-medium": "-2%",
-    "tight-low": "-0.5%",
-    normal: "0",
-    "loose-max": "1.44px",
-  },
-};
-
-const TEXT_CASE = {
-  none: "none",
-  uppercase: "uppercase",
-};
-
-const TEXT_DECORATION = {
-  none: "none",
-};
-
-const PARAGRAPH_INDENT = {
-  0: "0px",
-};
-
-const PARAGRAPH_SPACING = {
-  default: "default",
-  0: "0",
-  16: "16px",
-  40: "40px",
-};
-
-export interface FontFamilies {
-  main: string;
-  code: string;
-}
-
-interface Token {
-  "font-family": string;
-  "font-weight": string;
-  "line-height": string;
-  "font-size": string;
-  "letter-spacing": string;
-  "paragraph-spacing": string;
-  "paragraph-indent": string;
-  "text-case": string;
-  "text-decoration": string;
-}
-
-export enum TokenSize {
-  Large = "Large",
-  Medium = "Medium",
-  Small = "Small",
-}
-
-export const getTypography = (customFontFamilies?: FontFamilies) => {
-  const fontFamilies = customFontFamilies ?? FONT_FAMILIES;
-  return {
-    fontFamilies,
-    lineHeights: LINE_HEIGHTS,
-    fontWeights: FONT_WEIGHTS,
-    fontSize: FONT_SIZE,
-    letterSpacing: LETTER_SPACING,
-    textCase: TEXT_CASE,
-    textDecoration: TEXT_DECORATION,
-    paragraphIndent: PARAGRAPH_INDENT,
-    paragraphSpacing: PARAGRAPH_SPACING,
-    [App.Lightspark]: {
-      Display: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark]["7xl"]}`,
-          "font-size": `${FONT_SIZE[App.Lightspark]["6xl"]}`,
-          "letter-spacing": "-2.56px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark]["6xl"]}`,
-          "font-size": `${FONT_SIZE[App.Lightspark]["5xl"]}`,
-          "letter-spacing": "-1.92px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark]["5xl"]}`,
-          "font-size": `${FONT_SIZE[App.Lightspark]["4xl"]}`,
-          "letter-spacing": "-1.44px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      Headline: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark]["4xl"]}`,
-          "font-size": `${FONT_SIZE[App.Lightspark]["3xl"]}`,
-          "letter-spacing": "-.96px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark]["3xl"]}`,
-          "font-size": `${FONT_SIZE[App.Lightspark]["2xl"]}`,
-          "letter-spacing": "-.84px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark]["2xl"]}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].xl}`,
-          "letter-spacing": "-.72px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      Title: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].xl}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].lg}`,
-          "letter-spacing": "-.4px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].lg}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].md}`,
-          "letter-spacing": "-.32x",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].md}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].sm}`,
-          "letter-spacing": "-.28px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      Body: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Medium}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].xl}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].lg}`,
-          "letter-spacing": "-.08px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Medium}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].lg}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].md}`,
-          "letter-spacing": "-.07px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Medium}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].md}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].sm}`,
-          "letter-spacing": "-.06px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      "Body Strong": {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].xl}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].lg}`,
-          "letter-spacing": "-.08px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].lg}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].md}`,
-          "letter-spacing": "-.07px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].md}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].sm}`,
-          "letter-spacing": "-.06px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      Label: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Medium}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].md}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].sm}`,
-          "letter-spacing": "-.07px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Medium}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].xs}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].xs}`,
-          "letter-spacing": "-.06px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Medium}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark]["2xs"]}`,
-          "font-size": `${FONT_SIZE[App.Lightspark]["2xs"]}`,
-          "letter-spacing": "-.05px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      "Label Moderate": {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].md}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].sm}`,
-          "letter-spacing": "-.07px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].xs}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].xs}`,
-          "letter-spacing": "-.06px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark]["2xs"]}`,
-          "font-size": `${FONT_SIZE[App.Lightspark]["2xs"]}`,
-          "letter-spacing": "-.05px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      "Label Strong": {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].md}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].sm}`,
-          "letter-spacing": "-.07px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].xs}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].xs}`,
-          "letter-spacing": "-.06px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark]["2xs"]}`,
-          "font-size": `${FONT_SIZE[App.Lightspark]["2xs"]}`,
-          "letter-spacing": "-.05px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      Overline: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].lg}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].md}`,
-          "letter-spacing": "1.92px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.uppercase}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].md}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].sm}`,
-          "letter-spacing": "1.68px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.uppercase}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].xs}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].xs}`,
-          "letter-spacing": "1.44px",
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.uppercase}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      Code: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.code}`,
-          "font-weight": `${FONT_WEIGHTS.code.Regular}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].xl}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].lg}`,
-          "letter-spacing": `${LETTER_SPACING[App.Lightspark].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.code}`,
-          "font-weight": `${FONT_WEIGHTS.code.Regular}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].lg}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].md}`,
-          "letter-spacing": `${LETTER_SPACING[App.Lightspark].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.code}`,
-          "font-weight": `${FONT_WEIGHTS.code.Regular}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].md}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].sm}`,
-          "letter-spacing": `${LETTER_SPACING[App.Lightspark].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      "Code Strong": {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.code}`,
-          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].lg}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].md}`,
-          "letter-spacing": `${LETTER_SPACING[App.Lightspark].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.code}`,
-          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].md}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].sm}`,
-          "letter-spacing": `${LETTER_SPACING[App.Lightspark].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.code}`,
-          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.Lightspark].xs}`,
-          "font-size": `${FONT_SIZE[App.Lightspark].xs}`,
-          "letter-spacing": `${LETTER_SPACING[App.Lightspark].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING[0]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-    },
-    [App.UmaDocs]: {
-      Display: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs]["5xl"]}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs]["6xl"]}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].tight}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs]["4xl"]}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs]["5xl"]}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].tight}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs]["3xl"]}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs]["4xl"]}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].tight}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      Headline: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs]["2xl"]}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs]["3xl"]}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].tight}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING[16]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].xl}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs]["2xl"]}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].tight}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING[16]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].lg}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].xl}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].tight}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING[16]}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      Title: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].md}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].lg}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].sm}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].md}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].xs}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].sm}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      Body: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].sm}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].md}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Medium}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].sm}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].sm}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Medium}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].sm}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].xs}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      "Body Strong": {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].sm}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].md}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].sm}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].sm}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].sm}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].xs}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      Label: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].xs}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].sm}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs]["2xs"]}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].xs}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs]["2xs"]}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs]["2xs"]}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      "Label Moderate": {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].xs}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].sm}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs]["2xs"]}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].xs}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs]["2xs"]}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs]["2xs"]}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      "Label Strong": {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].xs}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].sm}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs]["2xs"]}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].xs}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs]["2xs"]}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs]["2xs"]}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      Overline: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].sm}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].md}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].loose}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.uppercase}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].xs}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].sm}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].loose}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.uppercase}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.main}`,
-          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs]["2xs"]}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].xs}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].loose}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.uppercase}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      Code: {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.code}`,
-          "font-weight": `${FONT_WEIGHTS.code.Regular}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].sm}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].md}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.code}`,
-          "font-weight": `${FONT_WEIGHTS.code.Regular}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].sm}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].sm}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.code}`,
-          "font-weight": `${FONT_WEIGHTS.code.Regular}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].xs}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].xs}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-      "Code Strong": {
-        [TokenSize.Large]: {
-          "font-family": `${fontFamilies.code}`,
-          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].sm}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].md}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Medium]: {
-          "font-family": `${fontFamilies.code}`,
-          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].sm}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].sm}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-        [TokenSize.Small]: {
-          "font-family": `${fontFamilies.code}`,
-          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
-          "line-height": `${LINE_HEIGHTS[App.UmaDocs].sm}`,
-          "font-size": `${FONT_SIZE[App.UmaDocs].xs}`,
-          "letter-spacing": `${LETTER_SPACING[App.UmaDocs].normal}`,
-          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
-          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
-          "text-case": `${TEXT_CASE.none}`,
-          "text-decoration": `${TEXT_DECORATION.none}`,
-        },
-      },
-    },
-  };
-};
-
-export const getTypographyString = (token: Token) => {
-  return Object.entries(token)
-    .map((entry) => {
-      // Transform any non-css token properties into valid css.
-      switch (entry[0]) {
-        case "paragraph-indent":
-          return `text-indent: ${entry[1]};`;
-        case "text-case":
-          return `text-transform: ${entry[1]};`;
-        default:
-          return `${entry[0]}: ${entry[1]};`;
-      }
-    })
-    .join("");
-};
diff --git a/packages/ui/src/styles/global.tsx b/packages/ui/src/styles/global.tsx
index f9414fdf8..100335dcd 100644
--- a/packages/ui/src/styles/global.tsx
+++ b/packages/ui/src/styles/global.tsx
@@ -3,12 +3,12 @@ import { useEffect } from "react";
 import "react-tooltip/dist/react-tooltip.css";
 import "../static/fonts.css";
 import { bp, BreakpointRanges } from "./breakpoints.js";
-import { useThemeBg, type ThemeProp } from "./colors.js";
 import { rootFontSizeRems, standardLineHeightEms } from "./common.js";
 import { cssVars } from "./constants.js";
+import { useThemeBg, type ThemeProp } from "./themes.js";
 
 export const globalComponentStyles = ({ theme }: ThemeProp) => css`
-  @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 
   html {
     font-size: ${rootFontSizeRems}rem;
@@ -80,6 +80,11 @@ export const globalComponentStyles = ({ theme }: ThemeProp) => css`
   strong {
     font-weight: 700;
   }
+
+  // Recaptcha badge invisibility
+  .grecaptcha-badge {
+    visibility: hidden;
+  }
 `;
 
 export function GlobalStyles() {
diff --git a/packages/ui/src/styles/themes.tsx b/packages/ui/src/styles/themes.tsx
new file mode 100644
index 000000000..ac92f7648
--- /dev/null
+++ b/packages/ui/src/styles/themes.tsx
@@ -0,0 +1,444 @@
+import type { CSSInterpolation } from "@emotion/css";
+import type { Theme } from "@emotion/react";
+import { css, useTheme } from "@emotion/react";
+import merge from "deepmerge";
+import { type IconName } from "../components/Icon/types.js";
+import { Breakpoints, useBreakpoints } from "./breakpoints.js";
+import { buttonsThemeBase, defaultButtonsTheme } from "./buttons.js";
+import {
+  colors,
+  darkGradient,
+  hcNeutralFromBg,
+  isColorKey,
+  type ColorKey,
+} from "./colors.js";
+import {
+  TypographyGroup,
+  getTypography,
+  type FontFamilies,
+} from "./tokens/typography.js";
+
+export enum Themes {
+  Light = "light",
+  Dark = "dark",
+  LightsparkDocsLight = "lightsparkDocsLight",
+  LightsparkDocsDark = "lightsparkDocsDark",
+  UmameDocsLight = "umameDocsLight",
+  UmameDocsDark = "umameDocsDark",
+  BridgeLight = "bridgeLight",
+  BridgeDark = "bridgeDark",
+}
+
+const baseThemeColors = {
+  bg: colors.white,
+  smBg: colors.white,
+  c05Neutral: colors.gray95,
+  c1Neutral: colors.gray90,
+  c15Neutral: colors.gray85,
+  c2Neutral: colors.gray80,
+  c3Neutral: colors.gray70,
+  c4Neutral: colors.gray60,
+  c5Neutral: colors.gray50,
+  c6Neutral: colors.gray40,
+  c7Neutral: colors.gray30,
+  c8Neutral: colors.gray20,
+  c9Neutral: colors.gray10,
+  danger: colors.danger,
+  hcNeutral: colors.black,
+  info: colors.blue43,
+  lcNeutral: colors.gray80,
+  link: colors.blue43,
+  mcNeutral: colors.gray40,
+  onInfoText: colors.white,
+  onPrimaryText: colors.black,
+  onSuccessText: colors.white,
+  primary: colors.primary,
+  secondary: colors.secondary,
+  success: colors.success,
+  text: colors.black,
+  vlcNeutral: colors.gray95,
+  warning: colors.warning,
+};
+type ThemeColorKey = keyof typeof baseThemeColors;
+export const themeOrColorKeyValues = [
+  ...Object.keys(baseThemeColors),
+  ...Object.keys(colors),
+] as const;
+
+export type SurfaceThemeColorKey = [keyof LightsparkSurfaces, ThemeColorKey];
+export type ThemeOrColorKey = ThemeColorKey | ColorKey | SurfaceThemeColorKey; // to select a sub-surface color
+
+const baseTheme = {
+  ...baseThemeColors,
+  // base type should be Themes but default to Light
+  type: Themes.Light as Themes,
+  typography: getTypography(TypographyGroup.Lightspark),
+  hcNeutralFromBg: (bgHex: string) =>
+    hcNeutralFromBg(bgHex, colors.black, colors.white),
+  buttons: defaultButtonsTheme,
+  loading: "LoadingSpinner" as IconName,
+};
+
+type BaseTheme = typeof baseTheme;
+
+type LightsparkSurfaces = {
+  header: BaseTheme;
+  nav: BaseTheme; // eg nav bar
+  content: BaseTheme; // eg main contener
+  controls: BaseTheme; // eg secondary nav
+};
+export type LightsparkTheme = BaseTheme & LightsparkSurfaces;
+
+declare module "@emotion/react" {
+  export interface Theme extends LightsparkTheme {}
+}
+
+const lightBaseTheme: BaseTheme = baseTheme;
+
+const darkBaseTheme: BaseTheme = {
+  type: Themes.Dark,
+  bg: colors.black,
+  smBg: colors.black,
+  c05Neutral: colors.gray5,
+  c1Neutral: colors.gray10,
+  c15Neutral: colors.gray15,
+  c2Neutral: colors.gray20,
+  c3Neutral: colors.gray30,
+  c4Neutral: colors.gray40,
+  c5Neutral: colors.gray50,
+  c6Neutral: colors.gray60,
+  c7Neutral: colors.gray70,
+  c8Neutral: colors.gray80,
+  c9Neutral: colors.gray90,
+  danger: colors.danger,
+  hcNeutral: colors.white,
+  hcNeutralFromBg: (bgHex) =>
+    hcNeutralFromBg(bgHex, colors.white, colors.black),
+  info: colors.white,
+  lcNeutral: colors.gray40,
+  link: colors.blue43,
+  mcNeutral: colors.gray60,
+  onInfoText: colors.white,
+  onPrimaryText: colors.black,
+  onSuccessText: colors.white,
+  primary: colors.primary,
+  secondary: colors.secondary,
+  success: colors.success,
+  text: colors.white,
+  typography: getTypography(TypographyGroup.Lightspark),
+  vlcNeutral: colors.gray20,
+  warning: colors.warning,
+  buttons: defaultButtonsTheme,
+  loading: "LoadingSpinner",
+};
+
+const lightTheme = extend(lightBaseTheme, {
+  header: extendBase(lightBaseTheme, {
+    text: colors.gray60,
+  }),
+  nav: extendBase(lightBaseTheme, {
+    text: colors.gray10,
+    secondary: colors.gray40,
+  }),
+  content: extendBase(lightBaseTheme, {
+    bg: colors.white,
+    smBg: colors.white,
+  }),
+  controls: extendBase(lightBaseTheme, {
+    bg: colors.gray95,
+    smBg: colors.gray95,
+    text: colors.gray60,
+    secondary: colors.secondary,
+  }),
+});
+
+const darkTheme = extend(darkBaseTheme, {
+  header: extendBase(darkBaseTheme, {}),
+  nav: extendBase(darkBaseTheme, {}),
+  content: extendBase(darkBaseTheme, {}),
+  controls: extendBase(darkBaseTheme, {
+    bg: colors.gray40,
+    smBg: colors.gray40,
+    text: colors.white,
+    secondary: colors.secondary,
+  }),
+});
+
+const umameDocsLightTheme = extend(lightTheme, {
+  type: Themes.UmameDocsLight,
+  bg: colors.gray98,
+  smBg: colors.gray98,
+  secondary: colors.grayBlue43,
+  text: colors.grayBlue9,
+  link: colors.blue39,
+  typography: getTypography(TypographyGroup.UmameDocs, {
+    main: "Manrope",
+    code: "Monaco",
+  }),
+  content: extendBase(lightBaseTheme, {
+    bg: colors.gray98,
+    smBg: colors.gray98,
+    text: colors.grayBlue9,
+    secondary: colors.grayBlue43,
+  }),
+  controls: extendBase(lightBaseTheme, {
+    text: colors.grayBlue9,
+    secondary: colors.grayBlue43,
+    bg: colors.grayBlue94,
+  }),
+});
+
+const umameDocsDarkTheme = extend(darkTheme, {
+  type: Themes.UmameDocsDark,
+  bg: colors.gray98,
+  smBg: colors.gray98,
+  secondary: colors.grayBlue43,
+  text: colors.grayBlue9,
+  link: colors.blue39,
+  typography: getTypography(TypographyGroup.UmameDocs, {
+    main: "Manrope",
+    code: "Monaco",
+  }),
+});
+
+const lightsparkDocsLightTheme = extend(lightTheme, {
+  type: Themes.LightsparkDocsLight,
+  typography: getTypography(TypographyGroup.LightsparkDocs),
+});
+
+const lightsparkDocsDarkTheme = extend(darkTheme, {
+  type: Themes.LightsparkDocsDark,
+  typography: getTypography(TypographyGroup.LightsparkDocs),
+});
+
+const bridgeBaseSettings = {
+  secondary: colors.grayBlue43,
+  mcNeutral: colors.grayBlue43,
+  typography: getTypography(TypographyGroup.Bridge, {
+    main: "Manrope",
+    code: "Monaco",
+  }),
+  buttons: merge<typeof buttonsThemeBase>(buttonsThemeBase, {
+    defaultTypography: "Title",
+    defaultSize: "Medium",
+    defaultBorderRadius: 8,
+    defaultBorderWidth: 0,
+    kinds: {
+      primary: {
+        defaultBackgroundColor: "blue39",
+        defaultHoverBackgroundColor: "blue37",
+      },
+      ghost: {
+        defaultBackgroundColor: "transparent",
+        defaultBorderWidth: 0,
+        defaultHoverBackgroundColor: "transparent",
+        defaultHoverBorderColor: "transparent",
+        defaultPaddingsY: {
+          ExtraSmall: 0,
+          Small: 0,
+          Schmedium: 0,
+          Medium: 0,
+          Mlarge: 0,
+          Large: 0,
+        },
+      },
+      secondary: {
+        defaultBackgroundColor: "transparent",
+        defaultHoverBackgroundColor: "grayBlue94",
+        defaultBorderColor: "grayBlue80",
+        defaultBorderWidth: 1,
+      },
+    },
+  }),
+};
+
+const bridgeLightTheme = extend(lightTheme, {
+  ...bridgeBaseSettings,
+  type: Themes.BridgeLight,
+  loading: "UmaBridgeLoading",
+  bg: colors.gray98,
+  smBg: colors.gray98,
+  text: colors.grayBlue9,
+  secondary: colors.grayBlue43,
+});
+
+const bridgeDarkTheme = extend(darkTheme, {
+  ...bridgeBaseSettings,
+  type: Themes.BridgeDark,
+});
+
+export const themes = {
+  [Themes.Light]: lightTheme,
+  [Themes.Dark]: darkTheme,
+  [Themes.LightsparkDocsLight]: lightsparkDocsLightTheme,
+  [Themes.LightsparkDocsDark]: lightsparkDocsDarkTheme,
+  [Themes.UmameDocsLight]: umameDocsLightTheme,
+  [Themes.UmameDocsDark]: umameDocsDarkTheme,
+  [Themes.BridgeLight]: bridgeLightTheme,
+  [Themes.BridgeDark]: bridgeDarkTheme,
+} as const;
+
+function extend(obj: BaseTheme, rest: Partial<LightsparkTheme>) {
+  return {
+    ...obj,
+    ...rest,
+  } as LightsparkTheme;
+}
+
+function extendBase(obj: BaseTheme, rest: Partial<BaseTheme>) {
+  return {
+    ...obj,
+    ...rest,
+  } as LightsparkTheme;
+}
+
+/* Next has generated font names so we need to update them at runtime: */
+export function setFonts(theme: Theme, fontFamilies: FontFamilies) {
+  return {
+    ...theme,
+    typography: getTypography(theme.typography.group, fontFamilies),
+  };
+}
+
+export function isThemeColorKey(key: unknown): key is ThemeColorKey {
+  return Boolean(key && typeof key === "string" && key in baseThemeColors);
+}
+
+export function isThemeOrColorKey(key: unknown): key is ThemeOrColorKey {
+  return Boolean(
+    typeof key === "string" &&
+      (isThemeColorKey(key) ||
+        isColorKey(key) ||
+        (Array.isArray(key) && key.length === 2 && isThemeColorKey(key[1]))),
+  );
+}
+
+export function getColor(
+  theme: LightsparkTheme,
+  key?: ThemeOrColorKey | undefined,
+) {
+  if (key && isThemeColorKey(key)) {
+    return theme[key];
+  } else if (key && Array.isArray(key)) {
+    const [surface, colorKey] = key;
+    const surfaceTheme = theme[surface];
+    const color = surfaceTheme[colorKey];
+    return color;
+  } else if (key && isColorKey(key)) {
+    return colors[key];
+  }
+  return theme.text;
+}
+
+export type FontColorKey = ThemeOrColorKey | "inherit";
+
+export function getFontColor(
+  theme: LightsparkTheme,
+  key?: FontColorKey | undefined,
+  defaultColor: ThemeColorKey | "inherit" = "inherit",
+) {
+  if (key === "inherit" || (!key && defaultColor === "inherit")) {
+    return "inherit";
+  }
+  return getColor(theme, key);
+}
+
+export type BackgroundColorKey = ThemeOrColorKey | "transparent";
+export type BackgroundColorKeyArg =
+  | BackgroundColorKey
+  | [BackgroundColorKey, BackgroundColorKey];
+
+export function isBackgroundColorKey(key: unknown): key is BackgroundColorKey {
+  return key === "transparent" || isThemeOrColorKey(key);
+}
+
+export function isBackgroundColorKeyTuple(
+  key: unknown,
+): key is [BackgroundColorKey, BackgroundColorKey] {
+  return (
+    Array.isArray(key) &&
+    key.length === 2 &&
+    isBackgroundColorKey(key[0]) &&
+    isBackgroundColorKey(key[1])
+  );
+}
+
+export function getBackgroundColor(
+  theme: LightsparkTheme,
+  key?: BackgroundColorKeyArg | undefined,
+  defaultColor: BackgroundColorKeyArg = "transparent",
+) {
+  if (isBackgroundColorKeyTuple(key)) {
+    key = isLight(theme) ? key[0] : key[1];
+  }
+  if (isBackgroundColorKeyTuple(defaultColor)) {
+    defaultColor = isLight(theme) ? defaultColor[0] : defaultColor[1];
+  }
+
+  if (key === "transparent") {
+    return "transparent";
+  } else if (!key) {
+    if (defaultColor === "transparent") {
+      return "transparent";
+    }
+    return getColor(theme, defaultColor);
+  }
+  return getColor(theme, key);
+}
+
+export const isDark = (theme: Theme) =>
+  [
+    Themes.Dark,
+    Themes.BridgeDark,
+    Themes.LightsparkDocsDark,
+    Themes.UmameDocsDark,
+  ].includes(theme.type);
+export const isLight = (theme: Theme) =>
+  [
+    Themes.Light,
+    Themes.BridgeLight,
+    Themes.LightsparkDocsLight,
+    Themes.UmameDocsLight,
+  ].includes(theme.type);
+export const themeOr =
+  (lightValue: string, darkValue: string) =>
+  ({ theme }: { theme: Theme }) => {
+    return isLight(theme) ? lightValue : darkValue;
+  };
+
+export function ifLight(style: CSSInterpolation) {
+  return function ({ theme }: { theme: LightsparkTheme }) {
+    if (theme.type === Themes.Light) {
+      return css`
+        ${style}
+      `;
+    }
+    return "";
+  };
+}
+
+export function ifDark(style: CSSInterpolation) {
+  return function ({ theme }: { theme: LightsparkTheme }) {
+    if (theme.type === Themes.Dark) {
+      return css`
+        ${style}
+      `;
+    }
+    return "";
+  };
+}
+
+export function useThemeBg() {
+  const theme = useTheme();
+  const bp = useBreakpoints();
+  const isSm = bp.current(Breakpoints.sm);
+  if (isDark(theme)) {
+    return darkGradient;
+  }
+  return isSm ? theme.smBg : theme.bg;
+}
+
+export type ThemeProp = {
+  theme: Theme;
+};
+export type WithTheme<T extends Record<string, unknown>> = T & ThemeProp;
diff --git a/packages/ui/src/styles/tokens/typography.ts b/packages/ui/src/styles/tokens/typography.ts
new file mode 100644
index 000000000..3000dfccf
--- /dev/null
+++ b/packages/ui/src/styles/tokens/typography.ts
@@ -0,0 +1,3444 @@
+import { type Theme } from "@emotion/react";
+import { bp } from "../breakpoints.js";
+
+export enum TypographyGroup {
+  Lightspark = "Lightspark",
+  LightsparkDocs = "LightsparkDocs",
+  UmameDocs = "UmameDocs",
+  Bridge = "Bridge",
+}
+
+export type TypographyTokenGroups = ReturnType<typeof getTypography>;
+
+const FONT_FAMILIES = {
+  main: "Montserrat",
+  code: "Monaco",
+};
+
+const LINE_HEIGHTS = {
+  [TypographyGroup.Lightspark]: {
+    "7xl": "72px",
+    "6xl": "60px",
+    "5xl": "44px",
+    "4xl": "40px",
+    "3xl": "36px",
+    "2xs": "14px",
+    "2xl": "32px",
+    lg: "24px",
+    md: "20px",
+    sm: "18px",
+    xl: "28px",
+    xs: "16px",
+  },
+  [TypographyGroup.LightsparkDocs]: {
+    "7xl": "72px",
+    "6xl": "60px",
+    "5xl": "44px",
+    "4xl": "40px",
+    "3xl": "36px",
+    "2xs": "14px",
+    "2xl": "32px",
+    lg: "24px",
+    md: "20px",
+    sm: "18px",
+    xl: "28px",
+    xs: "16px",
+  },
+  [TypographyGroup.UmameDocs]: {
+    "5xl": "72px",
+    "4xl": "60px",
+    "3xl": "44px",
+    "2xs": "16px",
+    "2xl": "40px",
+    lg: "32px",
+    md: "28px",
+    sm: "24px",
+    xl: "36px",
+    xs: "20px",
+  },
+  [TypographyGroup.Bridge]: {
+    "8xl": "72px",
+    "7xl": "60px",
+    "6xl": "44px",
+    "5xl": "40px",
+    "4xl": "36px",
+    "3xl": "32px",
+    "2xl": "28px",
+    lg: "22px",
+    md: "20px",
+    sm: "18px",
+    xl: "24px",
+    xs: "16px",
+  },
+};
+
+const FONT_WEIGHTS = {
+  main: {
+    ExtraBold: 800,
+    Bold: 700,
+    SemiBold: 600,
+    Medium: 500,
+  },
+  code: {
+    Bold: 700,
+    Regular: 400,
+  },
+};
+
+const FONT_SIZE = {
+  [TypographyGroup.Lightspark]: {
+    "2xs": "10px",
+    xs: "12px",
+    sm: "14px",
+    md: "16px",
+    lg: "20px",
+    xl: "24px",
+    "2xl": "28px",
+    "3xl": "32px",
+    "4xl": "36px",
+    "5xl": "48px",
+    "6xl": "64px",
+  },
+  [TypographyGroup.LightsparkDocs]: {
+    "2xs": "10px",
+    xs: "12px",
+    sm: "14px",
+    md: "16px",
+    lg: "20px",
+    xl: "24px",
+    "2xl": "28px",
+    "3xl": "32px",
+    "4xl": "36px",
+    "5xl": "48px",
+    "6xl": "64px",
+  },
+  [TypographyGroup.UmameDocs]: {
+    "2xs": "11px",
+    xs: "12px",
+    sm: "14px",
+    md: "16px",
+    lg: "20px",
+    xl: "24px",
+    "2xl": "28px",
+    "3xl": "32px",
+    "4xl": "36px",
+    "5xl": "48px",
+    "6xl": "64px",
+  },
+  [TypographyGroup.Bridge]: {
+    "2xs": "11px",
+    xs: "12px",
+    md: "14px",
+    lg: "16px",
+    xl: "20px",
+    "2xl": "24px",
+    "3xl": "28px",
+    "4xl": "32px",
+    "5xl": "36px",
+    "6xl": "48px",
+    "7xl": "64px",
+  },
+};
+
+const LETTER_SPACING = {
+  [TypographyGroup.Lightspark]: {
+    "tight-max": "-4%",
+    "tight-high": "-3%",
+    "tight-medium": "-2%",
+    "tight-low": "-0.5%",
+    normal: "0",
+    "loose-max": "1.44px",
+  },
+  [TypographyGroup.LightsparkDocs]: {
+    "tight-max": "-4%",
+    "tight-high": "-3%",
+    "tight-medium": "-2%",
+    "tight-low": "-0.5%",
+    normal: "0",
+    "loose-max": "1.44px",
+  },
+  [TypographyGroup.UmameDocs]: {
+    tight: "-.02em",
+    normal: "0",
+    loose: ".1em",
+  },
+  [TypographyGroup.Bridge]: {
+    tight: "-2%",
+    normal: "0%",
+  },
+};
+
+const TEXT_CASE = {
+  none: "none",
+  uppercase: "uppercase",
+};
+
+const TEXT_DECORATION = {
+  none: "none",
+};
+
+const PARAGRAPH_INDENT = {
+  0: "0px",
+};
+
+const PARAGRAPH_SPACING = {
+  default: "default",
+  0: "0",
+  16: "16px",
+  40: "40px",
+};
+
+export interface FontFamilies {
+  main: string;
+  code: string;
+}
+
+export const TokenSize = {
+  Large: "Large",
+  Mlarge: "Mlarge",
+  Medium: "Medium",
+  Schmedium: "Schmedium",
+  Small: "Small",
+  ExtraSmall: "ExtraSmall",
+} as const;
+export type TokenSizeKey = (typeof TokenSize)[keyof typeof TokenSize];
+
+export const TypographyType = {
+  Display: "Display",
+  Headline: "Headline",
+  Title: "Title",
+  Body: "Body",
+  BodyStrong: "Body Strong",
+  Label: "Label",
+  LabelModerate: "Label Moderate",
+  LabelStrong: "Label Strong",
+  Overline: "Overline",
+  Code: "Code",
+  CodeStrong: "Code Strong",
+} as const;
+export type TypographyTypeKey =
+  (typeof TypographyType)[keyof typeof TypographyType];
+
+type TypographyTokens = {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: string;
+  fontSize: string;
+  letterSpacing: string;
+  paragraphSpacing: string;
+  paragraphIndent: string;
+  textCase: string;
+  textDecoration: string;
+};
+
+type TypographyTypes = {
+  [key in TypographyGroup]: {
+    Mobile: {
+      [key in TypographyTypeKey]?: {
+        [key in TokenSizeKey]?: TypographyTokens;
+      };
+    };
+    Desktop: {
+      [key in TypographyTypeKey]?: {
+        [key in TokenSizeKey]?: TypographyTokens;
+      };
+    };
+  };
+};
+
+function getTypographyTypes(fontFamilies: FontFamilies): TypographyTypes {
+  return {
+    [TypographyGroup.Lightspark]: {
+      Mobile: {
+        [TypographyType.Display]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["7xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["6xl"]}`,
+            letterSpacing: "-2.56px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["6xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["5xl"]}`,
+            letterSpacing: "-1.92px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["5xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["4xl"]}`,
+            letterSpacing: "-1.44px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Headline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.ExtraBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["4xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["3xl"]}`,
+            letterSpacing: "-.96px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.ExtraBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["3xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xl"]}`,
+            letterSpacing: "-.84px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.ExtraBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xl}`,
+            letterSpacing: "-.72px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Title]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.4px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "-.32x",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.28px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Body]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.08px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: fontFamilies.main,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["xs"]}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark]["tight-low"]
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.BodyStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.08px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: fontFamilies.main,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["xs"]}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark]["tight-low"]
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Label]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xs"]}`,
+            letterSpacing: "-.05px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelModerate]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xs"]}`,
+            letterSpacing: "-.05px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xs"]}`,
+            letterSpacing: "-.05px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Overline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "1.92px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "1.68px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "1.44px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Code]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.CodeStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+      },
+      Desktop: {
+        [TypographyType.Display]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["7xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["6xl"]}`,
+            letterSpacing: "-2.56px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["6xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["5xl"]}`,
+            letterSpacing: "-1.92px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["5xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["4xl"]}`,
+            letterSpacing: "-1.44px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Headline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.ExtraBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["4xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["3xl"]}`,
+            letterSpacing: "-.96px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.ExtraBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["3xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xl"]}`,
+            letterSpacing: "-.84px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.ExtraBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xl}`,
+            letterSpacing: "-.72px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Title]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.4px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "-.32x",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.28px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Body]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.08px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: fontFamilies.main,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["xs"]}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark]["tight-low"]
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.BodyStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.08px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: fontFamilies.main,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["xs"]}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark]["tight-low"]
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Label]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xs"]}`,
+            letterSpacing: "-.05px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelModerate]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xs"]}`,
+            letterSpacing: "-.05px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xs"]}`,
+            letterSpacing: "-.05px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Overline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "1.92px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "1.68px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "1.44px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Code]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.CodeStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+      },
+    },
+    [TypographyGroup.LightsparkDocs]: {
+      Mobile: {
+        [TypographyType.Display]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["7xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["6xl"]}`,
+            letterSpacing: "-2.56px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["6xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["5xl"]}`,
+            letterSpacing: "-1.92px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["5xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["4xl"]}`,
+            letterSpacing: "-1.44px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Headline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["4xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["3xl"]}`,
+            letterSpacing: "-.96px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["3xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xl"]}`,
+            letterSpacing: "-.84px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xl}`,
+            letterSpacing: "-.72px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.60px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Title]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.4px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "-.32x",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.28px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Body]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.08px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: fontFamilies.main,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["xs"]}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark]["tight-low"]
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.BodyStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.08px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Label]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xs"]}`,
+            letterSpacing: "-.05px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelModerate]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xs"]}`,
+            letterSpacing: "-.05px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xs"]}`,
+            letterSpacing: "-.05px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Overline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "1.92px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "1.68px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "1.44px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Code]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.CodeStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+      },
+      Desktop: {
+        [TypographyType.Display]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["7xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["6xl"]}`,
+            letterSpacing: "-2.56px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["6xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["5xl"]}`,
+            letterSpacing: "-1.92px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["5xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["4xl"]}`,
+            letterSpacing: "-1.44px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Headline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["4xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["3xl"]}`,
+            letterSpacing: "-.96px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["3xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xl"]}`,
+            letterSpacing: "-.84px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xl}`,
+            letterSpacing: "-.72px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.60px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Title]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.4px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "-.32x",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.28px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Body]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.08px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: fontFamilies.main,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["xs"]}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark]["tight-low"]
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.BodyStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: "-.08px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Label]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xs"]}`,
+            letterSpacing: "-.05px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelModerate]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xs"]}`,
+            letterSpacing: "-.05px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "-.07px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "-.06px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark]["2xs"]}`,
+            letterSpacing: "-.05px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Overline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: "1.92px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: "1.68px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: "1.44px",
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Code]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].lg}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.CodeStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Lightspark].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Lightspark].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.Lightspark].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+      },
+    },
+    [TypographyGroup.UmameDocs]: {
+      Mobile: {
+        [TypographyType.Display]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["5xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["6xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["4xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["5xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["3xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["4xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Headline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["3xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[16]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["2xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[16]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xl}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[16]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].lg}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[16]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Title]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].lg}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Body]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.BodyStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Label]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["2xs"]}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelModerate]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["2xs"]}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["2xs"]}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Overline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].md}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].loose}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].loose}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].loose}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Code]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.CodeStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+      },
+      Desktop: {
+        [TypographyType.Display]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["5xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["6xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["4xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["5xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["3xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["4xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Headline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["3xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[16]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xl}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["2xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[16]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].lg}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xl}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[16]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.ExtraSmall]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].lg}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[16]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Title]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].md}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].lg}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Body]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.BodyStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Label]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["2xs"]}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelModerate]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["2xs"]}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs]["2xs"]}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Overline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].md}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].loose}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].loose}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs]["2xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.UmameDocs].loose}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.uppercase}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Code]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Regular}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].xs}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.CodeStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].md}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].sm}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.code}`,
+            fontWeight: `${FONT_WEIGHTS.code.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.UmameDocs].sm}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.UmameDocs].xs}`,
+            letterSpacing: `${
+              LETTER_SPACING[TypographyGroup.UmameDocs].normal
+            }`,
+            paragraphSpacing: `${PARAGRAPH_SPACING.default}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+      },
+    },
+    [TypographyGroup.Bridge]: {
+      Mobile: {
+        [TypographyType.Display]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["8xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["7xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["7xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["6xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["6xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["5xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Headline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["5xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["4xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["4xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["3xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["3xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["2xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Title]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["2xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["lg"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["md"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["md"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Body]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["lg"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["lg"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["md"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["sm"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Label]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["md"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["md"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["2xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelModerate]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["md"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["md"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["2xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["md"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["md"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["2xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+      },
+      Desktop: {
+        [TypographyType.Display]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["8xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["7xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["7xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["6xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["6xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["5xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Headline]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["5xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["4xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["4xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["3xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["3xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["2xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].tight}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Title]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["2xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["xl"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["lg"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["md"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["md"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Body]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xl"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["lg"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["lg"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["md"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["sm"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.Label]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["md"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["md"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["2xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelModerate]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["md"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["md"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.SemiBold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["2xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+        [TypographyType.LabelStrong]: {
+          [TokenSize.Large]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["md"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["md"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Medium]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+          [TokenSize.Small]: {
+            fontFamily: `${fontFamilies.main}`,
+            fontWeight: `${FONT_WEIGHTS.main.Bold}`,
+            lineHeight: `${LINE_HEIGHTS[TypographyGroup.Bridge]["xs"]}`,
+            fontSize: `${FONT_SIZE[TypographyGroup.Bridge]["2xs"]}`,
+            letterSpacing: `${LETTER_SPACING[TypographyGroup.Bridge].normal}`,
+            paragraphSpacing: `${PARAGRAPH_SPACING[0]}`,
+            paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+            textCase: `${TEXT_CASE.none}`,
+            textDecoration: `${TEXT_DECORATION.none}`,
+          },
+        },
+      },
+    },
+  };
+}
+
+export function getTypography(
+  typographyGroup: TypographyGroup,
+  customFontFamilies?: FontFamilies,
+) {
+  const fontFamilies = customFontFamilies ?? FONT_FAMILIES;
+  return {
+    group: typographyGroup,
+    fontFamilies,
+    lineHeights: LINE_HEIGHTS[typographyGroup],
+    fontWeights: FONT_WEIGHTS,
+    fontSize: FONT_SIZE[typographyGroup],
+    letterSpacing: LETTER_SPACING[typographyGroup],
+    textCase: TEXT_CASE,
+    textDecoration: TEXT_DECORATION,
+    paragraphIndent: PARAGRAPH_INDENT,
+    paragraphSpacing: PARAGRAPH_SPACING,
+    types: getTypographyTypes(fontFamilies)[typographyGroup],
+  };
+}
+
+function mayTokensToStyles(tokens: Record<string, string>) {
+  return Object.entries(tokens)
+    .map((entry) => {
+      // Transform tokens into valid css.
+      switch (entry[0]) {
+        case "fontFamily":
+          return `font-family: ${entry[1]};`;
+        case "fontWeight":
+          return `font-weight: ${entry[1]};`;
+        case "lineHeight":
+          return `line-height: ${entry[1]};`;
+        case "fontSize":
+          return `font-size: ${entry[1]};`;
+        case "letterSpacing":
+          return `letter-spacing: ${entry[1]};`;
+        case "textDecoration":
+          return `text-decoration: ${entry[1]};`;
+        case "paragraphSpacing":
+          /** Better to set context aware margin styles in
+           * parent Article container, skip for now: */
+          return "";
+        case "paragraphIndent":
+          return `text-indent: ${entry[1]};`;
+        case "textCase":
+          return `text-transform: ${entry[1]};`;
+        default:
+          return `${entry[0]}: ${entry[1]};`;
+      }
+    })
+    .join("");
+}
+
+const defaultTokens = {
+  fontFamily: FONT_FAMILIES.main,
+  fontWeight: `${FONT_WEIGHTS.main.Medium}`,
+  lineHeight: LINE_HEIGHTS[TypographyGroup.Lightspark].sm,
+  fontSize: FONT_SIZE[TypographyGroup.Lightspark].sm,
+  letterSpacing: LETTER_SPACING[TypographyGroup.Lightspark].normal,
+  paragraphSpacing: PARAGRAPH_SPACING.default,
+  paragraphIndent: `${PARAGRAPH_INDENT[0]}`,
+  textCase: TEXT_CASE.none,
+  textDecoration: TEXT_DECORATION.none,
+};
+
+export const getTypographyString = (
+  theme: Theme,
+  typographyType: TypographyTypeKey,
+  size: TokenSizeKey,
+) => {
+  const mobileTokenGroups = theme.typography.types["Mobile"];
+  const desktopTokenGroups = theme.typography.types["Desktop"];
+  const mobileTokenSizes = mobileTokenGroups[typographyType];
+  const desktopTokenSizes = desktopTokenGroups[typographyType];
+  let mobileTokens = mobileTokenSizes?.[size];
+  let desktopTokens = desktopTokenSizes?.[size];
+
+  if (!mobileTokens || !desktopTokens) {
+    /* It's okay for a TypographyGroup to not have tokens defined for every possible
+       typography type but if a component tries to use the style we should log an error
+       since we don't have styles defined for this scenario. Developer should reach out
+       to design for new tokens or use a typography type that exists in the theme. */
+    if (!mobileTokenSizes || !desktopTokenSizes) {
+      console.error(
+        `Attempted to use a typography type "${typographyType}" that does not exist in the current theme. Falling back to default tokens.`,
+      );
+    } else {
+      console.error(
+        `Attempted to use a typography size "${size}" that does not exist for typography type "${typographyType}" in the current theme. Falling back to default tokens.`,
+      );
+    }
+    mobileTokens = defaultTokens;
+    desktopTokens = defaultTokens;
+  }
+
+  const typographyStr = `
+    ${mayTokensToStyles(desktopTokens)}
+    ${bp.sm(mayTokensToStyles(mobileTokens))}
+  `;
+
+  return typographyStr;
+};
diff --git a/packages/ui/src/styles/type.tsx b/packages/ui/src/styles/type.tsx
index 2a811f708..70676ae4b 100644
--- a/packages/ui/src/styles/type.tsx
+++ b/packages/ui/src/styles/type.tsx
@@ -3,7 +3,7 @@ import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import { firstChild, pxToRems } from "../styles/utils.js";
 import { bp } from "./breakpoints.js";
-import { type WithTheme } from "./colors.js";
+import { type WithTheme } from "./themes.js";
 
 const HeadingTypes = ["h1", "h2", "h3", "h4"] as const;
 type HeadingType = (typeof HeadingTypes)[number];
diff --git a/packages/ui/src/styles/typography.tsx b/packages/ui/src/styles/typography.tsx
new file mode 100644
index 000000000..7e791eeef
--- /dev/null
+++ b/packages/ui/src/styles/typography.tsx
@@ -0,0 +1,31 @@
+import { type Theme } from "@emotion/react";
+import { type Complete } from "@lightsparkdev/core";
+import { getFontColor, type FontColorKey } from "./themes.js";
+import {
+  getTypographyString,
+  type TokenSizeKey,
+  type TypographyTypeKey,
+} from "./tokens/typography.js";
+
+export const applyTypography = (
+  theme: Theme,
+  typographyType: TypographyTypeKey,
+  size: TokenSizeKey,
+  color: FontColorKey = "inherit",
+  applyToAll = true,
+) => {
+  const selector = applyToAll ? "&, & *" : "&";
+  return `
+    ${selector} {
+      ${getTypographyString(theme, typographyType, size)};
+      color: ${getFontColor(theme, color)};
+    }
+  `;
+};
+
+export type SimpleTypographyProps = {
+  type?: TypographyTypeKey | undefined;
+  size?: TokenSizeKey | undefined;
+  color?: FontColorKey | undefined;
+};
+export type RequiredSimpleTypographyProps = Complete<SimpleTypographyProps>;
diff --git a/packages/ui/src/types/index.ts b/packages/ui/src/types/index.ts
index c87fd6604..2bbad9236 100644
--- a/packages/ui/src/types/index.ts
+++ b/packages/ui/src/types/index.ts
@@ -1,8 +1,15 @@
 declare global {
   const __CURRENT_COMMIT__: string;
   const __BASENAME__: string;
+
+  /* LIG-5374 */
+  interface NewRoutes {
+    example: "/example";
+  }
 }
 
+export type NewRoutesType = NewRoutes[keyof NewRoutes];
+
 /* window props that may be considered common to any Lightspark web app: */
 export interface LightsparkWindow extends Window {
   Cypress?: unknown;
@@ -12,6 +19,13 @@ export interface LightsparkWindow extends Window {
   };
   /* google tag manager. assume always defined, from index.html: */
   dataLayer: unknown[];
+  /* Google Recaptcha adds a global window property, so assume always defined from index.html */
+  grecaptcha: {
+    enterprise: {
+      ready(cb: unknown): unknown;
+      execute(sk: string, cb: unknown): Promise<string>;
+    };
+  };
 }
 
 export {};
diff --git a/packages/ui/src/utils/NextLink.tsx b/packages/ui/src/utils/NextLink.tsx
new file mode 100644
index 000000000..24fad2cb4
--- /dev/null
+++ b/packages/ui/src/utils/NextLink.tsx
@@ -0,0 +1,50 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+
+type NextLinkWrapperProps = {
+  href: string;
+  text: string;
+  target?: "_blank" | undefined;
+};
+
+type NextLinkProps = {
+  children: ReactNode;
+  href: string;
+  target?: "_blank" | undefined;
+};
+
+export function NextLink({ href, text, target }: NextLinkWrapperProps) {
+  const NextLinkRef = useRef<null | ComponentType<NextLinkProps>>(null);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    void (async () => {
+      try {
+        /* We need to dynamically load NextLink because it globally references process which doesn't
+           exist in the browser and causes vite bundles to have a reference error */
+        const nextLinkModule = await import("next/link.js");
+        NextLinkRef.current =
+          nextLinkModule.default as unknown as ComponentType<NextLinkProps>;
+      } catch (e) {
+        /* ignore, will fallback to default link */
+      }
+      setReady(true);
+    })();
+  });
+
+  const InternalNextLink = NextLinkRef.current;
+
+  if (!ready || !InternalNextLink) {
+    return <a href={href}>{text}</a>;
+  }
+
+  return (
+    <InternalNextLink href={href} target={target}>
+      {text}
+    </InternalNextLink>
+  );
+}
diff --git a/packages/ui/src/utils/countryCodesToNames.tsx b/packages/ui/src/utils/countryCodesToNames.tsx
new file mode 100644
index 000000000..5668f1ab9
--- /dev/null
+++ b/packages/ui/src/utils/countryCodesToNames.tsx
@@ -0,0 +1,264 @@
+import { invert } from "lodash-es";
+
+export const countryCodesToNames = {
+  BD: "Bangladesh",
+  BE: "Belgium",
+  BF: "Burkina Faso",
+  BG: "Bulgaria",
+  BA: "Bosnia and Herzegovina",
+  BB: "Barbados",
+  WF: "Wallis and Futuna",
+  BL: "Saint Barthelemy",
+  BM: "Bermuda",
+  BN: "Brunei",
+  BO: "Bolivia",
+  BH: "Bahrain",
+  BI: "Burundi",
+  BJ: "Benin",
+  BT: "Bhutan",
+  JM: "Jamaica",
+  BV: "Bouvet Island",
+  BW: "Botswana",
+  WS: "Samoa",
+  BQ: "Bonaire, Saint Eustatius and Saba ",
+  BR: "Brazil",
+  BS: "Bahamas",
+  JE: "Jersey",
+  BY: "Belarus",
+  BZ: "Belize",
+  RU: "Russia",
+  RW: "Rwanda",
+  RS: "Serbia",
+  TL: "East Timor",
+  RE: "Reunion",
+  TM: "Turkmenistan",
+  TJ: "Tajikistan",
+  RO: "Romania",
+  TK: "Tokelau",
+  GW: "Guinea-Bissau",
+  GU: "Guam",
+  GT: "Guatemala",
+  GS: "South Georgia and the South Sandwich Islands",
+  GR: "Greece",
+  GQ: "Equatorial Guinea",
+  GP: "Guadeloupe",
+  JP: "Japan",
+  GY: "Guyana",
+  GG: "Guernsey",
+  GF: "French Guiana",
+  GE: "Georgia",
+  GD: "Grenada",
+  GB: "United Kingdom",
+  GA: "Gabon",
+  SV: "El Salvador",
+  GN: "Guinea",
+  GM: "Gambia",
+  GL: "Greenland",
+  GI: "Gibraltar",
+  GH: "Ghana",
+  OM: "Oman",
+  TN: "Tunisia",
+  JO: "Jordan",
+  HR: "Croatia",
+  HT: "Haiti",
+  HU: "Hungary",
+  HK: "Hong Kong",
+  HN: "Honduras",
+  HM: "Heard Island and McDonald Islands",
+  VE: "Venezuela",
+  PR: "Puerto Rico",
+  PS: "Palestinian Territory",
+  PW: "Palau",
+  PT: "Portugal",
+  SJ: "Svalbard and Jan Mayen",
+  PY: "Paraguay",
+  IQ: "Iraq",
+  PA: "Panama",
+  PF: "French Polynesia",
+  PG: "Papua New Guinea",
+  PE: "Peru",
+  PK: "Pakistan",
+  PH: "Philippines",
+  PN: "Pitcairn",
+  PL: "Poland",
+  PM: "Saint Pierre and Miquelon",
+  ZM: "Zambia",
+  EH: "Western Sahara",
+  EE: "Estonia",
+  EG: "Egypt",
+  ZA: "South Africa",
+  EC: "Ecuador",
+  IT: "Italy",
+  VN: "Vietnam",
+  SB: "Solomon Islands",
+  ET: "Ethiopia",
+  SO: "Somalia",
+  ZW: "Zimbabwe",
+  SA: "Saudi Arabia",
+  ES: "Spain",
+  ER: "Eritrea",
+  ME: "Montenegro",
+  MD: "Moldova",
+  MG: "Madagascar",
+  MF: "Saint Martin",
+  MA: "Morocco",
+  MC: "Monaco",
+  UZ: "Uzbekistan",
+  MM: "Myanmar",
+  ML: "Mali",
+  MO: "Macao",
+  MN: "Mongolia",
+  MH: "Marshall Islands",
+  MK: "Macedonia",
+  MU: "Mauritius",
+  MT: "Malta",
+  MW: "Malawi",
+  MV: "Maldives",
+  MQ: "Martinique",
+  MP: "Northern Mariana Islands",
+  MS: "Montserrat",
+  MR: "Mauritania",
+  IM: "Isle of Man",
+  UG: "Uganda",
+  TZ: "Tanzania",
+  MY: "Malaysia",
+  MX: "Mexico",
+  IL: "Israel",
+  FR: "France",
+  IO: "British Indian Ocean Territory",
+  SH: "Saint Helena",
+  AC: "Ascension Island",
+  TA: "Tristan da Cunha",
+  FI: "Finland",
+  FJ: "Fiji",
+  FK: "Falkland Islands",
+  FM: "Micronesia",
+  FO: "Faroe Islands",
+  NI: "Nicaragua",
+  NL: "Netherlands",
+  NO: "Norway",
+  NA: "Namibia",
+  VU: "Vanuatu",
+  NC: "New Caledonia",
+  NE: "Niger",
+  NF: "Norfolk Island",
+  NG: "Nigeria",
+  NZ: "New Zealand",
+  NP: "Nepal",
+  NR: "Nauru",
+  NU: "Niue",
+  CK: "Cook Islands",
+  XK: "Kosovo",
+  CI: "Ivory Coast",
+  CH: "Switzerland",
+  CO: "Colombia",
+  CN: "China",
+  CM: "Cameroon",
+  CL: "Chile",
+  CC: "Cocos Islands",
+  CA: "Canada",
+  CG: "Republic of the Congo",
+  CF: "Central African Republic",
+  CD: "Democratic Republic of the Congo",
+  CZ: "Czech Republic",
+  CY: "Cyprus",
+  CX: "Christmas Island",
+  CR: "Costa Rica",
+  CW: "Curacao",
+  CV: "Cape Verde",
+  CU: "Cuba",
+  SZ: "Swaziland",
+  SY: "Syria",
+  SX: "Sint Maarten",
+  KG: "Kyrgyzstan",
+  KE: "Kenya",
+  SS: "South Sudan",
+  SR: "Suriname",
+  KI: "Kiribati",
+  KH: "Cambodia",
+  KN: "Saint Kitts and Nevis",
+  KM: "Comoros",
+  ST: "Sao Tome and Principe",
+  SK: "Slovakia",
+  KR: "South Korea",
+  SI: "Slovenia",
+  KP: "North Korea",
+  KW: "Kuwait",
+  SN: "Senegal",
+  SM: "San Marino",
+  SL: "Sierra Leone",
+  SC: "Seychelles",
+  KZ: "Kazakhstan",
+  KY: "Cayman Islands",
+  SG: "Singapore",
+  SE: "Sweden",
+  SD: "Sudan",
+  DO: "Dominican Republic",
+  DM: "Dominica",
+  DJ: "Djibouti",
+  DK: "Denmark",
+  VG: "British Virgin Islands",
+  DE: "Germany",
+  YE: "Yemen",
+  DZ: "Algeria",
+  US: "United States",
+  UY: "Uruguay",
+  YT: "Mayotte",
+  UM: "United States Minor Outlying Islands",
+  LB: "Lebanon",
+  LC: "Saint Lucia",
+  LA: "Laos",
+  TV: "Tuvalu",
+  TW: "Taiwan",
+  TT: "Trinidad and Tobago",
+  TR: "Turkey",
+  LK: "Sri Lanka",
+  LI: "Liechtenstein",
+  LV: "Latvia",
+  TO: "Tonga",
+  LT: "Lithuania",
+  LU: "Luxembourg",
+  LR: "Liberia",
+  LS: "Lesotho",
+  TH: "Thailand",
+  TF: "French Southern Territories",
+  TG: "Togo",
+  TD: "Chad",
+  TC: "Turks and Caicos Islands",
+  LY: "Libya",
+  VA: "Vatican",
+  VC: "Saint Vincent and the Grenadines",
+  AE: "United Arab Emirates",
+  AD: "Andorra",
+  AG: "Antigua and Barbuda",
+  AF: "Afghanistan",
+  AI: "Anguilla",
+  VI: "U.S. Virgin Islands",
+  IS: "Iceland",
+  IR: "Iran",
+  AM: "Armenia",
+  AL: "Albania",
+  AO: "Angola",
+  AQ: "Antarctica",
+  AS: "American Samoa",
+  AR: "Argentina",
+  AU: "Australia",
+  AT: "Austria",
+  AW: "Aruba",
+  IN: "India",
+  AX: "Aland Islands",
+  AZ: "Azerbaijan",
+  IE: "Ireland",
+  ID: "Indonesia",
+  UA: "Ukraine",
+  QA: "Qatar",
+  MZ: "Mozambique",
+} as const;
+
+export const allCountryNames = Object.values(countryCodesToNames);
+type CountryCodes = keyof typeof countryCodesToNames;
+type CountryNames = (typeof countryCodesToNames)[CountryCodes];
+export const countryNamesToCodes = invert(countryCodesToNames) as Record<
+  CountryNames,
+  CountryCodes
+>;
diff --git a/packages/ui/src/utils/isReactNodeWithChildren.tsx b/packages/ui/src/utils/isReactNodeWithChildren.tsx
new file mode 100644
index 000000000..7f498d07e
--- /dev/null
+++ b/packages/ui/src/utils/isReactNodeWithChildren.tsx
@@ -0,0 +1,18 @@
+import { isValidElement, type ReactElement, type ReactNode } from "react";
+
+type ReactNodeWithChildren = ReactElement<{
+  children: ReactNode;
+}>;
+
+export function isReactNodeWithChildren(
+  node: unknown,
+): node is ReactNodeWithChildren {
+  return Boolean(
+    node &&
+      isValidElement(node) &&
+      typeof node.props === "object" &&
+      node.props !== null &&
+      "children" in node.props &&
+      node.props.children !== undefined,
+  );
+}
diff --git a/packages/ui/src/utils/strings.tsx b/packages/ui/src/utils/strings.tsx
index c14dcc50d..6c21ef4de 100644
--- a/packages/ui/src/utils/strings.tsx
+++ b/packages/ui/src/utils/strings.tsx
@@ -1,7 +1,5 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-import { type Maybe } from "@lightsparkdev/core";
-
 export const capitalize = (str: string): string => {
   if (str.length === 0) {
     return str;
@@ -22,17 +20,6 @@ export const makeEnumPretty = (
   return formatted.join(" ");
 };
 
-// Keep the first and optionally last characters of a long string with
-// elispses in the middle.
-export const elide = (
-  s: Maybe<string>,
-  first: number,
-  last?: number,
-): Maybe<string> => {
-  if (s === undefined || s === null) return s;
-  return s.substring(0, first) + "..." + s.substring(s.length - (last ?? 0));
-};
-
 export function removeChars(
   value: string,
   beginIndex: number,
@@ -66,3 +53,40 @@ export function removeLeadingZeros(value: string): string {
 
   return value;
 }
+
+export type ElideArgs =
+  | number
+  | {
+      maxChars: number;
+      ellipsisPosition?: "start" | "middle" | "end" | number;
+    };
+
+export function elide(value: string, elideArgs: ElideArgs = 5): string {
+  const args =
+    typeof elideArgs === "number"
+      ? { maxChars: elideArgs, ellipsisPosition: "middle" }
+      : elideArgs;
+  let displayValue = value;
+  if (value.length > args.maxChars) {
+    if (typeof args.ellipsisPosition === "number") {
+      displayValue = `${value.substr(
+        0,
+        args.ellipsisPosition,
+      )}...${value.substr(value.length - args.ellipsisPosition, value.length)}`;
+    } else if (args.ellipsisPosition === "start") {
+      displayValue = `...${value.substr(
+        value.length - args.maxChars,
+        value.length,
+      )}`;
+    } else if (args.ellipsisPosition === "middle") {
+      const half = Math.floor(args.maxChars / 2);
+      displayValue = `${value.substr(0, half)}...${value.substr(
+        value.length - half,
+        value.length,
+      )}`;
+    } else {
+      displayValue = `${value.substr(0, args.maxChars)}...`;
+    }
+  }
+  return displayValue;
+}
diff --git a/packages/ui/src/utils/tests/toReactNodes.test.tsx b/packages/ui/src/utils/tests/toReactNodes.test.tsx
deleted file mode 100644
index 3a4c999f4..000000000
--- a/packages/ui/src/utils/tests/toReactNodes.test.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-// import { CodeInput } from "@lightsparkdev/private-ui/src/components/CodeInput/CodeInput";
-// import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { render } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
-import { toReactNodes } from "../toReactNodes";
-
-describe("toReactNodes", () => {
-  it("renders the expected output for a single string", () => {
-    const result = toReactNodes("test1\ntest2");
-    const { asFragment } = render(result);
-
-    expect(asFragment()).toMatchInlineSnapshot(`
-      <DocumentFragment>
-        test1
-        <br />
-        test2
-      </DocumentFragment>
-    `);
-  });
-
-  it("renders the expected output for a single link", () => {
-    const result = toReactNodes({ type: "link", text: "Test", to: "/test" });
-    const { asFragment } = render(<BrowserRouter>{result}</BrowserRouter>);
-
-    expect(asFragment()).toMatchInlineSnapshot(`
-      <DocumentFragment>
-        <a
-          class="css-0"
-          href="/test"
-        >
-          Test
-        </a>
-      </DocumentFragment>
-    `);
-  });
-
-  it("renders the expected output for a single string array with line breaks", () => {
-    const result = toReactNodes(["test1\ntest2\ntest3"]);
-    const { asFragment } = render(result);
-
-    expect(asFragment()).toMatchInlineSnapshot(`
-      <DocumentFragment>
-        test1
-        <br />
-        test2
-        <br />
-        test3
-      </DocumentFragment>
-    `);
-  });
-
-  it("renders the expected output for a single string array with consecutive line breaks", () => {
-    const result = toReactNodes(["test1\n\ntest2\ntest3"]);
-    const { asFragment } = render(result);
-
-    expect(asFragment()).toMatchInlineSnapshot(`
-      <DocumentFragment>
-        test1
-        <br />
-        <br />
-        test2
-        <br />
-        test3
-      </DocumentFragment>
-    `);
-  });
-
-  it("renders the expected output for multiple string array", () => {
-    const result = toReactNodes(["test1", "test2", "test3"]);
-    const { asFragment } = render(result);
-
-    expect(asFragment()).toMatchInlineSnapshot(`
-      <DocumentFragment>
-        test1test2test3
-      </DocumentFragment>
-    `);
-  });
-
-  it("renders the expected output for multiple string array and line breaks", () => {
-    const result = toReactNodes(["test1\n", "test2\n", "test3"]);
-    const { asFragment } = render(result);
-
-    expect(asFragment()).toMatchInlineSnapshot(`
-      <DocumentFragment>
-        test1
-        <br />
-        test2
-        <br />
-        test3
-      </DocumentFragment>
-    `);
-  });
-
-  it("renders the expected output for multiple string array, line breaks, and links", () => {
-    const result = toReactNodes([
-      "test1\n",
-      "test2\n",
-      { type: "link", text: "Test", to: "/test" },
-      "\n",
-      "test3",
-    ]);
-    const { asFragment } = render(<BrowserRouter>{result}</BrowserRouter>);
-
-    expect(asFragment()).toMatchInlineSnapshot(`
-      <DocumentFragment>
-        test1
-        <br />
-        test2
-        <br />
-        <a
-          class="css-0"
-          href="/test"
-        >
-          Test
-        </a>
-        <br />
-        test3
-      </DocumentFragment>
-    `);
-  });
-
-  it("renders the expected output for multiple links", () => {
-    const result = toReactNodes([
-      "test1\n",
-      "test2\n",
-      { type: "link", text: "Test", to: "/test" },
-      { type: "link", text: "Test 2", to: "/test-2" },
-      "\n",
-      "test3",
-    ]);
-    const { asFragment } = render(<BrowserRouter>{result}</BrowserRouter>);
-
-    expect(asFragment()).toMatchInlineSnapshot(`
-      <DocumentFragment>
-        test1
-        <br />
-        test2
-        <br />
-        <a
-          class="css-0"
-          href="/test"
-        >
-          Test
-        </a>
-        <a
-          class="css-0"
-          href="/test-2"
-        >
-          Test 2
-        </a>
-        <br />
-        test3
-      </DocumentFragment>
-    `);
-  });
-});
diff --git a/packages/ui/src/utils/toNonTypographicReactNodes.tsx b/packages/ui/src/utils/toNonTypographicReactNodes.tsx
new file mode 100644
index 000000000..0793fcb51
--- /dev/null
+++ b/packages/ui/src/utils/toNonTypographicReactNodes.tsx
@@ -0,0 +1,160 @@
+// Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
+
+/* toNonTypograhpicReactNodes is only for avoiding a circular dependency between typography
+   components and toReactNodes functionality. All other components should use toReactNodes.tsx */
+
+import { isObject } from "lodash-es";
+import { nanoid } from "nanoid";
+// import NextLinkModule from "next/link.js";
+import { Fragment, type ReactNode } from "react";
+import { Icon } from "../components/Icon/Icon.js";
+import { type IconName } from "../components/Icon/types.js";
+import { Link } from "../router.js";
+import { type FontColorKey } from "../styles/themes.js";
+import { type NewRoutesType } from "../types/index.js";
+import { NextLink } from "./NextLink.js";
+
+// const NextLink = NextLinkModule.default;
+
+export type LinkNode = {
+  text: string;
+  to: NewRoutesType | undefined;
+};
+
+export type ExternalLinkNode = {
+  text: string;
+  externalLink: string | undefined;
+};
+
+export type NextLinkNode = {
+  nextHref: string;
+  text: string;
+};
+
+export type IconNode = {
+  icon: IconName;
+  width?: number;
+  ml?: number;
+  mr?: number;
+  color?: FontColorKey;
+};
+
+export type TextNode = {
+  text: string;
+};
+
+export function isLinkNode(node: unknown): node is LinkNode {
+  return Boolean(node && isObject(node) && "text" in node && "to" in node);
+}
+
+export function isExternalLinkNode(node: unknown): node is ExternalLinkNode {
+  return Boolean(
+    node && isObject(node) && "text" in node && "externalLink" in node,
+  );
+}
+
+export function isNextLinkNode(node: unknown): node is NextLinkNode {
+  return Boolean(
+    node && isObject(node) && "text" in node && "nextHref" in node,
+  );
+}
+
+export function isIconNode(node: unknown): node is IconNode {
+  return Boolean(node && isObject(node) && "icon" in node);
+}
+
+export function isTextNode(node: unknown): node is TextNode {
+  return Boolean(
+    /* Exclude other nodes by ensuring `text` is the only property: */
+    node &&
+      isObject(node) &&
+      "text" in node &&
+      !isLinkNode(node) &&
+      !isExternalLinkNode(node) &&
+      !isNextLinkNode(node) &&
+      !isIconNode(node),
+  );
+}
+
+type ToNonTypographicReactNodesArg =
+  | string
+  | LinkNode
+  | ExternalLinkNode
+  | NextLinkNode
+  | IconNode
+  | TextNode;
+
+export type ToNonTypographicReactNodesArgs =
+  | ToNonTypographicReactNodesArg
+  | ToNonTypographicReactNodesArg[];
+
+export function toNonTypographicReactNodes(
+  toNonTypographicReactNodesArg: ToNonTypographicReactNodesArgs,
+) {
+  const toReactNodesArray = Array.isArray(toNonTypographicReactNodesArg)
+    ? toNonTypographicReactNodesArg
+    : [toNonTypographicReactNodesArg];
+
+  const reactNodes = toReactNodesArray.map((node, i) => {
+    let content: ReactNode;
+    if (isLinkNode(node)) {
+      content = (
+        <Link<NewRoutesType>
+          to={node.to}
+          key={`link-${i}-${node.text.substr(0, 10)}`}
+        >
+          {node.text}
+        </Link>
+      );
+    } else if (isExternalLinkNode(node)) {
+      content = (
+        <a
+          href={node.externalLink}
+          key={`link-${i}-${node.text.substr(0, 10)}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {node.text}
+        </a>
+      );
+    } else if (isNextLinkNode(node)) {
+      const isExternal = node.nextHref.startsWith("http");
+      return (
+        <Fragment key={`next-link-${i}`}>
+          <NextLink
+            href={node.nextHref}
+            text={node.text}
+            target={isExternal ? "_blank" : undefined}
+          />
+        </Fragment>
+      );
+    } else if (isIconNode(node)) {
+      content = (
+        <Icon
+          name={node.icon}
+          key={`icon-${i}`}
+          width={node.width || 12}
+          ml={node.ml}
+          mr={node.mr}
+          color={node.color}
+        />
+      );
+    } else if (typeof node === "string" || isTextNode(node)) {
+      const text = typeof node === "string" ? node : node.text;
+      content = (
+        <Fragment key={`str-${i}-${text.substr(0, 10)}`}>
+          {text.split("\n").map((str, j, strArr) => (
+            <Fragment key={`str-${i}-break-${j}`}>
+              {str}
+              {j < strArr.length - 1 && <br />}
+            </Fragment>
+          ))}
+        </Fragment>
+      );
+    }
+
+    return content || null;
+  });
+
+  return <Fragment key={nanoid()}>{reactNodes}</Fragment>;
+}
diff --git a/packages/ui/src/utils/toReactNodes.tsx b/packages/ui/src/utils/toReactNodes.tsx
index a9ce0310e..3dbc7edc2 100644
--- a/packages/ui/src/utils/toReactNodes.tsx
+++ b/packages/ui/src/utils/toReactNodes.tsx
@@ -1,50 +1,164 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-import { Fragment } from "react";
-import { Link } from "../router.js";
+import { Fragment, type ReactNode } from "react";
+import {
+  renderTypography,
+  type RenderTypographyArgs,
+} from "../components/typography/renderTypography.js";
+import { type TypographyTypeKey } from "../styles/tokens/typography.js";
+import {
+  isExternalLinkNode,
+  isIconNode,
+  isLinkNode,
+  isNextLinkNode,
+  isTextNode,
+  toNonTypographicReactNodes,
+  type ExternalLinkNode,
+  type IconNode,
+  type LinkNode,
+  type NextLinkNode,
+  type TextNode,
+  type ToNonTypographicReactNodesArgs,
+} from "./toNonTypographicReactNodes.js";
 
-export const ToReactNodesTypes = {
-  Link: "link",
-} as const;
-export type ToReactNodesArg<RoutesType extends string> =
+type TypographicReactNodes<T extends TypographyTypeKey> =
+  | (LinkNode & { typography?: RenderTypographyArgs<T> })
+  | (ExternalLinkNode & { typography?: RenderTypographyArgs<T> })
+  | (TextNode & { typography?: RenderTypographyArgs<T> })
+  | (NextLinkNode & { typography?: RenderTypographyArgs<T> });
+
+type ToReactNodesArg<T extends TypographyTypeKey> =
   | string
-  | { type: typeof ToReactNodesTypes.Link; text: string; to: RoutesType };
-export type ToReactNodesArgs<RoutesType extends string> =
-  | ToReactNodesArg<RoutesType>
-  | ToReactNodesArg<RoutesType>[];
+  | TypographicReactNodes<T>
+  | IconNode
+  | null
+  | undefined;
+
+export type ToReactNodesArgs<T extends TypographyTypeKey = TypographyTypeKey> =
+  | ToReactNodesArg<T>
+  | ToReactNodesArg<T>[];
 
 /* toReactNodes accepts an array or single string or object definition to convert to
    react nodes like text, line breaks, and links. This allows components to constrain
    rendered content props by only allowing certain types. */
-export function toReactNodes<RoutesType extends string>(
-  toReactNodesArg: ToReactNodesArgs<RoutesType>,
+export function toReactNodes<T extends TypographyTypeKey>(
+  toReactNodesArg: ToReactNodesArgs<T>,
 ) {
   const toReactNodesArray = Array.isArray(toReactNodesArg)
     ? toReactNodesArg
     : [toReactNodesArg];
 
   const reactNodes = toReactNodesArray.map((node, i) => {
-    if (typeof node === "string") {
-      return (
-        <Fragment key={`str-${i}`}>
-          {node.split("\n").map((str, j, strArr) => (
-            <Fragment key={`str-${i}-break-${j}`}>
-              {str}
-              {j < strArr.length - 1 && <br />}
-            </Fragment>
-          ))}
+    let content: ReactNode;
+    if (!node) {
+      return null;
+    } else if (
+      typeof node !== "string" &&
+      "typography" in node &&
+      node.typography.type &&
+      node.typography.props
+    ) {
+      content = (
+        <Fragment key={`typography-${i}-${node.text.substr(0, 10)}`}>
+          {renderTypography(
+            node.typography.type,
+            Object.assign(node.typography.props, {
+              content: node,
+            }),
+          )}
         </Fragment>
       );
-    } else if (node.type === ToReactNodesTypes.Link) {
-      return (
-        <Link<RoutesType> to={node.to} key={`link-${i}`}>
-          {node.text}
-        </Link>
-      );
+    } else {
+      content = toNonTypographicReactNodes(node);
     }
 
-    return null;
+    return content || null;
   });
 
   return <Fragment>{reactNodes}</Fragment>;
 }
+
+const setReactNodesTypographyMapTypes = [
+  "link",
+  "externalLink",
+  "text",
+  "nextLink",
+] as const;
+type SetReactNodesTypographyMapType =
+  (typeof setReactNodesTypographyMapTypes)[number];
+type SetReactNodesTypographyMap<T extends TypographyTypeKey> = {
+  [nodeType in SetReactNodesTypographyMapType]?: RenderTypographyArgs<T>;
+};
+
+export function setReactNodesTypography<T extends TypographyTypeKey>(
+  nodesArg:
+    | ToReactNodesArgs<TypographyTypeKey> // The initial typography is unimportant since we'll replace it, so it doesn't need to be generic
+    | ToNonTypographicReactNodesArgs,
+  nodesTypographyMap: SetReactNodesTypographyMap<T>,
+) {
+  const nodes = Array.isArray(nodesArg) ? nodesArg : [nodesArg];
+
+  const nodesWithTypography = nodes.map((node, i) => {
+    if (isIconNode(node)) {
+      return node;
+    } else if (typeof node === "string") {
+      if (nodesTypographyMap.text) {
+        return {
+          text: node,
+          typography: nodesTypographyMap.text,
+        };
+      }
+    } else if (isLinkNode(node)) {
+      if (nodesTypographyMap.link) {
+        return {
+          ...node,
+          typography: nodesTypographyMap.link,
+        };
+      }
+    } else if (isExternalLinkNode(node)) {
+      if (nodesTypographyMap.externalLink) {
+        return {
+          ...node,
+          typography: nodesTypographyMap.externalLink,
+        };
+      }
+    } else if (isNextLinkNode(node)) {
+      if (nodesTypographyMap.nextLink) {
+        return {
+          ...node,
+          typography: nodesTypographyMap.nextLink,
+        };
+      }
+    } else if (isTextNode(node)) {
+      if (nodesTypographyMap.text) {
+        return {
+          ...node,
+          typography: nodesTypographyMap.text,
+        };
+      }
+    }
+
+    return node;
+  });
+
+  return nodesWithTypography;
+}
+
+export function toReactNodesWithTypographyMap<T extends TypographyTypeKey>(
+  /** The initial typography is unimportant since we'll
+   *  replace it, so it doesn't need to be generic */
+  nodesArg: ToReactNodesArgs<TypographyTypeKey>,
+  nodesTypographyMap: SetReactNodesTypographyMap<T>,
+) {
+  if (!nodesArg) {
+    return null;
+  }
+
+  const nodesWithTypography = setReactNodesTypography(
+    nodesArg,
+    nodesTypographyMap,
+  );
+
+  const nodes = toReactNodes(nodesWithTypography);
+  return nodes;
+}
diff --git a/packages/ui/src/utils/transformGQLName.tsx b/packages/ui/src/utils/transformGQLName.tsx
new file mode 100644
index 000000000..3f1b364dc
--- /dev/null
+++ b/packages/ui/src/utils/transformGQLName.tsx
@@ -0,0 +1,66 @@
+interface TransformGQLNameOptions {
+  delimiters?: {
+    oldDelimiter: string;
+    newDelimiter: string;
+  };
+  firstLetterTransform?: (c: string) => string;
+  addSpacesBetweenWords?: boolean;
+}
+
+/**
+ * Transforms strings replacing the delimiters and first letters.
+ * This is primarily used to transform the names of types and fields in GraphQL
+ * schemas.
+ */
+export const transformGQLName = (
+  word: string,
+  options: TransformGQLNameOptions,
+) => {
+  const { delimiters, firstLetterTransform, addSpacesBetweenWords } = options;
+
+  if (!word) {
+    return "";
+  }
+
+  let newWord = "";
+  if (firstLetterTransform) {
+    newWord += firstLetterTransform(word[0]);
+  }
+
+  let i = newWord.length;
+  while (i < word.length) {
+    const character = word[i];
+    const nextCharacter = word[i + 1];
+    const previousCharacter = word[i - 1];
+
+    const isDelimiter = delimiters && character === delimiters.oldDelimiter;
+
+    if (addSpacesBetweenWords && !isDelimiter) {
+      const isCharacterUppercase = character === character.toUpperCase();
+      const isPreviousCharacterUppercase =
+        previousCharacter &&
+        previousCharacter === previousCharacter.toUpperCase();
+
+      // Add a space if the capital letter is not in an acronym like "OSK"
+      if (isCharacterUppercase && !isPreviousCharacterUppercase) {
+        newWord += " ";
+      }
+      newWord += character;
+    } else if (isDelimiter) {
+      newWord += delimiters.newDelimiter;
+
+      // Handle transforming first letter of word
+      if (firstLetterTransform && nextCharacter) {
+        newWord += firstLetterTransform(nextCharacter);
+        // Move cursor ahead another character
+        i += 1;
+      }
+    } else {
+      newWord += character;
+    }
+
+    i += 1;
+  }
+
+  return newWord;
+};
diff --git a/packages/ui/src/utils/unicode.tsx b/packages/ui/src/utils/unicode.tsx
new file mode 100644
index 000000000..d663d2173
--- /dev/null
+++ b/packages/ui/src/utils/unicode.tsx
@@ -0,0 +1 @@
+export const nbsp = "\u00A0";
diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts
index 0237b7212..db75d6b30 100644
--- a/packages/ui/tsup.config.ts
+++ b/packages/ui/tsup.config.ts
@@ -1,6 +1,6 @@
 import { copy } from "esbuild-plugin-copy";
-import svgr from "esbuild-plugin-svgr";
 import { defineConfig } from "tsup";
+import { svgr } from "./esbuild-svgr-plugin";
 
 export default defineConfig({
   entry: [
diff --git a/packages/vite/index.cjs b/packages/vite/index.cjs
index 74dddd88b..9add0dedd 100644
--- a/packages/vite/index.cjs
+++ b/packages/vite/index.cjs
@@ -67,6 +67,11 @@ module.exports.buildConfig = ({
           changeOrigin: true,
           ws: true,
         },
+        "/graphql/bridge": {
+          target: proxyTarget,
+          changeOrigin: true,
+          ws: true,
+        },
         "/clientlogs": {
           target: proxyTarget,
           changeOrigin: true,
diff --git a/packages/vite/package.json b/packages/vite/package.json
index 71cc4305b..9ac5afb6d 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -5,7 +5,7 @@
   "main": "./index.cjs",
   "type": "module",
   "dependencies": {
-    "vite": "^5.0.5",
+    "vite": "^5.1.6",
     "vite-plugin-svgr": "^3.2.0"
   },
   "engines": {
diff --git a/packages/wallet-cli/package.json b/packages/wallet-cli/package.json
index 808cc5942..98bdc9eea 100644
--- a/packages/wallet-cli/package.json
+++ b/packages/wallet-cli/package.json
@@ -47,7 +47,7 @@
     "commander": "^11.0.0",
     "dayjs": "^1.11.7",
     "dotenv": "^16.3.1",
-    "jose": "^4.14.4",
+    "jose": "^4.15.5",
     "jsonwebtoken": "^9.0.1",
     "qrcode-terminal": "^0.12.0"
   },
diff --git a/start.sh b/start.sh
index 95d46d5e9..7a438d9a5 100755
--- a/start.sh
+++ b/start.sh
@@ -38,3 +38,4 @@ else
 fi
 
 echo $build_cmd && eval $build_cmd && echo $start_cmd && eval $start_cmd
+
diff --git a/turbo.json b/turbo.json
index a356efe63..f33b3a8d9 100644
--- a/turbo.json
+++ b/turbo.json
@@ -44,7 +44,8 @@
     },
     "start": {
       "cache": false,
-      "persistent": true
+      "persistent": true,
+      "dependsOn": ["^build"]
     },
     "test": {
       "dependsOn": ["^build"]
@@ -55,7 +56,9 @@
     "test:integration": {
       "dependsOn": ["^build"]
     },
-    "types": {},
+    "types": {
+      "dependsOn": ["^build"]
+    },
     "types:watch": {
       "cache": false,
       "persistent": true
diff --git a/yarn.lock b/yarn.lock
index ec6489f27..35b31108e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -41,24 +41,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@apollo/client@npm:^3.7.11":
-  version: 3.8.8
-  resolution: "@apollo/client@npm:3.8.8"
+"@apollo/client@npm:^3.9.11":
+  version: 3.9.11
+  resolution: "@apollo/client@npm:3.9.11"
   dependencies:
     "@graphql-typed-document-node/core": ^3.1.1
+    "@wry/caches": ^1.0.0
     "@wry/equality": ^0.5.6
     "@wry/trie": ^0.5.0
     graphql-tag: ^2.12.6
     hoist-non-react-statics: ^3.3.2
     optimism: ^0.18.0
     prop-types: ^15.7.2
+    rehackt: 0.0.6
     response-iterator: ^0.2.6
     symbol-observable: ^4.0.0
     ts-invariant: ^0.10.3
     tslib: ^2.3.0
     zen-observable-ts: ^1.2.5
   peerDependencies:
-    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    graphql: ^15.0.0 || ^16.0.0
     graphql-ws: ^5.5.5
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -72,7 +74,45 @@ __metadata:
       optional: true
     subscriptions-transport-ws:
       optional: true
-  checksum: df01412424b61f0b102b8453dfc611d7a2bdae6921fed31700196939076f1c6774eb942dc52bf6dc3f7212280dc0748998b243e09f60b889d989d9a1f08f30b3
+  checksum: 503dde039d9701eeb3c8113494e5b568dad63d70d06a5b37af142cc57f96db436d7b175b4b556f00123f07ba7f1542ca51f4ea108a2cd66bcabfba5e5e4ccc94
+  languageName: node
+  linkType: hard
+
+"@ardatan/relay-compiler@npm:12.0.0":
+  version: 12.0.0
+  resolution: "@ardatan/relay-compiler@npm:12.0.0"
+  dependencies:
+    "@babel/core": ^7.14.0
+    "@babel/generator": ^7.14.0
+    "@babel/parser": ^7.14.0
+    "@babel/runtime": ^7.0.0
+    "@babel/traverse": ^7.14.0
+    "@babel/types": ^7.0.0
+    babel-preset-fbjs: ^3.4.0
+    chalk: ^4.0.0
+    fb-watchman: ^2.0.0
+    fbjs: ^3.0.0
+    glob: ^7.1.1
+    immutable: ~3.7.6
+    invariant: ^2.2.4
+    nullthrows: ^1.1.1
+    relay-runtime: 12.0.0
+    signedsource: ^1.0.0
+    yargs: ^15.3.1
+  peerDependencies:
+    graphql: "*"
+  bin:
+    relay-compiler: bin/relay-compiler
+  checksum: f0cec120d02961ee8652e0dde72d9e425bc97cad5d0f767d8764cfd30952294eb2838432f33e4da8bb6999d0c13dcd1df128280666bfea373294d98aa8033ae7
+  languageName: node
+  linkType: hard
+
+"@ardatan/sync-fetch@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "@ardatan/sync-fetch@npm:0.0.1"
+  dependencies:
+    node-fetch: ^2.6.1
+  checksum: af39bdfb4c2b35bd2c6acc540a5e302730dae17e73d3a18cd1a4aa50c1c741cb1869dffdef1379c491da5ad2e3cfa2bf3a8064e6046c12b46c6a97f54f100a8d
   languageName: node
   linkType: hard
 
@@ -122,6 +162,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/code-frame@npm:7.24.6"
+  dependencies:
+    "@babel/highlight": ^7.24.6
+    picocolors: ^1.0.0
+  checksum: 0904514ea7079a9590c1c546cd20b9c1beab9649873f2a0703429860775c1713a8dfb2daacd781a0210bb3930c656c1c436013fb20eaa3644880fb3a2b34541d
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9, @babel/compat-data@npm:^7.23.3, @babel/compat-data@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/compat-data@npm:7.23.5"
@@ -129,6 +179,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/compat-data@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/compat-data@npm:7.24.6"
+  checksum: 92233c708f7c349923c1f9a2b3c9354875a951ac3afaca0a2c159de1c808f6799ad4433652b90870015281aa466ec6e9aa8922e755cd7ac1413a3a5782cd685d
+  languageName: node
+  linkType: hard
+
 "@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.20.0, @babel/core@npm:^7.20.2, @babel/core@npm:^7.21.3, @babel/core@npm:^7.21.4, @babel/core@npm:^7.23.3":
   version: 7.23.5
   resolution: "@babel/core@npm:7.23.5"
@@ -152,6 +209,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:^7.14.0, @babel/core@npm:^7.22.9":
+  version: 7.24.6
+  resolution: "@babel/core@npm:7.24.6"
+  dependencies:
+    "@ampproject/remapping": ^2.2.0
+    "@babel/code-frame": ^7.24.6
+    "@babel/generator": ^7.24.6
+    "@babel/helper-compilation-targets": ^7.24.6
+    "@babel/helper-module-transforms": ^7.24.6
+    "@babel/helpers": ^7.24.6
+    "@babel/parser": ^7.24.6
+    "@babel/template": ^7.24.6
+    "@babel/traverse": ^7.24.6
+    "@babel/types": ^7.24.6
+    convert-source-map: ^2.0.0
+    debug: ^4.1.0
+    gensync: ^1.0.0-beta.2
+    json5: ^2.2.3
+    semver: ^6.3.1
+  checksum: f8af23de19865818c27c2fbe0d87b0834b118386da5ee09b20ae0cf7a5540065054ef2b70f377d025d9feee765db18df39900e4c18e905988b94b54a104c738e
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.14.0, @babel/generator@npm:^7.18.13, @babel/generator@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/generator@npm:7.24.6"
+  dependencies:
+    "@babel/types": ^7.24.6
+    "@jridgewell/gen-mapping": ^0.3.5
+    "@jridgewell/trace-mapping": ^0.3.25
+    jsesc: ^2.5.1
+  checksum: a477e03129106908f464b195c4f138052d732cfca47506b127edbed6a496371bae821662a8a4e51e6d144ac236a5d05dc2da0e145e29bb8e19d3e7c480ac00fe
+  languageName: node
+  linkType: hard
+
 "@babel/generator@npm:^7.20.0, @babel/generator@npm:^7.23.5, @babel/generator@npm:^7.7.2":
   version: 7.23.5
   resolution: "@babel/generator@npm:7.23.5"
@@ -195,6 +287,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-compilation-targets@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/helper-compilation-targets@npm:7.24.6"
+  dependencies:
+    "@babel/compat-data": ^7.24.6
+    "@babel/helper-validator-option": ^7.24.6
+    browserslist: ^4.22.2
+    lru-cache: ^5.1.1
+    semver: ^6.3.1
+  checksum: c66bf86387fbeefc617db9510de553880ed33dc91308421ee36a7b489d0e8c8eb615e0f467a9ec886eada7c05b03e421e55b2a724ff302402fdd4e0c0b2b0443
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/helper-create-class-features-plugin@npm:7.23.5"
@@ -249,6 +354,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-environment-visitor@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/helper-environment-visitor@npm:7.24.6"
+  checksum: 9c2b3f1ee7ba46b61b0482efab6d37f5c76f0ea4e9d9775df44a89644729c3a50101040a0233543ec6c3f416d8e548d337f310ff3e164f847945507428ee39e5
+  languageName: node
+  linkType: hard
+
 "@babel/helper-function-name@npm:^7.22.5, @babel/helper-function-name@npm:^7.23.0":
   version: 7.23.0
   resolution: "@babel/helper-function-name@npm:7.23.0"
@@ -259,6 +371,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-function-name@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/helper-function-name@npm:7.24.6"
+  dependencies:
+    "@babel/template": ^7.24.6
+    "@babel/types": ^7.24.6
+  checksum: d7a2198b6bf2cae9767d5b0d6cb5d3cbd9a07640ad4b6798abb7d7242e8f32765a94fd98ab1a039d7607f0ddbeaf9ddc822dd536b856e499f7082899c6f455f0
+  languageName: node
+  linkType: hard
+
 "@babel/helper-hoist-variables@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-hoist-variables@npm:7.22.5"
@@ -268,6 +390,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-hoist-variables@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/helper-hoist-variables@npm:7.24.6"
+  dependencies:
+    "@babel/types": ^7.24.6
+  checksum: 4819b574393a5214aff6ae02a6e5250ace2564f8bcdb28d580ffec57bbb2092425e8f39563d75cfa268940a01fd425bad503c0b92717c12426f15cf6847855d3
+  languageName: node
+  linkType: hard
+
 "@babel/helper-member-expression-to-functions@npm:^7.22.15, @babel/helper-member-expression-to-functions@npm:^7.23.0":
   version: 7.23.0
   resolution: "@babel/helper-member-expression-to-functions@npm:7.23.0"
@@ -286,6 +417,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/helper-module-imports@npm:7.24.6"
+  dependencies:
+    "@babel/types": ^7.24.6
+  checksum: 3484420c45529aac34cb14111a03c78edab84e5c4419634affe61176d832af82963395ea319f67c7235fd4106d9052a9f3ce012d2d57d56644572d3f7d495231
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-transforms@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/helper-module-transforms@npm:7.23.3"
@@ -301,6 +441,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/helper-module-transforms@npm:7.24.6"
+  dependencies:
+    "@babel/helper-environment-visitor": ^7.24.6
+    "@babel/helper-module-imports": ^7.24.6
+    "@babel/helper-simple-access": ^7.24.6
+    "@babel/helper-split-export-declaration": ^7.24.6
+    "@babel/helper-validator-identifier": ^7.24.6
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 904e2a0701eb1eeb84b0d0df5dacdc40291307025b7e3a9a3c6f3eee912c893524f9dc7f5624225a5783a258dec2eb2489a9638bf5f3de26ebfcbcac1b5cc2fc
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-optimise-call-expression@npm:7.22.5"
@@ -317,6 +472,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-plugin-utils@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/helper-plugin-utils@npm:7.24.6"
+  checksum: d22bb82c75afed0d8c37784876fd6deb9db06ef21526db909ef7986a6050b50beb60a7823c08a1bb7c57c668af2e086d8086e88b6f9140b0d9ade07472f7c748
+  languageName: node
+  linkType: hard
+
 "@babel/helper-remap-async-to-generator@npm:^7.18.9, @babel/helper-remap-async-to-generator@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-remap-async-to-generator@npm:7.22.20"
@@ -352,6 +514,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-simple-access@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/helper-simple-access@npm:7.24.6"
+  dependencies:
+    "@babel/types": ^7.24.6
+  checksum: 929162e887efc1bcadd4e141ed7782b45fccc6873d5023a744fee9c94d16d3a13dbfb66eb259181613a36c2d35f7d2088ee37e76014223d3b9b6c9ef1094e4b6
+  languageName: node
+  linkType: hard
+
 "@babel/helper-skip-transparent-expression-wrappers@npm:^7.20.0, @babel/helper-skip-transparent-expression-wrappers@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.22.5"
@@ -370,6 +541,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-split-export-declaration@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/helper-split-export-declaration@npm:7.24.6"
+  dependencies:
+    "@babel/types": ^7.24.6
+  checksum: b546fd7e186b4aa69f96e041b6c4c9154115a2579a297b86773719dbed53b938cfc3f6b4996ae410296bb8aa30ea031f9ff31f1255aa25c3af75026c5b7c4059
+  languageName: node
+  linkType: hard
+
 "@babel/helper-string-parser@npm:^7.23.4":
   version: 7.23.4
   resolution: "@babel/helper-string-parser@npm:7.23.4"
@@ -377,6 +557,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-string-parser@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/helper-string-parser@npm:7.24.6"
+  checksum: c8c614a663928b67c5c65cfea958ed20c858fa2af8c957d301bd852c0ab98adae0861f081fd8f5add16539d9393bd4b10b8c86a97a9d7304f70a6a67b2c2ff07
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-validator-identifier@npm:7.22.20"
@@ -384,6 +571,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/helper-validator-identifier@npm:7.24.6"
+  checksum: a265a6fba570332dca63ad7e749b867d29b52da2573dc62bf19b5b8c5387d4f4296af33da9da7c71ffe3d3abecd743418278f56d38b057ad4b53f09b937fe113
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-option@npm:^7.22.15, @babel/helper-validator-option@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/helper-validator-option@npm:7.23.5"
@@ -391,6 +585,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-option@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/helper-validator-option@npm:7.24.6"
+  checksum: 5defb2da74e1cac9497016f4e41698aeed75ec7a5e9dc07e777cdb67ef73cd2e27bd2bf8a3ab8d37e0b93a6a45524a9728f03e263afdef452436cf74794bde87
+  languageName: node
+  linkType: hard
+
 "@babel/helper-wrap-function@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-wrap-function@npm:7.22.20"
@@ -413,6 +614,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/helpers@npm:7.24.6"
+  dependencies:
+    "@babel/template": ^7.24.6
+    "@babel/types": ^7.24.6
+  checksum: c936058fd5caf7173e157f790fdbe9535237a7b8bc2c3d084bdf16467a034f73bd5d731deb514aa84e356c72de1cc93500a376f9d481f5c1e335f5a563426e58
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.10.4, @babel/highlight@npm:^7.23.4":
   version: 7.23.4
   resolution: "@babel/highlight@npm:7.23.4"
@@ -424,6 +635,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/highlight@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/highlight@npm:7.24.6"
+  dependencies:
+    "@babel/helper-validator-identifier": ^7.24.6
+    chalk: ^2.4.2
+    js-tokens: ^4.0.0
+    picocolors: ^1.0.0
+  checksum: 2f8f7f060eeccc3ddf03ba12c263995de0e6c0dd31ad224bed58d983b3bb08fe34dfc01440396266456a4cad83226c38ad6814805bc5d0c774a056cac9182eca
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.0.0, @babel/parser@npm:^7.1.0, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.0, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/parser@npm:7.23.5"
@@ -433,6 +656,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.16.8, @babel/parser@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/parser@npm:7.24.6"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: ca3773f5b2a4a065b827990ca0c867e670f01d7a7d7278838bd64d583e68ed52356b5a613303c5aa736d20f024728fec80fc5845fed1eb751ab5f1bfbdc1dd3c
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3"
@@ -706,6 +938,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-import-assertions@npm:^7.20.0":
+  version: 7.24.6
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.6"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.24.6
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: abd640f9e2cd9b17d8f88a4431229429d57369d4fa5cbdab62b7a329812b3e7733e3f9f316dd393addb6db8d9b9b58dbd8ac39685a0c1e07bbb89b6c82445ae9
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-import-assertions@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-syntax-import-assertions@npm:7.23.3"
@@ -1772,6 +2015,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7, @babel/template@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/template@npm:7.24.6"
+  dependencies:
+    "@babel/code-frame": ^7.24.6
+    "@babel/parser": ^7.24.6
+    "@babel/types": ^7.24.6
+  checksum: 8e532ebdd5e1398c030af16881061bad43b9c3b758a193a6289dc5be5988cc543f7aa56a360e15b755258c0b3d387f3cd78b505835b040a2729d0261d0ff1711
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:^7.14.0, @babel/traverse@npm:^7.16.8, @babel/traverse@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/traverse@npm:7.24.6"
+  dependencies:
+    "@babel/code-frame": ^7.24.6
+    "@babel/generator": ^7.24.6
+    "@babel/helper-environment-visitor": ^7.24.6
+    "@babel/helper-function-name": ^7.24.6
+    "@babel/helper-hoist-variables": ^7.24.6
+    "@babel/helper-split-export-declaration": ^7.24.6
+    "@babel/parser": ^7.24.6
+    "@babel/types": ^7.24.6
+    debug: ^4.3.1
+    globals: ^11.1.0
+  checksum: 654151b2ab5c9d5031c274cf197f707b8a27a1c70b38fcb8d1bf5ad2d8848f38675ab9c2a86aeb804657c5817124ac5be4cb6f5defa8ef7ac40596e1220697aa
+  languageName: node
+  linkType: hard
+
 "@babel/traverse@npm:^7.20.0, @babel/traverse@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/traverse@npm:7.23.5"
@@ -1801,6 +2073,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.16.8, @babel/types@npm:^7.18.13, @babel/types@npm:^7.24.6":
+  version: 7.24.6
+  resolution: "@babel/types@npm:7.24.6"
+  dependencies:
+    "@babel/helper-string-parser": ^7.24.6
+    "@babel/helper-validator-identifier": ^7.24.6
+    to-fast-properties: ^2.0.0
+  checksum: 58d798dd37e6b14f818730b4536795d68d28ccd5dc2a105fd977104789b20602be11d92cdd47cdbd48d8cce3cc0e14c7773813357ad9d5d6e94d70587eb45bf5
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -3267,141 +3550,836 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graphql-typed-document-node/core@npm:^3.1.0, @graphql-typed-document-node/core@npm:^3.1.1":
-  version: 3.2.0
-  resolution: "@graphql-typed-document-node/core@npm:3.2.0"
+"@graphql-codegen/add@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@graphql-codegen/add@npm:5.0.2"
+  dependencies:
+    "@graphql-codegen/plugin-helpers": ^5.0.3
+    tslib: ~2.6.0
   peerDependencies:
-    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
-  checksum: fa44443accd28c8cf4cb96aaaf39d144a22e8b091b13366843f4e97d19c7bfeaf609ce3c7603a4aeffe385081eaf8ea245d078633a7324c11c5ec4b2011bb76d
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: ce214dfe274ab953b727355e39d0c08f8f5bcc1fad4d867d30321b80efaee3fa8325f012e8c929d4030bea4766e100f1a66393f8a71e58261adbed798646778a
   languageName: node
   linkType: hard
 
-"@hapi/hoek@npm:^9.0.0":
-  version: 9.3.0
-  resolution: "@hapi/hoek@npm:9.3.0"
-  checksum: 4771c7a776242c3c022b168046af4e324d116a9d2e1d60631ee64f474c6e38d1bb07092d898bf95c7bc5d334c5582798a1456321b2e53ca817d4e7c88bc25b43
+"@graphql-codegen/cli@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@graphql-codegen/cli@npm:5.0.2"
+  dependencies:
+    "@babel/generator": ^7.18.13
+    "@babel/template": ^7.18.10
+    "@babel/types": ^7.18.13
+    "@graphql-codegen/client-preset": ^4.2.2
+    "@graphql-codegen/core": ^4.0.2
+    "@graphql-codegen/plugin-helpers": ^5.0.3
+    "@graphql-tools/apollo-engine-loader": ^8.0.0
+    "@graphql-tools/code-file-loader": ^8.0.0
+    "@graphql-tools/git-loader": ^8.0.0
+    "@graphql-tools/github-loader": ^8.0.0
+    "@graphql-tools/graphql-file-loader": ^8.0.0
+    "@graphql-tools/json-file-loader": ^8.0.0
+    "@graphql-tools/load": ^8.0.0
+    "@graphql-tools/prisma-loader": ^8.0.0
+    "@graphql-tools/url-loader": ^8.0.0
+    "@graphql-tools/utils": ^10.0.0
+    "@whatwg-node/fetch": ^0.8.0
+    chalk: ^4.1.0
+    cosmiconfig: ^8.1.3
+    debounce: ^1.2.0
+    detect-indent: ^6.0.0
+    graphql-config: ^5.0.2
+    inquirer: ^8.0.0
+    is-glob: ^4.0.1
+    jiti: ^1.17.1
+    json-to-pretty-yaml: ^1.2.2
+    listr2: ^4.0.5
+    log-symbols: ^4.0.0
+    micromatch: ^4.0.5
+    shell-quote: ^1.7.3
+    string-env-interpolation: ^1.0.1
+    ts-log: ^2.2.3
+    tslib: ^2.4.0
+    yaml: ^2.3.1
+    yargs: ^17.0.0
+  peerDependencies:
+    "@parcel/watcher": ^2.1.0
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  peerDependenciesMeta:
+    "@parcel/watcher":
+      optional: true
+  bin:
+    gql-gen: cjs/bin.js
+    graphql-code-generator: cjs/bin.js
+    graphql-codegen: cjs/bin.js
+    graphql-codegen-esm: esm/bin.js
+  checksum: 82c9a26ffeeee620d6e6863280efb6302d6ac4bdccfd80e27bf811677e58bbf4ece7767e43a999194b0b8922f32226eb7a3c21e0a8e2bebc04a3abc64a981786
   languageName: node
   linkType: hard
 
-"@hapi/topo@npm:^5.0.0":
-  version: 5.1.0
-  resolution: "@hapi/topo@npm:5.1.0"
+"@graphql-codegen/client-preset@npm:^4.2.2":
+  version: 4.2.6
+  resolution: "@graphql-codegen/client-preset@npm:4.2.6"
   dependencies:
-    "@hapi/hoek": ^9.0.0
-  checksum: 604dfd5dde76d5c334bd03f9001fce69c7ce529883acf92da96f4fe7e51221bf5e5110e964caca287a6a616ba027c071748ab636ff178ad750547fba611d6014
+    "@babel/helper-plugin-utils": ^7.20.2
+    "@babel/template": ^7.20.7
+    "@graphql-codegen/add": ^5.0.2
+    "@graphql-codegen/gql-tag-operations": 4.0.7
+    "@graphql-codegen/plugin-helpers": ^5.0.4
+    "@graphql-codegen/typed-document-node": ^5.0.7
+    "@graphql-codegen/typescript": ^4.0.7
+    "@graphql-codegen/typescript-operations": ^4.2.1
+    "@graphql-codegen/visitor-plugin-common": ^5.2.0
+    "@graphql-tools/documents": ^1.0.0
+    "@graphql-tools/utils": ^10.0.0
+    "@graphql-typed-document-node/core": 3.2.0
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: 944814fbb9cc390fa8ea043030428395a4f8912bed439276f32d4828450eb2451eebd1c5ef78fdd7cc90ebded1694f24e2985e0215829c573f74b104f4d919e9
   languageName: node
   linkType: hard
 
-"@humanwhocodes/config-array@npm:^0.11.13":
-  version: 0.11.13
-  resolution: "@humanwhocodes/config-array@npm:0.11.13"
+"@graphql-codegen/core@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "@graphql-codegen/core@npm:4.0.2"
   dependencies:
-    "@humanwhocodes/object-schema": ^2.0.1
-    debug: ^4.1.1
-    minimatch: ^3.0.5
-  checksum: f8ea57b0d7ed7f2d64cd3944654976829d9da91c04d9c860e18804729a33f7681f78166ef4c761850b8c324d362f7d53f14c5c44907a6b38b32c703ff85e4805
+    "@graphql-codegen/plugin-helpers": ^5.0.3
+    "@graphql-tools/schema": ^10.0.0
+    "@graphql-tools/utils": ^10.0.0
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: 5fda4e843174aacd4a481b73b4d259fa2df7ffe4200bd06e95ecd4b3f43aa5969deeaeb51f6cf15a542e99ee5756c3e02a29d9d2ff9891af40e234a8f68ead4d
   languageName: node
   linkType: hard
 
-"@humanwhocodes/module-importer@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "@humanwhocodes/module-importer@npm:1.0.1"
-  checksum: 0fd22007db8034a2cdf2c764b140d37d9020bbfce8a49d3ec5c05290e77d4b0263b1b972b752df8c89e5eaa94073408f2b7d977aed131faf6cf396ebb5d7fb61
+"@graphql-codegen/gql-tag-operations@npm:4.0.7":
+  version: 4.0.7
+  resolution: "@graphql-codegen/gql-tag-operations@npm:4.0.7"
+  dependencies:
+    "@graphql-codegen/plugin-helpers": ^5.0.4
+    "@graphql-codegen/visitor-plugin-common": 5.2.0
+    "@graphql-tools/utils": ^10.0.0
+    auto-bind: ~4.0.0
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: 337bcb2811b985db63c201103d4ba341bebb54a38c46c5d462f60cf2f0dbe18a61f600cb7d59759ee6350e3ffea173f6d8687b2c697f2ed46cf3c57b7d31c7e8
   languageName: node
   linkType: hard
 
-"@humanwhocodes/object-schema@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "@humanwhocodes/object-schema@npm:2.0.1"
-  checksum: 24929487b1ed48795d2f08346a0116cc5ee4634848bce64161fb947109352c562310fd159fc64dda0e8b853307f5794605191a9547f7341158559ca3c8262a45
+"@graphql-codegen/plugin-helpers@npm:^2.7.2":
+  version: 2.7.2
+  resolution: "@graphql-codegen/plugin-helpers@npm:2.7.2"
+  dependencies:
+    "@graphql-tools/utils": ^8.8.0
+    change-case-all: 1.0.14
+    common-tags: 1.8.2
+    import-from: 4.0.0
+    lodash: ~4.17.0
+    tslib: ~2.4.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: 66e0d507ad5db60b67092ebf7632d464d56ab446ac8fd87c293e00d9016944912d8cf9199e3e026b0a9247a50f50c4118a44f49e13675db64211652cd6259b05
   languageName: node
   linkType: hard
 
-"@inquirer/checkbox@npm:^1.2.8":
-  version: 1.5.0
-  resolution: "@inquirer/checkbox@npm:1.5.0"
+"@graphql-codegen/plugin-helpers@npm:^3.0.0":
+  version: 3.1.2
+  resolution: "@graphql-codegen/plugin-helpers@npm:3.1.2"
   dependencies:
-    "@inquirer/core": ^5.1.1
-    "@inquirer/type": ^1.1.5
-    ansi-escapes: ^4.3.2
-    chalk: ^4.1.2
-    figures: ^3.2.0
-  checksum: 3137452567ef3ed7723b475d4ad5ff9bd31f45231fcde501f1fcc0ebc8af71e479ac1d7ad10ee842987fb338651da32459944016be2dfcae6cb3d7cbf6ada9a3
+    "@graphql-tools/utils": ^9.0.0
+    change-case-all: 1.0.15
+    common-tags: 1.8.2
+    import-from: 4.0.0
+    lodash: ~4.17.0
+    tslib: ~2.4.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: 4d0c615738570681b5ffd3c07305a35d6aa3e5fd87c9199c0a670b95529ab865b1df978ce584d5b415107a567ac484e56a48db129a6d1d2eb8a254fbd3260e39
   languageName: node
   linkType: hard
 
-"@inquirer/confirm@npm:^1.0.11":
-  version: 1.0.11
-  resolution: "@inquirer/confirm@npm:1.0.11"
+"@graphql-codegen/plugin-helpers@npm:^5.0.3, @graphql-codegen/plugin-helpers@npm:^5.0.4":
+  version: 5.0.4
+  resolution: "@graphql-codegen/plugin-helpers@npm:5.0.4"
   dependencies:
-    "@inquirer/core": ^1.3.0
-    "@inquirer/type": ^1.0.5
-    chalk: ^4.1.2
-  checksum: 791650830d9dc1eef9870387ffae14b103481811adab740865ae7d9da60f5fa2fb795df94db51dc62a3daba002c5e4df71080c03679eabdc28a7782bb3fd8de4
+    "@graphql-tools/utils": ^10.0.0
+    change-case-all: 1.0.15
+    common-tags: 1.8.2
+    import-from: 4.0.0
+    lodash: ~4.17.0
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: 0f0272afbbc79e665fb23bb823721587470e12f77aba39426e2524386ccbb6dec8d42c0ccaf8e0b95fcda030c83cb4e6302bce3c3f7b2c1ed50c33a40619fcd0
   languageName: node
   linkType: hard
 
-"@inquirer/core@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "@inquirer/core@npm:1.3.0"
+"@graphql-codegen/schema-ast@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "@graphql-codegen/schema-ast@npm:4.0.2"
   dependencies:
-    "@inquirer/type": ^1.0.5
-    ansi-escapes: ^4.3.2
-    chalk: ^4.1.2
-    cli-spinners: ^2.8.0
-    cli-width: ^4.0.0
-    figures: ^3.2.0
-    mute-stream: ^1.0.0
-    run-async: ^3.0.0
-    string-width: ^4.2.3
-    strip-ansi: ^6.0.1
-    wrap-ansi: ^6.0.1
-  checksum: e6d3ee4a32714e37bc1a0b094c69367017bbbe1bc86743807e54112a4c370ee7c205507455006b7a4de8c176699d91eb1f9edcb8286d6b0393e364d564d8e55a
+    "@graphql-codegen/plugin-helpers": ^5.0.3
+    "@graphql-tools/utils": ^10.0.0
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: f6097ceac7ef1266487c4937c916c6c67034c3decad3f714daa5370d5a4d68996be70f850a8765ccc71fa234ddb7f1ba7ffc02ba97a761930859196a96348e01
   languageName: node
   linkType: hard
 
-"@inquirer/core@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "@inquirer/core@npm:5.1.1"
+"@graphql-codegen/typed-document-node@npm:^5.0.7":
+  version: 5.0.7
+  resolution: "@graphql-codegen/typed-document-node@npm:5.0.7"
   dependencies:
-    "@inquirer/type": ^1.1.5
-    "@types/mute-stream": ^0.0.4
-    "@types/node": ^20.9.0
-    "@types/wrap-ansi": ^3.0.0
-    ansi-escapes: ^4.3.2
-    chalk: ^4.1.2
-    cli-spinners: ^2.9.1
-    cli-width: ^4.1.0
-    figures: ^3.2.0
-    mute-stream: ^1.0.0
-    run-async: ^3.0.0
-    signal-exit: ^4.1.0
-    strip-ansi: ^6.0.1
-    wrap-ansi: ^6.2.0
-  checksum: 4fde57d39e7e9822d638eb15d8444192b58fb63a54230892acbe7b8816a0d519b782fa3b38d19747b58da84a243345645d9c5c2442ffdd5478b9f0f5b91c3d84
+    "@graphql-codegen/plugin-helpers": ^5.0.4
+    "@graphql-codegen/visitor-plugin-common": 5.2.0
+    auto-bind: ~4.0.0
+    change-case-all: 1.0.15
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: 5d50f5eb337cb58c654358ecc7387c2bcb2c3df851f5e7f1aa228d7352709c1f37a34420b8d8782afb812411425fb1bc1e6e0b739979b342ddc474d19ef3661d
   languageName: node
   linkType: hard
 
-"@inquirer/editor@npm:^1.0.11":
-  version: 1.2.13
-  resolution: "@inquirer/editor@npm:1.2.13"
+"@graphql-codegen/typescript-operations@npm:^4.2.0, @graphql-codegen/typescript-operations@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "@graphql-codegen/typescript-operations@npm:4.2.1"
   dependencies:
-    "@inquirer/core": ^5.1.1
-    "@inquirer/type": ^1.1.5
-    chalk: ^4.1.2
-    external-editor: ^3.1.0
-  checksum: 1e3dacbfec7244adc45547172ec10f6986871f112979a9c02e2f635e9c9c61bd9f31ec1f5e512e214dd462239dd82a6a23cdc89cfa89660de930dc5f941de838
+    "@graphql-codegen/plugin-helpers": ^5.0.4
+    "@graphql-codegen/typescript": ^4.0.7
+    "@graphql-codegen/visitor-plugin-common": 5.2.0
+    auto-bind: ~4.0.0
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: 81e97acd3f7adb615705ce2b4216bf31e787796fb2604f7da5872351f2bb3436b603f67920da27d71c09b342fe767165e1112d56dd8e5ef54b28657e5500c2bd
   languageName: node
   linkType: hard
 
-"@inquirer/expand@npm:^1.0.11":
-  version: 1.1.14
-  resolution: "@inquirer/expand@npm:1.1.14"
+"@graphql-codegen/typescript-react-apollo@npm:^4.3.0":
+  version: 4.3.0
+  resolution: "@graphql-codegen/typescript-react-apollo@npm:4.3.0"
   dependencies:
-    "@inquirer/core": ^5.1.1
-    "@inquirer/type": ^1.1.5
-    chalk: ^4.1.2
-    figures: ^3.2.0
+    "@graphql-codegen/plugin-helpers": ^3.0.0
+    "@graphql-codegen/visitor-plugin-common": 2.13.1
+    auto-bind: ~4.0.0
+    change-case-all: 1.0.15
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+    graphql-tag: ^2.0.0
+  checksum: 49ad7592d1447e3b613cb0080d2d378192ef5aad2ccfcced1d9e36d8025ba2e4bf273b8334f75ba3baa2f2afd34362ee6cd9f9096eb7c8f1b849a1f602822ea5
+  languageName: node
+  linkType: hard
+
+"@graphql-codegen/typescript@npm:^4.0.6, @graphql-codegen/typescript@npm:^4.0.7":
+  version: 4.0.7
+  resolution: "@graphql-codegen/typescript@npm:4.0.7"
+  dependencies:
+    "@graphql-codegen/plugin-helpers": ^5.0.4
+    "@graphql-codegen/schema-ast": ^4.0.2
+    "@graphql-codegen/visitor-plugin-common": 5.2.0
+    auto-bind: ~4.0.0
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: d6717755d649c1685ecd7a7490d411c57f8f4f091d5b61c197a2e4649804e40cf499bd8ce8c0cccee3c073ef99ca4d436ff681f616c0bca5766eb56d489b96a3
+  languageName: node
+  linkType: hard
+
+"@graphql-codegen/visitor-plugin-common@npm:2.13.1":
+  version: 2.13.1
+  resolution: "@graphql-codegen/visitor-plugin-common@npm:2.13.1"
+  dependencies:
+    "@graphql-codegen/plugin-helpers": ^2.7.2
+    "@graphql-tools/optimize": ^1.3.0
+    "@graphql-tools/relay-operation-optimizer": ^6.5.0
+    "@graphql-tools/utils": ^8.8.0
+    auto-bind: ~4.0.0
+    change-case-all: 1.0.14
+    dependency-graph: ^0.11.0
+    graphql-tag: ^2.11.0
+    parse-filepath: ^1.0.2
+    tslib: ~2.4.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: 0c329aa6e435602f2f6c1569ec2091b7850f58cc5dca7ac763c38c82588545ec1110c1de587f5f3949b11ff96f94401d1e63e329607d78424583b276fd08f1ae
+  languageName: node
+  linkType: hard
+
+"@graphql-codegen/visitor-plugin-common@npm:5.2.0, @graphql-codegen/visitor-plugin-common@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "@graphql-codegen/visitor-plugin-common@npm:5.2.0"
+  dependencies:
+    "@graphql-codegen/plugin-helpers": ^5.0.4
+    "@graphql-tools/optimize": ^2.0.0
+    "@graphql-tools/relay-operation-optimizer": ^7.0.0
+    "@graphql-tools/utils": ^10.0.0
+    auto-bind: ~4.0.0
+    change-case-all: 1.0.15
+    dependency-graph: ^0.11.0
+    graphql-tag: ^2.11.0
+    parse-filepath: ^1.0.2
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: 42f433ae7cbf16b95d9e6b4d579d70b8724f4f6655e37181fb7522f0be4ea0e1d365f26b922a544f636e34bb554c0fceba76d591de6a4bb3b47a7ea2f660cc2f
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/apollo-engine-loader@npm:^8.0.0":
+  version: 8.0.1
+  resolution: "@graphql-tools/apollo-engine-loader@npm:8.0.1"
+  dependencies:
+    "@ardatan/sync-fetch": ^0.0.1
+    "@graphql-tools/utils": ^10.0.13
+    "@whatwg-node/fetch": ^0.9.0
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 4baef5a8fd85787568188f852446e4f2453a21026c60b9391641093bff0a88172df8beb8bbfe2b134e177acad90eeb613387a1185699d1e7718e1dfa701c6fd7
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/batch-execute@npm:^9.0.4":
+  version: 9.0.4
+  resolution: "@graphql-tools/batch-execute@npm:9.0.4"
+  dependencies:
+    "@graphql-tools/utils": ^10.0.13
+    dataloader: ^2.2.2
+    tslib: ^2.4.0
+    value-or-promise: ^1.0.12
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: d547da2ca888a1ebd8552f1be1c353e88bdbcb85c745de3d869e22da7f1981b4621f950a22ce719c645cc6435bc683c77253d8f19a0baaf7d4058625f4ce8891
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/code-file-loader@npm:^8.0.0":
+  version: 8.1.2
+  resolution: "@graphql-tools/code-file-loader@npm:8.1.2"
+  dependencies:
+    "@graphql-tools/graphql-tag-pluck": 8.3.1
+    "@graphql-tools/utils": ^10.0.13
+    globby: ^11.0.3
+    tslib: ^2.4.0
+    unixify: ^1.0.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 120267376f4dc5dc0164228393e5edfb239e894370bfdab5e0402b2068ab51127c73cff1f37240600e4f98acdd610508eae071370a2661126e53662fc7bb33b0
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/delegate@npm:^10.0.4":
+  version: 10.0.11
+  resolution: "@graphql-tools/delegate@npm:10.0.11"
+  dependencies:
+    "@graphql-tools/batch-execute": ^9.0.4
+    "@graphql-tools/executor": ^1.2.1
+    "@graphql-tools/schema": ^10.0.4
+    "@graphql-tools/utils": ^10.2.1
+    dataloader: ^2.2.2
+    tslib: ^2.5.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: b267c91a3f11fdcb2701783eb53658e0842788598bd3bb6260bb3df901e67a349645c4527d25ea55d4a6f2e960891fb147c9acb756ba7fc8641eb2ee70da62d0
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/documents@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "@graphql-tools/documents@npm:1.0.1"
+  dependencies:
+    lodash.sortby: ^4.7.0
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: c6ff859d2673dbf884f19d6319735afacc6bff2df6f8ea3dbf56839d01568f61210f256f0905156f123428cc24962ada26b37903263699fc8cd7efb8849a6508
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/executor-graphql-ws@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@graphql-tools/executor-graphql-ws@npm:1.1.2"
+  dependencies:
+    "@graphql-tools/utils": ^10.0.13
+    "@types/ws": ^8.0.0
+    graphql-ws: ^5.14.0
+    isomorphic-ws: ^5.0.0
+    tslib: ^2.4.0
+    ws: ^8.13.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 5273c3bace12d800493c3142c66a432b886da13cb6755977f29311b9d96925bf4504c7d8c1a67761b4cd068b72af86e8952d69c49c239388c4ce8e4bb97e1817
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/executor-http@npm:^1.0.9":
+  version: 1.0.9
+  resolution: "@graphql-tools/executor-http@npm:1.0.9"
+  dependencies:
+    "@graphql-tools/utils": ^10.0.13
+    "@repeaterjs/repeater": ^3.0.4
+    "@whatwg-node/fetch": ^0.9.0
+    extract-files: ^11.0.0
+    meros: ^1.2.1
+    tslib: ^2.4.0
+    value-or-promise: ^1.0.12
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: c3f5b42fe2b3b778b1ccb91a397bf9ba113c3d641ff7efb961e9556f26eef6e42426d9ce8b68f836ad103f548a9dc28dec02926638702e88fae1a695faffc6cd
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/executor-legacy-ws@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "@graphql-tools/executor-legacy-ws@npm:1.0.6"
+  dependencies:
+    "@graphql-tools/utils": ^10.0.13
+    "@types/ws": ^8.0.0
+    isomorphic-ws: ^5.0.0
+    tslib: ^2.4.0
+    ws: ^8.15.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 1333ed9bb4636e1e70dbda234a18bd0aa4db7e375dfaa1f334c2596e2ab0ce7125a2e1250806b57ca96651de94c39f639e427a2047cff299587b76c21cb4dacd
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/executor@npm:^1.2.1":
+  version: 1.2.6
+  resolution: "@graphql-tools/executor@npm:1.2.6"
+  dependencies:
+    "@graphql-tools/utils": ^10.1.1
+    "@graphql-typed-document-node/core": 3.2.0
+    "@repeaterjs/repeater": ^3.0.4
+    tslib: ^2.4.0
+    value-or-promise: ^1.0.12
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 4b1b644737207f633e1440e168f126dc50f0373524e6a20178e4c6eae25f95d9478d6b5b3f1057aa93292a7e67f25f4aff6b213491a3cdf3dd5a6ff5c9c734e2
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/git-loader@npm:^8.0.0":
+  version: 8.0.6
+  resolution: "@graphql-tools/git-loader@npm:8.0.6"
+  dependencies:
+    "@graphql-tools/graphql-tag-pluck": 8.3.1
+    "@graphql-tools/utils": ^10.0.13
+    is-glob: 4.0.3
+    micromatch: ^4.0.4
+    tslib: ^2.4.0
+    unixify: ^1.0.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: d080c6e3df0f2a9cdaa37dbdc3f4a1958cdfb3a7a4dd665ebfc058cd35c68c1d81ee85420e5994124402122d86c9bfc64b31538a384ca367761031c79efb4557
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/github-loader@npm:^8.0.0":
+  version: 8.0.1
+  resolution: "@graphql-tools/github-loader@npm:8.0.1"
+  dependencies:
+    "@ardatan/sync-fetch": ^0.0.1
+    "@graphql-tools/executor-http": ^1.0.9
+    "@graphql-tools/graphql-tag-pluck": ^8.0.0
+    "@graphql-tools/utils": ^10.0.13
+    "@whatwg-node/fetch": ^0.9.0
+    tslib: ^2.4.0
+    value-or-promise: ^1.0.12
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 40d379f4c35bf318ad643ada4133dd630fac34dc3c959e10887da9730caf7c71e5e2c47eef62fdb15e90ce7b05281459cd86639a4f86cdc8784c7b9974d6c017
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/graphql-file-loader@npm:^8.0.0":
+  version: 8.0.1
+  resolution: "@graphql-tools/graphql-file-loader@npm:8.0.1"
+  dependencies:
+    "@graphql-tools/import": 7.0.1
+    "@graphql-tools/utils": ^10.0.13
+    globby: ^11.0.3
+    tslib: ^2.4.0
+    unixify: ^1.0.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 55fd5cc96ea063341e03be2fa72a6494e8fedb0cd09cc2a4664732fc81e57e5c67026f63ff9e6c1afc284bd303988cd1bda715c88100b8316b5e8cdf6da70a32
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/graphql-tag-pluck@npm:8.3.1, @graphql-tools/graphql-tag-pluck@npm:^8.0.0":
+  version: 8.3.1
+  resolution: "@graphql-tools/graphql-tag-pluck@npm:8.3.1"
+  dependencies:
+    "@babel/core": ^7.22.9
+    "@babel/parser": ^7.16.8
+    "@babel/plugin-syntax-import-assertions": ^7.20.0
+    "@babel/traverse": ^7.16.8
+    "@babel/types": ^7.16.8
+    "@graphql-tools/utils": ^10.0.13
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: efbfd1e635ef2473dc7f2d607cc5bf075c823fe332e85bf8f0942c3c4c4857bc9dff0d6ced12ee98381e60724db4192a8a5d3921091f89637569e3607effe249
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/import@npm:7.0.1":
+  version: 7.0.1
+  resolution: "@graphql-tools/import@npm:7.0.1"
+  dependencies:
+    "@graphql-tools/utils": ^10.0.13
+    resolve-from: 5.0.0
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: eb3596779e1dcebc3453eafdb459575531b30c01ce82c4fb779dccc9d5865ba7e5dbfef443836cd5ecc9250eb8e4001ec0b83878841c2f366d1643ccefc57267
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/json-file-loader@npm:^8.0.0":
+  version: 8.0.1
+  resolution: "@graphql-tools/json-file-loader@npm:8.0.1"
+  dependencies:
+    "@graphql-tools/utils": ^10.0.13
+    globby: ^11.0.3
+    tslib: ^2.4.0
+    unixify: ^1.0.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 803124fc91a83b2e486ec34315510fef1497e4a3800c3557b3d9bf37b8ef182b5898293f05bfee2e663a4102ead766391748901daf92ccf98379fe4ff36cbdee
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/load@npm:^8.0.0":
+  version: 8.0.2
+  resolution: "@graphql-tools/load@npm:8.0.2"
+  dependencies:
+    "@graphql-tools/schema": ^10.0.3
+    "@graphql-tools/utils": ^10.0.13
+    p-limit: 3.1.0
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: ddc4bd9dcf5a799321fb1bd21a27887e3c8321003b1826efabff9aae5c189dd8cce0dffa0a94708ef7d64791daf7e73c8ff95cf2f7e036c131ef5eddccf38e34
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/merge@npm:^9.0.0, @graphql-tools/merge@npm:^9.0.3":
+  version: 9.0.4
+  resolution: "@graphql-tools/merge@npm:9.0.4"
+  dependencies:
+    "@graphql-tools/utils": ^10.0.13
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 9165b833333ae068f2e0c4eb8898259c5daa0d568c12c91d8586b9212ee5ffdc64a9193110adff4aef36f3bc22303429605e840a565d9acb42a4dffe918879db
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/optimize@npm:^1.3.0":
+  version: 1.4.0
+  resolution: "@graphql-tools/optimize@npm:1.4.0"
+  dependencies:
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: bccbc596f2007ae706ee948e900f3174aa80ef043e8ae3467f735a10df0b31873bafdd20c0ef09b662171363a31e2d0859adb362bbf762da00245f8e9fd501b0
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/optimize@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@graphql-tools/optimize@npm:2.0.0"
+  dependencies:
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 7f79c0e1852abc571308e887d27d613da5b797256c8c6eb6c5fe7ca77f09e61524778ae281cebc0b698c51d4fe1074e2b8e0d0627b8e2dcf505aa6ed09b49a2f
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/prisma-loader@npm:^8.0.0":
+  version: 8.0.4
+  resolution: "@graphql-tools/prisma-loader@npm:8.0.4"
+  dependencies:
+    "@graphql-tools/url-loader": ^8.0.2
+    "@graphql-tools/utils": ^10.0.13
+    "@types/js-yaml": ^4.0.0
+    "@whatwg-node/fetch": ^0.9.0
+    chalk: ^4.1.0
+    debug: ^4.3.1
+    dotenv: ^16.0.0
+    graphql-request: ^6.0.0
+    http-proxy-agent: ^7.0.0
+    https-proxy-agent: ^7.0.0
+    jose: ^5.0.0
+    js-yaml: ^4.0.0
+    lodash: ^4.17.20
+    scuid: ^1.1.0
+    tslib: ^2.4.0
+    yaml-ast-parser: ^0.0.43
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 70eeefff95ccacc10bcc94ba6a4f102b4135303dd39fb549209e39b5f460611c730bbc92700b81d2b138b9c32806de48e6b5fbb0166756e255ab72337ce3dadd
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/relay-operation-optimizer@npm:^6.5.0":
+  version: 6.5.18
+  resolution: "@graphql-tools/relay-operation-optimizer@npm:6.5.18"
+  dependencies:
+    "@ardatan/relay-compiler": 12.0.0
+    "@graphql-tools/utils": ^9.2.1
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 56a8c7e6a0bf5fa4d5106276f69c08630a95659eb4300249b3dd28e2057ebb7e7815c51beadf98acdbf695cad5937988d16a3d01ca74fc120c76892968fbeb2b
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/relay-operation-optimizer@npm:^7.0.0":
+  version: 7.0.1
+  resolution: "@graphql-tools/relay-operation-optimizer@npm:7.0.1"
+  dependencies:
+    "@ardatan/relay-compiler": 12.0.0
+    "@graphql-tools/utils": ^10.0.13
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 24a29aea91a0028d7624ae38fed1bfd387ecf5a0e297dbbca23c0f73c51956765db7517b2a75a5b3a6003ea5e3f025f0fc4f527eec22b05e7e25216dc6318797
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/schema@npm:^10.0.0, @graphql-tools/schema@npm:^10.0.3, @graphql-tools/schema@npm:^10.0.4":
+  version: 10.0.4
+  resolution: "@graphql-tools/schema@npm:10.0.4"
+  dependencies:
+    "@graphql-tools/merge": ^9.0.3
+    "@graphql-tools/utils": ^10.2.1
+    tslib: ^2.4.0
+    value-or-promise: ^1.0.12
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: df853b08eaefa9e6a45d513b44121773e1003d8d0e52e97e197670d6a8a79e3b12a7d5d412dea117e6d2efdd02d33610f23e7e50e54008e54a1fc1555687596d
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/url-loader@npm:^8.0.0, @graphql-tools/url-loader@npm:^8.0.2":
+  version: 8.0.2
+  resolution: "@graphql-tools/url-loader@npm:8.0.2"
+  dependencies:
+    "@ardatan/sync-fetch": ^0.0.1
+    "@graphql-tools/delegate": ^10.0.4
+    "@graphql-tools/executor-graphql-ws": ^1.1.2
+    "@graphql-tools/executor-http": ^1.0.9
+    "@graphql-tools/executor-legacy-ws": ^1.0.6
+    "@graphql-tools/utils": ^10.0.13
+    "@graphql-tools/wrap": ^10.0.2
+    "@types/ws": ^8.0.0
+    "@whatwg-node/fetch": ^0.9.0
+    isomorphic-ws: ^5.0.0
+    tslib: ^2.4.0
+    value-or-promise: ^1.0.11
+    ws: ^8.12.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: f3dfb80678fa7b0473f0bbdbbb7ce0d64878bfa2a265bee5dc1eb698ab6c033737a4dd8ab037b880d8aa040771e66118dc067d06af4b813601a2025545e66e1d
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/utils@npm:^10.0.0, @graphql-tools/utils@npm:^10.0.13, @graphql-tools/utils@npm:^10.1.1, @graphql-tools/utils@npm:^10.2.1":
+  version: 10.2.1
+  resolution: "@graphql-tools/utils@npm:10.2.1"
+  dependencies:
+    "@graphql-typed-document-node/core": ^3.1.1
+    cross-inspect: 1.0.0
+    dset: ^3.1.2
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: f7847b7bb6f0eedd35d6b6f6d5a72f79600d2b793dd155832db2ca50786ebcc2203f3d4ecbd39cb96aed92a728883971bd5b24fc32327444dae6cd137450b7e2
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/utils@npm:^8.8.0":
+  version: 8.13.1
+  resolution: "@graphql-tools/utils@npm:8.13.1"
+  dependencies:
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: ff04fdeb29e9ac596ea53386cd5b23cd741bb14c1997c6b0ba3c34ca165bd82b528a355e8c8e2ba726eb39e833ba9cbb0851ba0addb8c6d367089a1145bf9a49
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/utils@npm:^9.0.0, @graphql-tools/utils@npm:^9.2.1":
+  version: 9.2.1
+  resolution: "@graphql-tools/utils@npm:9.2.1"
+  dependencies:
+    "@graphql-typed-document-node/core": ^3.1.1
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 94ed12df5f49e5c338322ffd931236a687a3d5c443bf499f9baab5d4fcd9792234111142be8aa506a01ca2e82732996c4e1d8f6159ff9cc7fdc5c97f63e55226
+  languageName: node
+  linkType: hard
+
+"@graphql-tools/wrap@npm:^10.0.2":
+  version: 10.0.5
+  resolution: "@graphql-tools/wrap@npm:10.0.5"
+  dependencies:
+    "@graphql-tools/delegate": ^10.0.4
+    "@graphql-tools/schema": ^10.0.3
+    "@graphql-tools/utils": ^10.1.1
+    tslib: ^2.4.0
+    value-or-promise: ^1.0.12
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 7cf834eef085a4ad0f6a0a3aa2b58d8bc329375a6acb2e93dc59962ce8655d205877fa08b6a35eaea07c6e7279feab683a03194703db1c9d6be8b1eb7da23d0e
+  languageName: node
+  linkType: hard
+
+"@graphql-typed-document-node/core@npm:3.2.0, @graphql-typed-document-node/core@npm:^3.1.0, @graphql-typed-document-node/core@npm:^3.1.1, @graphql-typed-document-node/core@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "@graphql-typed-document-node/core@npm:3.2.0"
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: fa44443accd28c8cf4cb96aaaf39d144a22e8b091b13366843f4e97d19c7bfeaf609ce3c7603a4aeffe385081eaf8ea245d078633a7324c11c5ec4b2011bb76d
+  languageName: node
+  linkType: hard
+
+"@hapi/hoek@npm:^9.0.0":
+  version: 9.3.0
+  resolution: "@hapi/hoek@npm:9.3.0"
+  checksum: 4771c7a776242c3c022b168046af4e324d116a9d2e1d60631ee64f474c6e38d1bb07092d898bf95c7bc5d334c5582798a1456321b2e53ca817d4e7c88bc25b43
+  languageName: node
+  linkType: hard
+
+"@hapi/topo@npm:^5.0.0":
+  version: 5.1.0
+  resolution: "@hapi/topo@npm:5.1.0"
+  dependencies:
+    "@hapi/hoek": ^9.0.0
+  checksum: 604dfd5dde76d5c334bd03f9001fce69c7ce529883acf92da96f4fe7e51221bf5e5110e964caca287a6a616ba027c071748ab636ff178ad750547fba611d6014
+  languageName: node
+  linkType: hard
+
+"@humanwhocodes/config-array@npm:^0.11.13":
+  version: 0.11.13
+  resolution: "@humanwhocodes/config-array@npm:0.11.13"
+  dependencies:
+    "@humanwhocodes/object-schema": ^2.0.1
+    debug: ^4.1.1
+    minimatch: ^3.0.5
+  checksum: f8ea57b0d7ed7f2d64cd3944654976829d9da91c04d9c860e18804729a33f7681f78166ef4c761850b8c324d362f7d53f14c5c44907a6b38b32c703ff85e4805
+  languageName: node
+  linkType: hard
+
+"@humanwhocodes/module-importer@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@humanwhocodes/module-importer@npm:1.0.1"
+  checksum: 0fd22007db8034a2cdf2c764b140d37d9020bbfce8a49d3ec5c05290e77d4b0263b1b972b752df8c89e5eaa94073408f2b7d977aed131faf6cf396ebb5d7fb61
+  languageName: node
+  linkType: hard
+
+"@humanwhocodes/object-schema@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "@humanwhocodes/object-schema@npm:2.0.1"
+  checksum: 24929487b1ed48795d2f08346a0116cc5ee4634848bce64161fb947109352c562310fd159fc64dda0e8b853307f5794605191a9547f7341158559ca3c8262a45
+  languageName: node
+  linkType: hard
+
+"@inquirer/checkbox@npm:^1.2.8":
+  version: 1.5.0
+  resolution: "@inquirer/checkbox@npm:1.5.0"
+  dependencies:
+    "@inquirer/core": ^5.1.1
+    "@inquirer/type": ^1.1.5
+    ansi-escapes: ^4.3.2
+    chalk: ^4.1.2
+    figures: ^3.2.0
+  checksum: 3137452567ef3ed7723b475d4ad5ff9bd31f45231fcde501f1fcc0ebc8af71e479ac1d7ad10ee842987fb338651da32459944016be2dfcae6cb3d7cbf6ada9a3
+  languageName: node
+  linkType: hard
+
+"@inquirer/confirm@npm:^1.0.11":
+  version: 1.0.11
+  resolution: "@inquirer/confirm@npm:1.0.11"
+  dependencies:
+    "@inquirer/core": ^1.3.0
+    "@inquirer/type": ^1.0.5
+    chalk: ^4.1.2
+  checksum: 791650830d9dc1eef9870387ffae14b103481811adab740865ae7d9da60f5fa2fb795df94db51dc62a3daba002c5e4df71080c03679eabdc28a7782bb3fd8de4
+  languageName: node
+  linkType: hard
+
+"@inquirer/core@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@inquirer/core@npm:1.3.0"
+  dependencies:
+    "@inquirer/type": ^1.0.5
+    ansi-escapes: ^4.3.2
+    chalk: ^4.1.2
+    cli-spinners: ^2.8.0
+    cli-width: ^4.0.0
+    figures: ^3.2.0
+    mute-stream: ^1.0.0
+    run-async: ^3.0.0
+    string-width: ^4.2.3
+    strip-ansi: ^6.0.1
+    wrap-ansi: ^6.0.1
+  checksum: e6d3ee4a32714e37bc1a0b094c69367017bbbe1bc86743807e54112a4c370ee7c205507455006b7a4de8c176699d91eb1f9edcb8286d6b0393e364d564d8e55a
+  languageName: node
+  linkType: hard
+
+"@inquirer/core@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "@inquirer/core@npm:5.1.1"
+  dependencies:
+    "@inquirer/type": ^1.1.5
+    "@types/mute-stream": ^0.0.4
+    "@types/node": ^20.9.0
+    "@types/wrap-ansi": ^3.0.0
+    ansi-escapes: ^4.3.2
+    chalk: ^4.1.2
+    cli-spinners: ^2.9.1
+    cli-width: ^4.1.0
+    figures: ^3.2.0
+    mute-stream: ^1.0.0
+    run-async: ^3.0.0
+    signal-exit: ^4.1.0
+    strip-ansi: ^6.0.1
+    wrap-ansi: ^6.2.0
+  checksum: 4fde57d39e7e9822d638eb15d8444192b58fb63a54230892acbe7b8816a0d519b782fa3b38d19747b58da84a243345645d9c5c2442ffdd5478b9f0f5b91c3d84
+  languageName: node
+  linkType: hard
+
+"@inquirer/editor@npm:^1.0.11":
+  version: 1.2.13
+  resolution: "@inquirer/editor@npm:1.2.13"
+  dependencies:
+    "@inquirer/core": ^5.1.1
+    "@inquirer/type": ^1.1.5
+    chalk: ^4.1.2
+    external-editor: ^3.1.0
+  checksum: 1e3dacbfec7244adc45547172ec10f6986871f112979a9c02e2f635e9c9c61bd9f31ec1f5e512e214dd462239dd82a6a23cdc89cfa89660de930dc5f941de838
+  languageName: node
+  linkType: hard
+
+"@inquirer/expand@npm:^1.0.11":
+  version: 1.1.14
+  resolution: "@inquirer/expand@npm:1.1.14"
+  dependencies:
+    "@inquirer/core": ^5.1.1
+    "@inquirer/type": ^1.1.5
+    chalk: ^4.1.2
+    figures: ^3.2.0
   checksum: ef49b2aabadf22787dceef5d4d392751200e982c3b5e374259938297f6b98a01d05fd936a17add467daee81ff27bd332e80d5b1c792313fe7419ae4f33fba3f4
   languageName: node
   linkType: hard
@@ -3787,6 +4765,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/gen-mapping@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "@jridgewell/gen-mapping@npm:0.3.5"
+  dependencies:
+    "@jridgewell/set-array": ^1.2.1
+    "@jridgewell/sourcemap-codec": ^1.4.10
+    "@jridgewell/trace-mapping": ^0.3.24
+  checksum: ff7a1764ebd76a5e129c8890aa3e2f46045109dabde62b0b6c6a250152227647178ff2069ea234753a690d8f3c4ac8b5e7b267bbee272bffb7f3b0a370ab6e52
+  languageName: node
+  linkType: hard
+
 "@jridgewell/resolve-uri@npm:^3.0.3, @jridgewell/resolve-uri@npm:^3.1.0":
   version: 3.1.1
   resolution: "@jridgewell/resolve-uri@npm:3.1.1"
@@ -3801,6 +4790,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/set-array@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@jridgewell/set-array@npm:1.2.1"
+  checksum: 832e513a85a588f8ed4f27d1279420d8547743cc37fcad5a5a76fc74bb895b013dfe614d0eed9cb860048e6546b798f8f2652020b4b2ba0561b05caa8c654b10
+  languageName: node
+  linkType: hard
+
 "@jridgewell/source-map@npm:^0.3.3":
   version: 0.3.5
   resolution: "@jridgewell/source-map@npm:0.3.5"
@@ -3838,6 +4834,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25":
+  version: 0.3.25
+  resolution: "@jridgewell/trace-mapping@npm:0.3.25"
+  dependencies:
+    "@jridgewell/resolve-uri": ^3.1.0
+    "@jridgewell/sourcemap-codec": ^1.4.14
+  checksum: 9d3c40d225e139987b50c48988f8717a54a8c994d8a948ee42e1412e08988761d0754d7d10b803061cc3aebf35f92a5dbbab493bd0e1a9ef9e89a2130e83ba34
+  languageName: node
+  linkType: hard
+
+"@kamilkisiela/fast-url-parser@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "@kamilkisiela/fast-url-parser@npm:1.1.4"
+  checksum: 921d305eff1fce5c7c669aee5cfe39e50109968addb496c23f0a42253d030e3cd5865eb01b13245915923bee452db75ba8a8254e69b0d0575d3c168efce7091e
+  languageName: node
+  linkType: hard
+
+"@kurkle/color@npm:^0.3.0":
+  version: 0.3.2
+  resolution: "@kurkle/color@npm:0.3.2"
+  checksum: 79e97b31f8f6efb28c69d373f94b0c7480226fe8ec95221f518ac998e156444a496727ce47de6d728eb5c3369288e794cba82cae34253deb0d472d3bfe080e49
+  languageName: node
+  linkType: hard
+
 "@kwsites/file-exists@npm:^1.1.1":
   version: 1.1.1
   resolution: "@kwsites/file-exists@npm:1.1.1"
@@ -3972,7 +4992,7 @@ __metadata:
     dotenv: ^16.3.1
     eslint: ^8.3.0
     eslint-watch: ^8.0.0
-    jose: ^4.14.4
+    jose: ^4.15.5
     jsonwebtoken: ^9.0.1
     nodemon: ^2.0.22
     prettier: 3.0.3
@@ -4116,7 +5136,7 @@ __metadata:
     react-router-dom: 6.11.2
     tsc-absolute: ^1.0.1
     typescript: ^5.0.0
-    vite: ^5.0.5
+    vite: ^5.1.6
     web-vitals: ^3.3.0
   languageName: unknown
   linkType: soft
@@ -4193,7 +5213,7 @@ __metadata:
     react-router-dom: 6.11.2
     tsc-absolute: ^1.0.1
     typescript: ^5.0.0
-    vite: ^5.0.5
+    vite: ^5.1.6
     web-vitals: ^3.3.0
   languageName: unknown
   linkType: soft
@@ -4249,6 +5269,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@lightsparkdev/static@workspace:packages/static":
+  version: 0.0.0-use.local
+  resolution: "@lightsparkdev/static@workspace:packages/static"
+  languageName: unknown
+  linkType: soft
+
 "@lightsparkdev/streaming-wallet-extension@workspace:apps/examples/streaming-wallet-extension":
   version: 0.0.0-use.local
   resolution: "@lightsparkdev/streaming-wallet-extension@workspace:apps/examples/streaming-wallet-extension"
@@ -4274,7 +5300,7 @@ __metadata:
     tsc-absolute: ^1.0.1
     typescript: ^5.0.0
     uuid: ^9.0.0
-    vite: ^5.0.5
+    vite: ^5.1.6
   languageName: unknown
   linkType: soft
 
@@ -4286,18 +5312,80 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@lightsparkdev/ui-test-app@workspace:apps/examples/ui-test-app":
+  version: 0.0.0-use.local
+  resolution: "@lightsparkdev/ui-test-app@workspace:apps/examples/ui-test-app"
+  dependencies:
+    "@apollo/client": ^3.9.11
+    "@babel/core": ^7.21.4
+    "@emotion/babel-plugin": ^11.11.0
+    "@emotion/css": ^11.11.0
+    "@emotion/react": ^11.11.0
+    "@emotion/styled": ^11.11.0
+    "@graphql-codegen/cli": ^5.0.2
+    "@graphql-codegen/typescript": ^4.0.6
+    "@graphql-codegen/typescript-operations": ^4.2.0
+    "@graphql-codegen/typescript-react-apollo": ^4.3.0
+    "@lightsparkdev/core": 1.0.22
+    "@lightsparkdev/eslint-config": "*"
+    "@lightsparkdev/tsconfig": "*"
+    "@lightsparkdev/ui": 0.0.13
+    "@lightsparkdev/vite": "*"
+    "@simbathesailor/use-what-changed": ^2.0.0
+    "@testing-library/jest-dom": ^6.1.2
+    "@types/jest": ^29.5.3
+    "@vitejs/plugin-react": ^4.0.1
+    "@wojtekmaj/react-datetimerange-picker": ^5.5.0
+    "@zxing/browser": ^0.1.1
+    "@zxing/library": ^0.19.2
+    auto-bind: ^5.0.1
+    babel-jest: ^29.6.4
+    chart.js: 4.2.0
+    dayjs: ^1.11.7
+    deep-object-diff: ^1.1.9
+    eslint: ^8.3.0
+    eslint-watch: ^8.0.0
+    graphql: ^16.6.0
+    graphql-tag: ^2.12.6
+    identity-obj-proxy: ^3.0.0
+    jest: ^29.6.2
+    jest-environment-jsdom: ^29.6.4
+    madge: ^6.1.0
+    nanoid: ^4.0.0
+    prettier: 3.0.3
+    prettier-plugin-organize-imports: ^3.2.4
+    qrcode.react: ^3.1.0
+    react: ^18.2.0
+    react-date-picker: ^10.6.0
+    react-datetime-picker: ^5.6.0
+    react-device-detect: ^2.2.3
+    react-dom: ^18.1.0
+    react-router-dom: 6.11.2
+    react-table: ^7.8.0
+    resize-observer-polyfill: ^1.5.1
+    ts-jest: ^29.1.1
+    tsc-absolute: ^1.0.1
+    tsup: ^7.2.0
+    typescript: ^5.0.0
+    uuid: ^9.0.0
+    vite: ^5.1.6
+  languageName: unknown
+  linkType: soft
+
 "@lightsparkdev/ui@0.0.13, @lightsparkdev/ui@workspace:packages/ui":
   version: 0.0.0-use.local
   resolution: "@lightsparkdev/ui@workspace:packages/ui"
   dependencies:
-    "@apollo/client": ^3.7.11
+    "@emotion/babel-plugin": ^11.11.0
     "@emotion/css": ^11.11.0
     "@emotion/react": ^11.11.0
     "@emotion/styled": ^11.11.0
     "@lightsparkdev/core": 1.0.22
     "@lightsparkdev/eslint-config": "*"
     "@lightsparkdev/tsconfig": 0.0.1
+    "@rollup/plugin-url": ^8.0.2
     "@simbathesailor/use-what-changed": ^2.0.0
+    "@svgr/core": ^8.1.0
     "@svgr/plugin-jsx": ^8.1.0
     "@testing-library/dom": ^9.2.0
     "@testing-library/jest-dom": ^6.1.2
@@ -4306,21 +5394,26 @@ __metadata:
     "@types/jest": ^29.5.3
     "@types/prismjs": ^1.26.0
     babel-jest: ^29.6.4
+    deepmerge: ^4.3.1
     esbuild-plugin-copy: ^2.1.1
     esbuild-plugin-svgr: ^2.1.0
     eslint: ^8.3.0
     eslint-watch: ^8.0.0
     gql: ^1.1.2
     graphql: ^16.6.0
+    graphql-tag: ^2.12.6
     jest: ^29.6.2
     jest-environment-jsdom: ^29.6.4
+    libphonenumber-js: ^1.11.1
     lodash-es: ^4.17.21
     madge: ^6.1.0
     nanoid: ^4.0.0
+    next: ^13.4.19
     prettier: 3.0.3
     prettier-plugin-organize-imports: ^3.2.4
     prismjs: ^1.29.0
     react: ^18.2.0
+    react-device-detect: ^2.2.3
     react-dom: ^18.1.0
     react-router-dom: 6.11.2
     react-select: ^5.4.0
@@ -4343,7 +5436,7 @@ __metadata:
     "@lightsparkdev/tsconfig": 0.0.1
     "@types/chalk": ^2.2.0
     "@types/node": ^20.2.5
-    "@uma-sdk/core": ^0.7.3
+    "@uma-sdk/core": ^1.0.2
     chalk: ^5.3.0
     commander: ^11.0.0
     eslint: ^8.3.0
@@ -4370,7 +5463,7 @@ __metadata:
     "@types/express": ^4.17.21
     "@types/supertest": ^2.0.14
     "@types/uuid": ^9.0.7
-    "@uma-sdk/core": ^0.7.3
+    "@uma-sdk/core": ^1.0.2
     express: ^4.18.2
     jest: ^29.6.2
     nodemon: ^2.0.22
@@ -4389,7 +5482,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@lightsparkdev/vite@workspace:packages/vite"
   dependencies:
-    vite: ^5.0.5
+    vite: ^5.1.6
     vite-plugin-svgr: ^3.2.0
   languageName: unknown
   linkType: soft
@@ -4410,7 +5503,7 @@ __metadata:
     dotenv: ^16.3.1
     eslint: ^8.3.0
     eslint-watch: ^8.0.0
-    jose: ^4.14.4
+    jose: ^4.15.5
     jsonwebtoken: ^9.0.1
     nodemon: ^2.0.22
     prettier: 3.0.3
@@ -4538,6 +5631,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@next/env@npm:13.5.6":
+  version: 13.5.6
+  resolution: "@next/env@npm:13.5.6"
+  checksum: 5e8f3f6f987a15dad3cd7b2bcac64a6382c2ec372d95d0ce6ab295eb59c9731222017eebf71ff3005932de2571f7543bce7e5c6a8c90030207fb819404138dc2
+  languageName: node
+  linkType: hard
+
 "@next/eslint-plugin-next@npm:13.4.19":
   version: 13.4.19
   resolution: "@next/eslint-plugin-next@npm:13.4.19"
@@ -4547,6 +5647,69 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@next/swc-darwin-arm64@npm:13.5.6":
+  version: 13.5.6
+  resolution: "@next/swc-darwin-arm64@npm:13.5.6"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@next/swc-darwin-x64@npm:13.5.6":
+  version: 13.5.6
+  resolution: "@next/swc-darwin-x64@npm:13.5.6"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@next/swc-linux-arm64-gnu@npm:13.5.6":
+  version: 13.5.6
+  resolution: "@next/swc-linux-arm64-gnu@npm:13.5.6"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@next/swc-linux-arm64-musl@npm:13.5.6":
+  version: 13.5.6
+  resolution: "@next/swc-linux-arm64-musl@npm:13.5.6"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@next/swc-linux-x64-gnu@npm:13.5.6":
+  version: 13.5.6
+  resolution: "@next/swc-linux-x64-gnu@npm:13.5.6"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@next/swc-linux-x64-musl@npm:13.5.6":
+  version: 13.5.6
+  resolution: "@next/swc-linux-x64-musl@npm:13.5.6"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@next/swc-win32-arm64-msvc@npm:13.5.6":
+  version: 13.5.6
+  resolution: "@next/swc-win32-arm64-msvc@npm:13.5.6"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@next/swc-win32-ia32-msvc@npm:13.5.6":
+  version: 13.5.6
+  resolution: "@next/swc-win32-ia32-msvc@npm:13.5.6"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@next/swc-win32-x64-msvc@npm:13.5.6":
+  version: 13.5.6
+  resolution: "@next/swc-win32-x64-msvc@npm:13.5.6"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3":
   version: 2.1.8-no-fsevents.3
   resolution: "@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3"
@@ -4646,18 +5809,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@octokit/app@npm:^14.0.2":
-  version: 14.0.2
-  resolution: "@octokit/app@npm:14.0.2"
+"@octokit/app@npm:^15.0.0":
+  version: 15.0.1
+  resolution: "@octokit/app@npm:15.0.1"
   dependencies:
-    "@octokit/auth-app": ^6.0.0
-    "@octokit/auth-unauthenticated": ^5.0.0
-    "@octokit/core": ^5.0.0
-    "@octokit/oauth-app": ^6.0.0
-    "@octokit/plugin-paginate-rest": ^9.0.0
-    "@octokit/types": ^12.0.0
-    "@octokit/webhooks": ^12.0.4
-  checksum: 1d6745302f81694c85a47997640be1e509a61da1de4ec31f8fed3715daf03cbcf39d6f80a146e2d2a0ff0ebc987fcda5dba9d53f1357f2e8c93edd5675db3780
+    "@octokit/auth-app": ^7.0.0
+    "@octokit/auth-unauthenticated": ^6.0.0
+    "@octokit/core": ^6.1.2
+    "@octokit/oauth-app": ^7.0.0
+    "@octokit/plugin-paginate-rest": ^11.0.0
+    "@octokit/types": ^13.0.0
+    "@octokit/webhooks": ^13.0.0
+  checksum: e33ebe13c86c522879d2546cf25d3181a25d2724027f32f87bedf4256fcaa78800af64dd58ae13e38db2ce83c9a43ad195d980c7d1c44c78f38d438cd7e08977
   languageName: node
   linkType: hard
 
@@ -4671,61 +5834,57 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@octokit/auth-app@npm:^6.0.0":
-  version: 6.0.1
-  resolution: "@octokit/auth-app@npm:6.0.1"
+"@octokit/auth-app@npm:^7.0.0":
+  version: 7.1.0
+  resolution: "@octokit/auth-app@npm:7.1.0"
   dependencies:
-    "@octokit/auth-oauth-app": ^7.0.0
-    "@octokit/auth-oauth-user": ^4.0.0
-    "@octokit/request": ^8.0.2
-    "@octokit/request-error": ^5.0.0
-    "@octokit/types": ^12.0.0
-    deprecation: ^2.3.1
+    "@octokit/auth-oauth-app": ^8.1.0
+    "@octokit/auth-oauth-user": ^5.1.0
+    "@octokit/request": ^9.1.1
+    "@octokit/request-error": ^6.1.1
+    "@octokit/types": ^13.4.1
     lru-cache: ^10.0.0
-    universal-github-app-jwt: ^1.1.1
-    universal-user-agent: ^6.0.0
-  checksum: 50a580d8dd0cf3d67f0da97fa22752239ffca647b72621020540b06a5d0483bbd4d07bbc3415e206b36e378d299e7e3c82191dabf009ddc0a48a6849322b8dc2
+    universal-github-app-jwt: ^2.2.0
+    universal-user-agent: ^7.0.0
+  checksum: c27f3a9a7e62868603f504876a5490bf4116f0a9e85d2f991d543b5dd18769aedbb2a6fc449ec644c148fcbeb604b9f8bafec8035910265482daba53305b80f1
   languageName: node
   linkType: hard
 
-"@octokit/auth-oauth-app@npm:^7.0.0":
-  version: 7.0.1
-  resolution: "@octokit/auth-oauth-app@npm:7.0.1"
+"@octokit/auth-oauth-app@npm:^8.0.0, @octokit/auth-oauth-app@npm:^8.1.0":
+  version: 8.1.1
+  resolution: "@octokit/auth-oauth-app@npm:8.1.1"
   dependencies:
-    "@octokit/auth-oauth-device": ^6.0.0
-    "@octokit/auth-oauth-user": ^4.0.0
-    "@octokit/request": ^8.0.2
-    "@octokit/types": ^12.0.0
-    "@types/btoa-lite": ^1.0.0
-    btoa-lite: ^1.0.0
-    universal-user-agent: ^6.0.0
-  checksum: a96486150bc5b4ddd7167ef4d6554886b1949631aa76fde92a21424ffe2810b87e4ae413d52ed07c2c6c015ef697a93e716e9ef7b11be26539d5ccc8eeb7226b
+    "@octokit/auth-oauth-device": ^7.0.0
+    "@octokit/auth-oauth-user": ^5.0.1
+    "@octokit/request": ^9.0.0
+    "@octokit/types": ^13.0.0
+    universal-user-agent: ^7.0.0
+  checksum: e61160a6cc6aefff7b8cb3c73c2fc26e327308800b85bf6bfcfb39009ee2cb813bc2034ce3ea29b240aca920515b2199466cf842bbef4905c5da7796aa813eb4
   languageName: node
   linkType: hard
 
-"@octokit/auth-oauth-device@npm:^6.0.0":
-  version: 6.0.1
-  resolution: "@octokit/auth-oauth-device@npm:6.0.1"
+"@octokit/auth-oauth-device@npm:^7.0.0, @octokit/auth-oauth-device@npm:^7.0.1":
+  version: 7.1.1
+  resolution: "@octokit/auth-oauth-device@npm:7.1.1"
   dependencies:
-    "@octokit/oauth-methods": ^4.0.0
-    "@octokit/request": ^8.0.0
-    "@octokit/types": ^12.0.0
-    universal-user-agent: ^6.0.0
-  checksum: 2639b07430023c23fc117035ac775a74709a0b05abcad4a29f1f0fdb808775acac4fb410fa45fd18f89da1fb73b743ef7382a3cd39d29bbe059d2802aeaa3aa4
+    "@octokit/oauth-methods": ^5.0.0
+    "@octokit/request": ^9.0.0
+    "@octokit/types": ^13.0.0
+    universal-user-agent: ^7.0.0
+  checksum: 5338ae5a5ca1d03c03c3ceba21635b6e2d8d8fe9c1f9f746651ebea5a130e65388e418e730eefb394bbceba092b712181ce9a603eec761f4c8fd6f8790d7cd45
   languageName: node
   linkType: hard
 
-"@octokit/auth-oauth-user@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "@octokit/auth-oauth-user@npm:4.0.1"
+"@octokit/auth-oauth-user@npm:^5.0.1, @octokit/auth-oauth-user@npm:^5.1.0":
+  version: 5.1.1
+  resolution: "@octokit/auth-oauth-user@npm:5.1.1"
   dependencies:
-    "@octokit/auth-oauth-device": ^6.0.0
-    "@octokit/oauth-methods": ^4.0.0
-    "@octokit/request": ^8.0.2
-    "@octokit/types": ^12.0.0
-    btoa-lite: ^1.0.0
-    universal-user-agent: ^6.0.0
-  checksum: 38b0edb58d4396a8a3782fea56b7691dc8dc28bdb195c4dfe8fe83578c4daa4afa941a524e6a44a45c47b2af9863703087e18dacc6e396c6c032862eec266b4c
+    "@octokit/auth-oauth-device": ^7.0.1
+    "@octokit/oauth-methods": ^5.0.0
+    "@octokit/request": ^9.0.1
+    "@octokit/types": ^13.0.0
+    universal-user-agent: ^7.0.0
+  checksum: fe2b2ec3f50a565efb37254c78be499d8fc1cf4d565f869b957037103296589c48c69cab26a0549311ed50b698dc9ae1fef5cc9a0cda2a11a519b053c30cb7fc
   languageName: node
   linkType: hard
 
@@ -4736,85 +5895,91 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@octokit/auth-unauthenticated@npm:^5.0.0":
-  version: 5.0.1
-  resolution: "@octokit/auth-unauthenticated@npm:5.0.1"
+"@octokit/auth-token@npm:^5.0.0":
+  version: 5.1.1
+  resolution: "@octokit/auth-token@npm:5.1.1"
+  checksum: b39516dda44aeced0326227c53aade621effe1d59c4b0f48ebe2b9fd32b5156e02705bcb2fb1bf48b11f26cc6aff1a0683c32c3d5424e0118dae6596e431d489
+  languageName: node
+  linkType: hard
+
+"@octokit/auth-unauthenticated@npm:^6.0.0, @octokit/auth-unauthenticated@npm:^6.0.0-beta.1":
+  version: 6.1.0
+  resolution: "@octokit/auth-unauthenticated@npm:6.1.0"
   dependencies:
-    "@octokit/request-error": ^5.0.0
-    "@octokit/types": ^12.0.0
-  checksum: b6eed1fc15d47f45411c0229dd6613dd8fd4b79afbac23b8c47818da692a35d54f57e088294d9b71ce4dcc0f58ce0c77d12cd2700370d87770059248b9a8fbba
+    "@octokit/request-error": ^6.0.1
+    "@octokit/types": ^13.0.0
+  checksum: 0f8929cbca7fa34f2a4ebcdf92da7a0b5a4a2de7a5dd695b4308a827018db6cfa311e84fe326c19a0b8e66080aa152fa066ae434190e5a63eadbb1449b1d7105
   languageName: node
   linkType: hard
 
-"@octokit/core@npm:^5.0.0":
-  version: 5.0.2
-  resolution: "@octokit/core@npm:5.0.2"
+"@octokit/core@npm:^6.0.0, @octokit/core@npm:^6.1.2":
+  version: 6.1.2
+  resolution: "@octokit/core@npm:6.1.2"
   dependencies:
-    "@octokit/auth-token": ^4.0.0
-    "@octokit/graphql": ^7.0.0
-    "@octokit/request": ^8.0.2
-    "@octokit/request-error": ^5.0.0
-    "@octokit/types": ^12.0.0
-    before-after-hook: ^2.2.0
-    universal-user-agent: ^6.0.0
-  checksum: 9ce060d61577f6805901ae5c33b2764a441db119ae0cca09104adf37b119cce68b656220de56c0c5004c9c9c1c892a7fdfbe9c0b1f5e398cb359dfd39c57eca8
+    "@octokit/auth-token": ^5.0.0
+    "@octokit/graphql": ^8.0.0
+    "@octokit/request": ^9.0.0
+    "@octokit/request-error": ^6.0.1
+    "@octokit/types": ^13.0.0
+    before-after-hook: ^3.0.2
+    universal-user-agent: ^7.0.0
+  checksum: e794fb11b3942f55033f4cf6c0914953fd974587309498e8709c428660fa5c098334d83af5e41457dbe67d92d70a8b559c6cc00457d6c95290fa6c9e1d4bfc42
   languageName: node
   linkType: hard
 
-"@octokit/endpoint@npm:^9.0.0":
-  version: 9.0.4
-  resolution: "@octokit/endpoint@npm:9.0.4"
+"@octokit/endpoint@npm:^10.0.0":
+  version: 10.1.1
+  resolution: "@octokit/endpoint@npm:10.1.1"
   dependencies:
-    "@octokit/types": ^12.0.0
-    universal-user-agent: ^6.0.0
-  checksum: ed1b64a448f478e5951a043ef816d634a5a1f584519cbf2f374ceac058f82a16e52f078f156aa8b8cbcab7b0590348d94294fc83c9b4eebd42a820a5f10db81c
+    "@octokit/types": ^13.0.0
+    universal-user-agent: ^7.0.2
+  checksum: fde158f40dc9a88e92a8ac1d347a54599aa5715ec24045be9cb8ff8decb3c17b63c91eca1bab12dfe0e0cd37433127dd05cd05db14a719dca749bc56093aa915
   languageName: node
   linkType: hard
 
-"@octokit/graphql@npm:^7.0.0":
-  version: 7.0.2
-  resolution: "@octokit/graphql@npm:7.0.2"
+"@octokit/graphql@npm:^8.0.0":
+  version: 8.1.1
+  resolution: "@octokit/graphql@npm:8.1.1"
   dependencies:
-    "@octokit/request": ^8.0.1
-    "@octokit/types": ^12.0.0
-    universal-user-agent: ^6.0.0
-  checksum: 05a752c4c2d84fc2900d8e32e1c2d1ee98a5a14349e651cb1109d0741e821e7417a048b1bb40918534ed90a472314aabbda35688868016f248098925f82a3bfa
+    "@octokit/request": ^9.0.0
+    "@octokit/types": ^13.0.0
+    universal-user-agent: ^7.0.0
+  checksum: 07239666b0ca38a7d8c581570b544ee9fd1a2616c8dd436af31879662b3345c44ed52e3d7b311840a1c5772a23f02caf7585aca56f36e50f38f0207a87577a9c
   languageName: node
   linkType: hard
 
-"@octokit/oauth-app@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "@octokit/oauth-app@npm:6.0.0"
-  dependencies:
-    "@octokit/auth-oauth-app": ^7.0.0
-    "@octokit/auth-oauth-user": ^4.0.0
-    "@octokit/auth-unauthenticated": ^5.0.0
-    "@octokit/core": ^5.0.0
-    "@octokit/oauth-authorization-url": ^6.0.2
-    "@octokit/oauth-methods": ^4.0.0
+"@octokit/oauth-app@npm:^7.0.0":
+  version: 7.1.2
+  resolution: "@octokit/oauth-app@npm:7.1.2"
+  dependencies:
+    "@octokit/auth-oauth-app": ^8.0.0
+    "@octokit/auth-oauth-user": ^5.0.1
+    "@octokit/auth-unauthenticated": ^6.0.0-beta.1
+    "@octokit/core": ^6.0.0
+    "@octokit/oauth-authorization-url": ^7.0.0
+    "@octokit/oauth-methods": ^5.0.0
     "@types/aws-lambda": ^8.10.83
-    universal-user-agent: ^6.0.0
-  checksum: 5d07c6fe15d4a670a3ca0c7c0d37c973912b3ac993375966a6bed0e084edbda972f575e2ab2dc17aa9718e5aeefbec7489f5aeb2dbc6e47768ad9633f27f842d
+    universal-user-agent: ^7.0.0
+  checksum: dc447d61907706f4d16fdb014b1a2748e9784c48a22af5886e44465033ac2422cb15987fba5f91af19177973c38cb5ac45f63d91d9a35907ece3be46a6e8f4d5
   languageName: node
   linkType: hard
 
-"@octokit/oauth-authorization-url@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "@octokit/oauth-authorization-url@npm:6.0.2"
-  checksum: 0f11169a3eeb782cc08312c923de1a702b25ae033b972ba40380b6d72cb3f684543c8b6a5cf6f05936fdc6b8892070d4f7581138d8efc1b4c4a55ae6d7762327
+"@octokit/oauth-authorization-url@npm:^7.0.0":
+  version: 7.1.1
+  resolution: "@octokit/oauth-authorization-url@npm:7.1.1"
+  checksum: 02ad29fa4540c6b4b3a1e9f6936d40057174be91e9c7cad1afcd09d027fa2a50598dad5857699d1be25568bf70d86123dc9cd3874afe044ce6791e6805e97542
   languageName: node
   linkType: hard
 
-"@octokit/oauth-methods@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "@octokit/oauth-methods@npm:4.0.1"
+"@octokit/oauth-methods@npm:^5.0.0":
+  version: 5.1.2
+  resolution: "@octokit/oauth-methods@npm:5.1.2"
   dependencies:
-    "@octokit/oauth-authorization-url": ^6.0.2
-    "@octokit/request": ^8.0.2
-    "@octokit/request-error": ^5.0.0
-    "@octokit/types": ^12.0.0
-    btoa-lite: ^1.0.0
-  checksum: 35fb00f9ef8aa77cb00e398d4a423ff4b928d1d51462cdbdd4d3975b862355cbddb6777d10bdf43b0ac5c23f7038e07a9ff495731dbfe6aa0241799cbf5042f0
+    "@octokit/oauth-authorization-url": ^7.0.0
+    "@octokit/request": ^9.1.0
+    "@octokit/request-error": ^6.1.0
+    "@octokit/types": ^13.0.0
+  checksum: 64317d0fae0f2383ef0194bab7ed6521a1e2d698f2f0730b22dd4ffa2f103541be6e5ef4380e073d8086008ad5d311a66901e0cc6bc0f57b66dc64db6ed79922
   languageName: node
   linkType: hard
 
@@ -4825,86 +5990,98 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@octokit/plugin-paginate-graphql@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "@octokit/plugin-paginate-graphql@npm:4.0.0"
+"@octokit/openapi-types@npm:^22.2.0":
+  version: 22.2.0
+  resolution: "@octokit/openapi-types@npm:22.2.0"
+  checksum: eca41feac2b83298e0d95e253ac1c5b6d65155ac57f65c5fd8d4a485d9728922d85ff4bee0e815a1f3a5421311db092bdb6da9d6104a1b1843d8b274bcad9630
+  languageName: node
+  linkType: hard
+
+"@octokit/openapi-webhooks-types@npm:8.2.1":
+  version: 8.2.1
+  resolution: "@octokit/openapi-webhooks-types@npm:8.2.1"
+  checksum: e94c749965aa93f7b7332a0d5ae084b0dd38ee9c69906e3458bd90f2d4b3213f1e3c4b2822281e7b8c2d93e7bb56355a4f32d92458b39ee94dfd268e713abf6a
+  languageName: node
+  linkType: hard
+
+"@octokit/plugin-paginate-graphql@npm:^5.0.0":
+  version: 5.2.2
+  resolution: "@octokit/plugin-paginate-graphql@npm:5.2.2"
   peerDependencies:
-    "@octokit/core": ">=5"
-  checksum: 368121d74fc40a4cee96f2febc29ae43abd8f6b7d0b06d3520847827675128028c4fa10d0534c5f0466658e81257d103092154778625c886a9fcdd01c302e50e
+    "@octokit/core": ">=6"
+  checksum: faf0d99c3134b5a2d02c0f22083cc8d2a9e316a789264e22dcda97c9159c690c75a11ab1bb56bef8d30d0f19172c0c227378f26c435cc477b8bd9acf44ecb2d6
   languageName: node
   linkType: hard
 
-"@octokit/plugin-paginate-rest@npm:^9.0.0":
-  version: 9.1.4
-  resolution: "@octokit/plugin-paginate-rest@npm:9.1.4"
+"@octokit/plugin-paginate-rest@npm:^11.0.0":
+  version: 11.3.1
+  resolution: "@octokit/plugin-paginate-rest@npm:11.3.1"
   dependencies:
-    "@octokit/types": ^12.3.0
+    "@octokit/types": ^13.5.0
   peerDependencies:
-    "@octokit/core": ">=5"
-  checksum: 5a8332f0faa1480c0dcd4dd097100b80c5f61a42dcab689342db367dec4211af131b3e53b8b832577b2191ee75c78423f30f5d1a1b5797d789dd33f7860e1037
+    "@octokit/core": 5
+  checksum: 42c7c08e7287b4b85d2ae47852d2ffeb238c134ad6bcff18bddc154b15f6bec31778816c0763181401c370198390db7f6b0c3c44750fdfeec459594f7f4b5933
   languageName: node
   linkType: hard
 
-"@octokit/plugin-rest-endpoint-methods@npm:^10.0.0":
-  version: 10.2.0
-  resolution: "@octokit/plugin-rest-endpoint-methods@npm:10.2.0"
+"@octokit/plugin-rest-endpoint-methods@npm:^13.0.0":
+  version: 13.2.2
+  resolution: "@octokit/plugin-rest-endpoint-methods@npm:13.2.2"
   dependencies:
-    "@octokit/types": ^12.3.0
+    "@octokit/types": ^13.5.0
   peerDependencies:
-    "@octokit/core": ">=5"
-  checksum: 3209688bf508d22a525fe32d632ff928b048688c1859c7e4bbb08bd181aa07f580b375a502e34368628103e5d5cccf7f9fb0ff0c8fd4262470ac8eeffb80ac6b
+    "@octokit/core": ^5
+  checksum: 347b3a891a561ed1dcc307a2dce42ca48c318c465ad91a26225d3d6493aef1b7ff868e6c56a0d7aa4170d028c7429ca1ec52aed6be34615a6ed701c3bcafdb17
   languageName: node
   linkType: hard
 
-"@octokit/plugin-retry@npm:^6.0.0":
-  version: 6.0.1
-  resolution: "@octokit/plugin-retry@npm:6.0.1"
+"@octokit/plugin-retry@npm:^7.0.0":
+  version: 7.1.1
+  resolution: "@octokit/plugin-retry@npm:7.1.1"
   dependencies:
-    "@octokit/request-error": ^5.0.0
-    "@octokit/types": ^12.0.0
+    "@octokit/request-error": ^6.0.0
+    "@octokit/types": ^13.0.0
     bottleneck: ^2.15.3
   peerDependencies:
-    "@octokit/core": ">=5"
-  checksum: 9c8663b5257cf4fa04cc737c064e9557501719d6d3af7cf8f46434a2117e1cf4b8d25d9eb4294ed255ad17a0ede853542649870612733f4b8ece97e24e391d22
+    "@octokit/core": ">=6"
+  checksum: 6b43382e2d3a7c057d726f394ec477cedaaf7ebe97c221aea461531858ccc26f68311d6e69fc2e8ea6c32cbc42bb8dee17fd072288adc9d5768f31f5cfd1a8f3
   languageName: node
   linkType: hard
 
-"@octokit/plugin-throttling@npm:^8.0.0":
-  version: 8.1.3
-  resolution: "@octokit/plugin-throttling@npm:8.1.3"
+"@octokit/plugin-throttling@npm:^9.0.0":
+  version: 9.3.0
+  resolution: "@octokit/plugin-throttling@npm:9.3.0"
   dependencies:
-    "@octokit/types": ^12.2.0
+    "@octokit/types": ^13.0.0
     bottleneck: ^2.15.3
   peerDependencies:
-    "@octokit/core": ^5.0.0
-  checksum: 98963ef2eab825015702b1ca1ef4ccbda0c009242e93001144e51014d3b53d3ecb1282b67488680c7f5f4e805d0c3af4020ad673079fff92c6353f04903a9a64
+    "@octokit/core": ^6.0.0
+  checksum: 0b651f8486132e22d5dfc7b2990e6e09378610d3d350ee2934272bc4c0bd5593a8a5aa4291d75707cb0289b0b1e0eebe18814bea40032105efe443fae2bf4cc3
   languageName: node
   linkType: hard
 
-"@octokit/request-error@npm:^5.0.0":
-  version: 5.0.1
-  resolution: "@octokit/request-error@npm:5.0.1"
+"@octokit/request-error@npm:^6.0.0, @octokit/request-error@npm:^6.0.1, @octokit/request-error@npm:^6.1.0, @octokit/request-error@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "@octokit/request-error@npm:6.1.1"
   dependencies:
-    "@octokit/types": ^12.0.0
-    deprecation: ^2.0.0
-    once: ^1.4.0
-  checksum: a681341e43b4da7a8acb19e1a6ba0355b1af146fa0191f2554a98950cf85f898af6ae3ab0b0287d6c871f5465ec57cb38363b96b5019f9f77ba6f30eca39ede5
+    "@octokit/types": ^13.0.0
+  checksum: cae7bc4078629a02edcf35977f496a4b943e730165f6d7828795073f99a1d884ac67343b02eff69e553a5057765e466d70ddd9d266787f505aa29018858ab06d
   languageName: node
   linkType: hard
 
-"@octokit/request@npm:^8.0.0, @octokit/request@npm:^8.0.1, @octokit/request@npm:^8.0.2":
-  version: 8.1.6
-  resolution: "@octokit/request@npm:8.1.6"
+"@octokit/request@npm:^9.0.0, @octokit/request@npm:^9.0.1, @octokit/request@npm:^9.1.0, @octokit/request@npm:^9.1.1":
+  version: 9.1.1
+  resolution: "@octokit/request@npm:9.1.1"
   dependencies:
-    "@octokit/endpoint": ^9.0.0
-    "@octokit/request-error": ^5.0.0
-    "@octokit/types": ^12.0.0
-    universal-user-agent: ^6.0.0
-  checksum: df90204586ee7db5adf69c3007c5d9c0a866de488c9ba8756f98083208726ed360d5a541e68204c413fa10e6f17e171dc9868b18768b9799df0003bc84c59cf2
+    "@octokit/endpoint": ^10.0.0
+    "@octokit/request-error": ^6.0.1
+    "@octokit/types": ^13.1.0
+    universal-user-agent: ^7.0.2
+  checksum: 0c41654911c217eb2892ce6c9c273cc2139e5510b025c71e72e1528f0d8bad2a9e578e5b305595599f2e1cb630c1812cd7d9e4f6d16a63007a7d1745f1c682ce
   languageName: node
   linkType: hard
 
-"@octokit/types@npm:^12.0.0, @octokit/types@npm:^12.2.0, @octokit/types@npm:^12.3.0":
+"@octokit/types@npm:^12.0.0":
   version: 12.3.0
   resolution: "@octokit/types@npm:12.3.0"
   dependencies:
@@ -4913,29 +6090,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@octokit/webhooks-methods@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "@octokit/webhooks-methods@npm:4.0.0"
-  checksum: 07010438e53a6a659f0d7d3596bf89e6795776165066553e76384d90cef077a1e259122733913468299a1a76c71536914eb871d0508fcbbd453468b21eeb30c7
+"@octokit/types@npm:^13.0.0, @octokit/types@npm:^13.1.0, @octokit/types@npm:^13.4.1, @octokit/types@npm:^13.5.0":
+  version: 13.5.0
+  resolution: "@octokit/types@npm:13.5.0"
+  dependencies:
+    "@octokit/openapi-types": ^22.2.0
+  checksum: 8e92f2b145b3c28a35312f93714245824a7b6b7353caa88edfdc85fc2ed4108321ed0c3988001ea53449fbb212febe0e8e9582744e85c3574dabe9d0441af5a0
   languageName: node
   linkType: hard
 
-"@octokit/webhooks-types@npm:7.1.0":
-  version: 7.1.0
-  resolution: "@octokit/webhooks-types@npm:7.1.0"
-  checksum: 5aea38c38e97cb1b8d54c805c17c4015ee937d0b1ad550adc64eaf2e90bfbaf1e00c878490c10b43e31a11563e8d02183b86268ed588b04e39b22d5fd27807cf
+"@octokit/webhooks-methods@npm:^5.0.0":
+  version: 5.1.0
+  resolution: "@octokit/webhooks-methods@npm:5.1.0"
+  checksum: 6b0185f62b30b1d267456c449732d1c381e22533bcfeea3002bb88bc9f50a6ec5e4863be092473e7c47bee8c01b863ebd93980dd378495860dfd8d762044a212
   languageName: node
   linkType: hard
 
-"@octokit/webhooks@npm:^12.0.4":
-  version: 12.0.8
-  resolution: "@octokit/webhooks@npm:12.0.8"
+"@octokit/webhooks@npm:^13.0.0":
+  version: 13.2.7
+  resolution: "@octokit/webhooks@npm:13.2.7"
   dependencies:
-    "@octokit/request-error": ^5.0.0
-    "@octokit/webhooks-methods": ^4.0.0
-    "@octokit/webhooks-types": 7.1.0
-    aggregate-error: ^3.1.0
-  checksum: 19b7460f82162cd3324f269d956ccdfe667a7002642be7a1a5dc4fe4c427a4b8b20f68a48790454173eb8fe75509fd408c04bfe9833944334aa1a0301222660e
+    "@octokit/openapi-webhooks-types": 8.2.1
+    "@octokit/request-error": ^6.0.1
+    "@octokit/webhooks-methods": ^5.0.0
+    aggregate-error: ^5.0.0
+  checksum: b342777e46e9c0e45e643e3eb15aa6b82d936a3cac5dd35a152ab46a6ca1c13738e23ee48ce10fbfcd2dee3aa79bdc27fa67d072fddb085d544cc22a44b4a105
   languageName: node
   linkType: hard
 
@@ -4953,6 +6132,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@peculiar/asn1-schema@npm:^2.3.8":
+  version: 2.3.8
+  resolution: "@peculiar/asn1-schema@npm:2.3.8"
+  dependencies:
+    asn1js: ^3.0.5
+    pvtsutils: ^1.3.5
+    tslib: ^2.6.2
+  checksum: 1f4dd421f1411df8bc52bca12b1cef710434c13ff0a8b5746ede42b10d62b5ad06a3925c4a6db53102aaf1e589947539a6955fa8554a9b8ebb1ffa38b0155a24
+  languageName: node
+  linkType: hard
+
+"@peculiar/json-schema@npm:^1.1.12":
+  version: 1.1.12
+  resolution: "@peculiar/json-schema@npm:1.1.12"
+  dependencies:
+    tslib: ^2.0.0
+  checksum: b26ececdc23c5ef25837f8be8d1eb5e1c8bb6e9ae7227ac59ffea57fff56bd05137734e7685e9100595d3d88d906dff638ef8d1df54264c388d3eac1b05aa060
+  languageName: node
+  linkType: hard
+
+"@peculiar/webcrypto@npm:^1.4.0":
+  version: 1.5.0
+  resolution: "@peculiar/webcrypto@npm:1.5.0"
+  dependencies:
+    "@peculiar/asn1-schema": ^2.3.8
+    "@peculiar/json-schema": ^1.1.12
+    pvtsutils: ^1.3.5
+    tslib: ^2.6.2
+    webcrypto-core: ^1.8.0
+  checksum: 9022d7452d564a5a26fbacf477842be34736f2d9139f2f5026adc47fdeda7033193d727491503f2a829d35ab819bbfa61c82a785c49c999eac535ecd69a3a459
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -5242,7 +6454,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/pluginutils@npm:^5.0.4":
+"@repeaterjs/repeater@npm:^3.0.4":
+  version: 3.0.6
+  resolution: "@repeaterjs/repeater@npm:3.0.6"
+  checksum: aae878b953162bec77c94b45f2236ddfc01a65308267c7cb30220fa2f8511654a302c0d32aad228c58241d685607d7bb35b6d528b2879355e6636ff08fddb266
+  languageName: node
+  linkType: hard
+
+"@rollup/plugin-url@npm:^8.0.2":
+  version: 8.0.2
+  resolution: "@rollup/plugin-url@npm:8.0.2"
+  dependencies:
+    "@rollup/pluginutils": ^5.0.1
+    make-dir: ^3.1.0
+    mime: ^3.0.0
+  peerDependencies:
+    rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: 181cddda6a08ac9199ef3ac345ae01c4a27e456d501e180891d5f05d6eb86ce5dabd9b50c2280604258d2d8dc6581a98f9134d1631a1c8ca5d521494bdf80fbb
+  languageName: node
+  linkType: hard
+
+"@rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.4":
   version: 5.1.0
   resolution: "@rollup/pluginutils@npm:5.1.0"
   dependencies:
@@ -5550,6 +6785,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/helpers@npm:0.5.2":
+  version: 0.5.2
+  resolution: "@swc/helpers@npm:0.5.2"
+  dependencies:
+    tslib: ^2.4.0
+  checksum: 51d7e3d8bd56818c49d6bfbd715f0dbeedc13cf723af41166e45c03e37f109336bbcb57a1f2020f4015957721aeb21e1a7fff281233d797ff7d3dd1f447fa258
+  languageName: node
+  linkType: hard
+
 "@szmarczak/http-timer@npm:^5.0.1":
   version: 5.0.1
   resolution: "@szmarczak/http-timer@npm:5.0.1"
@@ -5792,13 +7036,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/btoa-lite@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "@types/btoa-lite@npm:1.0.2"
-  checksum: 4c46b163c881a75522c7556dd7a7df8a0d4c680a45e8bac34e50864e1c2d9df8dc90b99f75199154c60ef2faff90896b7e5f11df6936c94167a3e5e1c6f4d935
-  languageName: node
-  linkType: hard
-
 "@types/chalk@npm:^2.2.0":
   version: 2.2.0
   resolution: "@types/chalk@npm:2.2.0"
@@ -6036,6 +7273,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/js-yaml@npm:^4.0.0":
+  version: 4.0.9
+  resolution: "@types/js-yaml@npm:4.0.9"
+  checksum: e5e5e49b5789a29fdb1f7d204f82de11cb9e8f6cb24ab064c616da5d6e1b3ccfbf95aa5d1498a9fbd3b9e745564e69b4a20b6c530b5a8bbb2d4eb830cda9bc69
+  languageName: node
+  linkType: hard
+
 "@types/jsdom@npm:^20.0.0":
   version: 20.0.1
   resolution: "@types/jsdom@npm:20.0.1"
@@ -6061,7 +7305,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/jsonwebtoken@npm:^9.0.0, @types/jsonwebtoken@npm:^9.0.2":
+"@types/jsonwebtoken@npm:^9.0.2":
   version: 9.0.5
   resolution: "@types/jsonwebtoken@npm:9.0.5"
   dependencies:
@@ -6397,7 +7641,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/ws@npm:^8.5.4, @types/ws@npm:^8.5.5":
+"@types/ws@npm:^8.0.0, @types/ws@npm:^8.5.4, @types/ws@npm:^8.5.5":
   version: 8.5.10
   resolution: "@types/ws@npm:8.5.10"
   dependencies:
@@ -6667,14 +7911,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@uma-sdk/core@npm:^0.7.3":
-  version: 0.7.3
-  resolution: "@uma-sdk/core@npm:0.7.3"
+"@uma-sdk/core@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@uma-sdk/core@npm:1.0.2"
   dependencies:
     eciesjs: ^0.4.4
     secp256k1: ^5.0.0
     zod: ^3.22.2
-  checksum: 560a4898a751a68ad885202b53d5a62ff9219c40cf3888d351c5b0db9ee118f33381ef7917a445f388093bf8005117df7cf0555c8d659b9b47cb3e020c98faf4
+  checksum: b23f809363fbcc9bb1b101b049af69a8f33eea18efb59aa1ffecb458bd1a3dac77b8b7d582f8e569d30d4a98159f2b445a6bf3f96ab81e57427ecbe5ace647ab
   languageName: node
   linkType: hard
 
@@ -6885,6 +8129,69 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@whatwg-node/events@npm:^0.0.3":
+  version: 0.0.3
+  resolution: "@whatwg-node/events@npm:0.0.3"
+  checksum: af26f40d4d0a0f5f0ee45fc6124afb8d6b33988dae96ab0fb87aa5e66d1ff08a749491b9da533ea524bbaebd4a770736f254d574a91ab4455386aa098cee8c77
+  languageName: node
+  linkType: hard
+
+"@whatwg-node/events@npm:^0.1.0":
+  version: 0.1.1
+  resolution: "@whatwg-node/events@npm:0.1.1"
+  checksum: 3a356ca23522190201e27446cfd7ebf1cf96815ddb9d1ba5da0a00bbe6c1d28b4094862104411101fbedd47c758b25fe3683033f6a3e80933029efd664c33567
+  languageName: node
+  linkType: hard
+
+"@whatwg-node/fetch@npm:^0.8.0":
+  version: 0.8.8
+  resolution: "@whatwg-node/fetch@npm:0.8.8"
+  dependencies:
+    "@peculiar/webcrypto": ^1.4.0
+    "@whatwg-node/node-fetch": ^0.3.6
+    busboy: ^1.6.0
+    urlpattern-polyfill: ^8.0.0
+    web-streams-polyfill: ^3.2.1
+  checksum: 891407ba57e32e5af70a3b0a86980c4466dcf2ba8581b6927475c85400280b163085519e98821dd94776da9aa1b0b1e221e718009e2abed9c8a0d4721025b2ab
+  languageName: node
+  linkType: hard
+
+"@whatwg-node/fetch@npm:^0.9.0":
+  version: 0.9.18
+  resolution: "@whatwg-node/fetch@npm:0.9.18"
+  dependencies:
+    "@whatwg-node/node-fetch": ^0.5.7
+    urlpattern-polyfill: ^10.0.0
+  checksum: 0b898b2b65fe4fb44c1dfd53eadc0c450060238d67272d821b9dfd69bed8e73723ba975bd28fd63e3066a7128896980fec1a45a1b9da9f5ae7dfa321a33f4b78
+  languageName: node
+  linkType: hard
+
+"@whatwg-node/node-fetch@npm:^0.3.6":
+  version: 0.3.6
+  resolution: "@whatwg-node/node-fetch@npm:0.3.6"
+  dependencies:
+    "@whatwg-node/events": ^0.0.3
+    busboy: ^1.6.0
+    fast-querystring: ^1.1.1
+    fast-url-parser: ^1.1.3
+    tslib: ^2.3.1
+  checksum: d3d7b0a0242c0511c7b666de66d9096fb24ea251426ce76e3a26a8ca17408de5d4d4f81b5aaec840cc7025f0321fb97e06067c53f377c844a5a9473dd76491ae
+  languageName: node
+  linkType: hard
+
+"@whatwg-node/node-fetch@npm:^0.5.7":
+  version: 0.5.11
+  resolution: "@whatwg-node/node-fetch@npm:0.5.11"
+  dependencies:
+    "@kamilkisiela/fast-url-parser": ^1.1.4
+    "@whatwg-node/events": ^0.1.0
+    busboy: ^1.6.0
+    fast-querystring: ^1.1.1
+    tslib: ^2.3.1
+  checksum: eab28efdcf69b53cdd3c6b4cf831d0fc241b92d710d5c5fb620d2c86ef9cf6e3c482dd23cc6a615cf8d1a60eb0b0e4eaa23585e0673b447e5e859aa697ff62d5
+  languageName: node
+  linkType: hard
+
 "@wojtekmaj/date-utils@npm:^1.1.3, @wojtekmaj/date-utils@npm:^1.5.0":
   version: 1.5.1
   resolution: "@wojtekmaj/date-utils@npm:1.5.1"
@@ -6892,6 +8199,49 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@wojtekmaj/react-daterange-picker@npm:^5.5.0":
+  version: 5.5.0
+  resolution: "@wojtekmaj/react-daterange-picker@npm:5.5.0"
+  dependencies:
+    clsx: ^2.0.0
+    make-event-props: ^1.6.0
+    prop-types: ^15.6.0
+    react-calendar: ^4.6.0
+    react-date-picker: ^10.5.0
+    react-fit: ^1.7.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 18804a67e515d63ce767dd56bc71da853109e9bc7a53626fe639a7705e596415fb5204dc15e706ebdf5782e1bd39bb06333d36d16b440dec7a8a68fbc4e46f07
+  languageName: node
+  linkType: hard
+
+"@wojtekmaj/react-datetimerange-picker@npm:^5.5.0":
+  version: 5.5.0
+  resolution: "@wojtekmaj/react-datetimerange-picker@npm:5.5.0"
+  dependencies:
+    clsx: ^2.0.0
+    make-event-props: ^1.6.0
+    prop-types: ^15.6.0
+    react-calendar: ^4.6.0
+    react-clock: ^4.5.0
+    react-datetime-picker: ^5.5.1
+    react-fit: ^1.7.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: e7bcf4451f39a68f3fe81de5b3648cf53af06a0a010b00113d9a29e291af31e860a7dfeff56c11968124275a2df800d891ff02cffb4e6214d46eccf1297764f8
+  languageName: node
+  linkType: hard
+
 "@wry/caches@npm:^1.0.0":
   version: 1.0.1
   resolution: "@wry/caches@npm:1.0.1"
@@ -6965,6 +8315,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@zxing/browser@npm:^0.1.1":
+  version: 0.1.5
+  resolution: "@zxing/browser@npm:0.1.5"
+  dependencies:
+    "@zxing/text-encoding": ^0.9.0
+  peerDependencies:
+    "@zxing/library": ^0.21.0
+  dependenciesMeta:
+    "@zxing/text-encoding":
+      optional: true
+  checksum: 27bfddd707e8e643624b432666a956f1e7e283e20963243f7050c781fd80daad9f54408acdf46d809c64586983f7b02a4981c1d3b0251519e0566c165f6b3924
+  languageName: node
+  linkType: hard
+
+"@zxing/library@npm:^0.19.2":
+  version: 0.19.3
+  resolution: "@zxing/library@npm:0.19.3"
+  dependencies:
+    "@zxing/text-encoding": ~0.9.0
+    ts-custom-error: ^3.2.1
+  dependenciesMeta:
+    "@zxing/text-encoding":
+      optional: true
+  checksum: 2a3adaccbde0e075ee4c3c73ab7fa9306be979dafeff6d373204470ea3cddab88608c6eca5e891c7d5e693c5df0f0664e14ea0a74d38e0658fc7464f5c986474
+  languageName: node
+  linkType: hard
+
+"@zxing/text-encoding@npm:^0.9.0, @zxing/text-encoding@npm:~0.9.0":
+  version: 0.9.0
+  resolution: "@zxing/text-encoding@npm:0.9.0"
+  checksum: c23b12aee7639382e4949961304a1294776afaffa40f579e09ffecd0e5e68cf26ef3edd75009de46da8a536e571448755ca68b3e2ea707d53793c0edb2e2c34a
+  languageName: node
+  linkType: hard
+
 "abab@npm:^2.0.5, abab@npm:^2.0.6":
   version: 2.0.6
   resolution: "abab@npm:2.0.6"
@@ -7089,7 +8473,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aggregate-error@npm:^3.0.0, aggregate-error@npm:^3.1.0":
+"aggregate-error@npm:^3.0.0":
   version: 3.1.0
   resolution: "aggregate-error@npm:3.1.0"
   dependencies:
@@ -7099,6 +8483,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aggregate-error@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "aggregate-error@npm:5.0.0"
+  dependencies:
+    clean-stack: ^5.2.0
+    indent-string: ^5.0.0
+  checksum: 37834eb0dac6ebd05ca8aa82e00deeb65fb7b1462c68ccb620221ba1753640fcb249e46c03401b470701a58826b65426deda83783fc2e8347c4b5037b2724d9b
+  languageName: node
+  linkType: hard
+
 "ajv-formats@npm:^2.1.1":
   version: 2.1.1
   resolution: "ajv-formats@npm:2.1.1"
@@ -7513,6 +8907,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"asn1js@npm:^3.0.1, asn1js@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "asn1js@npm:3.0.5"
+  dependencies:
+    pvtsutils: ^1.3.2
+    pvutils: ^1.1.3
+    tslib: ^2.4.0
+  checksum: 3b6af1bbadd5762ef8ead5daf2f6bda1bc9e23bc825c4dcc996aa1f9521ad7390a64028565d95d98090d69c8431f004c71cccb866004759169d7c203cf9075eb
+  languageName: node
+  linkType: hard
+
 "ast-module-types@npm:^2.7.1":
   version: 2.7.1
   resolution: "ast-module-types@npm:2.7.1"
@@ -7557,6 +8962,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"astral-regex@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "astral-regex@npm:2.0.0"
+  checksum: 876231688c66400473ba505731df37ea436e574dd524520294cc3bbc54ea40334865e01fa0d074d74d036ee874ee7e62f486ea38bc421ee8e6a871c06f011766
+  languageName: node
+  linkType: hard
+
 "async-limiter@npm:~1.0.0":
   version: 1.0.1
   resolution: "async-limiter@npm:1.0.1"
@@ -7601,6 +9013,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"auto-bind@npm:~4.0.0":
+  version: 4.0.0
+  resolution: "auto-bind@npm:4.0.0"
+  checksum: 00cad71cce5742faccb7dd65c1b55ebc4f45add4b0c9a1547b10b05bab22813230133b0c892c67ba3eb969a4524710c5e43cc45c72898ec84e56f3a596e7a04f
+  languageName: node
+  linkType: hard
+
 "available-typed-arrays@npm:^1.0.5":
   version: 1.0.5
   resolution: "available-typed-arrays@npm:1.0.5"
@@ -7905,10 +9324,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"before-after-hook@npm:^2.2.0":
-  version: 2.2.3
-  resolution: "before-after-hook@npm:2.2.3"
-  checksum: a1a2430976d9bdab4cd89cb50d27fa86b19e2b41812bf1315923b0cba03371ebca99449809226425dd3bcef20e010db61abdaff549278e111d6480034bebae87
+"before-after-hook@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "before-after-hook@npm:3.0.2"
+  checksum: 5f76a9d31909f7f1f7125b7e017ff018799308f5c1fc5a5bfeba9986149da77e6a5cdde0d151671cf374a7fa6452533237bb1de62dfd6c235c20e7c61cc9569d
   languageName: node
   linkType: hard
 
@@ -8210,6 +9629,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.22.2":
+  version: 4.23.0
+  resolution: "browserslist@npm:4.23.0"
+  dependencies:
+    caniuse-lite: ^1.0.30001587
+    electron-to-chromium: ^1.4.668
+    node-releases: ^2.0.14
+    update-browserslist-db: ^1.0.13
+  bin:
+    browserslist: cli.js
+  checksum: 436f49e796782ca751ebab7edc010cfc9c29f68536f387666cd70ea22f7105563f04dd62c6ff89cb24cc3254d17cba385f979eeeb3484d43e012412ff7e75def
+  languageName: node
+  linkType: hard
+
 "bs-logger@npm:0.x":
   version: 0.2.6
   resolution: "bs-logger@npm:0.2.6"
@@ -8228,13 +9661,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"btoa-lite@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "btoa-lite@npm:1.0.0"
-  checksum: c2d61993b801f8e35a96f20692a45459c753d9baa29d86d1343e714f8d6bbe7069f1a20a5ae868488f3fb137d5bd0c560f6fbbc90b5a71050919d2d2c97c0475
-  languageName: node
-  linkType: hard
-
 "buffer-alloc-unsafe@npm:^1.1.0":
   version: 1.1.0
   resolution: "buffer-alloc-unsafe@npm:1.1.0"
@@ -8327,6 +9753,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"busboy@npm:1.6.0, busboy@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "busboy@npm:1.6.0"
+  dependencies:
+    streamsearch: ^1.1.0
+  checksum: 32801e2c0164e12106bf236291a00795c3c4e4b709ae02132883fe8478ba2ae23743b11c5735a0aae8afe65ac4b6ca4568b91f0d9fed1fdbc32ede824a73746e
+  languageName: node
+  linkType: hard
+
 "bytes@npm:3.0.0":
   version: 3.0.0
   resolution: "bytes@npm:3.0.0"
@@ -8513,6 +9948,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001587":
+  version: 1.0.30001627
+  resolution: "caniuse-lite@npm:1.0.30001627"
+  checksum: 0808fd8c91c44a3671b343af50d936ac0aef95325c05550ac2e16b273b69f2f1347c2e6405c824ee8b91b04da596eb71adf37a0761d8ae1ed3774e7733fd233d
+  languageName: node
+  linkType: hard
+
+"capital-case@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "capital-case@npm:1.0.4"
+  dependencies:
+    no-case: ^3.0.4
+    tslib: ^2.0.3
+    upper-case-first: ^2.0.2
+  checksum: 41fa8fa87f6d24d0835a2b4a9341a3eaecb64ac29cd7c5391f35d6175a0fa98ab044e7f2602e1ec3afc886231462ed71b5b80c590b8b41af903ec2c15e5c5931
+  languageName: node
+  linkType: hard
+
 "catering@npm:^2.1.0, catering@npm:^2.1.1":
   version: 2.1.1
   resolution: "catering@npm:2.1.1"
@@ -8558,6 +10011,62 @@ __metadata:
   languageName: node
   linkType: hard
 
+"change-case-all@npm:1.0.14":
+  version: 1.0.14
+  resolution: "change-case-all@npm:1.0.14"
+  dependencies:
+    change-case: ^4.1.2
+    is-lower-case: ^2.0.2
+    is-upper-case: ^2.0.2
+    lower-case: ^2.0.2
+    lower-case-first: ^2.0.2
+    sponge-case: ^1.0.1
+    swap-case: ^2.0.2
+    title-case: ^3.0.3
+    upper-case: ^2.0.2
+    upper-case-first: ^2.0.2
+  checksum: 6ff893e005e1bf115cc2969cc5ca3610f7c6ece9e90b7927ed12c980c7d3ea9a565150d246c6dba0fee21aaacbd38d69b98a4670d96b892c76f66e46616506d3
+  languageName: node
+  linkType: hard
+
+"change-case-all@npm:1.0.15":
+  version: 1.0.15
+  resolution: "change-case-all@npm:1.0.15"
+  dependencies:
+    change-case: ^4.1.2
+    is-lower-case: ^2.0.2
+    is-upper-case: ^2.0.2
+    lower-case: ^2.0.2
+    lower-case-first: ^2.0.2
+    sponge-case: ^1.0.1
+    swap-case: ^2.0.2
+    title-case: ^3.0.3
+    upper-case: ^2.0.2
+    upper-case-first: ^2.0.2
+  checksum: e1dabdcd8447a3690f3faf15f92979dfbc113109b50916976e1d5e518e6cfdebee4f05f54d0ca24fb79a4bf835185b59ae25e967bb3dc10bd236a775b19ecc52
+  languageName: node
+  linkType: hard
+
+"change-case@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "change-case@npm:4.1.2"
+  dependencies:
+    camel-case: ^4.1.2
+    capital-case: ^1.0.4
+    constant-case: ^3.0.4
+    dot-case: ^3.0.4
+    header-case: ^2.0.4
+    no-case: ^3.0.4
+    param-case: ^3.0.4
+    pascal-case: ^3.1.2
+    path-case: ^3.0.4
+    sentence-case: ^3.0.4
+    snake-case: ^3.0.4
+    tslib: ^2.0.3
+  checksum: e4bc4a093a1f7cce8b33896665cf9e456e3bc3cc0def2ad7691b1994cfca99b3188d0a513b16855b01a6bd20692fcde12a7d4d87a5615c4c515bbbf0e651f116
+  languageName: node
+  linkType: hard
+
 "char-regex@npm:^1.0.2":
   version: 1.0.2
   resolution: "char-regex@npm:1.0.2"
@@ -8586,6 +10095,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chart.js@npm:4.2.0":
+  version: 4.2.0
+  resolution: "chart.js@npm:4.2.0"
+  dependencies:
+    "@kurkle/color": ^0.3.0
+  checksum: 281b023c013de8700a5208a45d35248b02119fadb574d0c104c7e0720605e085195ce546fd3aa27625e9db1188fdd5f7491a411463b9c30b7654a5f4b13d8d80
+  languageName: node
+  linkType: hard
+
 "chokidar@npm:^3.4.0, chokidar@npm:^3.5.1, chokidar@npm:^3.5.2, chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
@@ -8687,6 +10205,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clean-stack@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "clean-stack@npm:5.2.0"
+  dependencies:
+    escape-string-regexp: 5.0.0
+  checksum: 9b16c9d56ef673b1666030d04afc5a382c7ec6b5fb8df2dd361090c3ac79273695d6db9867938bb3268903dcebf401e2c6034b2f56f27673f6032b5e89217b81
+  languageName: node
+  linkType: hard
+
 "clean-webpack-plugin@npm:^4.0.0":
   version: 4.0.0
   resolution: "clean-webpack-plugin@npm:4.0.0"
@@ -8723,6 +10250,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cli-truncate@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "cli-truncate@npm:2.1.0"
+  dependencies:
+    slice-ansi: ^3.0.0
+    string-width: ^4.2.0
+  checksum: bf1e4e6195392dc718bf9cd71f317b6300dc4a9191d052f31046b8773230ece4fa09458813bf0e3455a5e68c0690d2ea2c197d14a8b85a7b5e01c97f4b5feb5d
+  languageName: node
+  linkType: hard
+
+"cli-width@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "cli-width@npm:3.0.0"
+  checksum: 4c94af3769367a70e11ed69aa6095f1c600c0ff510f3921ab4045af961820d57c0233acfa8b6396037391f31b4c397e1f614d234294f979ff61430a6c166c3f6
+  languageName: node
+  linkType: hard
+
 "cli-width@npm:^4.0.0, cli-width@npm:^4.1.0":
   version: 4.1.0
   resolution: "cli-width@npm:4.1.0"
@@ -8730,6 +10274,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"client-only@npm:0.0.1":
+  version: 0.0.1
+  resolution: "client-only@npm:0.0.1"
+  checksum: 0c16bf660dadb90610553c1d8946a7fdfb81d624adea073b8440b7d795d5b5b08beb3c950c6a2cf16279365a3265158a236876d92bce16423c485c322d7dfaf8
+  languageName: node
+  linkType: hard
+
 "cliui@npm:^6.0.0":
   version: 6.0.0
   resolution: "cliui@npm:6.0.0"
@@ -8872,7 +10423,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"colorette@npm:^2.0.10":
+"colorette@npm:^2.0.10, colorette@npm:^2.0.16":
   version: 2.0.20
   resolution: "colorette@npm:2.0.20"
   checksum: 0c016fea2b91b733eb9f4bcdb580018f52c0bc0979443dad930e5037a968237ac53d9beb98e218d2e9235834f8eebce7f8e080422d6194e957454255bde71d3d
@@ -8965,6 +10516,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"common-tags@npm:1.8.2":
+  version: 1.8.2
+  resolution: "common-tags@npm:1.8.2"
+  checksum: 767a6255a84bbc47df49a60ab583053bb29a7d9687066a18500a516188a062c4e4cd52de341f22de0b07062e699b1b8fe3cfa1cb55b241cb9301aeb4f45b4dff
+  languageName: node
+  linkType: hard
+
 "commondir@npm:^1.0.1":
   version: 1.0.1
   resolution: "commondir@npm:1.0.1"
@@ -9060,6 +10618,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"constant-case@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "constant-case@npm:3.0.4"
+  dependencies:
+    no-case: ^3.0.4
+    tslib: ^2.0.3
+    upper-case: ^2.0.2
+  checksum: 6c3346d51afc28d9fae922e966c68eb77a19d94858dba230dd92d7b918b37d36db50f0311e9ecf6847e43e934b1c01406a0936973376ab17ec2c471fbcfb2cf3
+  languageName: node
+  linkType: hard
+
 "content-disposition@npm:0.5.4":
   version: 0.5.4
   resolution: "content-disposition@npm:0.5.4"
@@ -9178,7 +10747,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^8.1.3, cosmiconfig@npm:^8.3.6":
+"cosmiconfig@npm:^8.1.0, cosmiconfig@npm:^8.1.3, cosmiconfig@npm:^8.3.6":
   version: 8.3.6
   resolution: "cosmiconfig@npm:8.3.6"
   dependencies:
@@ -9275,6 +10844,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cross-inspect@npm:1.0.0":
+  version: 1.0.0
+  resolution: "cross-inspect@npm:1.0.0"
+  dependencies:
+    tslib: ^2.4.0
+  checksum: 975c81799549627027254eb70f1c349cefb14435d580bea6f351f510c839dcb1a9288983407bac2ad317e6eff29cf1e99299606da21f404562bfa64cec502239
+  languageName: node
+  linkType: hard
+
 "cross-spawn@npm:^5.1.0":
   version: 5.1.0
   resolution: "cross-spawn@npm:5.1.0"
@@ -9615,6 +11193,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dataloader@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "dataloader@npm:2.2.2"
+  checksum: 4dabd247089c29f194e94d5434d504f99156c5c214a03463c20f3f17f40398d7e179edee69a27c16e315519ac8739042a810090087ae26449a0e685156a02c65
+  languageName: node
+  linkType: hard
+
 "dayjs@npm:^1.11.7, dayjs@npm:^1.8.15":
   version: 1.11.10
   resolution: "dayjs@npm:1.11.10"
@@ -9622,6 +11207,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debounce@npm:^1.2.0":
+  version: 1.2.1
+  resolution: "debounce@npm:1.2.1"
+  checksum: 682a89506d9e54fb109526f4da255c5546102fbb8e3ae75eef3b04effaf5d4853756aee97475cd4650641869794e44f410eeb20ace2b18ea592287ab2038519e
+  languageName: node
+  linkType: hard
+
 "debug@npm:2.6.9, debug@npm:^2.2.0":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -9737,6 +11329,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deep-object-diff@npm:^1.1.9":
+  version: 1.1.9
+  resolution: "deep-object-diff@npm:1.1.9"
+  checksum: ecd42455e4773f653595d28070295e7aaa8402db5f8ab21d0bec115a7cb4de5e207a5665514767da5f025c96597f1d3a0a4888aeb4dd49e03c996871a3aa05ef
+  languageName: node
+  linkType: hard
+
 "deepmerge@npm:^3.2.0":
   version: 3.3.0
   resolution: "deepmerge@npm:3.3.0"
@@ -9744,7 +11343,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deepmerge@npm:^4.2.2":
+"deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1":
   version: 4.3.1
   resolution: "deepmerge@npm:4.3.1"
   checksum: 2024c6a980a1b7128084170c4cf56b0fd58a63f2da1660dcfe977415f27b17dbe5888668b59d0b063753f3220719d5e400b7f113609489c90160bb9a5518d052
@@ -9903,6 +11502,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dependency-graph@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "dependency-graph@npm:0.11.0"
+  checksum: 477204beaa9be69e642bc31ffe7a8c383d0cf48fa27acbc91c5df01431ab913e65c154213d2ef83d034c98d77280743ec85e5da018a97a18dd43d3c0b78b28cd
+  languageName: node
+  linkType: hard
+
 "dependency-tree@npm:^9.0.0":
   version: 9.0.0
   resolution: "dependency-tree@npm:9.0.0"
@@ -9929,13 +11535,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deprecation@npm:^2.0.0, deprecation@npm:^2.3.1":
-  version: 2.3.1
-  resolution: "deprecation@npm:2.3.1"
-  checksum: f56a05e182c2c195071385455956b0c4106fe14e36245b00c689ceef8e8ab639235176a96977ba7c74afb173317fac2e0ec6ec7a1c6d1e6eaa401c586c714132
-  languageName: node
-  linkType: hard
-
 "dequal@npm:^2.0.0, dequal@npm:^2.0.3":
   version: 2.0.3
   resolution: "dequal@npm:2.0.3"
@@ -10366,6 +11965,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dotenv@npm:^16.0.0":
+  version: 16.4.5
+  resolution: "dotenv@npm:16.4.5"
+  checksum: 301a12c3d44fd49888b74eb9ccf9f07a1f5df43f489e7fcb89647a2edcd84c42d6bc349dc8df099cd18f07c35c7b04685c1a4f3e6a6a9e6b30f8d48c15b7f49c
+  languageName: node
+  linkType: hard
+
 "dotenv@npm:^16.3.1":
   version: 16.3.1
   resolution: "dotenv@npm:16.3.1"
@@ -10380,6 +11986,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dset@npm:^3.1.2":
+  version: 3.1.3
+  resolution: "dset@npm:3.1.3"
+  checksum: 5db964a36c60c51aa3f7088bfe1dc5c0eedd9a6ef3b216935bb70ef4a7b8fc40fd2f9bb16b9a4692c9c9772cea60cfefb108d2d09fbd53c85ea8f6cd54502d6a
+  languageName: node
+  linkType: hard
+
 "eastasianwidth@npm:^0.2.0":
   version: 0.2.0
   resolution: "eastasianwidth@npm:0.2.0"
@@ -10421,6 +12034,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.4.668":
+  version: 1.4.788
+  resolution: "electron-to-chromium@npm:1.4.788"
+  checksum: fc48e29a860c1c448eec8c6e519192e78f60f022c66c59442f35881ec326951959c9434d90d24cc97d699f5afe4f87eeeca2ed46f82d811c9b2c12a02c5344e2
+  languageName: node
+  linkType: hard
+
 "elliptic@npm:^6.5.3, elliptic@npm:^6.5.4":
   version: 6.5.4
   resolution: "elliptic@npm:6.5.4"
@@ -10906,6 +12526,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"escape-string-regexp@npm:5.0.0":
+  version: 5.0.0
+  resolution: "escape-string-regexp@npm:5.0.0"
+  checksum: 20daabe197f3cb198ec28546deebcf24b3dbb1a5a269184381b3116d12f0532e06007f4bc8da25669d6a7f8efb68db0758df4cd981f57bc5b57f521a3e12c59e
+  languageName: node
+  linkType: hard
+
 "escape-string-regexp@npm:^1.0.5":
   version: 1.0.5
   resolution: "escape-string-regexp@npm:1.0.5"
@@ -11839,7 +13466,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"external-editor@npm:^3.1.0":
+"external-editor@npm:^3.0.3, external-editor@npm:^3.1.0":
   version: 3.1.0
   resolution: "external-editor@npm:3.1.0"
   dependencies:
@@ -11850,6 +13477,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"extract-files@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "extract-files@npm:11.0.0"
+  checksum: 39ebd92772e9a1e30d1e3112fb7db85d353c8243640635668b615ac1d605ceb79fbb13d17829dd308993ef37bb189ad99817f79ab164ae95c9bb3df9f440bd16
+  languageName: node
+  linkType: hard
+
+"fast-decode-uri-component@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "fast-decode-uri-component@npm:1.0.1"
+  checksum: 427a48fe0907e76f0e9a2c228e253b4d8a8ab21d130ee9e4bb8339c5ba4086235cf9576831f7b20955a752eae4b525a177ff9d5825dd8d416e7726939194fbee
+  languageName: node
+  linkType: hard
+
 "fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
   version: 3.1.3
   resolution: "fast-deep-equal@npm:3.1.3"
@@ -11898,6 +13539,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-querystring@npm:^1.1.1":
+  version: 1.1.2
+  resolution: "fast-querystring@npm:1.1.2"
+  dependencies:
+    fast-decode-uri-component: ^1.0.1
+  checksum: 7149f82ee9ac39a9c08c7ffe435b9f6deade76ae5e3675fe1835720513e8c4bc541e666b4b7b1c0c07e08f369dcf4828d00f2bee39889a90a168e1439cf27b0b
+  languageName: node
+  linkType: hard
+
 "fast-safe-stringify@npm:^2.1.1":
   version: 2.1.1
   resolution: "fast-safe-stringify@npm:2.1.1"
@@ -11905,6 +13555,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-url-parser@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "fast-url-parser@npm:1.1.3"
+  dependencies:
+    punycode: ^1.3.2
+  checksum: 5043d0c4a8d775ff58504d56c096563c11b113e4cb8a2668c6f824a1cd4fb3812e2fdf76537eb24a7ce4ae7def6bd9747da630c617cf2a4b6ce0c42514e4f21c
+  languageName: node
+  linkType: hard
+
 "fast-xml-parser@npm:^4.0.12":
   version: 4.3.2
   resolution: "fast-xml-parser@npm:4.3.2"
@@ -11981,7 +13640,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"figures@npm:^3.2.0":
+"figures@npm:^3.0.0, figures@npm:^3.2.0":
   version: 3.2.0
   resolution: "figures@npm:3.2.0"
   dependencies:
@@ -12647,7 +14306,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^7.0.3, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.1.7, glob@npm:^7.2.0":
+"glob@npm:^7.0.3, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.1.7, glob@npm:^7.2.0":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
   dependencies:
@@ -12814,7 +14473,44 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graphql-tag@npm:^2.10.1, graphql-tag@npm:^2.12.6":
+"graphql-config@npm:^5.0.2":
+  version: 5.0.3
+  resolution: "graphql-config@npm:5.0.3"
+  dependencies:
+    "@graphql-tools/graphql-file-loader": ^8.0.0
+    "@graphql-tools/json-file-loader": ^8.0.0
+    "@graphql-tools/load": ^8.0.0
+    "@graphql-tools/merge": ^9.0.0
+    "@graphql-tools/url-loader": ^8.0.0
+    "@graphql-tools/utils": ^10.0.0
+    cosmiconfig: ^8.1.0
+    jiti: ^1.18.2
+    minimatch: ^4.2.3
+    string-env-interpolation: ^1.0.1
+    tslib: ^2.4.0
+  peerDependencies:
+    cosmiconfig-toml-loader: ^1.0.0
+    graphql: ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  peerDependenciesMeta:
+    cosmiconfig-toml-loader:
+      optional: true
+  checksum: 3d079d48ccc624d16bee58d15802267d65e856f4d1ba278ededb3ac66a565d4f205cd60ac1f19ed8159bfa2d944c453ae58512c6513a8004754bea9964924485
+  languageName: node
+  linkType: hard
+
+"graphql-request@npm:^6.0.0":
+  version: 6.1.0
+  resolution: "graphql-request@npm:6.1.0"
+  dependencies:
+    "@graphql-typed-document-node/core": ^3.2.0
+    cross-fetch: ^3.1.5
+  peerDependencies:
+    graphql: 14 - 16
+  checksum: 6d62630a0169574442320651c1f7626c0c602025c3c46b19e09417c9579bb209306ee63de9793a03be2e1701bb7f13971f8545d99bc6573e340f823af0ad35b2
+  languageName: node
+  linkType: hard
+
+"graphql-tag@npm:^2.10.1, graphql-tag@npm:^2.11.0, graphql-tag@npm:^2.12.6":
   version: 2.12.6
   resolution: "graphql-tag@npm:2.12.6"
   dependencies:
@@ -12834,6 +14530,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"graphql-ws@npm:^5.14.0":
+  version: 5.16.0
+  resolution: "graphql-ws@npm:5.16.0"
+  peerDependencies:
+    graphql: ">=0.11 <=16"
+  checksum: e3e077ec187a92be3fd5dfae49e23af11a82711d3537064384f6861c2b5ceb339f60dc1871d0026b47ff05e4ed3c941404812a8086347e454688e0e6ef0e69f3
+  languageName: node
+  linkType: hard
+
 "graphql@npm:15.8.0":
   version: 15.8.0
   resolution: "graphql@npm:15.8.0"
@@ -12862,6 +14567,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"harmony-reflect@npm:^1.4.6":
+  version: 1.6.2
+  resolution: "harmony-reflect@npm:1.6.2"
+  checksum: 2e5bae414cd2bfae5476147f9935dc69ee9b9a413206994dcb94c5b3208d4555da3d4313aff6fd14bd9991c1e3ef69cdda5c8fac1eb1d7afc064925839339b8c
+  languageName: node
+  linkType: hard
+
 "has-bigints@npm:^1.0.1, has-bigints@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-bigints@npm:1.0.2"
@@ -12972,6 +14684,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"header-case@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "header-case@npm:2.0.4"
+  dependencies:
+    capital-case: ^1.0.4
+    tslib: ^2.0.3
+  checksum: 571c83eeb25e8130d172218712f807c0b96d62b020981400bccc1503a7cf14b09b8b10498a962d2739eccf231d950e3848ba7d420b58a6acd2f9283439546cd9
+  languageName: node
+  linkType: hard
+
 "hermes-estree@npm:0.8.0":
   version: 0.8.0
   resolution: "hermes-estree@npm:0.8.0"
@@ -13235,6 +14957,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"https-proxy-agent@npm:^7.0.0":
+  version: 7.0.4
+  resolution: "https-proxy-agent@npm:7.0.4"
+  dependencies:
+    agent-base: ^7.0.2
+    debug: 4
+  checksum: daaab857a967a2519ddc724f91edbbd388d766ff141b9025b629f92b9408fc83cee8a27e11a907aede392938e9c398e240d643e178408a59e4073539cde8cfe9
+  languageName: node
+  linkType: hard
+
 "https-proxy-agent@npm:^7.0.1":
   version: 7.0.2
   resolution: "https-proxy-agent@npm:7.0.2"
@@ -13300,6 +15032,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"identity-obj-proxy@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "identity-obj-proxy@npm:3.0.0"
+  dependencies:
+    harmony-reflect: ^1.4.6
+  checksum: 97559f8ea2aeaa1a880d279d8c49550dce01148321e00a2102cda5ddf9ce622fa1d7f3efc7bed63458af78889de888fdaebaf31c816312298bb3fdd0ef8aaf2c
+  languageName: node
+  linkType: hard
+
 "ieee754@npm:^1.1.13, ieee754@npm:^1.2.1":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"
@@ -13330,6 +15071,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:~3.7.6":
+  version: 3.7.6
+  resolution: "immutable@npm:3.7.6"
+  checksum: 8cccfb22d3ecf14fe0c474612e96d6bb5d117493e7639fe6642fb81e78c9ac4b698dd8a322c105001a709ad873ffc90e30bad7db5d9a3ef0b54a6e1db0258e8e
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^2.0.0":
   version: 2.0.0
   resolution: "import-fresh@npm:2.0.0"
@@ -13350,6 +15098,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"import-from@npm:4.0.0":
+  version: 4.0.0
+  resolution: "import-from@npm:4.0.0"
+  checksum: 1fa29c05b048da18914e91d9a529e5d9b91774bebbfab10e53f59bcc1667917672b971cf102fee857f142e5e433ce69fa1f0a596e1c7d82f9947a5ec352694b9
+  languageName: node
+  linkType: hard
+
 "import-local@npm:^3.0.2":
   version: 3.1.0
   resolution: "import-local@npm:3.1.0"
@@ -13376,6 +15131,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"indent-string@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "indent-string@npm:5.0.0"
+  checksum: e466c27b6373440e6d84fbc19e750219ce25865cb82d578e41a6053d727e5520dc5725217d6eb1cc76005a1bb1696a0f106d84ce7ebda3033b963a38583fb3b3
+  languageName: node
+  linkType: hard
+
 "indexes-of@npm:^1.0.1":
   version: 1.0.1
   resolution: "indexes-of@npm:1.0.1"
@@ -13431,6 +15193,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"inquirer@npm:^8.0.0":
+  version: 8.2.6
+  resolution: "inquirer@npm:8.2.6"
+  dependencies:
+    ansi-escapes: ^4.2.1
+    chalk: ^4.1.1
+    cli-cursor: ^3.1.0
+    cli-width: ^3.0.0
+    external-editor: ^3.0.3
+    figures: ^3.0.0
+    lodash: ^4.17.21
+    mute-stream: 0.0.8
+    ora: ^5.4.1
+    run-async: ^2.4.0
+    rxjs: ^7.5.5
+    string-width: ^4.1.0
+    strip-ansi: ^6.0.0
+    through: ^2.3.6
+    wrap-ansi: ^6.0.1
+  checksum: 387ffb0a513559cc7414eb42c57556a60e302f820d6960e89d376d092e257a919961cd485a1b4de693dbb5c0de8bc58320bfd6247dfd827a873aa82a4215a240
+  languageName: node
+  linkType: hard
+
 "internal-ip@npm:4.3.0":
   version: 4.3.0
   resolution: "internal-ip@npm:4.3.0"
@@ -13496,6 +15281,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-absolute@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-absolute@npm:1.0.0"
+  dependencies:
+    is-relative: ^1.0.0
+    is-windows: ^1.0.1
+  checksum: 9d16b2605eda3f3ce755410f1d423e327ad3a898bcb86c9354cf63970ed3f91ba85e9828aa56f5d6a952b9fae43d0477770f78d37409ae8ecc31e59ebc279b27
+  languageName: node
+  linkType: hard
+
 "is-arguments@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-arguments@npm:1.1.1"
@@ -13685,6 +15480,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-glob@npm:4.0.3, is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
+  version: 4.0.3
+  resolution: "is-glob@npm:4.0.3"
+  dependencies:
+    is-extglob: ^2.1.1
+  checksum: d381c1319fcb69d341cc6e6c7cd588e17cd94722d9a32dbd60660b993c4fb7d0f19438674e68dfec686d09b7c73139c9166b47597f846af387450224a8101ab4
+  languageName: node
+  linkType: hard
+
 "is-glob@npm:^2.0.0":
   version: 2.0.1
   resolution: "is-glob@npm:2.0.1"
@@ -13694,15 +15498,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
-  version: 4.0.3
-  resolution: "is-glob@npm:4.0.3"
-  dependencies:
-    is-extglob: ^2.1.1
-  checksum: d381c1319fcb69d341cc6e6c7cd588e17cd94722d9a32dbd60660b993c4fb7d0f19438674e68dfec686d09b7c73139c9166b47597f846af387450224a8101ab4
-  languageName: node
-  linkType: hard
-
 "is-inside-container@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-inside-container@npm:1.0.0"
@@ -13737,6 +15532,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-lower-case@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "is-lower-case@npm:2.0.2"
+  dependencies:
+    tslib: ^2.0.3
+  checksum: ba57dd1201e15fd9b590654736afccf1b3b68e919f40c23ef13b00ebcc639b1d9c2f81fe86415bff3e8eccffec459786c9ac9dc8f3a19cfa4484206c411c1d7d
+  languageName: node
+  linkType: hard
+
 "is-map@npm:^2.0.1, is-map@npm:^2.0.2":
   version: 2.0.2
   resolution: "is-map@npm:2.0.2"
@@ -13874,6 +15678,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-relative@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-relative@npm:1.0.0"
+  dependencies:
+    is-unc-path: ^1.0.0
+  checksum: 3271a0df109302ef5e14a29dcd5d23d9788e15ade91a40b942b035827ffbb59f7ce9ff82d036ea798541a52913cbf9d2d0b66456340887b51f3542d57b5a4c05
+  languageName: node
+  linkType: hard
+
 "is-set@npm:^2.0.1, is-set@npm:^2.0.2":
   version: 2.0.2
   resolution: "is-set@npm:2.0.2"
@@ -13947,6 +15760,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-unc-path@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-unc-path@npm:1.0.0"
+  dependencies:
+    unc-path-regex: ^0.1.2
+  checksum: e8abfde203f7409f5b03a5f1f8636e3a41e78b983702ef49d9343eb608cdfe691429398e8815157519b987b739bcfbc73ae7cf4c8582b0ab66add5171088eab6
+  languageName: node
+  linkType: hard
+
 "is-unicode-supported@npm:^0.1.0":
   version: 0.1.0
   resolution: "is-unicode-supported@npm:0.1.0"
@@ -13954,6 +15776,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-upper-case@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "is-upper-case@npm:2.0.2"
+  dependencies:
+    tslib: ^2.0.3
+  checksum: cf4fd43c00c2e72cd5cff911923070b89f0933b464941bd782e2315385f80b5a5acd772db3b796542e5e3cfed735f4dffd88c54d62db1ebfc5c3daa7b1af2bc6
+  languageName: node
+  linkType: hard
+
 "is-url-superb@npm:^4.0.0":
   version: 4.0.0
   resolution: "is-url-superb@npm:4.0.0"
@@ -14003,7 +15834,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-windows@npm:^1.0.0":
+"is-windows@npm:^1.0.0, is-windows@npm:^1.0.1":
   version: 1.0.2
   resolution: "is-windows@npm:1.0.2"
   checksum: 438b7e52656fe3b9b293b180defb4e448088e7023a523ec21a91a80b9ff8cdb3377ddb5b6e60f7c7de4fa8b63ab56e121b6705fe081b3cf1b828b0a380009ad7
@@ -14061,6 +15892,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isomorphic-ws@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "isomorphic-ws@npm:5.0.0"
+  peerDependencies:
+    ws: "*"
+  checksum: e20eb2aee09ba96247465fda40c6d22c1153394c0144fa34fe6609f341af4c8c564f60ea3ba762335a7a9c306809349f9b863c8beedf2beea09b299834ad5398
+  languageName: node
+  linkType: hard
+
 "istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.0":
   version: 3.2.2
   resolution: "istanbul-lib-coverage@npm:3.2.2"
@@ -14732,6 +16572,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jiti@npm:^1.17.1, jiti@npm:^1.18.2":
+  version: 1.21.0
+  resolution: "jiti@npm:1.21.0"
+  bin:
+    jiti: bin/jiti.js
+  checksum: a7bd5d63921c170eaec91eecd686388181c7828e1fa0657ab374b9372bfc1f383cf4b039e6b272383d5cb25607509880af814a39abdff967322459cca41f2961
+  languageName: node
+  linkType: hard
+
 "jju@npm:^1.4.0":
   version: 1.4.0
   resolution: "jju@npm:1.4.0"
@@ -14759,10 +16608,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jose@npm:^4.14.4":
-  version: 4.15.4
-  resolution: "jose@npm:4.15.4"
-  checksum: dccad91cb3357f36423774a0b89ad830dd84b31090de65cd139b85488439f16a00f8c59c0773825e8a1adb0dd9d13ad725ad66e6ea33880ecb3959bb99e1ea5b
+"jose@npm:^4.15.5":
+  version: 4.15.5
+  resolution: "jose@npm:4.15.5"
+  checksum: 7dde76447c7707bd4b448f914b216f3858e701aa83f00447434252461af5b9e159dcbffb88badea3f9616739526763581267c9560622f0a058df8d68c86d7f79
+  languageName: node
+  linkType: hard
+
+"jose@npm:^5.0.0":
+  version: 5.4.0
+  resolution: "jose@npm:5.4.0"
+  checksum: 9ec96d6c9711419f5ad983017cb59bf51ec975abb8b839d04e33d8fd701cf19b0f3c2ce34426eeeaa7dc2126c8745eb8117c6b3b04f202602804dd39b0a349ae
   languageName: node
   linkType: hard
 
@@ -14792,7 +16648,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-yaml@npm:^4.1.0":
+"js-yaml@npm:^4.0.0, js-yaml@npm:^4.1.0":
   version: 4.1.0
   resolution: "js-yaml@npm:4.1.0"
   dependencies:
@@ -14810,11 +16666,12 @@ __metadata:
     "@changesets/cli": ^2.27.1
     "@manypkg/cli": ^0.21.0
     "@octokit/auth-action": ^4.0.1
-    octokit: ^3.1.2
+    "@wojtekmaj/react-daterange-picker": ^5.5.0
+    octokit: ^4.0.2
     react-datetime-picker: ^5.6.0
     rehype-autolink-headings: ^7.0.0
     ts-prune: ^0.10.3
-    turbo: 1.10.16
+    turbo: ^1.13.3
     unimported: ^1.29.2
   languageName: unknown
   linkType: soft
@@ -14979,6 +16836,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-to-pretty-yaml@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "json-to-pretty-yaml@npm:1.2.2"
+  dependencies:
+    remedial: ^1.0.7
+    remove-trailing-spaces: ^1.0.6
+  checksum: 4b78480f426e176e5fdac073e05877683bb026f1175deb52d0941b992f9c91a58a812c020f00aa67ba1fc7cadb220539a264146f222e48a48c8bb2a0931cac9b
+  languageName: node
+  linkType: hard
+
 "json5@npm:^1.0.2":
   version: 1.0.2
   resolution: "json5@npm:1.0.2"
@@ -15031,7 +16898,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonwebtoken@npm:^9.0.0, jsonwebtoken@npm:^9.0.1":
+"jsonwebtoken@npm:^9.0.1":
   version: 9.0.2
   resolution: "jsonwebtoken@npm:9.0.2"
   dependencies:
@@ -15189,6 +17056,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"libphonenumber-js@npm:^1.11.1":
+  version: 1.11.2
+  resolution: "libphonenumber-js@npm:1.11.2"
+  checksum: 2ea77cc482076c59a3b601b9a170bdbfcfe5e21672e566163023d2cb30f5ff53751a9ec8a494261387147e45944523162faf3f1cb8a8a4e2d9bd1f1102f9aac0
+  languageName: node
+  linkType: hard
+
 "lightningcss-darwin-arm64@npm:1.19.0":
   version: 1.19.0
   resolution: "lightningcss-darwin-arm64@npm:1.19.0"
@@ -15300,6 +17174,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"listr2@npm:^4.0.5":
+  version: 4.0.5
+  resolution: "listr2@npm:4.0.5"
+  dependencies:
+    cli-truncate: ^2.1.0
+    colorette: ^2.0.16
+    log-update: ^4.0.0
+    p-map: ^4.0.0
+    rfdc: ^1.3.0
+    rxjs: ^7.5.5
+    through: ^2.3.8
+    wrap-ansi: ^7.0.0
+  peerDependencies:
+    enquirer: ">= 2.3.0 < 3"
+  peerDependenciesMeta:
+    enquirer:
+      optional: true
+  checksum: 7af31851abe25969ef0581c6db808117e36af15b131401795182427769d9824f451ba9e8aff6ccd25b6a4f6c8796f816292caf08e5f1f9b1775e8e9c313dc6c5
+  languageName: node
+  linkType: hard
+
 "load-tsconfig@npm:^0.2.3":
   version: 0.2.5
   resolution: "load-tsconfig@npm:0.2.5"
@@ -15498,7 +17393,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.17.13, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4":
+"lodash@npm:^4.17.13, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:~4.17.0":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@@ -15514,7 +17409,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"log-symbols@npm:^4.1.0":
+"log-symbols@npm:^4.0.0, log-symbols@npm:^4.1.0":
   version: 4.1.0
   resolution: "log-symbols@npm:4.1.0"
   dependencies:
@@ -15524,6 +17419,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"log-update@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "log-update@npm:4.0.0"
+  dependencies:
+    ansi-escapes: ^4.3.0
+    cli-cursor: ^3.1.0
+    slice-ansi: ^4.0.0
+    wrap-ansi: ^6.2.0
+  checksum: ae2f85bbabc1906034154fb7d4c4477c79b3e703d22d78adee8b3862fa913942772e7fa11713e3d96fb46de4e3cabefbf5d0a544344f03b58d3c4bff52aa9eb2
+  languageName: node
+  linkType: hard
+
 "logkitty@npm:^0.7.1":
   version: 0.7.1
   resolution: "logkitty@npm:0.7.1"
@@ -15548,6 +17455,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lower-case-first@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "lower-case-first@npm:2.0.2"
+  dependencies:
+    tslib: ^2.0.3
+  checksum: 33e3da1098ddda219ce125d4ab7a78a944972c0ee8872e95b6ccc35df8ad405284ab233b0ba4d72315ad1a06fe2f0d418ee4cba9ec1ef1c386dea78899fc8958
+  languageName: node
+  linkType: hard
+
 "lower-case@npm:^2.0.2":
   version: 2.0.2
   resolution: "lower-case@npm:2.0.2"
@@ -15722,6 +17638,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"map-cache@npm:^0.2.0":
+  version: 0.2.2
+  resolution: "map-cache@npm:0.2.2"
+  checksum: 3067cea54285c43848bb4539f978a15dedc63c03022abeec6ef05c8cb6829f920f13b94bcaf04142fc6a088318e564c4785704072910d120d55dbc2e0c421969
+  languageName: node
+  linkType: hard
+
 "map-obj@npm:^1.0.0":
   version: 1.0.1
   resolution: "map-obj@npm:1.0.1"
@@ -15889,6 +17812,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"meros@npm:^1.2.1":
+  version: 1.3.0
+  resolution: "meros@npm:1.3.0"
+  peerDependencies:
+    "@types/node": ">=13"
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+  checksum: ea86c83fe9357d3eb2f5bad20909e12642c7bc8c10340d9bd0968b48f69ec453de14f7e5032d138ad04cb10d79b8c9fb3c9601bb515e8fbdf9bec4eed62994ad
+  languageName: node
+  linkType: hard
+
 "methods@npm:^1.1.2, methods@npm:~1.1.2":
   version: 1.1.2
   resolution: "methods@npm:1.1.2"
@@ -16329,6 +18264,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "mime@npm:3.0.0"
+  bin:
+    mime: cli.js
+  checksum: f43f9b7bfa64534e6b05bd6062961681aeb406a5b53673b53b683f27fcc4e739989941836a355eef831f4478923651ecc739f4a5f6e20a76487b432bfd4db928
+  languageName: node
+  linkType: hard
+
 "mimic-fn@npm:^1.0.0":
   version: 1.2.0
   resolution: "mimic-fn@npm:1.2.0"
@@ -16405,6 +18349,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimatch@npm:^4.2.3":
+  version: 4.2.3
+  resolution: "minimatch@npm:4.2.3"
+  dependencies:
+    brace-expansion: ^1.1.7
+  checksum: 3392388e3ef7de7ae9a3a48d48a27a323934452f4af81b925dfbe85ce2dc07da855e3dbcc69229888be4e5118f6c0b79847d30f3e7c0e0017b25e423c11c0409
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^5.0.1":
   version: 5.1.6
   resolution: "minimatch@npm:5.1.6"
@@ -16649,6 +18602,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mute-stream@npm:0.0.8":
+  version: 0.0.8
+  resolution: "mute-stream@npm:0.0.8"
+  checksum: ff48d251fc3f827e5b1206cda0ffdaec885e56057ee86a3155e1951bc940fd5f33531774b1cc8414d7668c10a8907f863f6561875ee6e8768931a62121a531a1
+  languageName: node
+  linkType: hard
+
 "mute-stream@npm:^1.0.0":
   version: 1.0.0
   resolution: "mute-stream@npm:1.0.0"
@@ -16740,6 +18700,61 @@ __metadata:
   languageName: node
   linkType: hard
 
+"next@npm:^13.4.19":
+  version: 13.5.6
+  resolution: "next@npm:13.5.6"
+  dependencies:
+    "@next/env": 13.5.6
+    "@next/swc-darwin-arm64": 13.5.6
+    "@next/swc-darwin-x64": 13.5.6
+    "@next/swc-linux-arm64-gnu": 13.5.6
+    "@next/swc-linux-arm64-musl": 13.5.6
+    "@next/swc-linux-x64-gnu": 13.5.6
+    "@next/swc-linux-x64-musl": 13.5.6
+    "@next/swc-win32-arm64-msvc": 13.5.6
+    "@next/swc-win32-ia32-msvc": 13.5.6
+    "@next/swc-win32-x64-msvc": 13.5.6
+    "@swc/helpers": 0.5.2
+    busboy: 1.6.0
+    caniuse-lite: ^1.0.30001406
+    postcss: 8.4.31
+    styled-jsx: 5.1.1
+    watchpack: 2.4.0
+  peerDependencies:
+    "@opentelemetry/api": ^1.1.0
+    react: ^18.2.0
+    react-dom: ^18.2.0
+    sass: ^1.3.0
+  dependenciesMeta:
+    "@next/swc-darwin-arm64":
+      optional: true
+    "@next/swc-darwin-x64":
+      optional: true
+    "@next/swc-linux-arm64-gnu":
+      optional: true
+    "@next/swc-linux-arm64-musl":
+      optional: true
+    "@next/swc-linux-x64-gnu":
+      optional: true
+    "@next/swc-linux-x64-musl":
+      optional: true
+    "@next/swc-win32-arm64-msvc":
+      optional: true
+    "@next/swc-win32-ia32-msvc":
+      optional: true
+    "@next/swc-win32-x64-msvc":
+      optional: true
+  peerDependenciesMeta:
+    "@opentelemetry/api":
+      optional: true
+    sass:
+      optional: true
+  bin:
+    next: dist/bin/next
+  checksum: c869b0014ae921ada3bf22301985027ec320aebcd6aa9c16e8afbded68bb8def5874cca034c680e8c351a79578f1e514971d02777f6f0a5a1d7290f25970ac0d
+  languageName: node
+  linkType: hard
+
 "nice-try@npm:^1.0.4":
   version: 1.0.5
   resolution: "nice-try@npm:1.0.5"
@@ -16865,6 +18880,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-releases@npm:^2.0.14":
+  version: 2.0.14
+  resolution: "node-releases@npm:2.0.14"
+  checksum: 59443a2f77acac854c42d321bf1b43dea0aef55cd544c6a686e9816a697300458d4e82239e2d794ea05f7bbbc8a94500332e2d3ac3f11f52e4b16cbe638b3c41
+  languageName: node
+  linkType: hard
+
 "node-source-walk@npm:^4.0.0, node-source-walk@npm:^4.2.0, node-source-walk@npm:^4.2.2":
   version: 4.3.0
   resolution: "node-source-walk@npm:4.3.0"
@@ -16951,6 +18973,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"normalize-path@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "normalize-path@npm:2.1.1"
+  dependencies:
+    remove-trailing-separator: ^1.0.1
+  checksum: 7e9cbdcf7f5b8da7aa191fbfe33daf290cdcd8c038f422faf1b8a83c972bf7a6d94c5be34c4326cb00fb63bc0fd97d9fbcfaf2e5d6142332c2cd36d2e1b86cea
+  languageName: node
+  linkType: hard
+
 "normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
   version: 3.0.0
   resolution: "normalize-path@npm:3.0.0"
@@ -17146,21 +19177,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"octokit@npm:^3.1.2":
-  version: 3.1.2
-  resolution: "octokit@npm:3.1.2"
-  dependencies:
-    "@octokit/app": ^14.0.2
-    "@octokit/core": ^5.0.0
-    "@octokit/oauth-app": ^6.0.0
-    "@octokit/plugin-paginate-graphql": ^4.0.0
-    "@octokit/plugin-paginate-rest": ^9.0.0
-    "@octokit/plugin-rest-endpoint-methods": ^10.0.0
-    "@octokit/plugin-retry": ^6.0.0
-    "@octokit/plugin-throttling": ^8.0.0
-    "@octokit/request-error": ^5.0.0
-    "@octokit/types": ^12.0.0
-  checksum: 8ef0d57a0e0129da5a3fddf2b2150c3214fd19b5cbefdd2fe7fa4604f45aae90587080ce1498fadef6714d385835ee00b7c86c526f31d67c93fcd545e041568c
+"octokit@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "octokit@npm:4.0.2"
+  dependencies:
+    "@octokit/app": ^15.0.0
+    "@octokit/core": ^6.0.0
+    "@octokit/oauth-app": ^7.0.0
+    "@octokit/plugin-paginate-graphql": ^5.0.0
+    "@octokit/plugin-paginate-rest": ^11.0.0
+    "@octokit/plugin-rest-endpoint-methods": ^13.0.0
+    "@octokit/plugin-retry": ^7.0.0
+    "@octokit/plugin-throttling": ^9.0.0
+    "@octokit/request-error": ^6.0.0
+    "@octokit/types": ^13.0.0
+  checksum: 6e3d6ccd67738d05b8b1a101798b9fcd5cb57560ba761761918d9d7e93e551b846b51f31125ee642fca443e37babd81b42c09a69fed79e33de0f97d8b694a8f7
   languageName: node
   linkType: hard
 
@@ -17377,6 +19408,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-limit@npm:3.1.0, p-limit@npm:^3.0.2, p-limit@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "p-limit@npm:3.1.0"
+  dependencies:
+    yocto-queue: ^0.1.0
+  checksum: 7c3690c4dbf62ef625671e20b7bdf1cbc9534e83352a2780f165b0d3ceba21907e77ad63401708145ca4e25bfc51636588d89a8c0aeb715e6c37d1c066430360
+  languageName: node
+  linkType: hard
+
 "p-limit@npm:^2.0.0, p-limit@npm:^2.2.0, p-limit@npm:^2.2.1":
   version: 2.3.0
   resolution: "p-limit@npm:2.3.0"
@@ -17386,15 +19426,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-limit@npm:^3.0.2, p-limit@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "p-limit@npm:3.1.0"
-  dependencies:
-    yocto-queue: ^0.1.0
-  checksum: 7c3690c4dbf62ef625671e20b7bdf1cbc9534e83352a2780f165b0d3ceba21907e77ad63401708145ca4e25bfc51636588d89a8c0aeb715e6c37d1c066430360
-  languageName: node
-  linkType: hard
-
 "p-locate@npm:^3.0.0":
   version: 3.0.0
   resolution: "p-locate@npm:3.0.0"
@@ -17499,6 +19530,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-filepath@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "parse-filepath@npm:1.0.2"
+  dependencies:
+    is-absolute: ^1.0.0
+    map-cache: ^0.2.0
+    path-root: ^0.1.1
+  checksum: 6794c3f38d3921f0f7cc63fb1fb0c4d04cd463356ad389c8ce6726d3c50793b9005971f4138975a6d7025526058d5e65e9bfe634d0765e84c4e2571152665a69
+  languageName: node
+  linkType: hard
+
 "parse-github-url@npm:^1.0.2":
   version: 1.0.2
   resolution: "parse-github-url@npm:1.0.2"
@@ -17589,6 +19631,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-case@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "path-case@npm:3.0.4"
+  dependencies:
+    dot-case: ^3.0.4
+    tslib: ^2.0.3
+  checksum: 61de0526222629f65038a66f63330dd22d5b54014ded6636283e1d15364da38b3cf29e4433aa3f9d8b0dba407ae2b059c23b0104a34ee789944b1bc1c5c7e06d
+  languageName: node
+  linkType: hard
+
 "path-exists@npm:^3.0.0":
   version: 3.0.0
   resolution: "path-exists@npm:3.0.0"
@@ -17645,6 +19697,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-root-regex@npm:^0.1.0":
+  version: 0.1.2
+  resolution: "path-root-regex@npm:0.1.2"
+  checksum: dcd75d1f8e93faabe35a58e875b0f636839b3658ff2ad8c289463c40bc1a844debe0dab73c3398ef9dc8f6ec6c319720aff390cf4633763ddcf3cf4b1bbf7e8b
+  languageName: node
+  linkType: hard
+
+"path-root@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "path-root@npm:0.1.1"
+  dependencies:
+    path-root-regex: ^0.1.0
+  checksum: ff88aebfc1c59ace510cc06703d67692a11530989920427625e52b66a303ca9b3d4059b0b7d0b2a73248d1ad29bcb342b8b786ec00592f3101d38a45fd3b2e08
+  languageName: node
+  linkType: hard
+
 "path-scurry@npm:^1.10.1":
   version: 1.10.1
   resolution: "path-scurry@npm:1.10.1"
@@ -18209,7 +20277,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.1.7, postcss@npm:^8.3.5, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:~8.4.21":
+"postcss@npm:8.4.31, postcss@npm:^8.1.7, postcss@npm:^8.3.5, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:~8.4.21":
   version: 8.4.31
   resolution: "postcss@npm:8.4.31"
   dependencies:
@@ -18220,14 +20288,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.32":
-  version: 8.4.32
-  resolution: "postcss@npm:8.4.32"
+"postcss@npm:^8.4.35":
+  version: 8.4.37
+  resolution: "postcss@npm:8.4.37"
   dependencies:
     nanoid: ^3.3.7
     picocolors: ^1.0.0
-    source-map-js: ^1.0.2
-  checksum: 220d9d0bf5d65be7ed31006c523bfb11619461d296245c1231831f90150aeb4a31eab9983ac9c5c89759a3ca8b60b3e0d098574964e1691673c3ce5c494305ae
+    source-map-js: ^1.2.0
+  checksum: c6b513e1021a336207fde4a1d4f32192503328dad59cc26d46aa731840ced4463b1e8b6098877c1cd42bb9d1c5385980832739f9c183dc47602c06325b28ff57
   languageName: node
   linkType: hard
 
@@ -18552,6 +20620,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"punycode@npm:^1.3.2":
+  version: 1.4.1
+  resolution: "punycode@npm:1.4.1"
+  checksum: fa6e698cb53db45e4628559e557ddaf554103d2a96a1d62892c8f4032cd3bc8871796cae9eabc1bc700e2b6677611521ce5bb1d9a27700086039965d0cf34518
+  languageName: node
+  linkType: hard
+
 "punycode@npm:^2.1.0, punycode@npm:^2.1.1":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
@@ -18566,6 +20641,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pvtsutils@npm:^1.3.2, pvtsutils@npm:^1.3.5":
+  version: 1.3.5
+  resolution: "pvtsutils@npm:1.3.5"
+  dependencies:
+    tslib: ^2.6.1
+  checksum: e734516b3cb26086c18bd9c012fefe818928a5073178842ab7e62885a090f1dd7bda9c7bb8cd317167502cb8ec86c0b1b0ccd71dac7ab469382a4518157b0d12
+  languageName: node
+  linkType: hard
+
+"pvutils@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "pvutils@npm:1.1.3"
+  checksum: 2ee26a9e5176c348977d6ec00d8ee80bff62f51743b1c5fe8abeeb4c5d29d9959cdfe0ce146707a9e6801bce88190fed3002d720b072dc87d031c692820b44c9
+  languageName: node
+  linkType: hard
+
 "qrcode-terminal@npm:0.11.0":
   version: 0.11.0
   resolution: "qrcode-terminal@npm:0.11.0"
@@ -18749,7 +20840,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-date-picker@npm:^10.5.0":
+"react-date-picker@npm:^10.5.0, react-date-picker@npm:^10.6.0":
   version: 10.6.0
   resolution: "react-date-picker@npm:10.6.0"
   dependencies:
@@ -18772,7 +20863,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-datetime-picker@npm:^5.6.0":
+"react-datetime-picker@npm:^5.5.1, react-datetime-picker@npm:^5.6.0":
   version: 5.6.0
   resolution: "react-datetime-picker@npm:5.6.0"
   dependencies:
@@ -18797,6 +20888,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-device-detect@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "react-device-detect@npm:2.2.3"
+  dependencies:
+    ua-parser-js: ^1.0.33
+  peerDependencies:
+    react: ">= 0.14.0"
+    react-dom: ">= 0.14.0"
+  checksum: 42d9b3182b9d2495bf0d7914c9f370da51d8bdb853a3eba2acaf433894ae760386a075ba103185be825b33d42f50d85ef462087f261656d433f4c74dab23861f
+  languageName: node
+  linkType: hard
+
 "react-devtools-core@npm:^4.26.1":
   version: 4.28.5
   resolution: "react-devtools-core@npm:4.28.5"
@@ -19026,6 +21129,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-table@npm:^7.8.0":
+  version: 7.8.0
+  resolution: "react-table@npm:7.8.0"
+  peerDependencies:
+    react: ^16.8.3 || ^17.0.0-0 || ^18.0.0
+  checksum: 44ca0fb848c6869cd793cede8dc33072b38ebb8f8d2833565afe7cf3eac5d1fa455ac5fb9d06838b16fab0523d5d03e3e82f7645032f71245096e67b892313b9
+  languageName: node
+  linkType: hard
+
 "react-test-renderer@npm:18.2.0":
   version: 18.2.0
   resolution: "react-test-renderer@npm:18.2.0"
@@ -19331,6 +21443,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rehackt@npm:0.0.6":
+  version: 0.0.6
+  resolution: "rehackt@npm:0.0.6"
+  peerDependencies:
+    "@types/react": "*"
+    react: "*"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    react:
+      optional: true
+  checksum: 25df31d4fc1198b5beba68ec3c960119f120aeba4f7a6f686b087ddbfdd45753ea74b6daf66523c8b6db844429eaed516e0f6f37f657fdcc96334e5ae9efee98
+  languageName: node
+  linkType: hard
+
 "rehype-autolink-headings@npm:^7.0.0":
   version: 7.1.0
   resolution: "rehype-autolink-headings@npm:7.1.0"
@@ -19352,6 +21479,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"relay-runtime@npm:12.0.0":
+  version: 12.0.0
+  resolution: "relay-runtime@npm:12.0.0"
+  dependencies:
+    "@babel/runtime": ^7.0.0
+    fbjs: ^3.0.0
+    invariant: ^2.2.4
+  checksum: 51cdc8a5e04188982452ae4e7c6ac7d6375ee769130d24ce8e8f9cdd45aa7e11ecd68670f56e30dcee1b4974585e88ecce19e69a9868b80cda0db7678c3b8f0a
+  languageName: node
+  linkType: hard
+
+"remedial@npm:^1.0.7":
+  version: 1.0.8
+  resolution: "remedial@npm:1.0.8"
+  checksum: 12df7c55eb92501d7f33cfe5f5ad12be13bb6ac0c53f494aaa9963d5a5155bb8be2143e8d5e17afa1a500ef5dc71d13642920d35350f2a31b65a9778afab6869
+  languageName: node
+  linkType: hard
+
+"remove-trailing-separator@npm:^1.0.1":
+  version: 1.1.0
+  resolution: "remove-trailing-separator@npm:1.1.0"
+  checksum: d3c20b5a2d987db13e1cca9385d56ecfa1641bae143b620835ac02a6b70ab88f68f117a0021838db826c57b31373d609d52e4f31aca75fc490c862732d595419
+  languageName: node
+  linkType: hard
+
 "remove-trailing-slash@npm:^0.1.0":
   version: 0.1.1
   resolution: "remove-trailing-slash@npm:0.1.1"
@@ -19359,6 +21511,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remove-trailing-spaces@npm:^1.0.6":
+  version: 1.0.8
+  resolution: "remove-trailing-spaces@npm:1.0.8"
+  checksum: 81f615c5cd8dd6a5e3017dcc9af598965575d176d42ef99cfd7b894529991f464e629fd68aba089f5c6bebf5bb8070a5eee56f3b621aba55e8ef524d6a4d4f69
+  languageName: node
+  linkType: hard
+
 "renderkid@npm:^3.0.0":
   version: 3.0.0
   resolution: "renderkid@npm:3.0.0"
@@ -19438,6 +21597,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resize-observer-polyfill@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "resize-observer-polyfill@npm:1.5.1"
+  checksum: 57e7f79489867b00ba43c9c051524a5c8f162a61d5547e99333549afc23e15c44fd43f2f318ea0261ea98c0eb3158cca261e6f48d66e1ed1cd1f340a43977094
+  languageName: node
+  linkType: hard
+
 "resolve-alpn@npm:^1.2.0":
   version: 1.2.1
   resolution: "resolve-alpn@npm:1.2.1"
@@ -19461,6 +21627,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve-from@npm:5.0.0, resolve-from@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "resolve-from@npm:5.0.0"
+  checksum: 4ceeb9113e1b1372d0cd969f3468fa042daa1dd9527b1b6bb88acb6ab55d8b9cd65dbf18819f9f9ddf0db804990901dcdaade80a215e7b2c23daae38e64f5bdf
+  languageName: node
+  linkType: hard
+
 "resolve-from@npm:^3.0.0":
   version: 3.0.0
   resolution: "resolve-from@npm:3.0.0"
@@ -19475,13 +21648,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve-from@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "resolve-from@npm:5.0.0"
-  checksum: 4ceeb9113e1b1372d0cd969f3468fa042daa1dd9527b1b6bb88acb6ab55d8b9cd65dbf18819f9f9ddf0db804990901dcdaade80a215e7b2c23daae38e64f5bdf
-  languageName: node
-  linkType: hard
-
 "resolve-pkg-maps@npm:^1.0.0":
   version: 1.0.0
   resolution: "resolve-pkg-maps@npm:1.0.0"
@@ -19623,6 +21789,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rfdc@npm:^1.3.0":
+  version: 1.3.1
+  resolution: "rfdc@npm:1.3.1"
+  checksum: d5d1e930aeac7e0e0a485f97db1356e388bdbeff34906d206fe524dd5ada76e95f186944d2e68307183fdc39a54928d4426bbb6734851692cfe9195efba58b79
+  languageName: node
+  linkType: hard
+
 "rimraf@npm:^2.6.2, rimraf@npm:^2.6.3":
   version: 2.7.1
   resolution: "rimraf@npm:2.7.1"
@@ -19759,6 +21932,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"run-async@npm:^2.4.0":
+  version: 2.4.1
+  resolution: "run-async@npm:2.4.1"
+  checksum: a2c88aa15df176f091a2878eb840e68d0bdee319d8d97bbb89112223259cebecb94bc0defd735662b83c2f7a30bed8cddb7d1674eb48ae7322dc602b22d03797
+  languageName: node
+  linkType: hard
+
 "run-async@npm:^3.0.0":
   version: 3.0.0
   resolution: "run-async@npm:3.0.0"
@@ -19784,6 +21964,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rxjs@npm:^7.5.5":
+  version: 7.8.1
+  resolution: "rxjs@npm:7.8.1"
+  dependencies:
+    tslib: ^2.1.0
+  checksum: de4b53db1063e618ec2eca0f7965d9137cabe98cf6be9272efe6c86b47c17b987383df8574861bcced18ebd590764125a901d5506082be84a8b8e364bf05f119
+  languageName: node
+  linkType: hard
+
 "safe-array-concat@npm:^1.0.1":
   version: 1.0.1
   resolution: "safe-array-concat@npm:1.0.1"
@@ -19905,6 +22094,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scuid@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "scuid@npm:1.1.0"
+  checksum: cd094ac3718b0070a222f9a499b280c698fdea10268cc163fa244421099544c1766dd893fdee0e2a8eba5d53ab9d0bcb11067bedff166665030fa6fda25a096b
+  languageName: node
+  linkType: hard
+
 "secp256k1@npm:^5.0.0":
   version: 5.0.0
   resolution: "secp256k1@npm:5.0.0"
@@ -20034,6 +22230,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sentence-case@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "sentence-case@npm:3.0.4"
+  dependencies:
+    no-case: ^3.0.4
+    tslib: ^2.0.3
+    upper-case-first: ^2.0.2
+  checksum: 3cfe6c0143e649132365695706702d7f729f484fa7b25f43435876efe7af2478243eefb052bacbcce10babf9319fd6b5b6bc59b94c80a1c819bcbb40651465d5
+  languageName: node
+  linkType: hard
+
 "serialize-error@npm:6.0.0":
   version: 6.0.0
   resolution: "serialize-error@npm:6.0.0"
@@ -20234,6 +22441,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"signedsource@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "signedsource@npm:1.0.0"
+  checksum: 64b2c8d7a48de9009cfd3aff62bb7c88abf3b8e0421f17ebb1d7f5ca9cc9c3ad10f5a1e3ae6cd804e4e6121c87b668202ae9057065f058ddfbf34ea65f63945d
+  languageName: node
+  linkType: hard
+
 "simple-git@npm:^3.18.0":
   version: 3.21.0
   resolution: "simple-git@npm:3.21.0"
@@ -20320,6 +22534,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slice-ansi@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "slice-ansi@npm:3.0.0"
+  dependencies:
+    ansi-styles: ^4.0.0
+    astral-regex: ^2.0.0
+    is-fullwidth-code-point: ^3.0.0
+  checksum: 5ec6d022d12e016347e9e3e98a7eb2a592213a43a65f1b61b74d2c78288da0aded781f665807a9f3876b9daa9ad94f64f77d7633a0458876c3a4fdc4eb223f24
+  languageName: node
+  linkType: hard
+
+"slice-ansi@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "slice-ansi@npm:4.0.0"
+  dependencies:
+    ansi-styles: ^4.0.0
+    astral-regex: ^2.0.0
+    is-fullwidth-code-point: ^3.0.0
+  checksum: 4a82d7f085b0e1b070e004941ada3c40d3818563ac44766cca4ceadd2080427d337554f9f99a13aaeb3b4a94d9964d9466c807b3d7b7541d1ec37ee32d308756
+  languageName: node
+  linkType: hard
+
 "slugify@npm:^1.3.4":
   version: 1.6.6
   resolution: "slugify@npm:1.6.6"
@@ -20406,6 +22642,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map-js@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "source-map-js@npm:1.2.0"
+  checksum: 791a43306d9223792e84293b00458bf102a8946e7188f3db0e4e22d8d530b5f80a4ce468eb5ec0bf585443ad55ebbd630bf379c98db0b1f317fd902500217f97
+  languageName: node
+  linkType: hard
+
 "source-map-loader@npm:^3.0.1":
   version: 3.0.2
   resolution: "source-map-loader@npm:3.0.2"
@@ -20556,6 +22799,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sponge-case@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "sponge-case@npm:1.0.1"
+  dependencies:
+    tslib: ^2.0.3
+  checksum: 64f53d930f63c5a9e59d4cae487c1ffa87d25eab682833b01d572cc885e7e3fdbad4f03409a41f03ecb27f1f8959432253eb48332c7007c3388efddb24ba2792
+  languageName: node
+  linkType: hard
+
 "sprintf-js@npm:~1.0.2":
   version: 1.0.3
   resolution: "sprintf-js@npm:1.0.3"
@@ -20691,6 +22943,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"streamsearch@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "streamsearch@npm:1.1.0"
+  checksum: 1cce16cea8405d7a233d32ca5e00a00169cc0e19fbc02aa839959985f267335d435c07f96e5e0edd0eadc6d39c98d5435fb5bbbdefc62c41834eadc5622ad942
+  languageName: node
+  linkType: hard
+
+"string-env-interpolation@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "string-env-interpolation@npm:1.0.1"
+  checksum: d126329587f635bee65300e4451e7352b9b67e03daeb62f006ca84244cac12a1f6e45176b018653ba0c3ec3b5d980f9ca59d2eeed99cf799501cdaa7f871dc6f
+  languageName: node
+  linkType: hard
+
 "string-length@npm:^4.0.1":
   version: 4.0.2
   resolution: "string-length@npm:4.0.2"
@@ -20927,6 +23193,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"styled-jsx@npm:5.1.1":
+  version: 5.1.1
+  resolution: "styled-jsx@npm:5.1.1"
+  dependencies:
+    client-only: 0.0.1
+  peerDependencies:
+    react: ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+  peerDependenciesMeta:
+    "@babel/core":
+      optional: true
+    babel-plugin-macros:
+      optional: true
+  checksum: 523a33b38603492547e861b98e29c873939b04e15fbe5ef16132c6f1e15958126647983c7d4675325038b428a5e91183d996e90141b18bdd1bbadf6e2c45b2fa
+  languageName: node
+  linkType: hard
+
 "stylehacks@npm:^5.1.1":
   version: 5.1.1
   resolution: "stylehacks@npm:5.1.1"
@@ -21100,6 +23382,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"swap-case@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "swap-case@npm:2.0.2"
+  dependencies:
+    tslib: ^2.0.3
+  checksum: 6e21c9e1b3cd5735eb2af679a99ec3efc78a14e3d4d5e3fd594e254b91cfd37185b3d1c6e41b22f53a2cdf5d1b963ce30c0fe8b78337e3fd43d0137084670a5f
+  languageName: node
+  linkType: hard
+
 "symbol-observable@npm:^4.0.0":
   version: 4.0.0
   resolution: "symbol-observable@npm:4.0.0"
@@ -21315,7 +23606,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"through@npm:2":
+"through@npm:2, through@npm:^2.3.6, through@npm:^2.3.8":
   version: 2.3.8
   resolution: "through@npm:2.3.8"
   checksum: a38c3e059853c494af95d50c072b83f8b676a9ba2818dcc5b108ef252230735c54e0185437618596c790bbba8fcdaef5b290405981ffa09dce67b1f1bf190cbd
@@ -21336,6 +23627,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"title-case@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "title-case@npm:3.0.3"
+  dependencies:
+    tslib: ^2.0.3
+  checksum: e8b7ea006b53cf3208d278455d9f1e22c409459d7f9878da324fa3b18cc0aef8560924c19c744e870394a5d9cddfdbe029ebae9875909ee7f4fc562e7cbfc53e
+  languageName: node
+  linkType: hard
+
 "titleize@npm:^3.0.0":
   version: 3.0.0
   resolution: "titleize@npm:3.0.0"
@@ -21476,6 +23776,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-custom-error@npm:^3.2.1":
+  version: 3.3.1
+  resolution: "ts-custom-error@npm:3.3.1"
+  checksum: 50a1e825fced68d70049bd8d282379a635e43aa023a370fa8e736b12a6edba7f18a2d731fa194ac35303a8b625be56e121bdb31d8a0318250d1a8b277059fce3
+  languageName: node
+  linkType: hard
+
 "ts-graphviz@npm:^1.5.0":
   version: 1.8.1
   resolution: "ts-graphviz@npm:1.8.1"
@@ -21565,6 +23872,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-log@npm:^2.2.3":
+  version: 2.2.5
+  resolution: "ts-log@npm:2.2.5"
+  checksum: 28f78ab15b8555d56c089dbc243327d8ce4331219956242a29fc4cb3bad6bb0cb8234dd17a292381a1b1dba99a7e4849a2181b2e1a303e8247e9f4ca4e284f2d
+  languageName: node
+  linkType: hard
+
 "ts-morph@npm:^13.0.1":
   version: 13.0.3
   resolution: "ts-morph@npm:13.0.3"
@@ -21661,13 +23975,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.0, tslib@npm:^2.6.1, tslib@npm:^2.6.2, tslib@npm:~2.6.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
   languageName: node
   linkType: hard
 
+"tslib@npm:~2.4.0":
+  version: 2.4.1
+  resolution: "tslib@npm:2.4.1"
+  checksum: 19480d6e0313292bd6505d4efe096a6b31c70e21cf08b5febf4da62e95c265c8f571f7b36fcc3d1a17e068032f59c269fab3459d6cd3ed6949eafecf64315fca
+  languageName: node
+  linkType: hard
+
 "tsup@npm:^7.2.0":
   version: 7.2.0
   resolution: "tsup@npm:7.2.0"
@@ -21732,58 +24053,58 @@ __metadata:
   languageName: node
   linkType: hard
 
-"turbo-darwin-64@npm:1.10.16":
-  version: 1.10.16
-  resolution: "turbo-darwin-64@npm:1.10.16"
+"turbo-darwin-64@npm:1.13.3":
+  version: 1.13.3
+  resolution: "turbo-darwin-64@npm:1.13.3"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"turbo-darwin-arm64@npm:1.10.16":
-  version: 1.10.16
-  resolution: "turbo-darwin-arm64@npm:1.10.16"
+"turbo-darwin-arm64@npm:1.13.3":
+  version: 1.13.3
+  resolution: "turbo-darwin-arm64@npm:1.13.3"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"turbo-linux-64@npm:1.10.16":
-  version: 1.10.16
-  resolution: "turbo-linux-64@npm:1.10.16"
+"turbo-linux-64@npm:1.13.3":
+  version: 1.13.3
+  resolution: "turbo-linux-64@npm:1.13.3"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"turbo-linux-arm64@npm:1.10.16":
-  version: 1.10.16
-  resolution: "turbo-linux-arm64@npm:1.10.16"
+"turbo-linux-arm64@npm:1.13.3":
+  version: 1.13.3
+  resolution: "turbo-linux-arm64@npm:1.13.3"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"turbo-windows-64@npm:1.10.16":
-  version: 1.10.16
-  resolution: "turbo-windows-64@npm:1.10.16"
+"turbo-windows-64@npm:1.13.3":
+  version: 1.13.3
+  resolution: "turbo-windows-64@npm:1.13.3"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"turbo-windows-arm64@npm:1.10.16":
-  version: 1.10.16
-  resolution: "turbo-windows-arm64@npm:1.10.16"
+"turbo-windows-arm64@npm:1.13.3":
+  version: 1.13.3
+  resolution: "turbo-windows-arm64@npm:1.13.3"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"turbo@npm:1.10.16":
-  version: 1.10.16
-  resolution: "turbo@npm:1.10.16"
+"turbo@npm:^1.13.3":
+  version: 1.13.3
+  resolution: "turbo@npm:1.13.3"
   dependencies:
-    turbo-darwin-64: 1.10.16
-    turbo-darwin-arm64: 1.10.16
-    turbo-linux-64: 1.10.16
-    turbo-linux-arm64: 1.10.16
-    turbo-windows-64: 1.10.16
-    turbo-windows-arm64: 1.10.16
+    turbo-darwin-64: 1.13.3
+    turbo-darwin-arm64: 1.13.3
+    turbo-linux-64: 1.13.3
+    turbo-linux-arm64: 1.13.3
+    turbo-windows-64: 1.13.3
+    turbo-windows-arm64: 1.13.3
   dependenciesMeta:
     turbo-darwin-64:
       optional: true
@@ -21799,7 +24120,7 @@ __metadata:
       optional: true
   bin:
     turbo: bin/turbo
-  checksum: 69d1892593449b264e0bd48b851317a743016ab62cf470e7293b2cc3781240e863c48232c89f65a5a4ce97eb791ca550b201593449350da073db07703a19cfa5
+  checksum: d00655987e5d2e714d5e5a8d5950624508fb69e8671ca17e8ac7b9316ce01e518308ec4eaa472306950782704caa2eaa3c4fb328192818fcd9fcc05423bc29e7
   languageName: node
   linkType: hard
 
@@ -22022,6 +24343,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ua-parser-js@npm:^1.0.33":
+  version: 1.0.38
+  resolution: "ua-parser-js@npm:1.0.38"
+  checksum: d0772b22b027338d806ab17d1ac2896ee7485bdf9217c526028159f3cd6bb10272bb18f6196d2f94dde83e3b36dc9d2533daf08a414764f6f4f1844842383838
+  languageName: node
+  linkType: hard
+
 "ua-parser-js@npm:^1.0.35":
   version: 1.0.37
   resolution: "ua-parser-js@npm:1.0.37"
@@ -22053,6 +24381,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unc-path-regex@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "unc-path-regex@npm:0.1.2"
+  checksum: a05fa2006bf4606051c10fc7968f08ce7b28fa646befafa282813aeb1ac1a56f65cb1b577ca7851af2726198d59475bb49b11776036257b843eaacee2860a4ec
+  languageName: node
+  linkType: hard
+
 "undefsafe@npm:^2.0.5":
   version: 2.0.5
   resolution: "undefsafe@npm:2.0.5"
@@ -22240,20 +24575,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"universal-github-app-jwt@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "universal-github-app-jwt@npm:1.1.1"
-  dependencies:
-    "@types/jsonwebtoken": ^9.0.0
-    jsonwebtoken: ^9.0.0
-  checksum: 31d30150b9eafa9fa8bf57bd6f97d7d91d4509ad24fa673a6e29ac2295b8f1fc293a70cb44fa807af7cfd787db1cf6edd3876fc0cae31230c5292b76677159fc
+"universal-github-app-jwt@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "universal-github-app-jwt@npm:2.2.0"
+  checksum: 09f8e9710453749bd669fb6511157f03683674066f04696b10d42c18d87cb40d77a5b7504b5bd6f4e329229fff8715e01958217560accd941381c6b4cb7a46fe
   languageName: node
   linkType: hard
 
-"universal-user-agent@npm:^6.0.0":
-  version: 6.0.1
-  resolution: "universal-user-agent@npm:6.0.1"
-  checksum: fdc8e1ae48a05decfc7ded09b62071f571c7fe0bd793d700704c80cea316101d4eac15cc27ed2bb64f4ce166d2684777c3198b9ab16034f547abea0d3aa1c93c
+"universal-user-agent@npm:^7.0.0, universal-user-agent@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "universal-user-agent@npm:7.0.2"
+  checksum: 3f02cb6de0bb9fbaf379566bd0320d8e46af6e4358a2e88fce7e70687ed7b48b37f479d728bb22f4204a518e363f3038ac4841c033af1ee2253f6428a6c67e53
   languageName: node
   linkType: hard
 
@@ -22285,6 +24617,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unixify@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "unixify@npm:1.0.0"
+  dependencies:
+    normalize-path: ^2.1.1
+  checksum: 3be30e48579fc6c7390bd59b4ab9e745fede0c164dfb7351cf710bd1dbef8484b1441186205af6bcb13b731c0c88caf9b33459f7bf8c89e79c046e656ae433f0
+  languageName: node
+  linkType: hard
+
 "unpipe@npm:1.0.0, unpipe@npm:~1.0.0":
   version: 1.0.0
   resolution: "unpipe@npm:1.0.0"
@@ -22330,6 +24671,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"upper-case-first@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "upper-case-first@npm:2.0.2"
+  dependencies:
+    tslib: ^2.0.3
+  checksum: 4487db4701effe3b54ced4b3e4aa4d9ab06c548f97244d04aafb642eedf96a76d5a03cf5f38f10f415531d5792d1ac6e1b50f2a76984dc6964ad530f12876409
+  languageName: node
+  linkType: hard
+
+"upper-case@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "upper-case@npm:2.0.2"
+  dependencies:
+    tslib: ^2.0.3
+  checksum: 508723a2b03ab90cf1d6b7e0397513980fab821cbe79c87341d0e96cedefadf0d85f9d71eac24ab23f526a041d585a575cfca120a9f920e44eb4f8a7cf89121c
+  languageName: node
+  linkType: hard
+
 "uri-js@npm:^4.2.2":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"
@@ -22356,6 +24715,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"urlpattern-polyfill@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "urlpattern-polyfill@npm:10.0.0"
+  checksum: 61d890f151ea4ecf34a3dcab32c65ad1f3cda857c9d154af198260c6e5b2ad96d024593409baaa6d4428dd1ab206c14799bf37fe011117ac93a6a44913ac5aa4
+  languageName: node
+  linkType: hard
+
+"urlpattern-polyfill@npm:^8.0.0":
+  version: 8.0.2
+  resolution: "urlpattern-polyfill@npm:8.0.2"
+  checksum: d2cc0905a613c77e330c426e8697ee522dd9640eda79ac51160a0f6350e103f09b8c327623880989f8ba7325e8d95267b745aa280fdcc2aead80b023e16bd09d
+  languageName: node
+  linkType: hard
+
 "use-isomorphic-layout-effect@npm:^1.1.2":
   version: 1.1.2
   resolution: "use-isomorphic-layout-effect@npm:1.1.2"
@@ -22478,6 +24851,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"value-or-promise@npm:^1.0.11, value-or-promise@npm:^1.0.12":
+  version: 1.0.12
+  resolution: "value-or-promise@npm:1.0.12"
+  checksum: f53a66c75b7447c90bbaf946a757ca09c094629cb80ba742f59c980ec3a69be0a385a0e75505dedb4e757862f1a994ca4beaf083a831f24d3ffb3d4bb18cd1e1
+  languageName: node
+  linkType: hard
+
 "vary@npm:^1, vary@npm:~1.1.2":
   version: 1.1.2
   resolution: "vary@npm:1.1.2"
@@ -22519,13 +24899,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^5.0.5":
-  version: 5.0.5
-  resolution: "vite@npm:5.0.5"
+"vite@npm:^5.1.6":
+  version: 5.1.6
+  resolution: "vite@npm:5.1.6"
   dependencies:
     esbuild: ^0.19.3
     fsevents: ~2.3.3
-    postcss: ^8.4.32
+    postcss: ^8.4.35
     rollup: ^4.2.0
   peerDependencies:
     "@types/node": ^18.0.0 || >=20.0.0
@@ -22555,7 +24935,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 8df70302934de39ad6fda4f28246e07850f849c2bd197b7af93615f5f39955be460dd19940a46ec5bf2adf81bc32b60985eb5990142212754c733eba4fe3bfa3
+  checksum: 21863ca12303ea6305fe9230a55e7cb30b4cac05dd2a2596889e079163ccc81bcb465ff6dd165001042f47e999192b9c579329484211e000afe9b47068c7fab0
   languageName: node
   linkType: hard
 
@@ -22621,7 +25001,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"watchpack@npm:^2.4.0":
+"watchpack@npm:2.4.0, watchpack@npm:^2.4.0":
   version: 2.4.0
   resolution: "watchpack@npm:2.4.0"
   dependencies:
@@ -22649,6 +25029,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web-streams-polyfill@npm:^3.2.1":
+  version: 3.3.3
+  resolution: "web-streams-polyfill@npm:3.3.3"
+  checksum: 21ab5ea08a730a2ef8023736afe16713b4f2023ec1c7085c16c8e293ee17ed085dff63a0ad8722da30c99c4ccbd4ccd1b2e79c861829f7ef2963d7de7004c2cb
+  languageName: node
+  linkType: hard
+
 "web-vitals@npm:^3.3.0":
   version: 3.5.0
   resolution: "web-vitals@npm:3.5.0"
@@ -22656,6 +25043,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webcrypto-core@npm:^1.8.0":
+  version: 1.8.0
+  resolution: "webcrypto-core@npm:1.8.0"
+  dependencies:
+    "@peculiar/asn1-schema": ^2.3.8
+    "@peculiar/json-schema": ^1.1.12
+    asn1js: ^3.0.1
+    pvtsutils: ^1.3.5
+    tslib: ^2.6.2
+  checksum: 4f128f5283b258eda34844ee804b7d4f102b151a7cb3ae5e722309ea7d37db704184c726afb67bf53cc9eb41279379b24626270b6f4ff08ec5be6b420ff70f18
+  languageName: node
+  linkType: hard
+
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"
@@ -23136,6 +25536,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ws@npm:^8.12.0, ws@npm:^8.15.0":
+  version: 8.17.0
+  resolution: "ws@npm:8.17.0"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ">=5.0.2"
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 147ef9eab0251364e1d2c55338ad0efb15e6913923ccbfdf20f7a8a6cb8f88432bcd7f4d8f66977135bfad35575644f9983201c1a361019594a4e53977bf6d4e
+  languageName: node
+  linkType: hard
+
 "xcode@npm:^3.0.0, xcode@npm:^3.0.1":
   version: 3.0.1
   resolution: "xcode@npm:3.0.1"
@@ -23254,6 +25669,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml-ast-parser@npm:^0.0.43":
+  version: 0.0.43
+  resolution: "yaml-ast-parser@npm:0.0.43"
+  checksum: fb5df4c067b6ccbd00953a46faf6ff27f0e290d623c712dc41f330251118f110e22cfd184bbff498bd969cbcda3cd27e0f9d0adb9e6d90eb60ccafc0d8e28077
+  languageName: node
+  linkType: hard
+
 "yaml@npm:^1.10.0, yaml@npm:^1.10.2":
   version: 1.10.2
   resolution: "yaml@npm:1.10.2"
@@ -23261,6 +25683,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^2.3.1":
+  version: 2.4.3
+  resolution: "yaml@npm:2.4.3"
+  bin:
+    yaml: bin.mjs
+  checksum: cf466e40dcd39d816eb8a8fcbb069897a1ff4bff46a4bf7bb4b7940be3dfcc820901720e4ead71eb7db00229a554664161dbe4bbeb87b6ad0c1c78c12897955d
+  languageName: node
+  linkType: hard
+
 "yaml@npm:^2.3.4":
   version: 2.3.4
   resolution: "yaml@npm:2.3.4"
@@ -23292,7 +25723,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:^15.1.0":
+"yargs@npm:^15.1.0, yargs@npm:^15.3.1":
   version: 15.4.1
   resolution: "yargs@npm:15.4.1"
   dependencies:
@@ -23326,7 +25757,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:^17.3.1, yargs@npm:^17.5.1, yargs@npm:^17.7.1":
+"yargs@npm:^17.0.0, yargs@npm:^17.3.1, yargs@npm:^17.5.1, yargs@npm:^17.7.1":
   version: 17.7.2
   resolution: "yargs@npm:17.7.2"
   dependencies: