diff --git a/.claude/skills/cds-migrator-transform/SKILL.md b/.claude/skills/cds-migrator-transform/SKILL.md
new file mode 100644
index 0000000000..210a04c177
--- /dev/null
+++ b/.claude/skills/cds-migrator-transform/SKILL.md
@@ -0,0 +1,161 @@
+---
+name: cds-migrator-transform
+description: |
+  Use when a CDS change in **cds-web**, **cds-common**, **cds-mobile**, **web-visualization**, or
+  **mobile-visualization** needs a **jscodeshift** migration in `packages/migrator` to update callers or
+  mitigate breaking API or import moves (add or change a transform, tests, or preset entry).
+allowed-tools: Read, Grep, Glob, StrReplace, Bash(yarn nx run:*), call_mcp_tool
+argument-hint: '<symbol or API change> — <target behavior> — [preset or standalone] — [web|mobile|both] — [optional: Sourcegraph scope / repos / queries the user supplies]'
+---
+
+# CDS migrator transform (jscodeshift)
+
+Adds or updates a **jscodeshift** transform under `packages/migrator/src/transforms/`.
+
+**Where to put files** is **not** always a “version” folder. Choose a subdirectory (or root) that fits the work:
+
+- **Major / preset migrations** often use a version-style folder (`v9/`, `v10/`, …) aligned with a preset such as `v8-to-v9`.
+- **Other codemods** (rename, internal API move, one-off cleanup) can live under any clear grouping the team agrees on (`v9/` still, a feature folder, or directly under `transforms/`).
+
+Follow the steps in order unless the user already locked scope.
+
+## Prerequisites
+
+- **Nx + yarn**: run migrator commands as `yarn nx run migrator:<target>` (see repo `AGENTS.md`).
+- **Sourcegraph MCP (strongly recommended)**: Before calling Sourcegraph tools, read the tool schema under `mcps/user-sourcegraph/tools/` (e.g. `sourcegraph_search.json`, `sourcegraph_fetch_file.json`). If Sourcegraph is not configured, tell the user to add the **Sourcegraph** MCP server in Cursor MCP settings and authenticate if required, then continue with workspace `grep` or whatever source the user provides. **Do not invent search queries or repo filters in this skill**—use the symbols, repositories, queries, or links the **user** gives you; if they omitted search context, ask what to search before assuming scope.
+
+---
+
+## 1 — Define the migration
+
+Capture explicitly:
+
+1. **Symbol(s)** to migrate (export name, import path, prop name, type name, etc.).
+2. **Desired outcome**: rename, change import path/module, replace expression, map enum/string values, add local type alias, etc.
+3. **Preset (if any) and on-disk location**: whether this ships in a preset (`packages/migrator/src/presets/<preset>/manifest.json`) or runs **only via `-t <name>`** without a preset entry. Pick the directory under `transforms/` for the new files (versioned `v9/` / `v10/`, or another name, or `transforms/` root). **Align the manifest `file` field with that path** when you add an entry (see step 7).
+
+If anything is ambiguous, ask the user before coding.
+
+---
+
+## 2 — Platform scope: one transform or two?
+
+1. **Web-only** (e.g. CSS, DOM, `@coinbase/cds-web`): single transform, typically under `transforms/<subdir>/<name>-web.ts` or a neutral name if only web is affected.
+2. **Mobile-only** (e.g. React Native, `@coinbase/cds-mobile`): single transform for mobile.
+3. **Both** with **different** replacement rules (e.g. `DimensionValue` → web local alias vs RN import): **two** transforms (`…-web.ts`, `…-mobile.ts`).
+4. **Both** with **identical** AST changes: one transform is enough.
+
+Document in the transform file header **what** is migrated and **what is not** (re-exports, `require`, dynamic import, etc.).
+
+---
+
+## 3 — Research usage (Sourcegraph + repo)
+
+1. **Inputs from the user**: They should supply what to look for—symbol names, old/new APIs, repos or orgs to include, example file paths, or concrete Sourcegraph queries. **Follow that source of truth**; do not rely on fixed query templates in this skill.
+2. **Sourcegraph MCP**: Run searches and fetches using the user’s queries and scope. Read MCP tool schemas first. Use `sourcegraph_fetch_file` when line previews are not enough.
+3. **This monorepo**: Supplement with `grep` / `Glob` under `packages/` when the migration touches CDS itself or when the user asks for in-repo usage.
+
+Record a short list of **patterns you actually saw** in the results (import style, re-exports, edge cases)—derived from discovery, not from a checklist in this doc.
+
+**OSS hygiene**: Research may reference internal repos or paths. Anything **committed** to this repo (fixtures, test comments, JSDoc) must stay **generic**: neutral component names, no internal hostnames or file paths, no product codenames. Describe fixtures as “representative pattern” or “composite example” only—see §6.
+
+---
+
+## 4 — Case matrix and user confirmation
+
+From research, build a table:
+
+| Case | Example | Automate in codemod? | If not: strategy               |
+| ---- | ------- | -------------------- | ------------------------------ |
+| …    | …       | Yes / No             | TODO comment / skip / doc only |
+
+**Stop and confirm with the user** which rows to automate vs leave manual/TODO-only before implementing non-trivial logic. Call out gaps that **their** search surfaced but the AST transform will not handle (re-exports, dynamic imports, etc., as applicable).
+
+---
+
+## 5 — Implement transforms
+
+**Location**: `packages/migrator/src/transforms/<subdir>/<name>.ts`, or `transforms/<name>.ts` at the transforms root. The manifest `file` value (when used) must be the path **relative to `transforms/`** without extension, e.g. `v9/my-transform`, `v10/my-transform`, or `my-oneoff/my-transform`.
+
+**Patterns**:
+
+- Default export: `export default function transformer(file, api, options)` (required by jscodeshift; `no-restricted-exports` is off for `packages/migrator/src/transforms/**/*.ts` in root `eslint.config.mjs`).
+- Import **`transformLogger`**, **`addTodoComment`**, **`hasMigrationTodo`** from `transform-utils`. Typical depths: **`../../utils/transform-utils`** from `transforms/<subdir>/<name>.ts`; **`../utils/transform-utils`** from `transforms/<name>.ts`. If you nest deeper under `transforms/`, add one `../` per extra level.
+- **Package scope from jscodeshift `options`**: When matching or rewriting **`@<scope>/cds-…`** import paths, use **`getPackageScopeFromOptions(options)`** from **`../../utils/package-scope`** (same depth pattern as `transform-utils`). The cds-migrator CLI forwards **`--packageScope`** / **`-ps`** into `options.packageScope` (`coinbase` or `@coinbase` both normalize to `@coinbase`). **If set**, only rewrite modules under that scope; **if omitted**, match any scope (e.g. regex like `@…/cds-common/…`). State this in the transform’s file header so consumers know they can narrow runs. Reference: `packages/migrator/src/transforms/v9/migrate-use-merge-refs.ts` and `packages/migrator/src/utils/package-scope.ts`.
+- **Import mappings from jscodeshift `options`**: When a transform matches imports by their source path, **apply import mappings before running the regex** so that consumers who proxy CDS through a wrapper package (e.g. `@acme/shared/cds → @coinbase/cds-web`) are also covered. Use **`getImportMappingsFromOptions(options)`** and **`applyImportMappings(src, rewrites)`** from **`../../utils/import-mapping`** (same depth pattern as `transform-utils`). The CLI passes mappings via **`--import-mapping '<from>=<to>'`** (repeatable flag) or via a **`cds-migrator.config.json`** file at the repo root / target path (`"importMappings": [{ "from": "...", "to": "..." }]`); CLI values win on conflicts. Apply the rewrite only for **matching**—never mutate the actual `source.value` in the AST unless the transform is explicitly rewriting import paths. Reference: `packages/migrator/src/transforms/v9/button-variant-values.ts` and `packages/migrator/src/utils/import-mapping.ts`.
+- Prefer **constants** and small helpers in the transform file. Use **`packages/migrator/src/utils/`** for shared plumbing (logging, package scope, import mappings, import helpers); keep **migration-specific** rules and rewrites in the transform itself rather than in extra modules that only exist to share logic between codemods.
+- **Idempotency**: second run should no-op when migration is complete.
+- **TODO path**: for dynamic or ambiguous AST, insert a standard CDS migration TODO via `addTodoComment` and log with `transformLogger.warn`.
+
+Reference examples in-repo: `transforms/v9/` (`migrate-use-merge-refs.ts`, `button-variant-values.ts`, `migrate-layout-types-*.ts`).
+
+---
+
+## 6 — Tests and fixtures
+
+**Goal**: exhaustive **behavior** coverage with **minimal** on-disk goldens. Follow what `transforms/v9/__tests__/` does today.
+
+### Inline-first (default)
+
+1. **Test file**: `packages/migrator/src/transforms/<subdir>/__tests__/<name>.test.ts`.
+2. **Most cases** live **inline** as string sources. Prefer **`runInlineTest(transform, options, { path: '…', source: \`…\` }, expectedString, tsxTestOptions)`** from **`jscodeshift/src/testUtils`** for the full transformed output (or **`''`** when the codemod should no-op). Avoid **`applyTransform`** + fragment `expect`s unless there is a rare reason not to pin an exact golden.
+3. **Imports**: **`tsxTestOptions`** from **`../../../test-utils/codemodTestUtils`** (path depth matches one `__tests__/` folder under `transforms/<subdir>/`). That module currently exports only **`tsxTestOptions`** (`{ parser: 'tsx' }`).
+4. Mock **`console.log` / `console.warn`** when transforms log during tests (see existing v9 tests).
+
+Cover: patterns from the user’s research, **idempotency**, **no-op** when nothing migrates, **scope-aware** behavior (`packageScope` / `-ps`) via `runInlineTest(transform, { packageScope: '@coinbase' }, …)`.
+
+### Paired file fixtures (sparingly)
+
+Use **at most one or two** paired **`foo.input.tsx` / `foo.output.tsx`** per transform suite for **larger composite** examples (multi-import layouts, full component excerpts). Everything else stays inline.
+
+1. **Directory**: `packages/migrator/src/transforms/<subdir>/__testfixtures__/<suite-name>/` (e.g. `<suite-name>` matches the transform id: `button-variant-values`, `migrate-use-merge-refs`).
+2. **Run paired tests** with **`runTest(__dirname, '<transform-name>', {}, '<suite-name>/<base>', tsxTestOptions)`** — the prefix is **`suite-folder/base`** without extension.
+3. **List E2E cases explicitly** in the test file, e.g. `const E2E_PAIRED_PREFIXES = ['button-variant-values/e2e-survey-confirmation-panel', …] as const` and **`it.each(E2E_PAIRED_PREFIXES)('%s', (prefix) => { runTest(…); })`**. Do not assume a filesystem discovery helper exists.
+
+### OSS-safe comments
+
+- Fixture files and test JSDoc must **not** cite internal hosts, confidential repos, real consumer file paths, or product-specific component names used in research.
+- Prefer short comments like **“Representative pattern: …”** or **“Composite … props”** and **fictional** export names (`SurveyConfirmationPanel`, `ChatToolbarActions`, not internal codenames).
+- Sourcegraph remains valuable **during development**; keep findings out of committed strings unless they are already public (e.g. this monorepo).
+
+### Prettier
+
+**`__testfixtures__` is in `.prettierignore`**—golden outputs must match the codemod’s **`toSource()`** exactly.
+
+**Run until green**:
+
+```bash
+yarn nx run migrator:test --testPathPattern='<your-test-pattern>'
+yarn nx run migrator:typecheck
+yarn nx format:write --projects=migrator
+# or format only non-fixture sources, e.g.:
+# yarn nx format:write --files=<changed files excluding __testfixtures__>
+yarn nx run migrator:lint
+```
+
+Reference tests: `transforms/v9/__tests__/button-variant-values.test.ts`, `migrate-use-merge-refs.test.ts`, `migrate-layout-types-web.test.ts`, `migrate-layout-types-mobile.test.ts`.
+
+---
+
+## 7 — Preset manifest
+
+**Only if** this codemod should appear in a preset (major upgrade bundle, curated migration set, etc.): add an entry to `packages/migrator/src/presets/<preset>/manifest.json`:
+
+- **`name`**: stable CLI identifier.
+- **`description`**: short, user-facing.
+- **`file`**: path relative to `transforms/` without extension—must match where the file actually lives (e.g. `v9/my-transform`, `v10/my-transform`, or `some-group/my-transform`).
+
+**Non-version / standalone codemods** may **omit** the preset entirely and still be run with the migrator CLI (e.g. `-t <name>`). See `packages/migrator/docs/PRESETS_AND_TRANSFORMS.md`. If omitted from any preset, say so in the PR/summary.
+
+---
+
+## Checklist (before finishing)
+
+- [ ] User confirmed automatable vs manual cases.
+- [ ] Web/mobile split matches real replacement behavior.
+- [ ] Coverage matches **sources, scopes, and cases** the user specified (anything out of scope is documented).
+- [ ] Tests: **inline cases** for edges + **0–2** paired E2E fixtures; **OSS-safe** names/comments; `migrator:test`, `migrator:lint`, and `migrator:typecheck` pass; formatting applied (non-fixture sources as needed).
+- [ ] If the transform is preset-backed: manifest entry added and `file` matches the real path under `transforms/` (no mismatch between folder name and `file`). If standalone: team knows how to invoke it (CLI / docs).
+- [ ] Transform header documents limitations (`export … from`, `require`, dynamic import, etc.).
+- [ ] If the transform is **scope-aware**: behavior with and without `options.packageScope` / CLI `-ps` is documented and covered by tests where relevant.
+- [ ] If the transform **matches import paths**: `applyImportMappings` is called before the regex so wrapper/re-exporting packages are handled; behavior with and without `--import-mapping` / `cds-migrator.config.json` is documented and covered by tests where relevant.
diff --git a/.claude/skills/components.styles/SKILL.md b/.claude/skills/components.styles/SKILL.md
index 0ddedc2a42..4a19f4498e 100644
--- a/.claude/skills/components.styles/SKILL.md
+++ b/.claude/skills/components.styles/SKILL.md
@@ -15,8 +15,6 @@ Find the component source file:
 ```bash
 packages/web/src/[source-category]/[ComponentName].tsx              # for web
 packages/mobile/src/[source-category]/[ComponentName].tsx           # for mobile
-packages/web-visualization/src/[source-category]/[ComponentName].tsx    # for web visualization
-packages/mobile-visualization/src/[source-category]/[ComponentName].tsx # for mobile visualization
 ```
 
 ## Step 2: Evaluate Component Structure
diff --git a/.claude/skills/components.write-docs/SKILL.md b/.claude/skills/components.write-docs/SKILL.md
index 60dcc343a0..4024e32b77 100644
--- a/.claude/skills/components.write-docs/SKILL.md
+++ b/.claude/skills/components.write-docs/SKILL.md
@@ -69,11 +69,6 @@ packages/web/src/[source-category]/[ComponentName].tsx    # for web
 packages/mobile/src/[source-category]/[ComponentName].tsx # for mobile
 ```
 
-Also check visualization packages if applicable:
-
-- `packages/web-visualization/src/...`
-- `packages/mobile-visualization/src/...`
-
 Also check for Storybook stories (`packages/*/src/**/__stories__/[ComponentName].stories.tsx`). If one exists, add the `storybook` field to webMetadata.json.
 
 ### Check for Styles
@@ -684,4 +679,3 @@ Before completing, verify:
 3. Ensure all examples work and have proper code snippets
 4. Include accessibility section with specific examples
 5. Test all examples and props tables render correctly
-6. For visualization components, use paths like `web-visualization` or `mobile-visualization` instead of `web` or `mobile`
diff --git a/.claude/skills/deprecate-cds-api/SKILL.md b/.claude/skills/deprecate-cds-api/SKILL.md
index 8dbc95f9f6..790e017302 100644
--- a/.claude/skills/deprecate-cds-api/SKILL.md
+++ b/.claude/skills/deprecate-cds-api/SKILL.md
@@ -14,7 +14,7 @@ argument-hint: '<SymbolName or path> — replacement — [@deprecationExpectedRe
 
 # Deprecate CDS public API
 
-Automate the standard CDS deprecation workflow for symbols exported from `packages/web`, `packages/mobile`, `packages/common`, `packages/web-visualization`, or `packages/mobile-visualization`.
+Automate the standard CDS deprecation workflow for symbols exported from `packages/web`, `packages/mobile`, or `packages/common`.
 
 ## Inputs to confirm first
 
@@ -28,7 +28,7 @@ Automate the standard CDS deprecation workflow for symbols exported from `packag
 
 **Deprecate the symbol everywhere it is publicly reachable**, not only where it is first implemented.
 
-1. For each CDS package (`web`, `mobile`, `common`, `web-visualization`, `mobile-visualization`), trace the symbol from that package’s `package.json` **`exports`** map → barrel / `index` files → the module that declares or re-exports the symbol.
+1. For each CDS package (`web`, `mobile`, `common`), trace the symbol from that package’s `package.json` **`exports`** map → barrel / `index` files → the module that declares or re-exports the symbol.
 2. **`Grep`** for the symbol name under `packages/<name>/src` (e.g. `export { Foo`, `export * from`, `Foo as`) to catch re-exports and alternate entry paths.
 3. **Every** package that publicly exports the symbol must end up with deprecation coverage: primary implementation **and** any re-export site where your tooling or consumers would not see JSDoc from the source file (add JSDoc on the re-export line or duplicate the tags as needed so imports from `@coinbase/cds-web`, `@coinbase/cds-mobile`, `@coinbase/cds-common`, etc. all surface the deprecation).
 
@@ -69,7 +69,6 @@ The tag must satisfy `@deprecationExpectedRemoval v…` as enforced by ESLint (e
 1. **Confirm with the user** which major **`N`** to use, unless they already specified it in **Inputs** (e.g. “remove in v10” → use `v10`).
 2. **Default suggestion** when the user wants a recommendation: read the **`version`** field from the relevant `package.json` and set **`N = current major + 1`**.
    - **`packages/web`**, **`packages/mobile`**, and **`packages/common`** always share the same semver — read **`version`** from any one of them (e.g. `8.60.0` → suggest **`v9`**).
-   - Symbols owned only by **`packages/web-visualization`** or **`packages/mobile-visualization`**: read **that** package’s `package.json` (those versions are independent from web/mobile/common).
 3. After agreeing on **`N`**, use **`@deprecationExpectedRemoval v<N>`** everywhere for this deprecation (same **Step 3**).
 
 Do **not** assume the default without checking—either the user names **`N`**, or they accept the suggested next-major after you show the current **`version`**.
@@ -141,7 +140,7 @@ Use the workspace convention:
 yarn nx run <project>:lint
 ```
 
-Examples: `web`, `mobile`, `common`, `web-visualization`, `mobile-visualization` — run **each** project you touched. Fix any reported issues before finishing (most often: missing `@deprecationExpectedRemoval`, or `@deprecated` text not ending with the standard sentence).
+Examples: `web`, `mobile`, `common` — run **each** project you touched. Fix any reported issues before finishing (most often: missing `@deprecationExpectedRemoval`, or `@deprecated` text not ending with the standard sentence).
 
 ---
 
diff --git a/.claude/skills/git.detect-breaking-changes/SKILL.md b/.claude/skills/git.detect-breaking-changes/SKILL.md
index 2691175095..d4b57b159e 100644
--- a/.claude/skills/git.detect-breaking-changes/SKILL.md
+++ b/.claude/skills/git.detect-breaking-changes/SKILL.md
@@ -17,8 +17,6 @@ Only analyze changes within these packages:
 - `packages/web/`
 - `packages/mobile/`
 - `packages/common/`
-- `packages/web-visualization/`
-- `packages/mobile-visualization/`
 
 ## Determining the public API surface
 
@@ -85,7 +83,7 @@ Examples:
 
 ### 5. DOM / element structure change (web packages only)
 
-Applies to `packages/web/` and `packages/web-visualization/` only. Changes to the rendered HTML element tree that could break consumer CSS selectors or DOM queries targeting internal component structure.
+Applies to `packages/web/` only. Changes to the rendered HTML element tree that could break consumer CSS selectors or DOM queries targeting internal component structure.
 
 Examples:
 
diff --git a/.codeflow.yml b/.codeflow.yml
index 8a3b60d4d0..37e657b890 100644
--- a/.codeflow.yml
+++ b/.codeflow.yml
@@ -6,7 +6,6 @@ secure:
   branches:
     - master
     - release-8.x
-    - cds-v9-master
   auto_assign_reviewers: true
   # Marks
   upstream_repository: coinbase/cds
@@ -124,11 +123,11 @@ build:
         expire_tmp_tags_after_days: 1
         expire_all_after_days: 2
     - BaldurNode:
-        name: package-ui-mobile-playground
-        path: ./packages/ui-mobile-playground/publish.Dockerfile
+        name: package-ui-scorecard
+        path: ./packages/ui-scorecard/publish.Dockerfile
         architecture: amd64
         autobuild_files:
-          - packages/ui-mobile-playground/package.json
+          - packages/ui-scorecard/package.json
         expire_keep_tags_after_days: 1
         expire_tmp_tags_after_days: 1
         expire_all_after_days: 2
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 66fc1f0e75..8311d6d0f3 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -144,7 +144,7 @@ jobs:
           fetch-depth: 100 # TODO: This needs to include the merge-base
       - uses: ./.github/actions/setup
       - name: Build
-        run: yarn nx affected --exclude=mobile-app --target=build --base=$NX_BASE --head=$NX_HEAD
+        run: yarn nx affected --exclude=expo-app --target=build --base=$NX_BASE --head=$NX_HEAD
 
   depcheck:
     name: Depcheck
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 3f0fd51af5..59f0606020 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -20,7 +20,6 @@ on:
     branches:
       - master
       - 'release-[0-9]+.x'
-      - 'cds-v9-master'
     paths:
       - 'packages/*/package.json'
   pull_request:
@@ -60,7 +59,7 @@ jobs:
         run: |
           # Define all publishable packages (those with publish.Dockerfile
           # and not private: true)
-          ALL_PACKAGES="common,eslint-plugin-cds,icons,illustrations,lottie-files,mcp-server,mobile,mobile-visualization,ui-mobile-playground,utils,web,web-visualization"
+          ALL_PACKAGES="common,eslint-plugin-cds,icons,illustrations,lottie-files,mcp-server,migrator,mobile,mobile-visualization,utils,web,web-visualization"
 
           # Function to convert comma-separated list to JSON array
           csv_to_json() {
@@ -243,7 +242,25 @@ jobs:
         if: steps.version-check.outputs.should-publish == 'true'
         run: |
           cd packages/${{ matrix.package }}
+          PACKAGE_VERSION=$(node -p "require('./package.json').version")
+          CURRENT_BRANCH="${{ github.base_ref || github.ref_name }}"
+          NPM_TAG_ARGS=()
+
+          if echo "$CURRENT_BRANCH" | grep -qE '^release-[0-9]+\.x$'; then
+            MAJOR=$(echo "$CURRENT_BRANCH" | sed -E 's/release-([0-9]+)\.x/\1/')
+            NPM_TAG="v${MAJOR}"
+            echo "🏷️  Dry run publishing from ${CURRENT_BRANCH}, using dist-tag: ${NPM_TAG}"
+            NPM_TAG_ARGS=(--tag "$NPM_TAG")
+          elif echo "$PACKAGE_VERSION" | grep -qE '\-'; then
+            PRERELEASE_TAG=$(echo "$PACKAGE_VERSION" | sed -E 's/.*-([^.]+).*/\1/')
+            echo "🏷️  Dry run detected prerelease version, using dist-tag: $PRERELEASE_TAG"
+            NPM_TAG_ARGS=(--tag "$PRERELEASE_TAG")
+          else
+            echo "🏷️  Dry run publishing as latest"
+          fi
+
           npm publish --dry-run --access public \
+            "${NPM_TAG_ARGS[@]}" \
             --registry https://registry.npmjs.org
           echo "✅ Dry run successful for ${{ matrix.package }}"
 
diff --git a/.github/workflows/visreg-mobile.yml b/.github/workflows/visreg-mobile.yml
index 0de82b16d5..5c149e1b04 100644
--- a/.github/workflows/visreg-mobile.yml
+++ b/.github/workflows/visreg-mobile.yml
@@ -124,7 +124,7 @@ jobs:
         run: echo "$HOME/.maestro/bin" >> $GITHUB_PATH
 
       - name: Prepare iOS app (extract prebuild + patch JS bundle)
-        run: yarn nx run mobile-app:patch-bundle-ios
+        run: yarn nx run expo-app:patch-bundle-ios
 
       - name: Boot iOS simulator
         run: |
@@ -136,7 +136,7 @@ jobs:
           sleep 30
 
       - name: Install app on simulator
-        run: xcrun simctl install booted apps/mobile-app/prebuilds/ios-release-hermes.app
+        run: xcrun simctl install booted apps/expo-app/prebuilds/ios-release/expoapp.app
 
       - name: Capture screenshots
         run: yarn nx run mobile-visreg:ios
@@ -218,7 +218,7 @@ jobs:
   #       run: echo "$HOME/.maestro/bin" >> $GITHUB_PATH
 
   #     - name: Prepare Android app (extract prebuild + patch JS bundle)
-  #       run: yarn nx run mobile-app:patch-bundle-android
+  #       run: yarn nx run expo-app:patch-bundle-android
 
   #     # Enable KVM hardware acceleration for the Android emulator.
   #     # Without this, the emulator runs in software emulation mode, which takes 6+ minutes to boot
@@ -255,7 +255,7 @@ jobs:
   #           # the package manager specifically before attempting install.
   #           while ! adb shell pm list packages > /dev/null 2>&1; do echo "Waiting for package manager..."; sleep 1; done
 
-  #           adb install -r apps/mobile-app/prebuilds/android-release-hermes/binary.apk
+  #           adb install -r apps/expo-app/prebuilds/android-release-hermes/binary.apk
 
   #           # Copy Maestro debug artifacts after the run so they can be uploaded after the emulator shuts down
   #           yarn nx run mobile-visreg:android; cp -r ~/.maestro/tests /tmp/maestro-debug || true
diff --git a/.gitignore b/.gitignore
index d3d2e3ec7f..4895c3a49a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -152,13 +152,15 @@ web-build/
 ios
 android
 
-# failed detox test screenshots
-apps/mobile-app/artifacts
-apps/mobile-app/prebuilds/android-*
-!apps/mobile-app/prebuilds/android-release-*.zip
-!apps/mobile-app/credentials/android-release-*.keystore
-# temporary build directory for native compilation
-apps/mobile-app/build/
+# expo-app generated artifacts
+apps/expo-app/artifacts
+apps/expo-app/build/
+# we expect developers to generate their own debug builds for local development
+apps/expo-app/prebuilds/ios-debug/
+apps/expo-app/prebuilds/android-debug/
+# android release builds are too large to be committed at this time
+# committed prebuilds are especially important for running visreg in CI so we will need to figure out a solution when we turn android tests back on
+apps/expo-app/prebuilds/android-release/
 
 #reassure
 **/.reassure/*
diff --git a/.prettierignore b/.prettierignore
index 2500464492..4a3f850f68 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -6,6 +6,9 @@
 **/persisted_queries.json
 **/__generated__
 
+# Test fixtures (must match exact transform output)
+**/__testfixtures__/
+
 # Builds
 dist/
 lib/
diff --git a/.yarn/patches/@expo-cli-npm-0.18.29-f58906fdfb.patch b/.yarn/patches/@expo-cli-npm-0.18.29-f58906fdfb.patch
deleted file mode 100644
index 25dd517fa3..0000000000
--- a/.yarn/patches/@expo-cli-npm-0.18.29-f58906fdfb.patch
+++ /dev/null
@@ -1,52 +0,0 @@
-diff --git a/build/src/start/platforms/android/AndroidAppIdResolver.js b/build/src/start/platforms/android/AndroidAppIdResolver.js
-index f4b217c5d71fb62179160cdbf8e02276abd06a6d..74d58fee13c7dbb5144b6c77d6e12917dc62958d 100644
---- a/build/src/start/platforms/android/AndroidAppIdResolver.js
-+++ b/build/src/start/platforms/android/AndroidAppIdResolver.js
-@@ -31,7 +31,7 @@ class AndroidAppIdResolver extends _appIdResolver.AppIdResolver {
-     async resolveAppIdFromNativeAsync() {
-         const applicationIdFromGradle = await _configPlugins().AndroidConfig.Package.getApplicationIdAsync(this.projectRoot).catch(()=>null);
-         if (applicationIdFromGradle) {
--            return applicationIdFromGradle;
-+            return `${applicationIdFromGradle}.development`;
-         }
-         try {
-             var ref, ref1;
-diff --git a/build/src/start/platforms/ios/AppleAppIdResolver.js b/build/src/start/platforms/ios/AppleAppIdResolver.js
-index 06d6d1e11802ed88388444b10acd83834e079f50..c4409c566377897eacdb78aea4a8fd78d5aeca03 100644
---- a/build/src/start/platforms/ios/AppleAppIdResolver.js
-+++ b/build/src/start/platforms/ios/AppleAppIdResolver.js
-@@ -50,7 +50,7 @@ class AppleAppIdResolver extends _appIdResolver.AppIdResolver {
-     async resolveAppIdFromNativeAsync() {
-         // Check xcode project
-         try {
--            const bundleId = _configPlugins().IOSConfig.BundleIdentifier.getBundleIdentifierFromPbxproj(this.projectRoot);
-+            const bundleId = _configPlugins().IOSConfig.BundleIdentifier.getBundleIdentifierFromPbxproj(this.projectRoot, {'buildConfiguration': 'Debug'});
-             if (bundleId) {
-                 return bundleId;
-             }
-diff --git a/build/src/utils/npm.js b/build/src/utils/npm.js
-index a49faac0ba81f0a00d19e8427434cf013c9b4769..cb9c81ae46f1e2637bbb5410412b578225064818 100644
---- a/build/src/utils/npm.js
-+++ b/build/src/utils/npm.js
-@@ -171,7 +171,7 @@ async function extractNpmTarballAsync(stream, props) {
-     transformStream.on("data", (chunk)=>{
-         hash.update(chunk);
-     });
--    await pipeline(stream, transformStream, _tar().default.extract({
-+    await pipeline(stream, transformStream, (_tar().default ?? _tar()).extract({
-         cwd,
-         filter,
-         onentry: (0, _createFileTransform.createEntryResolver)(name),
-diff --git a/build/src/utils/tar.js b/build/src/utils/tar.js
-index 8bf12d812646724089f6cd265b16093e8f518570..9575eaeae41fe05105ab0c2af2ee3d11dce659bf 100644
---- a/build/src/utils/tar.js
-+++ b/build/src/utils/tar.js
-@@ -86,7 +86,7 @@ async function extractAsync(input, output) {
-     debug(`Extracting ${input} to ${output} using JS tar module`);
-     // tar node module has previously had problems with big files, and seems to
-     // be slower, so only use it as a backup.
--    await _tar().default.extract({
-+    await (_tar().default ?? _tar()).extract({
-         file: input,
-         cwd: output
-     });
diff --git a/.yarn/patches/@expo-cli-npm-54.0.22-eb5155f2b5.patch b/.yarn/patches/@expo-cli-npm-54.0.22-eb5155f2b5.patch
new file mode 100644
index 0000000000..0a4b594dd4
--- /dev/null
+++ b/.yarn/patches/@expo-cli-npm-54.0.22-eb5155f2b5.patch
@@ -0,0 +1,26 @@
+diff --git a/build/src/start/platforms/android/AndroidAppIdResolver.js b/build/src/start/platforms/android/AndroidAppIdResolver.js
+index eedb068830f3d5869bfc594671c254f48cd9ab8a..38b728b747bc8974ad8ab0fd38f271c771b0519a 100644
+--- a/build/src/start/platforms/android/AndroidAppIdResolver.js
++++ b/build/src/start/platforms/android/AndroidAppIdResolver.js
+@@ -33,7 +33,7 @@ class AndroidAppIdResolver extends _AppIdResolver.AppIdResolver {
+     async resolveAppIdFromNativeAsync() {
+         const applicationIdFromGradle = await _configplugins().AndroidConfig.Package.getApplicationIdAsync(this.projectRoot).catch(()=>null);
+         if (applicationIdFromGradle) {
+-            return applicationIdFromGradle;
++            return `${applicationIdFromGradle}.development`;
+         }
+         try {
+             var _androidManifest_manifest_$, _androidManifest_manifest;
+diff --git a/build/src/start/platforms/ios/AppleAppIdResolver.js b/build/src/start/platforms/ios/AppleAppIdResolver.js
+index 96cc53df6109e3b62ede2e79bf4093598a24fa5b..9ec60b4477480128f28c5eb1394caf60e65d8072 100644
+--- a/build/src/start/platforms/ios/AppleAppIdResolver.js
++++ b/build/src/start/platforms/ios/AppleAppIdResolver.js
+@@ -52,7 +52,7 @@ class AppleAppIdResolver extends _AppIdResolver.AppIdResolver {
+     async resolveAppIdFromNativeAsync() {
+         // Check xcode project
+         try {
+-            const bundleId = _configplugins().IOSConfig.BundleIdentifier.getBundleIdentifierFromPbxproj(this.projectRoot);
++            const bundleId = _configplugins().IOSConfig.BundleIdentifier.getBundleIdentifierFromPbxproj(this.projectRoot, {'buildConfiguration': 'Debug'});
+             if (bundleId) {
+                 return bundleId;
+             }
diff --git a/.yarn/patches/@expo-metro-config-npm-54.0.14-88915da766.patch b/.yarn/patches/@expo-metro-config-npm-54.0.14-88915da766.patch
new file mode 100644
index 0000000000..3fca734af2
--- /dev/null
+++ b/.yarn/patches/@expo-metro-config-npm-54.0.14-88915da766.patch
@@ -0,0 +1,19 @@
+diff --git a/build/serializer/environmentVariableSerializerPlugin.js b/build/serializer/environmentVariableSerializerPlugin.js
+index 3b13e076369a5a94ec3dc7fddb905b01e52d91e8..c42cdebf000b8bd53c5eb45bfbbb2f6492e20b1c 100644
+--- a/build/serializer/environmentVariableSerializerPlugin.js
++++ b/build/serializer/environmentVariableSerializerPlugin.js
+@@ -17,6 +17,14 @@ function getTransformEnvironment(url) {
+ function getAllExpoPublicEnvVars(inputEnv = process.env) {
+     // Create an object containing all environment variables that start with EXPO_PUBLIC_
+     const env = {};
++
++    if (inputEnv._ENV_VARS_FOR_APP) {
++        const keys = JSON.parse(inputEnv._ENV_VARS_FOR_APP);
++        for (const key of keys) {
++            env[key] = inputEnv[key];
++        }
++    }
++
+     for (const key in inputEnv) {
+         if (key.startsWith('EXPO_PUBLIC_')) {
+             // @ts-expect-error: TS doesn't know that the key starts with EXPO_PUBLIC_
diff --git a/.yarn/patches/expo-dev-launcher-npm-4.0.27-c2ab5dd4a5.patch b/.yarn/patches/expo-dev-launcher-npm-4.0.27-c2ab5dd4a5.patch
deleted file mode 100644
index d318a3e1b0..0000000000
--- a/.yarn/patches/expo-dev-launcher-npm-4.0.27-c2ab5dd4a5.patch
+++ /dev/null
@@ -1,13 +0,0 @@
-diff --git a/expo-dev-launcher-gradle-plugin/src/main/kotlin/expo/modules/devlauncher/DevLauncherPlugin.kt b/expo-dev-launcher-gradle-plugin/src/main/kotlin/expo/modules/devlauncher/DevLauncherPlugin.kt
-index b7a856d72f271e5d655d256a2ea2774c6d4356bd..49d90a461f0c7a26c72a71b77009ec92c0e94105 100644
---- a/expo-dev-launcher-gradle-plugin/src/main/kotlin/expo/modules/devlauncher/DevLauncherPlugin.kt
-+++ b/expo-dev-launcher-gradle-plugin/src/main/kotlin/expo/modules/devlauncher/DevLauncherPlugin.kt
-@@ -32,7 +32,7 @@ abstract class DevLauncherPlugin : Plugin<Project> {
-       }
- 
-       val androidComponents = project.extensions.getByType(AndroidComponentsExtension::class.java)
--      androidComponents.onVariants(androidComponents.selector().withBuildType("debug")) { variant ->
-+      androidComponents.onVariants(androidComponents.selector().withBuildType("development")) { variant ->
-         variant.instrumentation.transformClassesWith(DevLauncherClassVisitorFactory::class.java, InstrumentationScope.ALL) {
-           it.enabled.set(true)
-         }
diff --git a/.yarn/patches/expo-modules-core-npm-3.0.29-7b93dc0961.patch b/.yarn/patches/expo-modules-core-npm-3.0.29-7b93dc0961.patch
new file mode 100644
index 0000000000..0e1951e2f9
--- /dev/null
+++ b/.yarn/patches/expo-modules-core-npm-3.0.29-7b93dc0961.patch
@@ -0,0 +1,17 @@
+diff --git a/ios/Core/ExpoBridgeModule.mm b/ios/Core/ExpoBridgeModule.mm
+index 2ed1c00f47406e109750cc27ace7e0d88e42c00e..d14269aae847143318888ad3c848d707de95e691 100644
+--- a/ios/Core/ExpoBridgeModule.mm
++++ b/ios/Core/ExpoBridgeModule.mm
+@@ -45,9 +45,9 @@ - (void)setBridge:(RCTBridge *)bridge
+   _bridge = bridge;
+   _appContext.reactBridge = bridge;
+ 
+-#if !__has_include(<ReactCommon/RCTRuntimeExecutor.h>)
+-  _appContext._runtime = [EXJavaScriptRuntimeManager runtimeFromBridge:bridge];
+-#endif // React Native <0.74
++// #if !__has_include(<ReactCommon/RCTRuntimeExecutor.h>)
++//   _appContext._runtime = [EXJavaScriptRuntimeManager runtimeFromBridge:bridge];
++// #endif // React Native <0.74
+ }
+ 
+ #if __has_include(<ReactCommon/RCTRuntimeExecutor.h>)
diff --git a/.yarn/patches/expo-splash-screen-npm-0.27.5-f91e0b41df.patch b/.yarn/patches/expo-splash-screen-npm-0.27.5-f91e0b41df.patch
deleted file mode 100644
index 22a0caa149..0000000000
--- a/.yarn/patches/expo-splash-screen-npm-0.27.5-f91e0b41df.patch
+++ /dev/null
@@ -1,126 +0,0 @@
-diff --git a/android/src/main/java/expo/modules/splashscreen/SplashScreenView.kt b/android/src/main/java/expo/modules/splashscreen/SplashScreenView.kt
-index f5ac5483aa3f34ae59830a9da16afe52ccc8ba0e..e2bdef4296b1aeecae41681adf43fe6e7fcc3b89 100644
---- a/android/src/main/java/expo/modules/splashscreen/SplashScreenView.kt
-+++ b/android/src/main/java/expo/modules/splashscreen/SplashScreenView.kt
-@@ -8,6 +8,11 @@ import android.view.ViewGroup
- import android.widget.ImageView
- import android.widget.RelativeLayout
- 
-+import androidx.core.content.ContextCompat
-+import android.view.Gravity
-+import android.widget.TextView
-+import android.graphics.Color
-+
- // this needs to stay for versioning to work
- 
- @SuppressLint("ViewConstructor")
-@@ -15,16 +20,44 @@ class SplashScreenView(
-   context: Context
- ) : RelativeLayout(context) {
-   val imageView: ImageView = ImageView(context).also { view ->
--    view.layoutParams = LayoutParams(
-+    val params = LayoutParams(
-       LayoutParams.MATCH_PARENT,
-       LayoutParams.MATCH_PARENT
-     )
-+    params.addRule(CENTER_IN_PARENT)  // Center align
-+    view.layoutParams = params
-   }
- 
-   init {
-     layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
- 
-     addView(imageView)
-+
-+    // context comes from the application level.
-+    val packageName = context.packageName
-+
-+    val resId = context.resources.getIdentifier("splashscreen_bottom_image", "drawable", packageName)
-+
-+    // If bottom image is provided, add it to the view
-+    // Otherwise we keep only the main, centered, image
-+    if (resId != 0) {
-+      val bottomImageView = ImageView(context).apply {
-+        val params = LayoutParams(
-+            LayoutParams.WRAP_CONTENT,
-+            LayoutParams.WRAP_CONTENT
-+        )
-+        params.addRule(ALIGN_PARENT_BOTTOM)
-+        params.addRule(CENTER_HORIZONTAL)
-+        layoutParams = params
-+        setPadding(0, 0, 0, 40)
-+        val resId = context.resources.getIdentifier("splashscreen_bottom_image", "drawable", packageName)
-+        if (resId != 0) {
-+            setImageResource(resId)
-+        }
-+        scaleType = ImageView.ScaleType.CENTER
-+      }
-+      addView(bottomImageView)
-+    }
-   }
- 
-   fun configureImageViewResizeMode(resizeMode: SplashScreenImageResizeMode) {
-diff --git a/android/src/main/java/expo/modules/splashscreen/SplashScreenViewController.kt b/android/src/main/java/expo/modules/splashscreen/SplashScreenViewController.kt
-index 23e8d4b416bb12192a3fe517f02e0945ccd8c347..16fd58a80216f49d8b9eeaa3a7a27ba8567760b3 100644
---- a/android/src/main/java/expo/modules/splashscreen/SplashScreenViewController.kt
-+++ b/android/src/main/java/expo/modules/splashscreen/SplashScreenViewController.kt
-@@ -7,6 +7,7 @@ import android.view.View
- import android.view.ViewGroup
- import expo.modules.splashscreen.exceptions.NoContentViewException
- import java.lang.ref.WeakReference
-+import android.view.animation.AlphaAnimation
- 
- const val SEARCH_FOR_ROOT_VIEW_INTERVAL = 20L
- 
-@@ -63,12 +64,19 @@ open class SplashScreenViewController(
-       return failureCallback("Cannot hide native splash screen on activity that is already destroyed (application is already closed).")
-     }
- 
--    Handler(activity.mainLooper).post {
--      contentView.removeView(splashScreenView)
--      autoHideEnabled = true
--      splashScreenShown = false
--      successCallback(true)
-+    val fadeOutDuration = 300L
-+    val fadeOutAnimation = AlphaAnimation(1f, 0f).apply {
-+      duration = fadeOutDuration
-+      fillAfter = true
-     }
-+
-+    Handler(activity.mainLooper).postDelayed({
-+      contentView.removeView(splashScreenView)
-+    }, fadeOutDuration)
-+    splashScreenView.startAnimation(fadeOutAnimation)
-+    autoHideEnabled = true
-+    splashScreenShown = false
-+    successCallback(true)
-   }
- 
-   // endregion
-diff --git a/ios/EXSplashScreen/EXSplashScreenViewController.m b/ios/EXSplashScreen/EXSplashScreenViewController.m
-index 3f1226e3867c7b3ef663a3b56787975006d60ddf..3361283632abc49143e59f93c8e57b57324f1708 100644
---- a/ios/EXSplashScreen/EXSplashScreenViewController.m
-+++ b/ios/EXSplashScreen/EXSplashScreenViewController.m
-@@ -72,12 +72,16 @@ - (void)hideWithCallback:(nullable void(^)(BOOL))successCallback
-   EX_WEAKIFY(self);
-   dispatch_async(dispatch_get_main_queue(), ^{
-     EX_ENSURE_STRONGIFY(self);
--    [self.splashScreenView removeFromSuperview];
--    self.splashScreenShown = NO;
--    self.autoHideEnabled = YES;
--    if (successCallback) {
--      successCallback(YES);
--    }
-+    [UIView animateWithDuration:0.2 // 200ms fade-out animation
-+          animations:^{self.splashScreenView.alpha = 0.0;}
-+          completion:^(BOOL finished){
-+        [self.splashScreenView removeFromSuperview];
-+        self.splashScreenShown = NO;
-+        self.autoHideEnabled = YES;
-+        if (successCallback) {
-+          successCallback(YES);
-+        }
-+    }];
-   });
- }
- 
diff --git a/.yarn/patches/glob-npm-7.1.6-minimatch10-symbol.patch b/.yarn/patches/glob-npm-7.1.6-minimatch10-symbol.patch
deleted file mode 100644
index d45460a62a..0000000000
--- a/.yarn/patches/glob-npm-7.1.6-minimatch10-symbol.patch
+++ /dev/null
@@ -1,41 +0,0 @@
-diff --git a/sync.js b/sync.js
---- a/sync.js
-+++ b/sync.js
-@@ -18,6 +18,10 @@ var ownProp = common.ownProp
- var childrenIgnored = common.childrenIgnored
- var isIgnored = common.isIgnored
- 
-+function safeJoin (arr) {
-+  return arr.map(function (p) { return typeof p === 'symbol' ? '**' : p }).join('/')
-+}
-+
- function globSync (pattern, options) {
-   if (typeof options === 'function' || arguments.length === 3)
-     throw new TypeError('callback provided to sync glob\n'+
-@@ -89,7 +93,7 @@ GlobSync.prototype._process = function (pattern, index, inGlobStar) {
-   switch (n) {
-     // if not, then this is rather simple
-     case pattern.length:
--      this._processSimple(pattern.join('/'), index)
-+      this._processSimple(safeJoin(pattern), index)
-       return
- 
-     case 0:
-@@ -102,7 +106,7 @@ GlobSync.prototype._process = function (pattern, index, inGlobStar) {
-       // pattern has some string bits in the front.
-       // whatever it starts with, whether that's 'absolute' like /foo/bar,
-       // or 'relative' like '../baz'
--      prefix = pattern.slice(0, n).join('/')
-+      prefix = safeJoin(pattern.slice(0, n))
-       break
-   }
- 
-@@ -112,7 +116,7 @@ GlobSync.prototype._process = function (pattern, index, inGlobStar) {
-   var read
-   if (prefix === null)
-     read = '.'
--  else if (isAbsolute(prefix) || isAbsolute(pattern.join('/'))) {
-+  else if (isAbsolute(prefix) || isAbsolute(safeJoin(pattern))) {
-     if (!prefix || !isAbsolute(prefix))
-       prefix = '/' + prefix
-     read = prefix
diff --git a/.yarn/patches/react-native-gesture-handler-npm-2.16.2-c16529326b.patch b/.yarn/patches/react-native-gesture-handler-npm-2.16.2-c16529326b.patch
deleted file mode 100644
index 4b7ce66e94..0000000000
--- a/.yarn/patches/react-native-gesture-handler-npm-2.16.2-c16529326b.patch
+++ /dev/null
@@ -1,76 +0,0 @@
-diff --git a/src/handlers/gestures/GestureDetector.tsx b/src/handlers/gestures/GestureDetector.tsx
-index 45d927c230a86a7713d097f19e97da9c32563e2d..06c8d1d441957f29f899af5efd533cab25dd690d 100644
---- a/src/handlers/gestures/GestureDetector.tsx
-+++ b/src/handlers/gestures/GestureDetector.tsx
-@@ -256,8 +256,29 @@ function updateHandlers(
- ) {
-   gestureConfig.prepare();
- 
-+  /* Patch added to fix performance regression due to SharedValue reads. As 
-+  * per this discussion https://github.com/software-mansion/react-native-gesture-handler/commit/1217039146ddcae6796820b5ecf19d1ff51af837#r143406410
-+  *
-+  * Remove patch if this change
-+  * https://github.com/software-mansion/react-native-gesture-handler/pull/2957
-+  * has landed on the version you upgrade to.
-+  */
-+  // if amount of gesture configs changes, we need to update the callbacks in shared value
-+  let shouldUpdateSharedValueIfUsed =
-+    preparedGesture.config.length !== gesture.length;
-+  
-   for (let i = 0; i < gesture.length; i++) {
-     const handler = preparedGesture.config[i];
-+
-+    // if the gestureId is different (gesture isn't wrapped with useMemo or its dependencies changed),
-+    // we need to update the shared value, assuming the gesture runs on UI thread or the thread changed
-+    if (
-+      handler.handlers.gestureId !== gesture[i].handlers.gestureId &&
-+      (gesture[i].shouldUseReanimated || handler.shouldUseReanimated)
-+    ) {
-+      shouldUpdateSharedValueIfUsed = true;
-+    }
-+    
-     checkGestureCallbacksForWorklets(handler);
- 
-     // only update handlerTag when it's actually different, it may be the same
-@@ -301,34 +322,13 @@ function updateHandlers(
-     }
- 
-     if (preparedGesture.animatedHandlers) {
--      const previousHandlersValue =
--        preparedGesture.animatedHandlers.value ?? [];
--      const newHandlersValue = preparedGesture.config
--        .filter((g) => g.shouldUseReanimated) // ignore gestures that shouldn't run on UI
--        .map((g) => g.handlers) as unknown as HandlerCallbacks<
--        Record<string, unknown>
--      >[];
--
--      // if amount of gesture configs changes, we need to update the callbacks in shared value
--      let shouldUpdateSharedValue =
--        previousHandlersValue.length !== newHandlersValue.length;
--
--      if (!shouldUpdateSharedValue) {
--        // if the amount is the same, we need to check if any of the configs inside has changed
--        for (let i = 0; i < newHandlersValue.length; i++) {
--          if (
--            // we can use the `gestureId` prop as it's unique for every config instance
--            newHandlersValue[i].gestureId !== previousHandlersValue[i].gestureId
--          ) {
--            shouldUpdateSharedValue = true;
--            break;
--          }
--        }
--      }
--
--      if (shouldUpdateSharedValue) {
--        preparedGesture.animatedHandlers.value = newHandlersValue;
--      }
-+      if (shouldUpdateSharedValueIfUsed) {
-+        preparedGesture.animatedHandlers.value = preparedGesture.config
-+          .filter((g) => g.shouldUseReanimated) // ignore gestures that shouldn't run on UI
-+          .map((g) => g.handlers) as unknown as HandlerCallbacks<
-+          Record<string, unknown>
-+        >[];
-+      }        
-     }
- 
-     scheduleFlushOperations();
diff --git a/.yarn/patches/react-native-npm-0.74.5-db5164f47b.patch b/.yarn/patches/react-native-npm-0.74.5-db5164f47b.patch
deleted file mode 100644
index a09c674667..0000000000
--- a/.yarn/patches/react-native-npm-0.74.5-db5164f47b.patch
+++ /dev/null
@@ -1,36 +0,0 @@
-diff --git a/React/Views/RCTModalHostViewManager.m b/React/Views/RCTModalHostViewManager.m
-index b0295e05ae4d54091bd80f77809ca2aeaaa8562b..81f8f4fa738cfe80ec89f32ebe5bab7ed21f5958 100644
---- a/React/Views/RCTModalHostViewManager.m
-+++ b/React/Views/RCTModalHostViewManager.m
-@@ -75,7 +75,6 @@ - (void)presentModalHostView:(RCTModalHostView *)modalHostView
-       modalHostView.onShow(nil);
-     }
-   };
--  dispatch_async(dispatch_get_main_queue(), ^{
-     if (self->_presentationBlock) {
-       self->_presentationBlock([modalHostView reactViewController], viewController, animated, completionBlock);
-     } else {
-@@ -83,7 +82,6 @@ - (void)presentModalHostView:(RCTModalHostView *)modalHostView
-                                                         animated:animated
-                                                       completion:completionBlock];
-     }
--  });
- }
- 
- - (void)dismissModalHostView:(RCTModalHostView *)modalHostView
-@@ -95,7 +93,6 @@ - (void)dismissModalHostView:(RCTModalHostView *)modalHostView
-       [[self.bridge moduleForClass:[RCTModalManager class]] modalDismissed:modalHostView.identifier];
-     }
-   };
--  dispatch_async(dispatch_get_main_queue(), ^{
-     if (self->_dismissalBlock) {
-       self->_dismissalBlock([modalHostView reactViewController], viewController, animated, completionBlock);
-     } else if (viewController.presentingViewController) {
-@@ -106,7 +103,6 @@ - (void)dismissModalHostView:(RCTModalHostView *)modalHostView
-       // This, somehow, invalidate the presenting view controller and the modal remains always visible.
-       completionBlock();
-     }
--  });
- }
- 
- - (RCTShadowView *)shadowView
diff --git a/.yarn/patches/react-native-npm-0.81.5-0a0008b930.patch b/.yarn/patches/react-native-npm-0.81.5-0a0008b930.patch
new file mode 100644
index 0000000000..c5e401ba99
--- /dev/null
+++ b/.yarn/patches/react-native-npm-0.81.5-0a0008b930.patch
@@ -0,0 +1,92 @@
+diff --git a/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js b/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js
+index 9d663610a0546d4f801196217966ad9d184818af..1586d116b9fc4e86a39976de543489c6a23a1154 100644
+--- a/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js
++++ b/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js
+@@ -16868,7 +16868,7 @@ __DEV__ &&
+       shouldSuspendImpl = newShouldSuspendImpl;
+     };
+     var isomorphicReactPackageVersion = React.version;
+-    if ("19.1.0" !== isomorphicReactPackageVersion)
++    if ("19.1.2" !== isomorphicReactPackageVersion)
+       throw Error(
+         'Incompatible React versions: The "react" and "react-native-renderer" packages must have the exact same version. Instead got:\n  - react:                  ' +
+           (isomorphicReactPackageVersion +
+diff --git a/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js b/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js
+index b3d1cfa09d76b50617b9032b15c82351a699638e..c17f99912028e52b9acfb01b9b9560bba8c03c16 100644
+--- a/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js
++++ b/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js
+@@ -10603,7 +10603,7 @@ function updateContainer(element, container, parentComponent, callback) {
+   return lane;
+ }
+ var isomorphicReactPackageVersion = React.version;
+-if ("19.1.0" !== isomorphicReactPackageVersion)
++if ("19.1.2" !== isomorphicReactPackageVersion)
+   throw Error(
+     'Incompatible React versions: The "react" and "react-native-renderer" packages must have the exact same version. Instead got:\n  - react:                  ' +
+       (isomorphicReactPackageVersion +
+diff --git a/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.js b/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.js
+index b317ca102b0b7d25c15819c61352019fef05561b..e5c3854d0d6de8c9181d6a50124fdc7e8ddc72ab 100644
+--- a/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.js
++++ b/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.js
+@@ -11245,7 +11245,7 @@ function updateContainer(element, container, parentComponent, callback) {
+   return lane;
+ }
+ var isomorphicReactPackageVersion = React.version;
+-if ("19.1.0" !== isomorphicReactPackageVersion)
++if ("19.1.2" !== isomorphicReactPackageVersion)
+   throw Error(
+     'Incompatible React versions: The "react" and "react-native-renderer" packages must have the exact same version. Instead got:\n  - react:                  ' +
+       (isomorphicReactPackageVersion +
+diff --git a/React/Views/RCTModalHostViewManager.m b/React/Views/RCTModalHostViewManager.m
+index 203d0b441342487bfd8765b93044b291029614b2..1f2abc9651d3a4c809be6a03e8d9f7d6f7bd12bc 100644
+--- a/React/Views/RCTModalHostViewManager.m
++++ b/React/Views/RCTModalHostViewManager.m
+@@ -60,7 +60,7 @@ - (void)presentModalHostView:(RCTModalHostView *)modalHostView
+       modalHostView.onShow(nil);
+     }
+   };
+-  dispatch_async(dispatch_get_main_queue(), ^{
++
+     if (self->_presentationBlock) {
+       self->_presentationBlock([modalHostView reactViewController], viewController, animated, completionBlock);
+     } else {
+@@ -68,7 +68,7 @@ - (void)presentModalHostView:(RCTModalHostView *)modalHostView
+                                                         animated:animated
+                                                       completion:completionBlock];
+     }
+-  });
++
+ }
+ 
+ - (void)dismissModalHostView:(RCTModalHostView *)modalHostView
+@@ -80,7 +80,7 @@ - (void)dismissModalHostView:(RCTModalHostView *)modalHostView
+       [[self.bridge moduleForClass:[RCTModalManager class]] modalDismissed:modalHostView.identifier];
+     }
+   };
+-  dispatch_async(dispatch_get_main_queue(), ^{
++
+     if (self->_dismissalBlock) {
+       self->_dismissalBlock([modalHostView reactViewController], viewController, animated, completionBlock);
+     } else if (viewController.presentingViewController) {
+@@ -91,7 +91,7 @@ - (void)dismissModalHostView:(RCTModalHostView *)modalHostView
+       // This, somehow, invalidate the presenting view controller and the modal remains always visible.
+       completionBlock();
+     }
+-  });
++
+ }
+ 
+ - (RCTShadowView *)shadowView
+diff --git a/sdks/hermes-engine/hermes-engine.podspec b/sdks/hermes-engine/hermes-engine.podspec
+index 326c6fa9089cf794c2dcf37084085bf3bef3f6a5..4aa7b70780af967ff607aada3419959a8be49670 100644
+--- a/sdks/hermes-engine/hermes-engine.podspec
++++ b/sdks/hermes-engine/hermes-engine.podspec
+@@ -77,7 +77,7 @@ Pod::Spec.new do |spec|
+         . "$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
+ 
+         CONFIG="Release"
+-        if echo $GCC_PREPROCESSOR_DEFINITIONS | grep -q "DEBUG=1"; then
++        if echo $GCC_PREPROCESSOR_DEFINITIONS | grep -q "HERMES_ENABLE_DEBUGGER=1"; then
+           CONFIG="Debug"
+         fi
+ 
diff --git a/AGENTS.md b/AGENTS.md
index 8e6e41a6bb..15a16afdf3 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -55,11 +55,9 @@ Runtime: NodeJS (see .nvmrc for version)
 - **`packages/common/`** - Shared functionality and types (`@coinbase/cds-common`)
 - **`packages/icons/`** - Icon definitions and data (`@coinbase/cds-icons`)
 - **`packages/illustrations/`** - Illustration assets (`@coinbase/illustrations`)
-- **`packages/web-visualization/`** - Web visualization components built with D3 (`@coinbase/cds-web-visualization`)
-- **`packages/mobile-visualization/`** - Mobile visualization components built with D3 and react-native-skia (`@coinbase/cds-mobile-visualization`)
 - **`apps/docs/`** - Public documentation website (Docusaurus)
 - **`apps/storybook/`** - Component development and testing environment for cds-web
-- **`apps/mobile-app/`** - Sample React Native app for testing components from cds-mobile
+- **`apps/expo-app/`** - Expo app for testing and visual regression of CDS mobile components
 
 ## Standards & Best Practices
 
diff --git a/README.md b/README.md
index 802c816002..c4b5f5bdcc 100644
--- a/README.md
+++ b/README.md
@@ -53,8 +53,8 @@ yarn nx run docs:dev
 
 ```sh
 # Launch local debug builds
-yarn nx run mobile-app:launch:ios-debug
-yarn nx run mobile-app:launch:android-debug
+yarn nx run expo-app:launch:ios-debug
+yarn nx run expo-app:launch:android-debug
 ```
 
 ## Contributing
diff --git a/apps/docs/docgen.config.js b/apps/docs/docgen.config.js
index 41202d5910..f514aa3175 100644
--- a/apps/docs/docgen.config.js
+++ b/apps/docs/docgen.config.js
@@ -21,9 +21,7 @@ module.exports = {
    */
   entryPoints: [
     path.join(__dirname, '../../packages/web/tsconfig.json'),
-    path.join(__dirname, '../../packages/web-visualization/tsconfig.json'),
     path.join(__dirname, '../../packages/mobile/tsconfig.json'),
-    path.join(__dirname, '../../packages/mobile-visualization/tsconfig.json'),
     path.join(__dirname, '../../packages/common/tsconfig.json'),
     path.join(__dirname, '../../packages/icons/tsconfig.json'),
     path.join(__dirname, '../../packages/illustrations/tsconfig.json'),
@@ -68,18 +66,18 @@ module.exports = {
     'cells/CellMedia',
     'cells/ContentCell',
     'cells/ListCell',
-    'chart/area/AreaChart',
-    'chart/bar/BarChart',
-    'chart/bar/PercentageBarChart',
-    'chart/CartesianChart',
-    'chart/legend/Legend',
-    'chart/line/LineChart',
-    'chart/line/ReferenceLine',
-    'chart/axis/XAxis',
-    'chart/axis/YAxis',
-    'chart/PeriodSelector',
-    'chart/point/Point',
-    'chart/scrubber/Scrubber',
+    'visualizations/chart/area/AreaChart',
+    'visualizations/chart/bar/BarChart',
+    'visualizations/chart/bar/PercentageBarChart',
+    'visualizations/chart/CartesianChart',
+    'visualizations/chart/legend/Legend',
+    'visualizations/chart/line/LineChart',
+    'visualizations/chart/line/ReferenceLine',
+    'visualizations/chart/axis/XAxis',
+    'visualizations/chart/axis/YAxis',
+    'visualizations/chart/PeriodSelector',
+    'visualizations/chart/point/Point',
+    'visualizations/chart/scrubber/Scrubber',
     'chips/Chip',
     'chips/InputChip',
     'chips/MediaChip',
@@ -164,11 +162,11 @@ module.exports = {
     'visualizations/ProgressBarWithFloatLabel',
     'visualizations/ProgressCircle',
     'section-header/SectionHeader',
-    'sparkline/Sparkline',
+    'visualizations/sparkline/Sparkline',
     'stepper/Stepper',
-    'sparkline/SparklineGradient',
-    'sparkline/sparkline-interactive/SparklineInteractive',
-    'sparkline/sparkline-interactive-header/SparklineInteractiveHeader',
+    'visualizations/sparkline/SparklineGradient',
+    'visualizations/sparkline/sparkline-interactive/SparklineInteractive',
+    'visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader',
     'system/Interactable',
     'system/MediaQueryProvider',
     'system/Pressable',
diff --git a/apps/docs/docs/components/animation/Lottie/mobileMetadata.json b/apps/docs/docs/components/animation/Lottie/mobileMetadata.json
index c172e168a0..3abaf8ff25 100644
--- a/apps/docs/docs/components/animation/Lottie/mobileMetadata.json
+++ b/apps/docs/docs/components/animation/Lottie/mobileMetadata.json
@@ -11,7 +11,7 @@
   "dependencies": [
     {
       "name": "lottie-react-native",
-      "version": "^6.7.0"
+      "version": "7.3.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/animation/LottieStatusAnimation/mobileMetadata.json b/apps/docs/docs/components/animation/LottieStatusAnimation/mobileMetadata.json
index 1ba88778e5..ae92a6b54d 100644
--- a/apps/docs/docs/components/animation/LottieStatusAnimation/mobileMetadata.json
+++ b/apps/docs/docs/components/animation/LottieStatusAnimation/mobileMetadata.json
@@ -11,7 +11,7 @@
   "dependencies": [
     {
       "name": "lottie-react-native",
-      "version": "^6.7.0"
+      "version": "7.3.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/cards/ContainedAssetCard/_webExamples.mdx b/apps/docs/docs/components/cards/ContainedAssetCard/_webExamples.mdx
index 2a1a0da348..90330f6863 100644
--- a/apps/docs/docs/components/cards/ContainedAssetCard/_webExamples.mdx
+++ b/apps/docs/docs/components/cards/ContainedAssetCard/_webExamples.mdx
@@ -81,7 +81,7 @@ function Example() {
         <Box
           bordered
           background="bgAlternate"
-          dangerouslySetBackground="rgb(var(--gray100))"
+          style={{ backgroundColor: 'rgb(var(--gray100))' }}
           borderRadius={400}
           padding={1}
         >
@@ -94,7 +94,12 @@ function Example() {
       subtitle: 'Sept earnings',
       onPress: NoopFn,
       header: (
-        <Box bordered dangerouslySetBackground="rgb(var(--gray100))" borderRadius={400} padding={1}>
+        <Box
+          bordered
+          borderRadius={400}
+          padding={1}
+          style={{ backgroundColor: 'rgb(var(--gray100))' }}
+        >
           <Icon active color="bg" name="chartBar" size="s" />
         </Box>
       ),
diff --git a/apps/docs/docs/components/cards/ContentCard/_mobileExamples.mdx b/apps/docs/docs/components/cards/ContentCard/_mobileExamples.mdx
index 7d5d1c194d..62bcdceea5 100644
--- a/apps/docs/docs/components/cards/ContentCard/_mobileExamples.mdx
+++ b/apps/docs/docs/components/cards/ContentCard/_mobileExamples.mdx
@@ -126,7 +126,7 @@ function Example() {
 
 ## With Background
 
-Apply a background color to the card using the `background` prop. When using a background, consider using `variant="tertiary"` on buttons.
+Apply a background color to the card using the `background` prop. When using a background, consider using `variant="inverse"` on buttons.
 
 ```jsx
 function Example() {
@@ -153,7 +153,7 @@ function Example() {
             <RemoteImage source={{ uri: assets.eth.imageUrl }} />
             <RemoteImage source={{ uri: assets.polygon.imageUrl }} />
           </RemoteImageGroup>
-          <Button compact variant="tertiary">
+          <Button compact variant="inverse">
             Share
           </Button>
         </ContentCardFooter>
@@ -275,7 +275,7 @@ function AccessibleCard() {
           </Text>
           <Button
             compact
-            variant="tertiary"
+            variant="inverse"
             onPress={() => console.log('Button pressed - navigating...')}
           >
             View Details
diff --git a/apps/docs/docs/components/cards/ContentCard/_webExamples.mdx b/apps/docs/docs/components/cards/ContentCard/_webExamples.mdx
index 931fb0af22..1c0ae0ad4f 100644
--- a/apps/docs/docs/components/cards/ContentCard/_webExamples.mdx
+++ b/apps/docs/docs/components/cards/ContentCard/_webExamples.mdx
@@ -155,7 +155,7 @@ function Example() {
 
 ## With Background
 
-Apply a background color to the card using the `background` prop. When using a background, consider using `variant="tertiary"` on buttons.
+Apply a background color to the card using the `background` prop. When using a background, consider using `variant="inverse"` on buttons.
 
 ```jsx live
 function Example() {
@@ -186,7 +186,7 @@ function Example() {
             <RemoteImage src={assets.eth.imageUrl} />
             <RemoteImage src={assets.btc.imageUrl} />
           </RemoteImageGroup>
-          <Button compact variant="tertiary">
+          <Button compact variant="inverse">
             Share
           </Button>
         </ContentCardFooter>
@@ -259,9 +259,9 @@ function Example() {
           <HStack alignItems="center" gap={1}>
             <Avatar src={assets.btc.imageUrl} size="xl" />
             <VStack>
-              <TextLegal as="span" color="fgMuted">
+              <Text as="span" font="legal" color="fgMuted">
                 Reward
-              </TextLegal>
+              </Text>
               <Text as="span" font="headline">
                 +$15 ACS
               </Text>
@@ -317,7 +317,7 @@ function AccessibleCard() {
           </Text>
           <Button
             compact
-            variant="tertiary"
+            variant="inverse"
             onClick={(event) => {
               event.stopPropagation();
               alert('Button clicked - navigating...');
diff --git a/apps/docs/docs/components/cards/ContentCardBody/_mobileExamples.mdx b/apps/docs/docs/components/cards/ContentCardBody/_mobileExamples.mdx
index 196fbfb9bc..2c566f5eac 100644
--- a/apps/docs/docs/components/cards/ContentCardBody/_mobileExamples.mdx
+++ b/apps/docs/docs/components/cards/ContentCardBody/_mobileExamples.mdx
@@ -19,7 +19,7 @@ function Example() {
                 font="label2"
                 accessibilityLabel="Up 5.12%"
                 as="p"
-                dangerouslySetColor={`rgb(${spectrum.green70})`}
+                style={{ color: `rgb(${spectrum.green70})` }}
               >
                 ↗ 5.12%
               </Text>
@@ -110,7 +110,7 @@ function Example() {
             <Text font="legal" color="fgMuted">
               P&L
             </Text>
-            <Text font="title3" dangerouslySetColor={`rgb(${spectrum.green70})`}>
+            <Text font="title3" style={{ color: `rgb(${spectrum.green70})` }}>
               +$890
             </Text>
           </VStack>
diff --git a/apps/docs/docs/components/cards/ContentCardBody/_webExamples.mdx b/apps/docs/docs/components/cards/ContentCardBody/_webExamples.mdx
index 27a7ca5d9a..3dae17ee6c 100644
--- a/apps/docs/docs/components/cards/ContentCardBody/_webExamples.mdx
+++ b/apps/docs/docs/components/cards/ContentCardBody/_webExamples.mdx
@@ -15,7 +15,7 @@
             font="label2"
             accessibilityLabel="Up 5.12%"
             as="p"
-            dangerouslySetColor="rgb(var(--green70))"
+            style={{ color: 'rgb(var(--green70))' }}
           >
             ↗ 5.12%
           </Text>
@@ -80,7 +80,7 @@ Use the `children` prop to render custom content below the title and description
         <Text font="legal" color="fgMuted">
           P&L
         </Text>
-        <Text font="title3" dangerouslySetColor="rgb(var(--green70))">
+        <Text font="title3" style={{ color: 'rgb(var(--green70))' }}>
           +$890
         </Text>
       </VStack>
diff --git a/apps/docs/docs/components/cards/DataCard/_mobileExamples.mdx b/apps/docs/docs/components/cards/DataCard/_mobileExamples.mdx
index bbffb5e660..f76c6f6777 100644
--- a/apps/docs/docs/components/cards/DataCard/_mobileExamples.mdx
+++ b/apps/docs/docs/components/cards/DataCard/_mobileExamples.mdx
@@ -28,7 +28,7 @@ function Example() {
         thumbnail={exampleThumbnail}
         title="Progress Bar Card"
         titleAccessory={
-          <Text dangerouslySetColor={`rgb(${spectrum.green70})`} font="label1">
+          <Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
             ↗ 25.25%
           </Text>
         }
@@ -211,7 +211,7 @@ function Example() {
         thumbnail={exampleThumbnail}
         title="Positive Trend"
         titleAccessory={
-          <Text dangerouslySetColor={`rgb(${spectrum.green70})`} font="label1">
+          <Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
             ↗ 8.5%
           </Text>
         }
@@ -284,7 +284,7 @@ function Example() {
         thumbnail={exampleThumbnail}
         title="Tap to View Details"
         titleAccessory={
-          <Text dangerouslySetColor={`rgb(${spectrum.green70})`} font="label1">
+          <Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
             ↗ 8.5%
           </Text>
         }
@@ -423,7 +423,7 @@ function Example() {
         thumbnail={exampleThumbnail}
         title="Steps Today"
         titleAccessory={
-          <Text dangerouslySetColor={`rgb(${spectrum.green70})`} font="label1">
+          <Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
             6,500 / 10,000
           </Text>
         }
@@ -535,7 +535,7 @@ const { spectrum } = useTheme();
 {
   /* Gain text */
 }
-<Text dangerouslySetColor={`rgb(${spectrum.green70})`} font="label1">
+<Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
   ↗ 12.5%
 </Text>;
 
@@ -567,7 +567,7 @@ function Example() {
         thumbnail={exampleThumbnail}
         title="ETH Holdings"
         titleAccessory={
-          <Text dangerouslySetColor={`rgb(${spectrum.green70})`} font="label1">
+          <Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
             ↗ 12.5%
           </Text>
         }
diff --git a/apps/docs/docs/components/cards/DataCard/_webExamples.mdx b/apps/docs/docs/components/cards/DataCard/_webExamples.mdx
index eb77de43cf..98c52d96ed 100644
--- a/apps/docs/docs/components/cards/DataCard/_webExamples.mdx
+++ b/apps/docs/docs/components/cards/DataCard/_webExamples.mdx
@@ -22,7 +22,7 @@ function Example() {
         thumbnail={exampleThumbnail}
         title="Progress Bar Card"
         titleAccessory={
-          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+          <Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
             ↗ 25.25%
           </Text>
         }
@@ -143,7 +143,7 @@ function Example() {
         }
         title="Actionable Chart Card"
         titleAccessory={
-          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+          <Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
             ↗ 8.5%
           </Text>
         }
@@ -332,7 +332,7 @@ function Example() {
         thumbnail={exampleThumbnail}
         title="Positive Trend"
         titleAccessory={
-          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+          <Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
             ↗ 8.5%
           </Text>
         }
@@ -403,7 +403,7 @@ function Example() {
         thumbnail={exampleThumbnail}
         title="Click to View Details"
         titleAccessory={
-          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+          <Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
             ↗ 8.5%
           </Text>
         }
@@ -534,7 +534,7 @@ function Example() {
         thumbnail={exampleThumbnail}
         title="Steps Today"
         titleAccessory={
-          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+          <Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
             6,500 / 10,000
           </Text>
         }
@@ -661,7 +661,7 @@ When displaying gain or loss percentages in DataCard, be aware of color contrast
 {
   /* Gain text */
 }
-<Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+<Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
   ↗ 12.5%
 </Text>;
 
@@ -687,7 +687,7 @@ function Example() {
         thumbnail={exampleThumbnail}
         title="ETH Holdings"
         titleAccessory={
-          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+          <Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
             ↗ 12.5%
           </Text>
         }
diff --git a/apps/docs/docs/components/cards/DataCard/_webStyles.mdx b/apps/docs/docs/components/cards/DataCard/_webStyles.mdx
index 7e163106e5..4ebde4f5dd 100644
--- a/apps/docs/docs/components/cards/DataCard/_webStyles.mdx
+++ b/apps/docs/docs/components/cards/DataCard/_webStyles.mdx
@@ -26,7 +26,7 @@ import webStylesData from ':docgen/web/alpha/data-card/DataCard/styles-data';
       }
       title="Progress Bar Card"
       titleAccessory={
-        <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+        <Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
           ↗ 25.25%
         </Text>
       }
diff --git a/apps/docs/docs/components/cards/NudgeCard/mobileMetadata.json b/apps/docs/docs/components/cards/NudgeCard/mobileMetadata.json
index ee33ef4ad1..43cf474dea 100644
--- a/apps/docs/docs/components/cards/NudgeCard/mobileMetadata.json
+++ b/apps/docs/docs/components/cards/NudgeCard/mobileMetadata.json
@@ -21,7 +21,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/cards/UpsellCard/_mobileExamples.mdx b/apps/docs/docs/components/cards/UpsellCard/_mobileExamples.mdx
index 60783d46fe..7dad1c4b34 100644
--- a/apps/docs/docs/components/cards/UpsellCard/_mobileExamples.mdx
+++ b/apps/docs/docs/components/cards/UpsellCard/_mobileExamples.mdx
@@ -51,7 +51,7 @@ function Example() {
       onActionPress: NoopFn,
       onDismissPress: NoopFn,
       media: image,
-      dangerouslySetBackground: `rgb(${theme.spectrum.purple70})`,
+      style: { backgroundColor: `rgb(${theme.spectrum.purple70})` },
     },
     {
       title: 'Up to 3.29% APR on ETHs',
@@ -60,7 +60,7 @@ function Example() {
       onActionPress: NoopFn,
       onDismissPress: NoopFn,
       media: image,
-      dangerouslySetBackground: `rgb(${theme.spectrum.teal50})`,
+      style: { backgroundColor: `rgb(${theme.spectrum.teal50})` },
     },
     {
       title: 'Up to 3.29% APR on ETHs',
@@ -69,7 +69,7 @@ function Example() {
       onActionPress: NoopFn,
       onDismissPress: NoopFn,
       media: image,
-      dangerouslySetBackground: `rgb(${theme.spectrum.blue80})`,
+      style: { backgroundColor: `rgb(${theme.spectrum.blue80})` },
     },
     {
       title: 'Up to 3.29% APR on ETHs',
@@ -78,7 +78,7 @@ function Example() {
       onActionPress: NoopFn,
       onDismissPress: NoopFn,
       media: image,
-      dangerouslySetBackground: `rgb(${theme.spectrum.indigo70})`,
+      style: { backgroundColor: `rgb(${theme.spectrum.indigo70})` },
     },
   ];
   return (
@@ -127,7 +127,7 @@ function Example() {
           <RemoteImage source="/img/community.png" height={174} />
         </Box>
       ),
-      dangerouslySetBackground: `rgb(${spectrum.teal70})`,
+      style: { backgroundColor: `rgb(${spectrum.teal70})` },
     },
     {
       title: 'Join the community',
@@ -140,7 +140,7 @@ function Example() {
           <RemoteImage source="/img/radial.png" height={174} />
         </Box>
       ),
-      dangerouslySetBackground: `rgb(${spectrum.purple70})`,
+      style: { backgroundColor: `rgb(${spectrum.purple70})` },
     },
   ];
   return (
@@ -189,7 +189,7 @@ function Example() {
           <RemoteImage source="/img/marketing.png" height={174} />
         </Box>
       ),
-      dangerouslySetBackground: `rgb(${spectrum.blue80})`,
+      style: { backgroundColor: `rgb(${spectrum.blue80})` },
     },
     {
       title: 'Coinbase Card',
@@ -202,7 +202,7 @@ function Example() {
           <RemoteImage source="/img/object.png" height={174} />
         </Box>
       ),
-      dangerouslySetBackground: `rgb(${spectrum.gray100})`,
+      style: { backgroundColor: `rgb(${spectrum.gray100})` },
     },
   ];
   return (
@@ -251,7 +251,7 @@ function Example() {
           <RemoteImage source="/img/place.png" height={196} />
         </Box>
       ),
-      dangerouslySetBackground: `rgb(${spectrum.gray100})`,
+      style: { backgroundColor: `rgb(${spectrum.gray100})` },
     },
     {
       title: 'Help defend crypto in America',
@@ -264,7 +264,7 @@ function Example() {
           <RemoteImage source="/img/place.png" height={196} />
         </Box>
       ),
-      dangerouslySetBackground: `rgb(${spectrum.indigo70})`,
+      style: { backgroundColor: `rgb(${spectrum.indigo70})` },
     },
   ];
   return (
diff --git a/apps/docs/docs/components/cards/UpsellCard/_webExamples.mdx b/apps/docs/docs/components/cards/UpsellCard/_webExamples.mdx
index b7f04c0db5..cbaf0bead9 100644
--- a/apps/docs/docs/components/cards/UpsellCard/_webExamples.mdx
+++ b/apps/docs/docs/components/cards/UpsellCard/_webExamples.mdx
@@ -49,7 +49,7 @@ function Example() {
       onActionPress: NoopFn,
       onDismissPress: NoopFn,
       media: image,
-      dangerouslySetBackground: 'rgb(var(--purple70))',
+      style: { backgroundColor: 'rgb(var(--purple70))' },
     },
     {
       title: 'Up to 3.29% APR on ETHs',
@@ -58,7 +58,7 @@ function Example() {
       onActionPress: NoopFn,
       onDismissPress: NoopFn,
       media: image,
-      dangerouslySetBackground: 'rgb(var(--teal50))',
+      style: { backgroundColor: 'rgb(var(--teal50))' },
     },
     {
       title: 'Up to 3.29% APR on ETHs',
@@ -67,7 +67,7 @@ function Example() {
       onActionPress: NoopFn,
       onDismissPress: NoopFn,
       media: image,
-      dangerouslySetBackground: 'rgb(var(--blue80))',
+      style: { backgroundColor: 'rgb(var(--blue80))' },
     },
     {
       title: 'Up to 3.29% APR on ETHs',
@@ -76,7 +76,7 @@ function Example() {
       onActionPress: NoopFn,
       onDismissPress: NoopFn,
       media: image,
-      dangerouslySetBackground: 'rgb(var(--indigo70))',
+      style: { backgroundColor: 'rgb(var(--indigo70))' },
     },
   ];
   return (
@@ -125,7 +125,7 @@ function Example() {
           <RemoteImage source="/img/community.png" height={174} />
         </Box>
       ),
-      dangerouslySetBackground: 'rgb(var(--teal70))',
+      style: { backgroundColor: 'rgb(var(--teal70))' },
     },
     {
       title: 'Join the community',
@@ -138,7 +138,7 @@ function Example() {
           <RemoteImage source="/img/radial.png" height={174} />
         </Box>
       ),
-      dangerouslySetBackground: 'rgb(var(--purple70))',
+      style: { backgroundColor: 'rgb(var(--purple70))' },
     },
   ];
   return (
@@ -187,7 +187,7 @@ function Example() {
           <RemoteImage source="/img/marketing.png" height={174} />
         </Box>
       ),
-      dangerouslySetBackground: 'rgb(var(--blue80))',
+      style: { backgroundColor: 'rgb(var(--blue80))' },
     },
     {
       title: 'Coinbase Card',
@@ -200,7 +200,7 @@ function Example() {
           <RemoteImage source="/img/object.png" height={174} />
         </Box>
       ),
-      dangerouslySetBackground: 'rgb(var(--gray100))',
+      style: { backgroundColor: 'rgb(var(--gray100))' },
     },
   ];
   return (
@@ -249,7 +249,7 @@ function Example() {
           <RemoteImage source="/img/place.png" height={196} />
         </Box>
       ),
-      dangerouslySetBackground: 'rgb(var(--gray100))',
+      style: { backgroundColor: 'rgb(var(--gray100))' },
     },
     {
       title: 'Help defend crypto in America',
@@ -262,7 +262,7 @@ function Example() {
           <RemoteImage source="/img/place.png" height={196} />
         </Box>
       ),
-      dangerouslySetBackground: 'rgb(var(--indigo70))',
+      style: { backgroundColor: 'rgb(var(--indigo70))' },
     },
   ];
   return (
diff --git a/apps/docs/docs/components/charts/AreaChart/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/AreaChart/_mobilePropsTable.mdx
index 9687b2be48..41df3b54ee 100644
--- a/apps/docs/docs/components/charts/AreaChart/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/AreaChart/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/chart/area/AreaChart/data';
+import mobilePropsData from ':docgen/mobile/visualizations/chart/area/AreaChart/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/AreaChart/_webPropsTable.mdx b/apps/docs/docs/components/charts/AreaChart/_webPropsTable.mdx
index 80a5cf6ba3..0c160c8b93 100644
--- a/apps/docs/docs/components/charts/AreaChart/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/AreaChart/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/chart/area/AreaChart/data';
+import webPropsData from ':docgen/web/visualizations/chart/area/AreaChart/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/AreaChart/index.mdx b/apps/docs/docs/components/charts/AreaChart/index.mdx
index f5930a0857..a16cbc4b56 100644
--- a/apps/docs/docs/components/charts/AreaChart/index.mdx
+++ b/apps/docs/docs/components/charts/AreaChart/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/chart/area/AreaChart/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/chart/area/AreaChart/toc-props';
+import webPropsToc from ':docgen/web/visualizations/chart/area/AreaChart/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/chart/area/AreaChart/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/AreaChart/mobileMetadata.json b/apps/docs/docs/components/charts/AreaChart/mobileMetadata.json
index 56b3b67cbb..73ba8f0e53 100644
--- a/apps/docs/docs/components/charts/AreaChart/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/AreaChart/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { AreaChart } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/area/AreaChart.tsx",
+  "import": "import { AreaChart } from '@coinbase/cds-mobile/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/chart/area/AreaChart.tsx",
   "description": "A chart component that displays data as filled areas beneath lines. Ideal for showing cumulative values, stacked data, or emphasizing volume over time.",
   "relatedComponents": [
     {
@@ -27,15 +27,15 @@
   "dependencies": [
     {
       "name": "@shopify/react-native-skia",
-      "version": "^1.12.4 || ^2.0.0"
+      "version": "2.2.12"
     },
     {
       "name": "react-native-gesture-handler",
-      "version": "^2.16.2"
+      "version": "2.28.0"
     },
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/AreaChart/webMetadata.json b/apps/docs/docs/components/charts/AreaChart/webMetadata.json
index b23760aad8..f0c0e4de30 100644
--- a/apps/docs/docs/components/charts/AreaChart/webMetadata.json
+++ b/apps/docs/docs/components/charts/AreaChart/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { AreaChart } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/area/AreaChart.tsx",
+  "import": "import { AreaChart } from '@coinbase/cds-web/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/chart/area/AreaChart.tsx",
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-chart-areachart--all",
   "description": "A chart component that displays data as filled areas beneath lines. Ideal for showing cumulative values, stacked data, or emphasizing volume over time.",
   "relatedComponents": [
diff --git a/apps/docs/docs/components/charts/BarChart/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/BarChart/_mobilePropsTable.mdx
index 6b5c8a67fa..a8ea04f40b 100644
--- a/apps/docs/docs/components/charts/BarChart/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/BarChart/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/chart/bar/BarChart/data';
+import mobilePropsData from ':docgen/mobile/visualizations/chart/bar/BarChart/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/BarChart/_webPropsTable.mdx b/apps/docs/docs/components/charts/BarChart/_webPropsTable.mdx
index f1b9df345c..c630b92244 100644
--- a/apps/docs/docs/components/charts/BarChart/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/BarChart/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/chart/bar/BarChart/data';
+import webPropsData from ':docgen/web/visualizations/chart/bar/BarChart/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/BarChart/index.mdx b/apps/docs/docs/components/charts/BarChart/index.mdx
index c478fcecb2..b224f4d4e6 100644
--- a/apps/docs/docs/components/charts/BarChart/index.mdx
+++ b/apps/docs/docs/components/charts/BarChart/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/chart/bar/BarChart/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/chart/bar/BarChart/toc-props';
+import webPropsToc from ':docgen/web/visualizations/chart/bar/BarChart/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/chart/bar/BarChart/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/BarChart/mobileMetadata.json b/apps/docs/docs/components/charts/BarChart/mobileMetadata.json
index f46f2c24da..460cb9c83a 100644
--- a/apps/docs/docs/components/charts/BarChart/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/BarChart/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { BarChart } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/bar/BarChart.tsx",
+  "import": "import { BarChart } from '@coinbase/cds-mobile/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/chart/bar/BarChart.tsx",
   "description": "A bar chart component for comparing values across categories. Supports horizontal and vertical orientations, stacked bars, and grouped series.",
   "relatedComponents": [
     {
@@ -19,15 +19,15 @@
   "dependencies": [
     {
       "name": "@shopify/react-native-skia",
-      "version": "^1.12.4 || ^2.0.0"
+      "version": "2.2.12"
     },
     {
       "name": "react-native-gesture-handler",
-      "version": "^2.16.2"
+      "version": "2.28.0"
     },
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/BarChart/webMetadata.json b/apps/docs/docs/components/charts/BarChart/webMetadata.json
index 633c6ff959..6e98377968 100644
--- a/apps/docs/docs/components/charts/BarChart/webMetadata.json
+++ b/apps/docs/docs/components/charts/BarChart/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { BarChart } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/bar/BarChart.tsx",
+  "import": "import { BarChart } from '@coinbase/cds-web/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/chart/bar/BarChart.tsx",
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-chart-barchart--all",
   "description": "A bar chart component for comparing values across categories. Supports horizontal and vertical orientations, stacked bars, and grouped series.",
   "relatedComponents": [
diff --git a/apps/docs/docs/components/charts/CartesianChart/_mobileExamples.mdx b/apps/docs/docs/components/charts/CartesianChart/_mobileExamples.mdx
index 1ed1a7224b..2eab2cef2b 100644
--- a/apps/docs/docs/components/charts/CartesianChart/_mobileExamples.mdx
+++ b/apps/docs/docs/components/charts/CartesianChart/_mobileExamples.mdx
@@ -63,7 +63,7 @@ CartesianChart is a customizable, `@shopify/react-native-skia` based component t
 All charts use Skia Canvas for rendering, which requires a context bridge to share React contexts with the Skia renderer. You need to wrap your app with `ChartBridgeProvider` at the root of your app to enable charts to access theme and chart contexts.
 
 ```jsx
-import { ChartBridgeProvider } from '@coinbase/cds-mobile-visualization/chart';
+import { ChartBridgeProvider } from '@coinbase/cds-mobile/visualizations/chart';
 import { ThemeProvider } from '@coinbase/cds-mobile/system/ThemeProvider';
 
 function App() {
diff --git a/apps/docs/docs/components/charts/CartesianChart/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/CartesianChart/_mobilePropsTable.mdx
index 19ba0be33c..984c9522c1 100644
--- a/apps/docs/docs/components/charts/CartesianChart/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/CartesianChart/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/chart/CartesianChart/data';
+import mobilePropsData from ':docgen/mobile/visualizations/chart/CartesianChart/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/CartesianChart/_webPropsTable.mdx b/apps/docs/docs/components/charts/CartesianChart/_webPropsTable.mdx
index f3bc691def..565f6a728d 100644
--- a/apps/docs/docs/components/charts/CartesianChart/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/CartesianChart/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/chart/CartesianChart/data';
+import webPropsData from ':docgen/web/visualizations/chart/CartesianChart/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/CartesianChart/index.mdx b/apps/docs/docs/components/charts/CartesianChart/index.mdx
index 862093fac5..2b3671da51 100644
--- a/apps/docs/docs/components/charts/CartesianChart/index.mdx
+++ b/apps/docs/docs/components/charts/CartesianChart/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/chart/CartesianChart/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/chart/CartesianChart/toc-props';
+import webPropsToc from ':docgen/web/visualizations/chart/CartesianChart/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/chart/CartesianChart/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/CartesianChart/mobileMetadata.json b/apps/docs/docs/components/charts/CartesianChart/mobileMetadata.json
index abaf43dac8..4737ac1eb6 100644
--- a/apps/docs/docs/components/charts/CartesianChart/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/CartesianChart/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { CartesianChart } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/CartesianChart.tsx",
+  "import": "import { CartesianChart } from '@coinbase/cds-mobile/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/chart/CartesianChart.tsx",
   "description": "A flexible, low-level chart component for displaying data in an x/y coordinate space. Provides a foundation for building custom chart visualizations with full control over rendering.",
   "relatedComponents": [
     {
@@ -27,15 +27,15 @@
   "dependencies": [
     {
       "name": "@shopify/react-native-skia",
-      "version": "^1.12.4 || ^2.0.0"
+      "version": "2.2.12"
     },
     {
       "name": "react-native-gesture-handler",
-      "version": "^2.16.2"
+      "version": "2.28.0"
     },
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/CartesianChart/webMetadata.json b/apps/docs/docs/components/charts/CartesianChart/webMetadata.json
index 3b029ade16..f513d066f4 100644
--- a/apps/docs/docs/components/charts/CartesianChart/webMetadata.json
+++ b/apps/docs/docs/components/charts/CartesianChart/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { CartesianChart } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/CartesianChart.tsx",
+  "import": "import { CartesianChart } from '@coinbase/cds-web/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/chart/CartesianChart.tsx",
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-chart-cartesianchart--miscellaneous",
   "description": "A flexible, low-level chart component for displaying data in an x/y coordinate space. Provides a foundation for building custom chart visualizations with full control over rendering.",
   "relatedComponents": [
diff --git a/apps/docs/docs/components/charts/Legend/_mobileExamples.mdx b/apps/docs/docs/components/charts/Legend/_mobileExamples.mdx
index c2b1627927..69f05a38ed 100644
--- a/apps/docs/docs/components/charts/Legend/_mobileExamples.mdx
+++ b/apps/docs/docs/components/charts/Legend/_mobileExamples.mdx
@@ -460,8 +460,8 @@ function DynamicLabel() {
       return (
         <HStack gap={1} style={{ alignItems: 'center' }}>
           <DefaultLegendShape color={color} shape={shape} />
-          <TextLabel2>{label}</TextLabel2>
-          <TextLabel1>{formattedValue}</TextLabel1>
+          <Text font="label2">{label}</Text>
+          <Text font="label1">{formattedValue}</Text>
         </HStack>
       );
     },
@@ -568,7 +568,9 @@ function InteractiveLegend() {
       >
         <HStack gap={1} style={{ alignItems: 'center' }}>
           <DefaultLegendShape color={`rgb(${color50})`} />
-          <TextLabel2 color={isEmphasized ? 'bg' : 'fg'}>{label}</TextLabel2>
+          <Text font="label2" color={isEmphasized ? 'bg' : 'fg'}>
+            {label}
+          </Text>
         </HStack>
       </Chip>
     );
diff --git a/apps/docs/docs/components/charts/Legend/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/Legend/_mobilePropsTable.mdx
index 60808a42b4..f02baa9eec 100644
--- a/apps/docs/docs/components/charts/Legend/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/Legend/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/chart/legend/Legend/data';
+import mobilePropsData from ':docgen/mobile/visualizations/chart/legend/Legend/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/Legend/_webPropsTable.mdx b/apps/docs/docs/components/charts/Legend/_webPropsTable.mdx
index 7b21df026f..16accd8131 100644
--- a/apps/docs/docs/components/charts/Legend/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/Legend/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/chart/legend/Legend/data';
+import webPropsData from ':docgen/web/visualizations/chart/legend/Legend/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/Legend/_webStyles.mdx b/apps/docs/docs/components/charts/Legend/_webStyles.mdx
index 4374db998e..6cc99d163e 100644
--- a/apps/docs/docs/components/charts/Legend/_webStyles.mdx
+++ b/apps/docs/docs/components/charts/Legend/_webStyles.mdx
@@ -1,8 +1,8 @@
 import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable';
 import { StylesExplorer } from '@site/src/components/page/StylesExplorer';
-import { Legend, LineChart } from '@coinbase/cds-web-visualization';
+import { Legend, LineChart } from '@coinbase/cds-web/visualizations/chart';
 
-import webStylesData from ':docgen/web-visualization/chart/legend/Legend/styles-data';
+import webStylesData from ':docgen/web/visualizations/chart/legend/Legend/styles-data';
 
 ## Explorer
 
diff --git a/apps/docs/docs/components/charts/Legend/index.mdx b/apps/docs/docs/components/charts/Legend/index.mdx
index 68b893552e..7fedbc95a6 100644
--- a/apps/docs/docs/components/charts/Legend/index.mdx
+++ b/apps/docs/docs/components/charts/Legend/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/chart/legend/Legend/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/chart/legend/Legend/toc-props';
+import webPropsToc from ':docgen/web/visualizations/chart/legend/Legend/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/chart/legend/Legend/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/Legend/mobileMetadata.json b/apps/docs/docs/components/charts/Legend/mobileMetadata.json
index 7ce6bbd017..de61a5e9df 100644
--- a/apps/docs/docs/components/charts/Legend/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/Legend/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { Legend } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/legend/Legend.tsx",
+  "import": "import { Legend } from '@coinbase/cds-mobile/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/chart/legend/Legend.tsx",
   "description": "A legend component for displaying series information in charts. Supports customizable shapes, layouts, and custom item components.",
   "relatedComponents": [
     {
@@ -19,7 +19,7 @@
   "dependencies": [
     {
       "name": "@shopify/react-native-skia",
-      "version": "^1.12.4 || ^2.0.0"
+      "version": "2.2.12"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/Legend/webMetadata.json b/apps/docs/docs/components/charts/Legend/webMetadata.json
index 10d2b3ad05..2c5829ce29 100644
--- a/apps/docs/docs/components/charts/Legend/webMetadata.json
+++ b/apps/docs/docs/components/charts/Legend/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { Legend } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/legend/Legend.tsx",
+  "import": "import { Legend } from '@coinbase/cds-web/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/chart/legend/Legend.tsx",
   "description": "A legend component for displaying series information in charts. Supports customizable shapes, layouts, and custom item components.",
   "relatedComponents": [
     {
diff --git a/apps/docs/docs/components/charts/LineChart/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/LineChart/_mobilePropsTable.mdx
index 920e5e8944..6686ad7950 100644
--- a/apps/docs/docs/components/charts/LineChart/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/LineChart/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/chart/line/LineChart/data';
+import mobilePropsData from ':docgen/mobile/visualizations/chart/line/LineChart/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/LineChart/_webPropsTable.mdx b/apps/docs/docs/components/charts/LineChart/_webPropsTable.mdx
index 771792ea6a..9069247fc3 100644
--- a/apps/docs/docs/components/charts/LineChart/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/LineChart/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/chart/line/LineChart/data';
+import webPropsData from ':docgen/web/visualizations/chart/line/LineChart/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/LineChart/index.mdx b/apps/docs/docs/components/charts/LineChart/index.mdx
index 81b81e496d..ed61e4195a 100644
--- a/apps/docs/docs/components/charts/LineChart/index.mdx
+++ b/apps/docs/docs/components/charts/LineChart/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/chart/line/LineChart/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/chart/line/LineChart/toc-props';
+import webPropsToc from ':docgen/web/visualizations/chart/line/LineChart/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/chart/line/LineChart/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/LineChart/mobileMetadata.json b/apps/docs/docs/components/charts/LineChart/mobileMetadata.json
index 519805196f..fa6a6a85f6 100644
--- a/apps/docs/docs/components/charts/LineChart/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/LineChart/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { LineChart } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/line/LineChart.tsx",
+  "import": "import { LineChart } from '@coinbase/cds-mobile/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/chart/line/LineChart.tsx",
   "description": "A flexible line chart component for displaying data trends over time. Supports multiple series, custom curves, areas, scrubbing, and interactive data exploration.",
   "relatedComponents": [
     {
@@ -31,15 +31,15 @@
   "dependencies": [
     {
       "name": "@shopify/react-native-skia",
-      "version": "^1.12.4 || ^2.0.0"
+      "version": "2.2.12"
     },
     {
       "name": "react-native-gesture-handler",
-      "version": "^2.16.2"
+      "version": "2.28.0"
     },
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/LineChart/webMetadata.json b/apps/docs/docs/components/charts/LineChart/webMetadata.json
index 1854a03e78..cb02bf6412 100644
--- a/apps/docs/docs/components/charts/LineChart/webMetadata.json
+++ b/apps/docs/docs/components/charts/LineChart/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { LineChart } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/line/LineChart.tsx",
+  "import": "import { LineChart } from '@coinbase/cds-web/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/chart/line/LineChart.tsx",
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-chart-linechart--all",
   "description": "A flexible line chart component for displaying data trends over time. Supports multiple series, custom curves, areas, scrubbing, and interactive data exploration.",
   "relatedComponents": [
diff --git a/apps/docs/docs/components/charts/PercentageBarChart/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/PercentageBarChart/_mobilePropsTable.mdx
index d0fe2d5718..e843aa61c6 100644
--- a/apps/docs/docs/components/charts/PercentageBarChart/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/PercentageBarChart/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/chart/bar/PercentageBarChart/data';
+import mobilePropsData from ':docgen/mobile/visualizations/chart/bar/PercentageBarChart/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/PercentageBarChart/_webPropsTable.mdx b/apps/docs/docs/components/charts/PercentageBarChart/_webPropsTable.mdx
index 3e51b3bfd7..8cc5891f23 100644
--- a/apps/docs/docs/components/charts/PercentageBarChart/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/PercentageBarChart/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/chart/bar/PercentageBarChart/data';
+import webPropsData from ':docgen/web/visualizations/chart/bar/PercentageBarChart/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/PercentageBarChart/index.mdx b/apps/docs/docs/components/charts/PercentageBarChart/index.mdx
index 1443fa76ee..927cec3dd8 100644
--- a/apps/docs/docs/components/charts/PercentageBarChart/index.mdx
+++ b/apps/docs/docs/components/charts/PercentageBarChart/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/chart/bar/PercentageBarChart/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/chart/bar/PercentageBarChart/toc-props';
+import webPropsToc from ':docgen/web/visualizations/chart/bar/PercentageBarChart/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/chart/bar/PercentageBarChart/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/PercentageBarChart/mobileMetadata.json b/apps/docs/docs/components/charts/PercentageBarChart/mobileMetadata.json
index e63d6b58f4..f4143ca4e6 100644
--- a/apps/docs/docs/components/charts/PercentageBarChart/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/PercentageBarChart/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { PercentageBarChart } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx",
+  "import": "import { PercentageBarChart } from '@coinbase/cds-mobile/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/chart/bar/PercentageBarChart.tsx",
   "description": "A bar chart component for comparing share or mix across categories as percentages. Supports horizontal and vertical orientations, 100% stacked bars, and a fixed 0–100% value axis.",
   "relatedComponents": [
     {
@@ -23,15 +23,15 @@
   "dependencies": [
     {
       "name": "@shopify/react-native-skia",
-      "version": "^1.12.4 || ^2.0.0"
+      "version": "2.2.12"
     },
     {
       "name": "react-native-gesture-handler",
-      "version": "^2.16.2"
+      "version": "2.28.0"
     },
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/PercentageBarChart/webMetadata.json b/apps/docs/docs/components/charts/PercentageBarChart/webMetadata.json
index 8136f16db8..30e8b27e55 100644
--- a/apps/docs/docs/components/charts/PercentageBarChart/webMetadata.json
+++ b/apps/docs/docs/components/charts/PercentageBarChart/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { PercentageBarChart } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/bar/PercentageBarChart.tsx",
+  "import": "import { PercentageBarChart } from '@coinbase/cds-web/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/chart/bar/PercentageBarChart.tsx",
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-chart-percentagebarchart--all",
   "description": "A bar chart component for comparing share or mix across categories as percentages. Supports horizontal and vertical orientations, 100% stacked bars, and a fixed 0–100% value axis.",
   "relatedComponents": [
diff --git a/apps/docs/docs/components/charts/PeriodSelector/_mobileExamples.mdx b/apps/docs/docs/components/charts/PeriodSelector/_mobileExamples.mdx
index b97f3d8639..4111a7e4cd 100644
--- a/apps/docs/docs/components/charts/PeriodSelector/_mobileExamples.mdx
+++ b/apps/docs/docs/components/charts/PeriodSelector/_mobileExamples.mdx
@@ -164,7 +164,7 @@ function Example() {
 
       const wrappedLabel =
         typeof label === 'string' ? (
-          <Text font="label1" dangerouslySetColor={isActive ? btcColor : theme.color.fg}>
+          <Text font="label1" style={{ color: isActive ? btcColor : theme.color.fg }}>
             {label}
           </Text>
         ) : (
diff --git a/apps/docs/docs/components/charts/PeriodSelector/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/PeriodSelector/_mobilePropsTable.mdx
index 1f1a39ad64..644ba4b43a 100644
--- a/apps/docs/docs/components/charts/PeriodSelector/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/PeriodSelector/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/chart/PeriodSelector/data';
+import mobilePropsData from ':docgen/mobile/visualizations/chart/PeriodSelector/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/PeriodSelector/_mobileStyles.mdx b/apps/docs/docs/components/charts/PeriodSelector/_mobileStyles.mdx
index fd336d8f78..1fefbdc10c 100644
--- a/apps/docs/docs/components/charts/PeriodSelector/_mobileStyles.mdx
+++ b/apps/docs/docs/components/charts/PeriodSelector/_mobileStyles.mdx
@@ -1,6 +1,6 @@
 import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable';
 
-import mobileStylesData from ':docgen/mobile-visualization/chart/PeriodSelector/styles-data';
+import mobileStylesData from ':docgen/mobile/visualizations/chart/PeriodSelector/styles-data';
 
 ## Selectors
 
diff --git a/apps/docs/docs/components/charts/PeriodSelector/_webPropsTable.mdx b/apps/docs/docs/components/charts/PeriodSelector/_webPropsTable.mdx
index 13a77f9d11..d33898a552 100644
--- a/apps/docs/docs/components/charts/PeriodSelector/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/PeriodSelector/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/chart/PeriodSelector/data';
+import webPropsData from ':docgen/web/visualizations/chart/PeriodSelector/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/PeriodSelector/_webStyles.mdx b/apps/docs/docs/components/charts/PeriodSelector/_webStyles.mdx
index bee623a5a6..b2732238f8 100644
--- a/apps/docs/docs/components/charts/PeriodSelector/_webStyles.mdx
+++ b/apps/docs/docs/components/charts/PeriodSelector/_webStyles.mdx
@@ -1,9 +1,9 @@
 import { useState, useCallback } from 'react';
 import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable';
 import { StylesExplorer } from '@site/src/components/page/StylesExplorer';
-import { PeriodSelector } from '@coinbase/cds-web-visualization/chart/PeriodSelector';
+import { PeriodSelector } from '@coinbase/cds-web/visualizations/chart';
 
-import webStylesData from ':docgen/web-visualization/chart/PeriodSelector/styles-data';
+import webStylesData from ':docgen/web/visualizations/chart/PeriodSelector/styles-data';
 
 export const PeriodSelectorExample = ({ classNames }) => {
   const tabs = [
diff --git a/apps/docs/docs/components/charts/PeriodSelector/index.mdx b/apps/docs/docs/components/charts/PeriodSelector/index.mdx
index b2ea468716..f982aced9c 100644
--- a/apps/docs/docs/components/charts/PeriodSelector/index.mdx
+++ b/apps/docs/docs/components/charts/PeriodSelector/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/chart/PeriodSelector/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/chart/PeriodSelector/toc-props';
+import webPropsToc from ':docgen/web/visualizations/chart/PeriodSelector/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/chart/PeriodSelector/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/PeriodSelector/mobileMetadata.json b/apps/docs/docs/components/charts/PeriodSelector/mobileMetadata.json
index b1423df754..270b2774dd 100644
--- a/apps/docs/docs/components/charts/PeriodSelector/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/PeriodSelector/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { PeriodSelector } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/PeriodSelector.tsx",
+  "import": "import { PeriodSelector } from '@coinbase/cds-mobile/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/chart/PeriodSelector.tsx",
   "description": "A selector component for choosing time periods in charts.",
   "relatedComponents": [
     {
@@ -15,7 +15,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/PeriodSelector/webMetadata.json b/apps/docs/docs/components/charts/PeriodSelector/webMetadata.json
index 1e28ce12ea..a4ceb7e63d 100644
--- a/apps/docs/docs/components/charts/PeriodSelector/webMetadata.json
+++ b/apps/docs/docs/components/charts/PeriodSelector/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { PeriodSelector } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/PeriodSelector.tsx",
+  "import": "import { PeriodSelector } from '@coinbase/cds-web/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/chart/PeriodSelector.tsx",
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-chart-periodselector--all",
   "description": "A selector component for choosing time periods in charts.",
   "relatedComponents": [
diff --git a/apps/docs/docs/components/charts/Point/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/Point/_mobilePropsTable.mdx
index 95e81f6300..8ac209a3e4 100644
--- a/apps/docs/docs/components/charts/Point/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/Point/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/chart/point/Point/data';
+import mobilePropsData from ':docgen/mobile/visualizations/chart/point/Point/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/Point/_webPropsTable.mdx b/apps/docs/docs/components/charts/Point/_webPropsTable.mdx
index 14757ffce9..dd5f6ac626 100644
--- a/apps/docs/docs/components/charts/Point/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/Point/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/chart/point/Point/data';
+import webPropsData from ':docgen/web/visualizations/chart/point/Point/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/Point/index.mdx b/apps/docs/docs/components/charts/Point/index.mdx
index 8df3e270df..4569e0abfa 100644
--- a/apps/docs/docs/components/charts/Point/index.mdx
+++ b/apps/docs/docs/components/charts/Point/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/chart/point/Point/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/chart/point/Point/toc-props';
+import webPropsToc from ':docgen/web/visualizations/chart/point/Point/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/chart/point/Point/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/Point/mobileMetadata.json b/apps/docs/docs/components/charts/Point/mobileMetadata.json
index c198727fe7..b352fc5baa 100644
--- a/apps/docs/docs/components/charts/Point/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/Point/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { Point } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/Point.tsx",
+  "import": "import { Point } from '@coinbase/cds-mobile/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/chart/Point.tsx",
   "description": "Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and labels.",
   "relatedComponents": [
     {
@@ -15,11 +15,11 @@
   "dependencies": [
     {
       "name": "@shopify/react-native-skia",
-      "version": "^1.12.4 || ^2.0.0"
+      "version": "2.2.12"
     },
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/Point/webMetadata.json b/apps/docs/docs/components/charts/Point/webMetadata.json
index 1334831df4..32e6f76a01 100644
--- a/apps/docs/docs/components/charts/Point/webMetadata.json
+++ b/apps/docs/docs/components/charts/Point/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { Point } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/Point.tsx",
+  "import": "import { Point } from '@coinbase/cds-web/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/chart/Point.tsx",
   "description": "Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and interactivity.",
   "relatedComponents": [
     {
diff --git a/apps/docs/docs/components/charts/ReferenceLine/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/ReferenceLine/_mobilePropsTable.mdx
index 1415df3c7d..05d93597b3 100644
--- a/apps/docs/docs/components/charts/ReferenceLine/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/ReferenceLine/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/chart/line/ReferenceLine/data';
+import mobilePropsData from ':docgen/mobile/visualizations/chart/line/ReferenceLine/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/ReferenceLine/_webPropsTable.mdx b/apps/docs/docs/components/charts/ReferenceLine/_webPropsTable.mdx
index ec0e25e4b1..e90d165b12 100644
--- a/apps/docs/docs/components/charts/ReferenceLine/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/ReferenceLine/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/chart/scrubber/Scrubber/data';
+import webPropsData from ':docgen/web/visualizations/chart/scrubber/Scrubber/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/ReferenceLine/index.mdx b/apps/docs/docs/components/charts/ReferenceLine/index.mdx
index 7b01467581..d162cfc670 100644
--- a/apps/docs/docs/components/charts/ReferenceLine/index.mdx
+++ b/apps/docs/docs/components/charts/ReferenceLine/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/chart/line/ReferenceLine/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/chart/line/ReferenceLine/toc-props';
+import webPropsToc from ':docgen/web/visualizations/chart/line/ReferenceLine/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/chart/line/ReferenceLine/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/ReferenceLine/mobileMetadata.json b/apps/docs/docs/components/charts/ReferenceLine/mobileMetadata.json
index e624da923a..54a1fb837f 100644
--- a/apps/docs/docs/components/charts/ReferenceLine/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/ReferenceLine/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { ReferenceLine } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/line/ReferenceLine.tsx",
+  "import": "import { ReferenceLine } from '@coinbase/cds-mobile/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/chart/line/ReferenceLine.tsx",
   "description": "A horizontal or vertical reference line to mark important values on a chart, such as targets, thresholds, or baseline values.",
   "relatedComponents": [
     {
@@ -11,11 +11,11 @@
   "dependencies": [
     {
       "name": "@shopify/react-native-skia",
-      "version": "^1.12.4 || ^2.0.0"
+      "version": "2.2.12"
     },
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/ReferenceLine/webMetadata.json b/apps/docs/docs/components/charts/ReferenceLine/webMetadata.json
index 1b630e43c9..d33c47eee4 100644
--- a/apps/docs/docs/components/charts/ReferenceLine/webMetadata.json
+++ b/apps/docs/docs/components/charts/ReferenceLine/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { ReferenceLine } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/line/ReferenceLine.tsx",
+  "import": "import { ReferenceLine } from '@coinbase/cds-web/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/chart/line/ReferenceLine.tsx",
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-chart-referenceline--all",
   "description": "A horizontal or vertical reference line to mark important values on a chart, such as targets, thresholds, or baseline values.",
   "relatedComponents": [
diff --git a/apps/docs/docs/components/charts/Scrubber/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/Scrubber/_mobilePropsTable.mdx
index e7c78e6279..044c735380 100644
--- a/apps/docs/docs/components/charts/Scrubber/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/Scrubber/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/chart/scrubber/Scrubber/data';
+import mobilePropsData from ':docgen/mobile/visualizations/chart/scrubber/Scrubber/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/Scrubber/_webPropsTable.mdx b/apps/docs/docs/components/charts/Scrubber/_webPropsTable.mdx
index ec0e25e4b1..e90d165b12 100644
--- a/apps/docs/docs/components/charts/Scrubber/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/Scrubber/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/chart/scrubber/Scrubber/data';
+import webPropsData from ':docgen/web/visualizations/chart/scrubber/Scrubber/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/Scrubber/_webStyles.mdx b/apps/docs/docs/components/charts/Scrubber/_webStyles.mdx
index e6184834d8..3b06cdd6b4 100644
--- a/apps/docs/docs/components/charts/Scrubber/_webStyles.mdx
+++ b/apps/docs/docs/components/charts/Scrubber/_webStyles.mdx
@@ -1,8 +1,8 @@
 import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable';
 import { StylesExplorer } from '@site/src/components/page/StylesExplorer';
-import { LineChart, Scrubber } from '@coinbase/cds-web-visualization';
+import { LineChart, Scrubber } from '@coinbase/cds-web/visualizations/chart';
 
-import webStylesData from ':docgen/web-visualization/chart/scrubber/Scrubber/styles-data';
+import webStylesData from ':docgen/web/visualizations/chart/scrubber/Scrubber/styles-data';
 
 ## Explorer
 
diff --git a/apps/docs/docs/components/charts/Scrubber/index.mdx b/apps/docs/docs/components/charts/Scrubber/index.mdx
index 416c9b57c1..0b07b6b946 100644
--- a/apps/docs/docs/components/charts/Scrubber/index.mdx
+++ b/apps/docs/docs/components/charts/Scrubber/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/chart/scrubber/Scrubber/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/chart/scrubber/Scrubber/toc-props';
+import webPropsToc from ':docgen/web/visualizations/chart/scrubber/Scrubber/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/chart/scrubber/Scrubber/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/Scrubber/mobileMetadata.json b/apps/docs/docs/components/charts/Scrubber/mobileMetadata.json
index 7c085dce7c..9945b5ed11 100644
--- a/apps/docs/docs/components/charts/Scrubber/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/Scrubber/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { Scrubber } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/scrubber/Scrubber.tsx",
+  "import": "import { Scrubber } from '@coinbase/cds-mobile/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/chart/scrubber/Scrubber.tsx",
   "description": "An interactive scrubber component for exploring individual data points in charts. Displays values on hover or drag and supports custom labels and formatting.",
   "relatedComponents": [
     {
@@ -15,11 +15,11 @@
   "dependencies": [
     {
       "name": "@shopify/react-native-skia",
-      "version": "^1.12.4 || ^2.0.0"
+      "version": "2.2.12"
     },
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/Scrubber/webMetadata.json b/apps/docs/docs/components/charts/Scrubber/webMetadata.json
index efe89223aa..bb07eba8f2 100644
--- a/apps/docs/docs/components/charts/Scrubber/webMetadata.json
+++ b/apps/docs/docs/components/charts/Scrubber/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { Scrubber } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/scrubber/Scrubber.tsx",
+  "import": "import { Scrubber } from '@coinbase/cds-web/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/chart/scrubber/Scrubber.tsx",
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-chart-scrubber--all",
   "description": "An interactive scrubber component for exploring individual data points in charts. Displays values on hover or drag and supports custom labels and formatting.",
   "relatedComponents": [
diff --git a/apps/docs/docs/components/charts/Sparkline/_mobileExamples.mdx b/apps/docs/docs/components/charts/Sparkline/_mobileExamples.mdx
index 995930a8f5..32aa0d09d6 100644
--- a/apps/docs/docs/components/charts/Sparkline/_mobileExamples.mdx
+++ b/apps/docs/docs/components/charts/Sparkline/_mobileExamples.mdx
@@ -46,7 +46,7 @@ function Example() {
   return (
     <VStack gap={2}>
       {assetColors.map((background) => (
-        <VStack key={background} dangerouslySetBackground={background}>
+        <VStack key={background} style={{ backgroundColor: background }}>
           <Sparkline {...dimensions} path={path} background={background} color="auto" />
         </VStack>
       ))}
diff --git a/apps/docs/docs/components/charts/Sparkline/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/Sparkline/_mobilePropsTable.mdx
index 72abd3d79b..98106a9640 100644
--- a/apps/docs/docs/components/charts/Sparkline/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/Sparkline/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/sparkline/Sparkline/data';
+import mobilePropsData from ':docgen/mobile/visualizations/sparkline/Sparkline/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/Sparkline/_webExamples.mdx b/apps/docs/docs/components/charts/Sparkline/_webExamples.mdx
index c58f25bcf9..632499112a 100644
--- a/apps/docs/docs/components/charts/Sparkline/_webExamples.mdx
+++ b/apps/docs/docs/components/charts/Sparkline/_webExamples.mdx
@@ -46,7 +46,7 @@ function Example() {
   return (
     <VStack gap={2}>
       {assetColors.map((background) => (
-        <VStack key={background} dangerouslySetBackground={background}>
+        <VStack key={background} style={{ backgroundColor: background }}>
           <Sparkline {...dimensions} path={path} background={background} color="auto" />
         </VStack>
       ))}
diff --git a/apps/docs/docs/components/charts/Sparkline/_webPropsTable.mdx b/apps/docs/docs/components/charts/Sparkline/_webPropsTable.mdx
index a7cc9f23ee..2752196d65 100644
--- a/apps/docs/docs/components/charts/Sparkline/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/Sparkline/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/sparkline/Sparkline/data';
+import webPropsData from ':docgen/web/visualizations/sparkline/Sparkline/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/Sparkline/index.mdx b/apps/docs/docs/components/charts/Sparkline/index.mdx
index d3f5948851..b671336101 100644
--- a/apps/docs/docs/components/charts/Sparkline/index.mdx
+++ b/apps/docs/docs/components/charts/Sparkline/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/sparkline/Sparkline/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/sparkline/Sparkline/toc-props';
+import webPropsToc from ':docgen/web/visualizations/sparkline/Sparkline/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/sparkline/Sparkline/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/Sparkline/mobileMetadata.json b/apps/docs/docs/components/charts/Sparkline/mobileMetadata.json
index 5644e8ea99..6e2a4410b7 100644
--- a/apps/docs/docs/components/charts/Sparkline/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/Sparkline/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { Sparkline } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/sparkline/Sparkline.tsx",
+  "import": "import { Sparkline } from '@coinbase/cds-mobile/visualizations/sparkline'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/sparkline/Sparkline.tsx",
   "description": "A small line chart component for displaying data trends.",
   "warning": "Sparkline components are deprecated. Please use LineChart instead.",
   "relatedComponents": [
@@ -16,7 +16,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/Sparkline/webMetadata.json b/apps/docs/docs/components/charts/Sparkline/webMetadata.json
index 561e15b61e..5e2ffc38c3 100644
--- a/apps/docs/docs/components/charts/Sparkline/webMetadata.json
+++ b/apps/docs/docs/components/charts/Sparkline/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { Sparkline } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/sparkline/Sparkline.tsx",
+  "import": "import { Sparkline } from '@coinbase/cds-web/visualizations/sparkline'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/sparkline/Sparkline.tsx",
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/visualization-sparklineinteractive--default",
   "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-12194",
   "description": "A small line chart component for displaying data trends.",
diff --git a/apps/docs/docs/components/charts/SparklineGradient/_mobileExamples.mdx b/apps/docs/docs/components/charts/SparklineGradient/_mobileExamples.mdx
index a53abdc832..480f5045ae 100644
--- a/apps/docs/docs/components/charts/SparklineGradient/_mobileExamples.mdx
+++ b/apps/docs/docs/components/charts/SparklineGradient/_mobileExamples.mdx
@@ -25,7 +25,7 @@ function Example() {
   return (
     <VStack gap={2}>
       {assetColors.map((background) => (
-        <VStack key={background} dangerouslySetBackground={background}>
+        <VStack key={background} style={{ backgroundColor: background }}>
           <SparklineGradient {...dimensions} path={path} background={background} color="auto" />
         </VStack>
       ))}
diff --git a/apps/docs/docs/components/charts/SparklineGradient/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/SparklineGradient/_mobilePropsTable.mdx
index 72abd3d79b..98106a9640 100644
--- a/apps/docs/docs/components/charts/SparklineGradient/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/SparklineGradient/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/sparkline/Sparkline/data';
+import mobilePropsData from ':docgen/mobile/visualizations/sparkline/Sparkline/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/SparklineGradient/_webExamples.mdx b/apps/docs/docs/components/charts/SparklineGradient/_webExamples.mdx
index 92888d5eb3..cbf11b59ed 100644
--- a/apps/docs/docs/components/charts/SparklineGradient/_webExamples.mdx
+++ b/apps/docs/docs/components/charts/SparklineGradient/_webExamples.mdx
@@ -25,7 +25,7 @@ function Example() {
   return (
     <VStack gap={2}>
       {assetColors.map((background) => (
-        <VStack key={background} dangerouslySetBackground={background}>
+        <VStack key={background} style={{ backgroundColor: background }}>
           <SparklineGradient {...dimensions} path={path} background={background} color="auto" />
         </VStack>
       ))}
diff --git a/apps/docs/docs/components/charts/SparklineGradient/_webPropsTable.mdx b/apps/docs/docs/components/charts/SparklineGradient/_webPropsTable.mdx
index a7cc9f23ee..2752196d65 100644
--- a/apps/docs/docs/components/charts/SparklineGradient/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/SparklineGradient/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/sparkline/Sparkline/data';
+import webPropsData from ':docgen/web/visualizations/sparkline/Sparkline/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/SparklineGradient/index.mdx b/apps/docs/docs/components/charts/SparklineGradient/index.mdx
index 905b87a3c1..31d64830bf 100644
--- a/apps/docs/docs/components/charts/SparklineGradient/index.mdx
+++ b/apps/docs/docs/components/charts/SparklineGradient/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/sparkline/SparklineGradient/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/sparkline/SparklineGradient/toc-props';
+import webPropsToc from ':docgen/web/visualizations/sparkline/SparklineGradient/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/sparkline/SparklineGradient/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/SparklineGradient/mobileMetadata.json b/apps/docs/docs/components/charts/SparklineGradient/mobileMetadata.json
index becd67dea0..f0213374f0 100644
--- a/apps/docs/docs/components/charts/SparklineGradient/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/SparklineGradient/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { SparklineGradient } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/sparkline/SparklineGradient.tsx",
+  "import": "import { SparklineGradient } from '@coinbase/cds-mobile/visualizations/sparkline'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/sparkline/SparklineGradient.tsx",
   "description": "A small line chart component with gradient fill below the line.",
   "warning": "Sparkline components are deprecated. Please use LineChart instead.",
   "relatedComponents": [
@@ -16,7 +16,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/SparklineGradient/webMetadata.json b/apps/docs/docs/components/charts/SparklineGradient/webMetadata.json
index e736d09522..0cc5657df2 100644
--- a/apps/docs/docs/components/charts/SparklineGradient/webMetadata.json
+++ b/apps/docs/docs/components/charts/SparklineGradient/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { SparklineGradient } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/sparkline/SparklineGradient.tsx",
+  "import": "import { SparklineGradient } from '@coinbase/cds-web/visualizations/sparkline'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/sparkline/SparklineGradient.tsx",
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/visualization-sparkline--sparkline-gradient",
   "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-12194",
   "description": "A small line chart component with gradient fill below the line.",
diff --git a/apps/docs/docs/components/charts/SparklineInteractive/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/SparklineInteractive/_mobilePropsTable.mdx
index 135937a59a..bd074eca55 100644
--- a/apps/docs/docs/components/charts/SparklineInteractive/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/SparklineInteractive/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/sparkline/sparkline-interactive/SparklineInteractive/data';
+import mobilePropsData from ':docgen/mobile/visualizations/sparkline/sparkline-interactive/SparklineInteractive/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/SparklineInteractive/_webPropsTable.mdx b/apps/docs/docs/components/charts/SparklineInteractive/_webPropsTable.mdx
index 44748aa2c3..fcd34a02c4 100644
--- a/apps/docs/docs/components/charts/SparklineInteractive/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/SparklineInteractive/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/sparkline/sparkline-interactive/SparklineInteractive/data';
+import webPropsData from ':docgen/web/visualizations/sparkline/sparkline-interactive/SparklineInteractive/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/SparklineInteractive/index.mdx b/apps/docs/docs/components/charts/SparklineInteractive/index.mdx
index b248dcb325..bbcd38291b 100644
--- a/apps/docs/docs/components/charts/SparklineInteractive/index.mdx
+++ b/apps/docs/docs/components/charts/SparklineInteractive/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/sparkline/sparkline-interactive/SparklineInteractive/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/sparkline/sparkline-interactive/SparklineInteractive/toc-props';
+import webPropsToc from ':docgen/web/visualizations/sparkline/sparkline-interactive/SparklineInteractive/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/sparkline/sparkline-interactive/SparklineInteractive/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/SparklineInteractive/mobileMetadata.json b/apps/docs/docs/components/charts/SparklineInteractive/mobileMetadata.json
index d0bafa6d7b..613b1e83ea 100644
--- a/apps/docs/docs/components/charts/SparklineInteractive/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/SparklineInteractive/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { SparklineInteractive } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractive.tsx",
+  "import": "import { SparklineInteractive } from '@coinbase/cds-mobile/visualizations/sparkline'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractive.tsx",
   "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-12194",
   "description": "The SparklineInteractive is used to display a Sparkline that has multiple time periods",
   "warning": "Sparkline components are deprecated. Please use LineChart instead.",
@@ -17,15 +17,15 @@
   "dependencies": [
     {
       "name": "react-native-gesture-handler",
-      "version": "^2.16.2"
+      "version": "2.28.0"
     },
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     },
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/SparklineInteractive/webMetadata.json b/apps/docs/docs/components/charts/SparklineInteractive/webMetadata.json
index 26c772aa6b..202b123b38 100644
--- a/apps/docs/docs/components/charts/SparklineInteractive/webMetadata.json
+++ b/apps/docs/docs/components/charts/SparklineInteractive/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { SparklineInteractive } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractive.tsx",
+  "import": "import { SparklineInteractive } from '@coinbase/cds-web/visualizations/sparkline'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractive.tsx",
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/visualization-sparklineinteractive--default",
   "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-12194",
   "description": "The SparklineInteractive is used to display a Sparkline that has multiple time periods",
diff --git a/apps/docs/docs/components/charts/SparklineInteractiveHeader/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/SparklineInteractiveHeader/_mobilePropsTable.mdx
index 786cd47d0c..11b03bcc6f 100644
--- a/apps/docs/docs/components/charts/SparklineInteractiveHeader/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/SparklineInteractiveHeader/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/sparkline/sparkline-interactive-header/SparklineInteractiveHeader/data';
+import mobilePropsData from ':docgen/mobile/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/SparklineInteractiveHeader/_webPropsTable.mdx b/apps/docs/docs/components/charts/SparklineInteractiveHeader/_webPropsTable.mdx
index 6752118ae7..2f8e5c424e 100644
--- a/apps/docs/docs/components/charts/SparklineInteractiveHeader/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/SparklineInteractiveHeader/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/sparkline/sparkline-interactive-header/SparklineInteractiveHeader/data';
+import webPropsData from ':docgen/web/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/SparklineInteractiveHeader/index.mdx b/apps/docs/docs/components/charts/SparklineInteractiveHeader/index.mdx
index 090bbc1386..2eba5e32dc 100644
--- a/apps/docs/docs/components/charts/SparklineInteractiveHeader/index.mdx
+++ b/apps/docs/docs/components/charts/SparklineInteractiveHeader/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/sparkline/sparkline-interactive-header/SparklineInteractiveHeader/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/sparkline/sparkline-interactive-header/SparklineInteractiveHeader/toc-props';
+import webPropsToc from ':docgen/web/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/SparklineInteractiveHeader/mobileMetadata.json b/apps/docs/docs/components/charts/SparklineInteractiveHeader/mobileMetadata.json
index bb8963a9db..93062b870f 100644
--- a/apps/docs/docs/components/charts/SparklineInteractiveHeader/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/SparklineInteractiveHeader/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { SparklineInteractiveHeader } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx",
+  "import": "import { SparklineInteractiveHeader } from '@coinbase/cds-mobile/visualizations/sparkline'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx",
   "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-12194",
   "description": "The SparklineInteractiveHeader is used to display chart information that changes over time",
   "warning": "Sparkline components are deprecated. Please use LineChart instead.",
diff --git a/apps/docs/docs/components/charts/SparklineInteractiveHeader/webMetadata.json b/apps/docs/docs/components/charts/SparklineInteractiveHeader/webMetadata.json
index c1f2d79636..c52a879321 100644
--- a/apps/docs/docs/components/charts/SparklineInteractiveHeader/webMetadata.json
+++ b/apps/docs/docs/components/charts/SparklineInteractiveHeader/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx",
+  "import": "import { SparklineInteractiveHeader } from '@coinbase/cds-web/visualizations/sparkline'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx",
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/visualization-sparklineinteractiveheader--default",
   "figma": "https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=155-12194",
   "description": "The SparklineInteractiveHeader is used to display chart information that changes over time",
diff --git a/apps/docs/docs/components/charts/XAxis/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/XAxis/_mobilePropsTable.mdx
index 40f41c1150..65a670d9e7 100644
--- a/apps/docs/docs/components/charts/XAxis/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/XAxis/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/chart/axis/XAxis/data';
+import mobilePropsData from ':docgen/mobile/visualizations/chart/axis/XAxis/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/XAxis/_webPropsTable.mdx b/apps/docs/docs/components/charts/XAxis/_webPropsTable.mdx
index fe5d29b9e2..539e6b15ea 100644
--- a/apps/docs/docs/components/charts/XAxis/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/XAxis/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/chart/axis/XAxis/data';
+import webPropsData from ':docgen/web/visualizations/chart/axis/XAxis/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/XAxis/index.mdx b/apps/docs/docs/components/charts/XAxis/index.mdx
index fc88758500..cbe4641fe3 100644
--- a/apps/docs/docs/components/charts/XAxis/index.mdx
+++ b/apps/docs/docs/components/charts/XAxis/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/chart/axis/XAxis/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/chart/axis/XAxis/toc-props';
+import webPropsToc from ':docgen/web/visualizations/chart/axis/XAxis/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/chart/axis/XAxis/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/XAxis/mobileMetadata.json b/apps/docs/docs/components/charts/XAxis/mobileMetadata.json
index ab2345b573..ad423bac9f 100644
--- a/apps/docs/docs/components/charts/XAxis/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/XAxis/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { XAxis } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/axis/XAxis.tsx",
+  "import": "import { XAxis } from '@coinbase/cds-mobile/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/chart/axis/XAxis.tsx",
   "description": "A horizontal axis component for CartesianChart. Displays tick marks, labels, gridlines, and supports custom formatting, positioning, and data domains.",
   "relatedComponents": [
     {
@@ -15,7 +15,7 @@
   "dependencies": [
     {
       "name": "@shopify/react-native-skia",
-      "version": "^1.12.4 || ^2.0.0"
+      "version": "2.2.12"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/XAxis/webMetadata.json b/apps/docs/docs/components/charts/XAxis/webMetadata.json
index 6f372e36d2..557dc167e8 100644
--- a/apps/docs/docs/components/charts/XAxis/webMetadata.json
+++ b/apps/docs/docs/components/charts/XAxis/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { XAxis } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/axis/XAxis.tsx",
+  "import": "import { XAxis } from '@coinbase/cds-web/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/chart/axis/XAxis.tsx",
   "description": "A horizontal axis component for CartesianChart. Displays tick marks, labels, gridlines, and supports custom formatting and data domains.",
   "relatedComponents": [
     {
diff --git a/apps/docs/docs/components/charts/YAxis/_mobilePropsTable.mdx b/apps/docs/docs/components/charts/YAxis/_mobilePropsTable.mdx
index 878998be2b..ce15b18179 100644
--- a/apps/docs/docs/components/charts/YAxis/_mobilePropsTable.mdx
+++ b/apps/docs/docs/components/charts/YAxis/_mobilePropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import mobilePropsData from ':docgen/mobile-visualization/chart/axis/YAxis/data';
+import mobilePropsData from ':docgen/mobile/visualizations/chart/axis/YAxis/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/YAxis/_webPropsTable.mdx b/apps/docs/docs/components/charts/YAxis/_webPropsTable.mdx
index 926d529dd7..1e2f0e9660 100644
--- a/apps/docs/docs/components/charts/YAxis/_webPropsTable.mdx
+++ b/apps/docs/docs/components/charts/YAxis/_webPropsTable.mdx
@@ -1,6 +1,6 @@
 import ComponentPropsTable from '@site/src/components/page/ComponentPropsTable';
 
-import webPropsData from ':docgen/web-visualization/chart/axis/YAxis/data';
+import webPropsData from ':docgen/web/visualizations/chart/axis/YAxis/data';
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
 
diff --git a/apps/docs/docs/components/charts/YAxis/index.mdx b/apps/docs/docs/components/charts/YAxis/index.mdx
index 669855b3ef..039312c92e 100644
--- a/apps/docs/docs/components/charts/YAxis/index.mdx
+++ b/apps/docs/docs/components/charts/YAxis/index.mdx
@@ -10,8 +10,8 @@ import { VStack } from '@coinbase/cds-web/layout';
 import { ComponentHeader } from '@site/src/components/page/ComponentHeader';
 import { ComponentTabsContainer } from '@site/src/components/page/ComponentTabsContainer';
 
-import webPropsToc from ':docgen/web-visualization/chart/axis/YAxis/toc-props';
-import mobilePropsToc from ':docgen/mobile-visualization/chart/axis/YAxis/toc-props';
+import webPropsToc from ':docgen/web/visualizations/chart/axis/YAxis/toc-props';
+import mobilePropsToc from ':docgen/mobile/visualizations/chart/axis/YAxis/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
diff --git a/apps/docs/docs/components/charts/YAxis/mobileMetadata.json b/apps/docs/docs/components/charts/YAxis/mobileMetadata.json
index 3b488f1217..f6df1a5c35 100644
--- a/apps/docs/docs/components/charts/YAxis/mobileMetadata.json
+++ b/apps/docs/docs/components/charts/YAxis/mobileMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { YAxis } from '@coinbase/cds-mobile-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/axis/YAxis.tsx",
+  "import": "import { YAxis } from '@coinbase/cds-mobile/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/visualizations/chart/axis/YAxis.tsx",
   "description": "A vertical axis component for CartesianChart. Displays tick marks, labels, gridlines, and supports custom formatting, positioning, and data domains.",
   "relatedComponents": [
     {
@@ -15,7 +15,7 @@
   "dependencies": [
     {
       "name": "@shopify/react-native-skia",
-      "version": "^1.12.4 || ^2.0.0"
+      "version": "2.2.12"
     }
   ]
 }
diff --git a/apps/docs/docs/components/charts/YAxis/webMetadata.json b/apps/docs/docs/components/charts/YAxis/webMetadata.json
index cd95425f7d..6adb1749fd 100644
--- a/apps/docs/docs/components/charts/YAxis/webMetadata.json
+++ b/apps/docs/docs/components/charts/YAxis/webMetadata.json
@@ -1,6 +1,6 @@
 {
-  "import": "import { YAxis } from '@coinbase/cds-web-visualization'",
-  "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/axis/YAxis.tsx",
+  "import": "import { YAxis } from '@coinbase/cds-web/visualizations/chart'",
+  "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/visualizations/chart/axis/YAxis.tsx",
   "description": "A vertical axis component for CartesianChart. Displays tick marks, labels, gridlines, and supports custom formatting, positioning, and data domains.",
   "relatedComponents": [
     {
diff --git a/apps/docs/docs/components/feedback/Banner/_mobileStyles.mdx b/apps/docs/docs/components/feedback/Banner/_mobileStyles.mdx
new file mode 100644
index 0000000000..a2c5a292b6
--- /dev/null
+++ b/apps/docs/docs/components/feedback/Banner/_mobileStyles.mdx
@@ -0,0 +1,7 @@
+import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable';
+
+import mobileStylesData from ':docgen/mobile/banner/Banner/styles-data';
+
+## Selectors
+
+<ComponentStylesTable componentName="Banner" styles={mobileStylesData} />
diff --git a/apps/docs/docs/components/feedback/Banner/_webStyles.mdx b/apps/docs/docs/components/feedback/Banner/_webStyles.mdx
new file mode 100644
index 0000000000..3ea57c3944
--- /dev/null
+++ b/apps/docs/docs/components/feedback/Banner/_webStyles.mdx
@@ -0,0 +1,35 @@
+import { Banner } from '@coinbase/cds-web/banner/Banner';
+import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable';
+import { StylesExplorer } from '@site/src/components/page/StylesExplorer';
+import { Link } from '@coinbase/cds-web/typography/Link';
+import { Text } from '@coinbase/cds-web/typography/Text';
+
+import webStylesData from ':docgen/web/banner/Banner/styles-data';
+
+## Explorer
+
+<StylesExplorer selectors={webStylesData.selectors}>
+  {(classNames) => (
+    <Banner
+      classNames={classNames}
+      showDismiss
+      label="Message last updated today at 3:33pm"
+      startIcon="warning"
+      startIconActive
+      styleVariant="global"
+      title="Some features are temporarily unavailable"
+      variant="warning"
+      primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
+      secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
+    >
+      <Text as="p" font="label2">
+        Your funds are safe. We&apos;re looking into it and expect our usual service to return soon.{' '}
+        <Link to="https://www.coinbase.com">Learn more</Link>
+      </Text>
+    </Banner>
+  )}
+</StylesExplorer>
+
+## Selectors
+
+<ComponentStylesTable componentName="Banner" styles={webStylesData} />
diff --git a/apps/docs/docs/components/feedback/Banner/index.mdx b/apps/docs/docs/components/feedback/Banner/index.mdx
index 5f8ecefbcc..12764ca990 100644
--- a/apps/docs/docs/components/feedback/Banner/index.mdx
+++ b/apps/docs/docs/components/feedback/Banner/index.mdx
@@ -17,6 +17,8 @@ import WebPropsTable from './_webPropsTable.mdx';
 import MobilePropsTable from './_mobilePropsTable.mdx';
 import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx';
 import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx';
+import MobileStyles, { toc as mobileStylesToc } from './_mobileStyles.mdx';
+import WebStyles, { toc as webStylesToc } from './_webStyles.mdx';
 
 import webMetadata from './webMetadata.json';
 import mobileMetadata from './mobileMetadata.json';
@@ -26,11 +28,15 @@ import mobileMetadata from './mobileMetadata.json';
   <ComponentTabsContainer
     webPropsTable={<WebPropsTable />}
     webExamples={<WebExamples />}
+    webStyles={<WebStyles />}
     mobilePropsTable={<MobilePropsTable />}
     mobileExamples={<MobileExamples />}
+    mobileStyles={<MobileStyles />}
     webExamplesToc={webExamplesToc}
     mobileExamplesToc={mobileExamplesToc}
     webPropsToc={webPropsToc}
     mobilePropsToc={mobilePropsToc}
+    webStylesToc={webStylesToc}
+    mobileStylesToc={mobileStylesToc}
   />
 </VStack>
diff --git a/apps/docs/docs/components/feedback/Banner/mobileMetadata.json b/apps/docs/docs/components/feedback/Banner/mobileMetadata.json
index f241f912d2..bda74923f8 100644
--- a/apps/docs/docs/components/feedback/Banner/mobileMetadata.json
+++ b/apps/docs/docs/components/feedback/Banner/mobileMetadata.json
@@ -12,7 +12,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/feedback/Fallback/mobileMetadata.json b/apps/docs/docs/components/feedback/Fallback/mobileMetadata.json
index 852c8539f7..167c091dd4 100644
--- a/apps/docs/docs/components/feedback/Fallback/mobileMetadata.json
+++ b/apps/docs/docs/components/feedback/Fallback/mobileMetadata.json
@@ -12,7 +12,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/feedback/ProgressCircle/mobileMetadata.json b/apps/docs/docs/components/feedback/ProgressCircle/mobileMetadata.json
index 2a7feae799..5a7502fa8c 100644
--- a/apps/docs/docs/components/feedback/ProgressCircle/mobileMetadata.json
+++ b/apps/docs/docs/components/feedback/ProgressCircle/mobileMetadata.json
@@ -19,7 +19,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/Button/_mobileExamples.mdx b/apps/docs/docs/components/inputs/Button/_mobileExamples.mdx
index 024ed14fa3..253d3abe14 100644
--- a/apps/docs/docs/components/inputs/Button/_mobileExamples.mdx
+++ b/apps/docs/docs/components/inputs/Button/_mobileExamples.mdx
@@ -14,7 +14,8 @@ Use variants to communicate the importance and intent of an action.
 
 - **Primary** — High emphasis for main actions like "Save" or "Confirm". Limit to one per screen.
 - **Secondary** — Medium emphasis for multiple actions of equal weight.
-- **Tertiary** — High contrast with inverted background.
+- **Tertiary** — Low emphasis with a muted background.
+- **Inverse** — High contrast with inverted background.
 - **Negative** — Destructive actions that can't be undone. Use sparingly.
 
 ```jsx
@@ -28,6 +29,9 @@ Use variants to communicate the importance and intent of an action.
   <Button onPress={console.log} variant="tertiary">
     Tertiary
   </Button>
+  <Button onPress={console.log} variant="inverse">
+    Inverse
+  </Button>
   <Button onPress={console.log} variant="negative">
     Negative
   </Button>
@@ -46,6 +50,12 @@ Use transparent buttons for supplementary actions with lower prominence. The con
   <Button onPress={console.log} variant="secondary" transparent>
     Secondary
   </Button>
+  <Button onPress={console.log} variant="tertiary" transparent>
+    Tertiary
+  </Button>
+  <Button onPress={console.log} variant="inverse" transparent>
+    Inverse
+  </Button>
   <Button onPress={console.log} variant="negative" transparent>
     Negative
   </Button>
diff --git a/apps/docs/docs/components/inputs/Button/_webExamples.mdx b/apps/docs/docs/components/inputs/Button/_webExamples.mdx
index 4100dc2206..c4e4ad15c8 100644
--- a/apps/docs/docs/components/inputs/Button/_webExamples.mdx
+++ b/apps/docs/docs/components/inputs/Button/_webExamples.mdx
@@ -14,7 +14,8 @@ Use variants to communicate the importance and intent of an action.
 
 - **Primary** — High emphasis for main actions like "Save" or "Confirm". Limit to one per screen.
 - **Secondary** — Medium emphasis for multiple actions of equal weight.
-- **Tertiary** — High contrast with inverted background.
+- **Tertiary** — Low emphasis with a muted background.
+- **Inverse** — High contrast with inverted background.
 - **Negative** — Destructive actions that can't be undone. Use sparingly.
 
 ```jsx live
@@ -28,6 +29,9 @@ Use variants to communicate the importance and intent of an action.
   <Button onClick={console.log} variant="tertiary">
     Tertiary
   </Button>
+  <Button onClick={console.log} variant="inverse">
+    Inverse
+  </Button>
   <Button onClick={console.log} variant="negative">
     Negative
   </Button>
@@ -49,6 +53,9 @@ Use transparent buttons for supplementary actions with lower prominence. The con
   <Button onClick={console.log} variant="tertiary" transparent>
     Tertiary
   </Button>
+  <Button onClick={console.log} variant="inverse" transparent>
+    Inverse
+  </Button>
   <Button onClick={console.log} variant="negative" transparent>
     Negative
   </Button>
diff --git a/apps/docs/docs/components/inputs/Combobox/mobileMetadata.json b/apps/docs/docs/components/inputs/Combobox/mobileMetadata.json
index 77ea5e689d..84ba30dce8 100644
--- a/apps/docs/docs/components/inputs/Combobox/mobileMetadata.json
+++ b/apps/docs/docs/components/inputs/Combobox/mobileMetadata.json
@@ -13,7 +13,7 @@
   "dependencies": [
     {
       "name": "react-native-safe-area-context",
-      "version": "^4.10.5"
+      "version": "5.6.0"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/Combobox/webMetadata.json b/apps/docs/docs/components/inputs/Combobox/webMetadata.json
index 4db33d49b9..807152ff4b 100644
--- a/apps/docs/docs/components/inputs/Combobox/webMetadata.json
+++ b/apps/docs/docs/components/inputs/Combobox/webMetadata.json
@@ -17,7 +17,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/IconButton/_mobileExamples.mdx b/apps/docs/docs/components/inputs/IconButton/_mobileExamples.mdx
index de2eb7bdee..35c8fbf927 100644
--- a/apps/docs/docs/components/inputs/IconButton/_mobileExamples.mdx
+++ b/apps/docs/docs/components/inputs/IconButton/_mobileExamples.mdx
@@ -38,12 +38,6 @@ Use variants to denote intent and importance. The `active` prop fills the icon w
     variant="tertiary"
     onPress={console.log}
   />
-  <IconButton
-    name="checkmark"
-    accessibilityLabel="Approve transaction"
-    variant="foregroundMuted"
-    onPress={console.log}
-  />
 </HStack>
 ```
 
@@ -76,13 +70,6 @@ Use the `transparent` prop to remove the background until the user interacts wit
     transparent
     onPress={console.log}
   />
-  <IconButton
-    name="checkmark"
-    accessibilityLabel="Verify your identity"
-    variant="foregroundMuted"
-    transparent
-    onPress={console.log}
-  />
 </HStack>
 ```
 
@@ -135,13 +122,6 @@ Use the `disabled` prop to prevent interaction and show a disabled visual state.
     disabled
     onPress={console.log}
   />
-  <IconButton
-    name="checkmark"
-    accessibilityLabel="Approve transaction"
-    variant="foregroundMuted"
-    disabled
-    onPress={console.log}
-  />
 </HStack>
 ```
 
@@ -191,7 +171,7 @@ A toggleable icon button with an adjacent label. Uses `accessibilityLabelledBy`
 ```jsx
 function ClaimDropExample() {
   const [active, setActive] = useState(false);
-  const variant = useMemo(() => (active ? 'primary' : 'foregroundMuted'), [active]);
+  const variant = useMemo(() => (active ? 'primary' : 'secondary'), [active]);
   const label = useMemo(() => (active ? 'Reject drop' : 'Claim drop'), [active]);
 
   return (
diff --git a/apps/docs/docs/components/inputs/IconButton/_webExamples.mdx b/apps/docs/docs/components/inputs/IconButton/_webExamples.mdx
index 4228b112f4..7f56da4a60 100644
--- a/apps/docs/docs/components/inputs/IconButton/_webExamples.mdx
+++ b/apps/docs/docs/components/inputs/IconButton/_webExamples.mdx
@@ -38,12 +38,6 @@ Use variants to denote intent and importance. The `active` prop fills the icon w
     variant="tertiary"
     onClick={console.log}
   />
-  <IconButton
-    name="checkmark"
-    accessibilityLabel="Approve transaction"
-    variant="foregroundMuted"
-    onClick={console.log}
-  />
 </HStack>
 ```
 
@@ -76,13 +70,6 @@ Use the `transparent` prop to remove the background until the user interacts wit
     transparent
     onClick={console.log}
   />
-  <IconButton
-    name="checkmark"
-    accessibilityLabel="Verify your identity"
-    variant="foregroundMuted"
-    transparent
-    onClick={console.log}
-  />
 </HStack>
 ```
 
@@ -201,13 +188,6 @@ Use the `disabled` prop to prevent interaction and show a disabled visual state.
     disabled
     onClick={console.log}
   />
-  <IconButton
-    name="checkmark"
-    accessibilityLabel="Approve transaction"
-    variant="foregroundMuted"
-    disabled
-    onClick={console.log}
-  />
 </HStack>
 ```
 
@@ -257,7 +237,7 @@ A toggleable icon button with an adjacent label. Uses `accessibilityLabelledBy`
 ```jsx live
 function ClaimDropExample() {
   const [active, setActive] = useState(false);
-  const variant = useMemo(() => (active ? 'primary' : 'foregroundMuted'), [active]);
+  const variant = useMemo(() => (active ? 'primary' : 'secondary'), [active]);
   const label = useMemo(() => (active ? 'Reject drop' : 'Claim drop'), [active]);
 
   return (
diff --git a/apps/docs/docs/components/inputs/Radio/mobileMetadata.json b/apps/docs/docs/components/inputs/Radio/mobileMetadata.json
index 6ef25ea309..a1d0bcb69c 100644
--- a/apps/docs/docs/components/inputs/Radio/mobileMetadata.json
+++ b/apps/docs/docs/components/inputs/Radio/mobileMetadata.json
@@ -28,7 +28,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/RadioCell/mobileMetadata.json b/apps/docs/docs/components/inputs/RadioCell/mobileMetadata.json
index 685965c943..1835a350d4 100644
--- a/apps/docs/docs/components/inputs/RadioCell/mobileMetadata.json
+++ b/apps/docs/docs/components/inputs/RadioCell/mobileMetadata.json
@@ -20,7 +20,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/RadioGroup/mobileMetadata.json b/apps/docs/docs/components/inputs/RadioGroup/mobileMetadata.json
index c594a0a22a..d4fccd3eac 100644
--- a/apps/docs/docs/components/inputs/RadioGroup/mobileMetadata.json
+++ b/apps/docs/docs/components/inputs/RadioGroup/mobileMetadata.json
@@ -18,7 +18,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/Select/webMetadata.json b/apps/docs/docs/components/inputs/Select/webMetadata.json
index 135c57e756..6a0a6c4799 100644
--- a/apps/docs/docs/components/inputs/Select/webMetadata.json
+++ b/apps/docs/docs/components/inputs/Select/webMetadata.json
@@ -30,7 +30,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/SelectAlpha/mobileMetadata.json b/apps/docs/docs/components/inputs/SelectAlpha/mobileMetadata.json
index db9d2c6ec2..9bc249be52 100644
--- a/apps/docs/docs/components/inputs/SelectAlpha/mobileMetadata.json
+++ b/apps/docs/docs/components/inputs/SelectAlpha/mobileMetadata.json
@@ -8,7 +8,7 @@
   "dependencies": [
     {
       "name": "react-native-safe-area-context",
-      "version": "^4.10.5"
+      "version": "5.6.0"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/SelectAlpha/webMetadata.json b/apps/docs/docs/components/inputs/SelectAlpha/webMetadata.json
index 59cda3ea44..bb8c0514a6 100644
--- a/apps/docs/docs/components/inputs/SelectAlpha/webMetadata.json
+++ b/apps/docs/docs/components/inputs/SelectAlpha/webMetadata.json
@@ -12,7 +12,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/SelectChip/mobileMetadata.json b/apps/docs/docs/components/inputs/SelectChip/mobileMetadata.json
index 036d3ca9a0..aff8fd59a2 100644
--- a/apps/docs/docs/components/inputs/SelectChip/mobileMetadata.json
+++ b/apps/docs/docs/components/inputs/SelectChip/mobileMetadata.json
@@ -25,7 +25,7 @@
   "dependencies": [
     {
       "name": "react-native-safe-area-context",
-      "version": "^4.10.5"
+      "version": "5.6.0"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/SelectChip/webMetadata.json b/apps/docs/docs/components/inputs/SelectChip/webMetadata.json
index fc3dc6f6c9..54a937a146 100644
--- a/apps/docs/docs/components/inputs/SelectChip/webMetadata.json
+++ b/apps/docs/docs/components/inputs/SelectChip/webMetadata.json
@@ -30,7 +30,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/SelectChipAlpha/mobileMetadata.json b/apps/docs/docs/components/inputs/SelectChipAlpha/mobileMetadata.json
index b8be5679bb..c61c0c0385 100644
--- a/apps/docs/docs/components/inputs/SelectChipAlpha/mobileMetadata.json
+++ b/apps/docs/docs/components/inputs/SelectChipAlpha/mobileMetadata.json
@@ -21,7 +21,7 @@
   "dependencies": [
     {
       "name": "react-native-safe-area-context",
-      "version": "^4.10.5"
+      "version": "5.6.0"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/SelectChipAlpha/webMetadata.json b/apps/docs/docs/components/inputs/SelectChipAlpha/webMetadata.json
index f7088fafeb..f629c63e12 100644
--- a/apps/docs/docs/components/inputs/SelectChipAlpha/webMetadata.json
+++ b/apps/docs/docs/components/inputs/SelectChipAlpha/webMetadata.json
@@ -26,7 +26,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/SlideButton/mobileMetadata.json b/apps/docs/docs/components/inputs/SlideButton/mobileMetadata.json
index 2c8b9fc38d..4748bad616 100644
--- a/apps/docs/docs/components/inputs/SlideButton/mobileMetadata.json
+++ b/apps/docs/docs/components/inputs/SlideButton/mobileMetadata.json
@@ -24,7 +24,7 @@
   "dependencies": [
     {
       "name": "react-native-gesture-handler",
-      "version": "^2.16.2"
+      "version": "2.28.0"
     }
   ]
 }
diff --git a/apps/docs/docs/components/inputs/Switch/_mobileStyles.mdx b/apps/docs/docs/components/inputs/Switch/_mobileStyles.mdx
new file mode 100644
index 0000000000..bf115dda45
--- /dev/null
+++ b/apps/docs/docs/components/inputs/Switch/_mobileStyles.mdx
@@ -0,0 +1,7 @@
+import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable';
+
+import mobileStylesData from ':docgen/mobile/controls/Switch/styles-data';
+
+## Selectors
+
+<ComponentStylesTable componentName="Switch" styles={mobileStylesData} />
diff --git a/apps/docs/docs/components/inputs/Switch/_webStyles.mdx b/apps/docs/docs/components/inputs/Switch/_webStyles.mdx
new file mode 100644
index 0000000000..05ea45585d
--- /dev/null
+++ b/apps/docs/docs/components/inputs/Switch/_webStyles.mdx
@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable';
+import { StylesExplorer } from '@site/src/components/page/StylesExplorer';
+import { Switch } from '@coinbase/cds-web/controls';
+
+import webStylesData from ':docgen/web/controls/Switch/styles-data';
+
+export const StatefulSwitchPreview = ({ classNames }) => {
+  const [isChecked, setIsChecked] = useState(false);
+
+return (
+
+<Switch
+  checked={isChecked}
+  classNames={classNames}
+  onChange={(event) => setIsChecked(event.target.checked)}
+>
+  Dark mode
+</Switch>
+); };
+
+## Explorer
+
+<StylesExplorer selectors={webStylesData.selectors}>
+  {(classNames) => <StatefulSwitchPreview classNames={classNames} />}
+</StylesExplorer>
+
+## Selectors
+
+<ComponentStylesTable componentName="Switch" styles={webStylesData} />
diff --git a/apps/docs/docs/components/inputs/Switch/index.mdx b/apps/docs/docs/components/inputs/Switch/index.mdx
index cbf97aa2b6..98ac45f3c7 100644
--- a/apps/docs/docs/components/inputs/Switch/index.mdx
+++ b/apps/docs/docs/components/inputs/Switch/index.mdx
@@ -16,6 +16,8 @@ import webPropsToc from ':docgen/web/controls/Switch/toc-props';
 
 import MobileExamples, { toc as mobileExamplesToc } from './_mobileExamples.mdx';
 import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx';
+import MobileStyles, { toc as mobileStylesToc } from './_mobileStyles.mdx';
+import WebStyles, { toc as webStylesToc } from './_webStyles.mdx';
 
 import { sharedParentTypes } from ':docgen/_types/sharedParentTypes';
 import { sharedTypeAliases } from ':docgen/_types/sharedTypeAliases';
@@ -34,12 +36,16 @@ import mobileMetadata from './mobileMetadata.json';
 
   <ComponentTabsContainer
     webPropsTable={<WebPropsTable />}
+    webStyles={<WebStyles />}
     webExamples={<WebExamples />}
     mobilePropsTable={<MobilePropsTable />}
+    mobileStyles={<MobileStyles />}
     mobileExamples={<MobileExamples />}
     webExamplesToc={webExamplesToc}
     mobileExamplesToc={mobileExamplesToc}
     webPropsToc={webPropsToc}
+    webStylesToc={webStylesToc}
     mobilePropsToc={mobilePropsToc}
+    mobileStylesToc={mobileStylesToc}
   />
 </VStack>
diff --git a/apps/docs/docs/components/layout/AccordionItem/mobileMetadata.json b/apps/docs/docs/components/layout/AccordionItem/mobileMetadata.json
index 8cbed53d2b..13f259ea12 100644
--- a/apps/docs/docs/components/layout/AccordionItem/mobileMetadata.json
+++ b/apps/docs/docs/components/layout/AccordionItem/mobileMetadata.json
@@ -12,7 +12,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/layout/Carousel/_mobileExamples.mdx b/apps/docs/docs/components/layout/Carousel/_mobileExamples.mdx
index 09678b32e1..4d7fd8c347 100644
--- a/apps/docs/docs/components/layout/Carousel/_mobileExamples.mdx
+++ b/apps/docs/docs/components/layout/Carousel/_mobileExamples.mdx
@@ -4,6 +4,8 @@ Carousels are a great way to showcase a list of items in a compact and engaging
 By default, Carousels have navigation and pagination enabled.
 You can also add a title to the Carousel by setting `title` prop.
 
+`paginationVariant` is deprecated. Carousel now defaults to dot pagination. Existing uses of `paginationVariant="pill"` still work during the deprecation window, but new usage should prefer the default pagination or a custom `PaginationComponent`.
+
 You simply wrap each child in a `CarouselItem` component, and can optionally set the `width` prop to control the width of the item.
 
 You can also set the `styles` prop to control the styles of the carousel, such as the gap between items.
@@ -31,7 +33,6 @@ function MyCarousel() {
   return (
     <Carousel
       loop
-      paginationVariant="dot"
       title="Explore Assets"
       styles={{
         root: { paddingHorizontal: theme.space[2] },
@@ -90,7 +91,6 @@ function DynamicSizingCarousel() {
 
   return (
     <Carousel
-      paginationVariant="dot"
       title="Learn more"
       styles={{
         root: { paddingHorizontal: horizontalPadding },
@@ -115,7 +115,7 @@ function DynamicSizingCarousel() {
       <CarouselItem id="eths-apr" width={twoItemsWidth}>
         <UpsellCard
           action="Start earning"
-          dangerouslySetBackground="rgb(var(--purple70))"
+          style={{ backgroundColor: 'rgb(var(--purple70))' }}
           description={
             <Text font="label2" numberOfLines={3} color="fgInverse">
               Earn staking rewards on ETH by holding it on Coinbase
@@ -171,7 +171,6 @@ function ResponsiveSizingCarousel() {
 
   return (
     <Carousel
-      paginationVariant="dot"
       title="Learn more"
       styles={{
         root: { paddingHorizontal: horizontalPadding },
@@ -246,7 +245,6 @@ function VariedSizingCarousel() {
 
   return (
     <Carousel
-      paginationVariant="dot"
       title="Varied Sizing"
       styles={{
         root: { paddingHorizontal: horizontalPadding },
@@ -326,7 +324,6 @@ function DragCarousel() {
   return (
     <Carousel
       title="Explore Assets"
-      paginationVariant="dot"
       drag="free"
       styles={{
         root: { paddingHorizontal: horizontalPadding },
@@ -363,7 +360,6 @@ function SquareItemsCarousel() {
   return (
     <Carousel
       title="Explore Assets"
-      paginationVariant="dot"
       styles={{
         root: { paddingHorizontal: horizontalPadding },
         carousel: { gap: horizontalGap },
@@ -408,7 +404,6 @@ function OverflowCarousel() {
   return (
     <Carousel
       title="Explore Assets"
-      paginationVariant="dot"
       snapMode="item"
       styles={{
         root: { paddingHorizontal: horizontalPadding },
@@ -433,7 +428,7 @@ function OverflowCarousel() {
 
 Use `autoplay` to allow for automatic page advancement. The default interval is 3 seconds but can be changed with `autoplayInterval`.
 
-It is recommended to use pagination with autoplay so users know how many pages there are, and you should also set `paginationVariant="dot"` to best indicate the active page and progress.
+It is recommended to use pagination with autoplay so users know how many pages there are.
 
 ```jsx
 function AutoplayCarousel() {
@@ -445,7 +440,6 @@ function AutoplayCarousel() {
     <Carousel
       autoplay
       loop
-      paginationVariant="dot"
       title="Trending Assets"
       styles={{
         root: { paddingHorizontal: horizontalPadding },
@@ -477,7 +471,6 @@ function CustomIntervalCarousel() {
       autoplay
       autoplayInterval={5000}
       loop
-      paginationVariant="dot"
       title="5 Second Interval"
       styles={{
         root: { paddingHorizontal: horizontalPadding },
@@ -512,7 +505,6 @@ function LoopingCarousel() {
     <Carousel
       autoplay
       loop
-      paginationVariant="dot"
       snapMode="item"
       title="Infinite Scroll"
       styles={{
@@ -543,7 +535,7 @@ You need to use `accessibilityLabel` or `accessibilityLabelledBy` props to provi
 Similar to web, you are provided the `isVisible` render prop, however it is not necessary to use since mobile users do not have a keyboard.
 
 ```jsx
-<Carousel paginationVariant="dot">
+<Carousel>
   <CarouselItem id="btc" accessibilityLabel="Bitcoin">
     <SquareAssetCard imageUrl={assets.btc.imageUrl} name={assets.btc.symbol} />
   </CarouselItem>
@@ -611,14 +603,14 @@ function CustomComponentsCarousel() {
             disabled={!canGoPrevious}
             name="caretLeft"
             onPress={onPrevious}
-            variant="foregroundMuted"
+            variant="secondary"
           />
           <IconButton
             accessibilityLabel="Next"
             disabled={!canGoNext}
             name="caretRight"
             onPress={onNext}
-            variant="foregroundMuted"
+            variant="secondary"
           />
         </HStack>
         <HStack alignItems="center" gap={1}>
@@ -673,7 +665,7 @@ function CustomComponentsCarousel() {
         <CarouselItem id="eths-apr" width={itemWidth}>
           <UpsellCard
             action="Start earning"
-            dangerouslySetBackground="rgb(var(--purple70))"
+            style={{ backgroundColor: 'rgb(var(--purple70))' }}
             description={
               <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 Earn staking rewards on ETH by holding it on Coinbase
@@ -697,7 +689,7 @@ function CustomComponentsCarousel() {
         <CarouselItem id="join-the-community" width={itemWidth}>
           <UpsellCard
             action="Start chatting"
-            dangerouslySetBackground="rgb(var(--teal70))"
+            style={{ backgroundColor: 'rgb(var(--teal70))' }}
             description={
               <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 Chat with other devs in our Discord community
@@ -721,7 +713,7 @@ function CustomComponentsCarousel() {
         <CarouselItem id="coinbase-one-offer" width={itemWidth}>
           <UpsellCard
             action="Get 60 days free"
-            dangerouslySetBackground="rgb(var(--blue80))"
+            style={{ backgroundColor: 'rgb(var(--blue80))' }}
             description={
               <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 Use code NOV60 when you  sign up for Coinbase One
@@ -745,7 +737,7 @@ function CustomComponentsCarousel() {
         <CarouselItem id="coinbase-card" width={itemWidth}>
           <UpsellCard
             action="Get started"
-            dangerouslySetBackground="rgb(var(--gray100))"
+            style={{ backgroundColor: 'rgb(var(--gray100))' }}
             description={
               <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 Spend USDC to get rewards with our Visa® debit card
@@ -779,7 +771,6 @@ You can use the `styles` props to customize different parts of the carousel.
 function CustomStylesCarousel() {
   return (
     <Carousel
-      paginationVariant="dot"
       styles={{
         root: { paddingInline: horizontalPadding },
         carousel: { gap: horizontalGap },
@@ -1080,7 +1071,6 @@ function DynamicContentCarousel() {
       </HStack>
       <Carousel
         title="Explore Assets"
-        paginationVariant="dot"
         styles={{
           root: { paddingHorizontal: horizontalPadding },
           carousel: { gap: horizontalGap, height: 156 },
diff --git a/apps/docs/docs/components/layout/Carousel/_webExamples.mdx b/apps/docs/docs/components/layout/Carousel/_webExamples.mdx
index 00e4ac29ff..4fc1f34972 100644
--- a/apps/docs/docs/components/layout/Carousel/_webExamples.mdx
+++ b/apps/docs/docs/components/layout/Carousel/_webExamples.mdx
@@ -4,6 +4,8 @@ Carousels are a great way to showcase a list of items in a compact and engaging
 By default, Carousels have navigation and pagination enabled.
 You can also add a title to the Carousel by setting `title` prop.
 
+`paginationVariant` is deprecated. Carousel now defaults to dot pagination. Existing uses of `paginationVariant="pill"` still work during the deprecation window, but new usage should prefer the default pagination or a custom `PaginationComponent`.
+
 You simply wrap each child in a `CarouselItem` component, and can optionally set the `width` prop to control the width of the item.
 
 You can also set the `styles` prop to control the styles of the carousel, such as the gap between items.
@@ -37,7 +39,6 @@ function MyCarousel() {
     <Box marginX={-3}>
       <Carousel
         loop
-        paginationVariant="dot"
         title="Explore Assets"
         styles={{
           root: { paddingInline: 'var(--space-3)' },
@@ -155,7 +156,7 @@ function DynamicSizingCarousel() {
             {({ isVisible }) => (
               <UpsellCard
                 action={<ActionButton isVisible={isVisible}>Start earning</ActionButton>}
-                dangerouslySetBackground="rgb(var(--purple70))"
+                style={{ backgroundColor: 'rgb(var(--purple70))' }}
                 description={
                   <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                     Earn staking rewards on ETH by holding it on Coinbase
@@ -184,7 +185,7 @@ function DynamicSizingCarousel() {
             {({ isVisible }) => (
               <UpsellCard
                 action={<ActionButton isVisible={isVisible}>Start chatting</ActionButton>}
-                dangerouslySetBackground="rgb(var(--teal70))"
+                style={{ backgroundColor: 'rgb(var(--teal70))' }}
                 description={
                   <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                     Chat with other devs in our Discord community
@@ -213,7 +214,7 @@ function DynamicSizingCarousel() {
             {({ isVisible }) => (
               <UpsellCard
                 action={<ActionButton isVisible={isVisible}>Get 60 days free</ActionButton>}
-                dangerouslySetBackground="rgb(var(--blue80))"
+                style={{ backgroundColor: 'rgb(var(--blue80))' }}
                 description={
                   <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                     Use code NOV60 when you sign up for Coinbase One
@@ -242,7 +243,7 @@ function DynamicSizingCarousel() {
             {({ isVisible }) => (
               <UpsellCard
                 action={<ActionButton isVisible={isVisible}>Get started</ActionButton>}
-                dangerouslySetBackground="rgb(var(--gray100))"
+                style={{ backgroundColor: 'rgb(var(--gray100))' }}
                 description={
                   <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                     Spend USDC to get rewards with our Visa® debit card
@@ -558,7 +559,6 @@ function SnapModeCarousel() {
       <Box marginX={-3}>
         <Carousel
           title="Explore Assets"
-          paginationVariant="dot"
           styles={{
             root: { paddingInline: 'var(--space-3)' },
             carousel: { gap: 'var(--space-2)' },
@@ -621,7 +621,6 @@ function OverflowCarousel() {
     <Box marginX={-3}>
       <Carousel
         title="Explore Assets"
-        paginationVariant="dot"
         snapMode="item"
         styles={{
           root: { paddingInline: 'var(--space-3)' },
@@ -649,7 +648,7 @@ function OverflowCarousel() {
 
 Use `autoplay` to allow for automatic page advancement. The default interval is 3 seconds but can be changed with `autoplayInterval`.
 
-It is recommended to use pagination with autoplay so users know how many pages there are, and you should also set `paginationVariant="dot"` to best indicate the active page and progress.
+It is recommended to use pagination with autoplay so users know how many pages there are.
 
 ```jsx live
 function AutoplayCarousel() {
@@ -675,7 +674,6 @@ function AutoplayCarousel() {
       <Carousel
         autoplay
         loop
-        paginationVariant="dot"
         title="Trending Assets"
         styles={{
           root: { paddingInline: 'var(--space-3)' },
@@ -726,7 +724,6 @@ function LoopingCarousel() {
       <Carousel
         autoplay
         loop
-        paginationVariant="dot"
         snapMode="item"
         title="Infinite Scroll"
         styles={{
@@ -760,7 +757,7 @@ Each carousel item should have proper text within the focusable element or you u
 While not recommended, if your carousel has disabled drag, you can use `isVisible` render prop to prevent users from focusing on carousel items that are not visible.
 
 ```jsx
-<Carousel paginationVariant="dot" drag="none">
+<Carousel drag="none">
   <CarouselItem id="btc" accessibilityLabel="Bitcoin">
     <SquareAssetCard imageUrl={assets.btc.imageUrl} name={assets.btc.symbol} />
   </CarouselItem>
@@ -859,14 +856,14 @@ function CustomComponentsCarousel() {
             disabled={!canGoPrevious}
             name="caretLeft"
             onClick={onPrevious}
-            variant="foregroundMuted"
+            variant="secondary"
           />
           <IconButton
             accessibilityLabel="Next"
             disabled={!canGoNext}
             name="caretRight"
             onClick={onNext}
-            variant="foregroundMuted"
+            variant="secondary"
           />
         </HStack>
         <HStack alignItems="center" gap={1}>
@@ -942,7 +939,7 @@ function CustomComponentsCarousel() {
           {({ isVisible }) => (
             <UpsellCard
               action={<ActionButton isVisible={isVisible}>Start earning</ActionButton>}
-              dangerouslySetBackground="rgb(var(--purple70))"
+              style={{ backgroundColor: 'rgb(var(--purple70))' }}
               description={
                 <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                   Earn staking rewards on ETH by holding it on Coinbase
@@ -967,7 +964,7 @@ function CustomComponentsCarousel() {
           {({ isVisible }) => (
             <UpsellCard
               action={<ActionButton isVisible={isVisible}>Start chatting</ActionButton>}
-              dangerouslySetBackground="rgb(var(--teal70))"
+              style={{ backgroundColor: 'rgb(var(--teal70))' }}
               description={
                 <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                   Chat with other devs in our Discord community
@@ -992,7 +989,7 @@ function CustomComponentsCarousel() {
           {({ isVisible }) => (
             <UpsellCard
               action={<ActionButton isVisible={isVisible}>Get 60 days free</ActionButton>}
-              dangerouslySetBackground="rgb(var(--blue80))"
+              style={{ backgroundColor: 'rgb(var(--blue80))' }}
               description={
                 <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                   Use code NOV60 when you sign up for Coinbase One
@@ -1017,7 +1014,7 @@ function CustomComponentsCarousel() {
           {({ isVisible }) => (
             <UpsellCard
               action={<ActionButton isVisible={isVisible}>Get started</ActionButton>}
-              dangerouslySetBackground="rgb(var(--gray100))"
+              style={{ backgroundColor: 'rgb(var(--gray100))' }}
               description={
                 <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                   Spend USDC to get rewards with our Visa® debit card
@@ -1053,7 +1050,6 @@ function CustomStylesCarousel() {
   return (
     <Box marginX={-3}>
       <Carousel
-        paginationVariant="dot"
         styles={{
           root: { position: 'relative', paddingInline: 'var(--space-6)' },
           carousel: { gap: 'var(--space-6)' },
@@ -1351,7 +1347,6 @@ function DynamicContentCarousel() {
       <Box marginX={-3}>
         <Carousel
           title="Explore Assets"
-          paginationVariant="dot"
           styles={{
             root: { paddingInline: 'var(--space-3)' },
             carousel: { gap: 'var(--space-2)', height: '156px' },
@@ -1504,7 +1499,6 @@ function AnimatedSelectionCarousel() {
     <Box marginX={-3}>
       <Carousel
         title="Explore Assets"
-        paginationVariant="dot"
         styles={{
           root: { paddingInline: 'var(--space-3)' },
           carousel: { gap: 'var(--space-2)' },
@@ -1810,7 +1804,6 @@ You can use the `onChangePage`, `onDragStart`, and `onDragEnd` callbacks to list
 
 ```tsx
 <Carousel
-  paginationVariant="dot"
   onChangePage={(pageIndex: number) => console.log('Page changed', activePageIndex)}
   onDragStart={() => console.log('Drag started')}
   onDragEnd={() => console.log('Drag ended')}
diff --git a/apps/docs/docs/components/layout/Collapsible/mobileMetadata.json b/apps/docs/docs/components/layout/Collapsible/mobileMetadata.json
index 539db97fbf..1f97ba4c47 100644
--- a/apps/docs/docs/components/layout/Collapsible/mobileMetadata.json
+++ b/apps/docs/docs/components/layout/Collapsible/mobileMetadata.json
@@ -12,7 +12,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/layout/Dropdown/webMetadata.json b/apps/docs/docs/components/layout/Dropdown/webMetadata.json
index 45e64fc68e..de6d581a08 100644
--- a/apps/docs/docs/components/layout/Dropdown/webMetadata.json
+++ b/apps/docs/docs/components/layout/Dropdown/webMetadata.json
@@ -22,7 +22,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/Avatar/mobileMetadata.json b/apps/docs/docs/components/media/Avatar/mobileMetadata.json
index 1e9ac28249..9fe43be2da 100644
--- a/apps/docs/docs/components/media/Avatar/mobileMetadata.json
+++ b/apps/docs/docs/components/media/Avatar/mobileMetadata.json
@@ -15,7 +15,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/Avatar/webMetadata.json b/apps/docs/docs/components/media/Avatar/webMetadata.json
index 8570ed2307..05b76303df 100644
--- a/apps/docs/docs/components/media/Avatar/webMetadata.json
+++ b/apps/docs/docs/components/media/Avatar/webMetadata.json
@@ -16,7 +16,7 @@
   "dependencies": [
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/CellMedia/mobileMetadata.json b/apps/docs/docs/components/media/CellMedia/mobileMetadata.json
index 3ad2f79f6f..f0ae9e9932 100644
--- a/apps/docs/docs/components/media/CellMedia/mobileMetadata.json
+++ b/apps/docs/docs/components/media/CellMedia/mobileMetadata.json
@@ -15,7 +15,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/HeroSquare/mobileMetadata.json b/apps/docs/docs/components/media/HeroSquare/mobileMetadata.json
index f9eb2b2ea7..5717fcb92c 100644
--- a/apps/docs/docs/components/media/HeroSquare/mobileMetadata.json
+++ b/apps/docs/docs/components/media/HeroSquare/mobileMetadata.json
@@ -25,7 +25,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/LogoMark/mobileMetadata.json b/apps/docs/docs/components/media/LogoMark/mobileMetadata.json
index a2eca6c388..1042016dd0 100644
--- a/apps/docs/docs/components/media/LogoMark/mobileMetadata.json
+++ b/apps/docs/docs/components/media/LogoMark/mobileMetadata.json
@@ -19,7 +19,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/LogoWordMark/mobileMetadata.json b/apps/docs/docs/components/media/LogoWordMark/mobileMetadata.json
index a06f647034..ba0a1e2dc6 100644
--- a/apps/docs/docs/components/media/LogoWordMark/mobileMetadata.json
+++ b/apps/docs/docs/components/media/LogoWordMark/mobileMetadata.json
@@ -19,7 +19,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/Pictogram/mobileMetadata.json b/apps/docs/docs/components/media/Pictogram/mobileMetadata.json
index 30aedc1c64..3b826ae4ab 100644
--- a/apps/docs/docs/components/media/Pictogram/mobileMetadata.json
+++ b/apps/docs/docs/components/media/Pictogram/mobileMetadata.json
@@ -25,7 +25,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/RemoteImage/mobileMetadata.json b/apps/docs/docs/components/media/RemoteImage/mobileMetadata.json
index ff0b14bfe2..fd2274207f 100644
--- a/apps/docs/docs/components/media/RemoteImage/mobileMetadata.json
+++ b/apps/docs/docs/components/media/RemoteImage/mobileMetadata.json
@@ -24,7 +24,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/RemoteImageGroup/mobileMetadata.json b/apps/docs/docs/components/media/RemoteImageGroup/mobileMetadata.json
index 109cd18957..5e7183cda7 100644
--- a/apps/docs/docs/components/media/RemoteImageGroup/mobileMetadata.json
+++ b/apps/docs/docs/components/media/RemoteImageGroup/mobileMetadata.json
@@ -11,7 +11,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/SpotIcon/mobileMetadata.json b/apps/docs/docs/components/media/SpotIcon/mobileMetadata.json
index c5697db759..b646cdaa6c 100644
--- a/apps/docs/docs/components/media/SpotIcon/mobileMetadata.json
+++ b/apps/docs/docs/components/media/SpotIcon/mobileMetadata.json
@@ -25,7 +25,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/SpotRectangle/mobileMetadata.json b/apps/docs/docs/components/media/SpotRectangle/mobileMetadata.json
index f8817f27ba..8b0e9e96bf 100644
--- a/apps/docs/docs/components/media/SpotRectangle/mobileMetadata.json
+++ b/apps/docs/docs/components/media/SpotRectangle/mobileMetadata.json
@@ -25,7 +25,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/SpotSquare/mobileMetadata.json b/apps/docs/docs/components/media/SpotSquare/mobileMetadata.json
index 03c6bc3376..e7dc64ca93 100644
--- a/apps/docs/docs/components/media/SpotSquare/mobileMetadata.json
+++ b/apps/docs/docs/components/media/SpotSquare/mobileMetadata.json
@@ -25,7 +25,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/SubBrandLogoMark/mobileMetadata.json b/apps/docs/docs/components/media/SubBrandLogoMark/mobileMetadata.json
index 16d4c6ef1a..77fe49f782 100644
--- a/apps/docs/docs/components/media/SubBrandLogoMark/mobileMetadata.json
+++ b/apps/docs/docs/components/media/SubBrandLogoMark/mobileMetadata.json
@@ -19,7 +19,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/media/SubBrandLogoWordMark/mobileMetadata.json b/apps/docs/docs/components/media/SubBrandLogoWordMark/mobileMetadata.json
index d0c8956cf6..e12bc1ed1c 100644
--- a/apps/docs/docs/components/media/SubBrandLogoWordMark/mobileMetadata.json
+++ b/apps/docs/docs/components/media/SubBrandLogoWordMark/mobileMetadata.json
@@ -19,7 +19,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/navigation/BrowserBar/mobileMetadata.json b/apps/docs/docs/components/navigation/BrowserBar/mobileMetadata.json
index ecc956fceb..a8ed09aedd 100644
--- a/apps/docs/docs/components/navigation/BrowserBar/mobileMetadata.json
+++ b/apps/docs/docs/components/navigation/BrowserBar/mobileMetadata.json
@@ -12,7 +12,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/navigation/NavigationTitleSelect/webMetadata.json b/apps/docs/docs/components/navigation/NavigationTitleSelect/webMetadata.json
index f51f4917f8..df48967410 100644
--- a/apps/docs/docs/components/navigation/NavigationTitleSelect/webMetadata.json
+++ b/apps/docs/docs/components/navigation/NavigationTitleSelect/webMetadata.json
@@ -24,7 +24,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/navigation/SegmentedTabs/mobileMetadata.json b/apps/docs/docs/components/navigation/SegmentedTabs/mobileMetadata.json
index f0bbda8767..bbb8cfc8fe 100644
--- a/apps/docs/docs/components/navigation/SegmentedTabs/mobileMetadata.json
+++ b/apps/docs/docs/components/navigation/SegmentedTabs/mobileMetadata.json
@@ -16,7 +16,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/navigation/Sidebar/_webExamples.mdx b/apps/docs/docs/components/navigation/Sidebar/_webExamples.mdx
index 91b6d29bbd..0fb4e7e314 100644
--- a/apps/docs/docs/components/navigation/Sidebar/_webExamples.mdx
+++ b/apps/docs/docs/components/navigation/Sidebar/_webExamples.mdx
@@ -385,9 +385,9 @@ function RenderEndExample() {
       <HStack alignItems="center" gap={2} paddingX={2} paddingY={2}>
         <Icon name="questionCircle" />
         {!isCollapsed && (
-          <TextHeadline as="span" color="foreground">
+          <Text as="span" font="headline" color="foreground">
             Help & Support
-          </TextHeadline>
+          </Text>
         )}
       </HStack>
     </Pressable>
@@ -448,7 +448,9 @@ function CustomStyles() {
           >
             <HStack alignItems="center" gap={2} paddingX={2} paddingY={2}>
               <Icon name="questionCircle" />
-              <TextHeadline as="span">Help</TextHeadline>
+              <Text as="span" font="headline">
+                Help
+              </Text>
             </HStack>
           </Pressable>
         )}
@@ -568,7 +570,11 @@ function ApplicationShell() {
             >
               <HStack alignItems="center" gap={2} paddingX={2} paddingY={2}>
                 <Icon name="cog" />
-                {!isCollapsed && <TextHeadline as="span">Settings</TextHeadline>}
+                {!isCollapsed && (
+                  <Text as="span" font="headline">
+                    Settings
+                  </Text>
+                )}
               </HStack>
             </Pressable>
             <Pressable
@@ -580,7 +586,11 @@ function ApplicationShell() {
             >
               <HStack alignItems="center" gap={2} paddingX={2} paddingY={2}>
                 <Avatar size="s" />
-                {!isCollapsed && <TextHeadline as="span">Profile</TextHeadline>}
+                {!isCollapsed && (
+                  <Text as="span" font="headline">
+                    Profile
+                  </Text>
+                )}
               </HStack>
             </Pressable>
           </VStack>
diff --git a/apps/docs/docs/components/navigation/SidebarItem/_webStyles.mdx b/apps/docs/docs/components/navigation/SidebarItem/_webStyles.mdx
new file mode 100644
index 0000000000..76b8dd7c95
--- /dev/null
+++ b/apps/docs/docs/components/navigation/SidebarItem/_webStyles.mdx
@@ -0,0 +1,30 @@
+import { ComponentStylesTable } from '@site/src/components/page/ComponentStylesTable';
+import { StylesExplorer } from '@site/src/components/page/StylesExplorer';
+import { LogoMark } from '@coinbase/cds-web/icons';
+import { HStack } from '@coinbase/cds-web/layout';
+import { Sidebar, SidebarItem } from '@coinbase/cds-web/navigation';
+
+import webStylesData from ':docgen/web/navigation/SidebarItem/styles-data';
+
+## Explorer
+
+<StylesExplorer selectors={webStylesData.selectors}>
+  {(classNames) => (
+    <HStack alignItems="flex-start" overflow="hidden">
+      <Sidebar logo={<LogoMark />}>
+        <SidebarItem
+          active
+          classNames={classNames}
+          icon="home"
+          onClick={() => undefined}
+          title="Home"
+          tooltipContent="Home"
+        />
+      </Sidebar>
+    </HStack>
+  )}
+</StylesExplorer>
+
+## Selectors
+
+<ComponentStylesTable componentName="SidebarItem" styles={webStylesData} />
diff --git a/apps/docs/docs/components/navigation/SidebarItem/index.mdx b/apps/docs/docs/components/navigation/SidebarItem/index.mdx
index f8b94cc0ea..65388061e9 100644
--- a/apps/docs/docs/components/navigation/SidebarItem/index.mdx
+++ b/apps/docs/docs/components/navigation/SidebarItem/index.mdx
@@ -14,14 +14,17 @@ import webPropsToc from ':docgen/web/navigation/SidebarItem/toc-props';
 
 import WebPropsTable from './_webPropsTable.mdx';
 import WebExamples, { toc as webExamplesToc } from './_webExamples.mdx';
+import WebStyles, { toc as webStylesToc } from './_webStyles.mdx';
 import webMetadata from './webMetadata.json';
 
 <VStack gap={5}>
   <ComponentHeader title="SidebarItem" webMetadata={webMetadata} />
   <ComponentTabsContainer
     webPropsTable={<WebPropsTable />}
+    webStyles={<WebStyles />}
     webExamples={<WebExamples />}
     webExamplesToc={webExamplesToc}
     webPropsToc={webPropsToc}
+    webStylesToc={webStylesToc}
   />
 </VStack>
diff --git a/apps/docs/docs/components/navigation/SidebarItem/webMetadata.json b/apps/docs/docs/components/navigation/SidebarItem/webMetadata.json
index 648e617b7a..ff3117cd23 100644
--- a/apps/docs/docs/components/navigation/SidebarItem/webMetadata.json
+++ b/apps/docs/docs/components/navigation/SidebarItem/webMetadata.json
@@ -17,7 +17,7 @@
   "dependencies": [
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/navigation/SidebarMoreMenu/webMetadata.json b/apps/docs/docs/components/navigation/SidebarMoreMenu/webMetadata.json
index 5fcaf9184d..bba58c545c 100644
--- a/apps/docs/docs/components/navigation/SidebarMoreMenu/webMetadata.json
+++ b/apps/docs/docs/components/navigation/SidebarMoreMenu/webMetadata.json
@@ -25,7 +25,7 @@
   "dependencies": [
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/navigation/TabLabel/mobileMetadata.json b/apps/docs/docs/components/navigation/TabLabel/mobileMetadata.json
index af4c63704f..a19864c6e1 100644
--- a/apps/docs/docs/components/navigation/TabLabel/mobileMetadata.json
+++ b/apps/docs/docs/components/navigation/TabLabel/mobileMetadata.json
@@ -16,7 +16,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/navigation/TabNavigation/mobileMetadata.json b/apps/docs/docs/components/navigation/TabNavigation/mobileMetadata.json
index 4b2b7ef553..1bb03cbb63 100644
--- a/apps/docs/docs/components/navigation/TabNavigation/mobileMetadata.json
+++ b/apps/docs/docs/components/navigation/TabNavigation/mobileMetadata.json
@@ -21,7 +21,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/navigation/TabbedChips/mobileMetadata.json b/apps/docs/docs/components/navigation/TabbedChips/mobileMetadata.json
index 745a786e7b..dbf20bf601 100644
--- a/apps/docs/docs/components/navigation/TabbedChips/mobileMetadata.json
+++ b/apps/docs/docs/components/navigation/TabbedChips/mobileMetadata.json
@@ -13,7 +13,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/navigation/TabbedChipsAlpha/mobileMetadata.json b/apps/docs/docs/components/navigation/TabbedChipsAlpha/mobileMetadata.json
index 98412d5d70..49a6d1fa82 100644
--- a/apps/docs/docs/components/navigation/TabbedChipsAlpha/mobileMetadata.json
+++ b/apps/docs/docs/components/navigation/TabbedChipsAlpha/mobileMetadata.json
@@ -29,7 +29,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/navigation/Tabs/mobileMetadata.json b/apps/docs/docs/components/navigation/Tabs/mobileMetadata.json
index c0db513f49..c8fc565aa3 100644
--- a/apps/docs/docs/components/navigation/Tabs/mobileMetadata.json
+++ b/apps/docs/docs/components/navigation/Tabs/mobileMetadata.json
@@ -20,7 +20,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/navigation/TopNavBar/mobileMetadata.json b/apps/docs/docs/components/navigation/TopNavBar/mobileMetadata.json
index 3fd09a8015..13af54de36 100644
--- a/apps/docs/docs/components/navigation/TopNavBar/mobileMetadata.json
+++ b/apps/docs/docs/components/navigation/TopNavBar/mobileMetadata.json
@@ -12,7 +12,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/navigation/Tour/mobileMetadata.json b/apps/docs/docs/components/navigation/Tour/mobileMetadata.json
index dcb490e8f9..636878e6ab 100644
--- a/apps/docs/docs/components/navigation/Tour/mobileMetadata.json
+++ b/apps/docs/docs/components/navigation/Tour/mobileMetadata.json
@@ -11,7 +11,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/navigation/Tour/webMetadata.json b/apps/docs/docs/components/navigation/Tour/webMetadata.json
index 53c33ef98b..3cdd3102a9 100644
--- a/apps/docs/docs/components/navigation/Tour/webMetadata.json
+++ b/apps/docs/docs/components/navigation/Tour/webMetadata.json
@@ -12,7 +12,7 @@
   "dependencies": [
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/numbers/RollingNumber/mobileMetadata.json b/apps/docs/docs/components/numbers/RollingNumber/mobileMetadata.json
index 989c9eeae0..acf6065693 100644
--- a/apps/docs/docs/components/numbers/RollingNumber/mobileMetadata.json
+++ b/apps/docs/docs/components/numbers/RollingNumber/mobileMetadata.json
@@ -7,7 +7,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/other/Calendar/webMetadata.json b/apps/docs/docs/components/other/Calendar/webMetadata.json
index 1ac432167b..5d9f8f465a 100644
--- a/apps/docs/docs/components/other/Calendar/webMetadata.json
+++ b/apps/docs/docs/components/other/Calendar/webMetadata.json
@@ -12,7 +12,7 @@
   "dependencies": [
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/other/DatePicker/mobileMetadata.json b/apps/docs/docs/components/other/DatePicker/mobileMetadata.json
index 6a1739571d..c67219b293 100644
--- a/apps/docs/docs/components/other/DatePicker/mobileMetadata.json
+++ b/apps/docs/docs/components/other/DatePicker/mobileMetadata.json
@@ -24,7 +24,7 @@
   "dependencies": [
     {
       "name": "react-native-safe-area-context",
-      "version": "^4.10.5"
+      "version": "5.6.0"
     }
   ]
 }
diff --git a/apps/docs/docs/components/other/DatePicker/webMetadata.json b/apps/docs/docs/components/other/DatePicker/webMetadata.json
index c785ad8c75..bcf504b892 100644
--- a/apps/docs/docs/components/other/DatePicker/webMetadata.json
+++ b/apps/docs/docs/components/other/DatePicker/webMetadata.json
@@ -29,7 +29,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/other/DotCount/mobileMetadata.json b/apps/docs/docs/components/other/DotCount/mobileMetadata.json
index 78d58b2e5c..bbef0f0284 100644
--- a/apps/docs/docs/components/other/DotCount/mobileMetadata.json
+++ b/apps/docs/docs/components/other/DotCount/mobileMetadata.json
@@ -20,7 +20,7 @@
   "dependencies": [
     {
       "name": "react-native-reanimated",
-      "version": "^3.14.0"
+      "version": "4.1.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/other/DotSymbol/mobileMetadata.json b/apps/docs/docs/components/other/DotSymbol/mobileMetadata.json
index aed0ba53c3..f5077fee12 100644
--- a/apps/docs/docs/components/other/DotSymbol/mobileMetadata.json
+++ b/apps/docs/docs/components/other/DotSymbol/mobileMetadata.json
@@ -24,7 +24,7 @@
   "dependencies": [
     {
       "name": "react-native-svg",
-      "version": "^14.1.0"
+      "version": "15.12.1"
     }
   ]
 }
diff --git a/apps/docs/docs/components/other/ThemeProvider/_mobileExamples.mdx b/apps/docs/docs/components/other/ThemeProvider/_mobileExamples.mdx
index 744a052539..72ae20c962 100644
--- a/apps/docs/docs/components/other/ThemeProvider/_mobileExamples.mdx
+++ b/apps/docs/docs/components/other/ThemeProvider/_mobileExamples.mdx
@@ -52,6 +52,8 @@ ThemeProviders can be nested to create theme overrides for specific sections.
 </ThemeProvider>
 ```
 
+### Overriding theme values
+
 When nesting, you may want to override specific color values from the current theme. Overrides must be conditionally applied because we don't enforce that a theme has both light and dark colors defined.
 
 ```jsx
@@ -80,7 +82,7 @@ const customTheme = {
 } as const satisfies Theme;
 ```
 
-## Theme inheritence
+### Theme inheritance
 
 Nested ThemeProviders do not automatically inherit the theme from their parent provider. You can manually inherit the theme with the `useTheme` hook.
 
diff --git a/apps/docs/docs/components/other/ThemeProvider/_webExamples.mdx b/apps/docs/docs/components/other/ThemeProvider/_webExamples.mdx
index a2033aae8a..e1ada240a6 100644
--- a/apps/docs/docs/components/other/ThemeProvider/_webExamples.mdx
+++ b/apps/docs/docs/components/other/ThemeProvider/_webExamples.mdx
@@ -46,11 +46,11 @@ theme.fontSize.display3; // "2.5rem"
 For best performance, prefer to use CSS Variables instead of the `useTheme` hook whenever possible.
 :::
 
-## ThemeProvider CSS Variables
+## CSS Variables
 
 CSS Variables are created for every value in the theme.
 
-For best performance, prefer to use CSS Variables instead of the `useTheme` hook whenever possible.
+For best performance, prefer using CSS Variables instead of the `useTheme` hook whenever possible.
 
 ```jsx
 const theme = useTheme();
@@ -70,6 +70,23 @@ You can see all the CSS Variables for the `defaultTheme` below.
 
 <JSONCodeBlock json={createThemeCssVars(defaultTheme)} />
 
+### CSS Variable inheritance
+
+When ThemeProviders are nested, the nested provider only sets CSS variables that differ from its parent.
+Unchanged values are inherited through the DOM via normal CSS custom property inheritance.
+
+This optimization breaks when a ThemeProvider renders **outside** its parent's DOM tree — for example, inside a portal — because CSS inheritance requires DOM ancestry. In these cases, use the `isolated` prop to ensure the ThemeProvider writes all CSS variables:
+
+```tsx
+<ThemeProvider isolated theme={theme} activeColorScheme="light">
+  {/* All CSS variables are written, regardless of the parent theme */}
+</ThemeProvider>
+```
+
+:::tip
+CDS overlay components (Modal, Toast, Alert, etc.) handle this automatically via [PortalProvider](/components/overlay/PortalProvider). You only need the `isolated` prop when rendering a ThemeProvider inside a custom portal that is not managed by CDS.
+:::
+
 ## ThemeProvider classnames
 
 The ThemeProvider renders with CSS classnames based on the `activeColorScheme` and the theme's `id`.
@@ -95,6 +112,8 @@ ThemeProviders can be nested to create theme overrides for specific sections.
 </ThemeProvider>
 ```
 
+### Overriding theme values
+
 When nesting, you may want to override specific color values from the current theme. Overrides must be conditionally applied because we don't enforce that a theme has both light and dark colors defined.
 
 ```jsx
@@ -123,7 +142,7 @@ const customTheme = {
 } as const satisfies Theme;
 ```
 
-## Theme inheritence
+### Theme inheritance
 
 Nested ThemeProviders do not automatically inherit the theme from their parent provider. You can manually inherit the theme with the `useTheme` hook.
 
diff --git a/apps/docs/docs/components/overlay/Alert/webMetadata.json b/apps/docs/docs/components/overlay/Alert/webMetadata.json
index c89a519b50..0d04f735ea 100644
--- a/apps/docs/docs/components/overlay/Alert/webMetadata.json
+++ b/apps/docs/docs/components/overlay/Alert/webMetadata.json
@@ -17,7 +17,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/overlay/FullscreenAlert/webMetadata.json b/apps/docs/docs/components/overlay/FullscreenAlert/webMetadata.json
index 48a8300764..436ca5e1ec 100644
--- a/apps/docs/docs/components/overlay/FullscreenAlert/webMetadata.json
+++ b/apps/docs/docs/components/overlay/FullscreenAlert/webMetadata.json
@@ -21,7 +21,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/overlay/FullscreenModal/webMetadata.json b/apps/docs/docs/components/overlay/FullscreenModal/webMetadata.json
index 9fb8bfb472..b1341fbd57 100644
--- a/apps/docs/docs/components/overlay/FullscreenModal/webMetadata.json
+++ b/apps/docs/docs/components/overlay/FullscreenModal/webMetadata.json
@@ -17,7 +17,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/overlay/FullscreenModalLayout/webMetadata.json b/apps/docs/docs/components/overlay/FullscreenModalLayout/webMetadata.json
index 94605e2da2..32dfbe0dc5 100644
--- a/apps/docs/docs/components/overlay/FullscreenModalLayout/webMetadata.json
+++ b/apps/docs/docs/components/overlay/FullscreenModalLayout/webMetadata.json
@@ -21,7 +21,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/overlay/Modal/webMetadata.json b/apps/docs/docs/components/overlay/Modal/webMetadata.json
index 6be86f4db3..0f641bc4f1 100644
--- a/apps/docs/docs/components/overlay/Modal/webMetadata.json
+++ b/apps/docs/docs/components/overlay/Modal/webMetadata.json
@@ -37,7 +37,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/overlay/PopoverPanel/webMetadata.json b/apps/docs/docs/components/overlay/PopoverPanel/webMetadata.json
index 480a8cb920..0fe6c6205b 100644
--- a/apps/docs/docs/components/overlay/PopoverPanel/webMetadata.json
+++ b/apps/docs/docs/components/overlay/PopoverPanel/webMetadata.json
@@ -24,7 +24,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/overlay/PortalProvider/_mobileExamples.mdx b/apps/docs/docs/components/overlay/PortalProvider/_mobileExamples.mdx
index 5c64fa8cf2..53dbac6446 100644
--- a/apps/docs/docs/components/overlay/PortalProvider/_mobileExamples.mdx
+++ b/apps/docs/docs/components/overlay/PortalProvider/_mobileExamples.mdx
@@ -1,6 +1,6 @@
 ### Basic usage
 
-The PortalProvider component is typically used at the root of your mobile application to manage overlay components:
+Render PortalProvider once near the root of your application, to manage overlay components:
 
 ```tsx
 function App() {
diff --git a/apps/docs/docs/components/overlay/PortalProvider/_webExamples.mdx b/apps/docs/docs/components/overlay/PortalProvider/_webExamples.mdx
index 48b39e28eb..673d79f8f5 100644
--- a/apps/docs/docs/components/overlay/PortalProvider/_webExamples.mdx
+++ b/apps/docs/docs/components/overlay/PortalProvider/_webExamples.mdx
@@ -1,6 +1,6 @@
 ### Basic usage
 
-The PortalProvider component is typically used at the root of your application to manage overlay components:
+Render PortalProvider once near the root of your application:
 
 ```tsx live
 function Example() {
diff --git a/apps/docs/docs/components/overlay/PortalProvider/index.mdx b/apps/docs/docs/components/overlay/PortalProvider/index.mdx
index 32aa69a7e4..43ba352540 100644
--- a/apps/docs/docs/components/overlay/PortalProvider/index.mdx
+++ b/apps/docs/docs/components/overlay/PortalProvider/index.mdx
@@ -28,7 +28,7 @@ import mobileMetadata from './mobileMetadata.json';
     title="PortalProvider"
     webMetadata={webMetadata}
     mobileMetadata={mobileMetadata}
-    description="The PortalProvider component manages the rendering of portals for modals, toasts, alerts, and tooltips. It provides a centralized way to handle overlay components in your application."
+    description="A required root-level provider that enables CDS overlay components (Modal, Toast, Alert, Tooltip, Tray). Must be rendered once near the root of your application, alongside ThemeProvider."
   />
 
   <ComponentTabsContainer
diff --git a/apps/docs/docs/components/overlay/PortalProvider/mobileMetadata.json b/apps/docs/docs/components/overlay/PortalProvider/mobileMetadata.json
index f1e0cc7209..0283a47870 100644
--- a/apps/docs/docs/components/overlay/PortalProvider/mobileMetadata.json
+++ b/apps/docs/docs/components/overlay/PortalProvider/mobileMetadata.json
@@ -1,7 +1,7 @@
 {
   "import": "import { PortalProvider } from '@coinbase/cds-mobile/overlays/PortalProvider'",
   "source": "https://github.com/coinbase/cds/blob/master/packages/mobile/src/overlays/PortalProvider.tsx",
-  "description": "A component that manages the rendering of portals for overlay components.",
+  "description": "A required root-level provider that manages the registry of active CDS overlay components (Modal, Toast, Alert, Tooltip, Tray).",
   "relatedComponents": [
     {
       "label": "Modal",
diff --git a/apps/docs/docs/components/overlay/PortalProvider/webMetadata.json b/apps/docs/docs/components/overlay/PortalProvider/webMetadata.json
index 03a05e975d..8cdfcef11b 100644
--- a/apps/docs/docs/components/overlay/PortalProvider/webMetadata.json
+++ b/apps/docs/docs/components/overlay/PortalProvider/webMetadata.json
@@ -1,7 +1,7 @@
 {
   "import": "import { PortalProvider } from '@coinbase/cds-web/overlays/PortalProvider'",
   "source": "https://github.com/coinbase/cds/blob/master/packages/web/src/overlays/PortalProvider.tsx",
-  "description": "A component that manages the rendering of portals for overlay components.",
+  "description": "A required root-level provider that creates the DOM containers for CDS overlay components (Modal, Toast, Alert, Tooltip, Tray) and manages overlay state.",
   "storybook": "https://cds-storybook.coinbase.com/?path=/story/components-portalprovider--with-portal-nodes",
   "relatedComponents": [
     {
@@ -20,7 +20,7 @@
   "dependencies": [
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/overlay/Toast/_webExamples.mdx b/apps/docs/docs/components/overlay/Toast/_webExamples.mdx
index 0b8d249aac..8a7b457869 100644
--- a/apps/docs/docs/components/overlay/Toast/_webExamples.mdx
+++ b/apps/docs/docs/components/overlay/Toast/_webExamples.mdx
@@ -325,7 +325,7 @@ function UndoDeleteExample() {
           <Text font="body">{item}</Text>
           <IconButton
             name="trashCan"
-            variant="foregroundMuted"
+            variant="secondary"
             onClick={() => handleDelete(index)}
             accessibilityLabel={`Delete ${item}`}
           />
diff --git a/apps/docs/docs/components/overlay/Toast/webMetadata.json b/apps/docs/docs/components/overlay/Toast/webMetadata.json
index 690f61dd3f..40cc051bb9 100644
--- a/apps/docs/docs/components/overlay/Toast/webMetadata.json
+++ b/apps/docs/docs/components/overlay/Toast/webMetadata.json
@@ -25,7 +25,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/overlay/Tooltip/webMetadata.json b/apps/docs/docs/components/overlay/Tooltip/webMetadata.json
index 1355f725a8..d1d828744a 100644
--- a/apps/docs/docs/components/overlay/Tooltip/webMetadata.json
+++ b/apps/docs/docs/components/overlay/Tooltip/webMetadata.json
@@ -25,7 +25,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/overlay/Tray/mobileMetadata.json b/apps/docs/docs/components/overlay/Tray/mobileMetadata.json
index 2e1051b2e4..034502ee0c 100644
--- a/apps/docs/docs/components/overlay/Tray/mobileMetadata.json
+++ b/apps/docs/docs/components/overlay/Tray/mobileMetadata.json
@@ -24,7 +24,7 @@
   "dependencies": [
     {
       "name": "react-native-safe-area-context",
-      "version": "^4.10.5"
+      "version": "5.6.0"
     }
   ]
 }
diff --git a/apps/docs/docs/components/overlay/Tray/webMetadata.json b/apps/docs/docs/components/overlay/Tray/webMetadata.json
index 0d3166435d..7315ea3ee1 100644
--- a/apps/docs/docs/components/overlay/Tray/webMetadata.json
+++ b/apps/docs/docs/components/overlay/Tray/webMetadata.json
@@ -29,7 +29,7 @@
     },
     {
       "name": "react-dom",
-      "version": "^18.3.1"
+      "version": "^18.0.0 || ~19.1.2"
     }
   ]
 }
diff --git a/apps/docs/docs/components/typography/Link/_mobileExamples.mdx b/apps/docs/docs/components/typography/Link/_mobileExamples.mdx
index bb063fbb78..cf1a325cbc 100644
--- a/apps/docs/docs/components/typography/Link/_mobileExamples.mdx
+++ b/apps/docs/docs/components/typography/Link/_mobileExamples.mdx
@@ -188,7 +188,8 @@ React Native flattens nested Text into a string and cannot focus internal links
 ```jsx
 import { AccessibilityInfo, Linking } from 'react-native';
 
-<TextLegal
+<Text
+  font="legal"
   suppressHighlighting
   accessibilityLabel="Consider a case where you have a block of text with an inline link. Like so. You may want to write your code like this. Tap to go to coinbase.com."
   accessibilityRole="link"
@@ -205,7 +206,7 @@ import { AccessibilityInfo, Linking } from 'react-native';
 >
   Consider a case where you have a block of text with an inline link.{' '}
   <Link to="https://www.coinbase.com/">Like so.</Link> You may want to write your code like this.
-</TextLegal>;
+</Text>;
 ```
 
 ### Multiple nested links
diff --git a/apps/docs/docs/components/typography/Text/_mobileExamples.mdx b/apps/docs/docs/components/typography/Text/_mobileExamples.mdx
index 0e5a7fd240..484251c9e4 100644
--- a/apps/docs/docs/components/typography/Text/_mobileExamples.mdx
+++ b/apps/docs/docs/components/typography/Text/_mobileExamples.mdx
@@ -57,34 +57,25 @@ All text components support a few numeric typography styles, overflow, text tran
 
 ### A11y
 
-On the web, there are different HTML elements to wrap texts with to communicated semantic meanings of the strings. Therefore, CDS does not make any assumptions about the semantic of the text but ask developers to choose the approriate semantic HTML element via the `as` prop.
+On mobile, `Text` automatically sets `accessibilityRole="header"` for display and title font variants (`display1`, `display2`, `display3`, `title1`, `title2`). This ensures screen readers correctly identify these elements as headings without requiring any additional props.
 
 ```jsx
-<Text font="display1" as="h1">Display</Text>
+// accessibilityRole="header" is applied automatically
+<Text font="title1">Page Title</Text>
 
-// If we want large text but not as the page title
-<Text font="display1" as="p">Display</Text>
+// Other font variants do not receive a default accessibilityRole
+<Text font="body">Regular body text</Text>
 ```
 
-### Headings
+You can override the default `accessibilityRole` if needed:
 
-Headings help users understand the hierarchical page organization. All pages on the web should at least have a `<h1>` level heading providing the title or summary of the page. Screen readers users prefer that only the document title be `<h1>` on a page. Headings should NOT be used inside tables header elements (`<th>`).
-
-When using headings, it is confusing to screen reader users to skip heading levels to be more specific (ex. do not go from `<h2>` to ` <h4>`). However, it is permissible to use a higher heading level after a lower heading level, i.e. from `<h4>`to`<h2>`, if the outline of the page calls for it.
-
-One common misconception is that headings for a web app have consistent typography across different pages. That is not an accessibility requirement or a design guideline that our product designers follow. Therefore, based on the content layouts, product engineers should determine the approriate semantic tags to use for each string and choose the proper heading element when the texts convey hierarchical content information.
-
-Yale has a detailed [web accessibility article](https://usability.yale.edu/web-accessibility/articles/headings#:~:text=One%20of%20the%20most%20common,Do%20not%20overuse%20headings) about how to use headings if you want to learn more.
-
-In a nutshell, you can reference the following for the most common text semantics.
+```jsx
+// Override to remove the default header role
+<Text font="title1" accessibilityRole="none">Decorative Title</Text>
 
-- `h1` for page title (exactly one per page)
-- `h2`-`h4` for hierarchical section headings (CDS does not foresee the need for heading level 5 or 6 in Coinbase products).
-- `p` for paragraphs of text with default block display. It can be wrapped inside `blockquote`, `li`, or `label` elements for additional semantics.
-- `li` for bullet points in a list.
-- `time`, `abbr`, `sup`, `kbd`, etc, for granular semantics.
-- `pre` and `code` for preformatted code blocks.
-- `span` when no semantics are required (within buttons for example) and it also has default inline display.
+// Explicitly set a different role
+<Text font="title1" accessibilityRole="summary">Summary Section</Text>
+```
 
 ### With Links
 
diff --git a/apps/docs/docs/getting-started/installation/_mobileContent.mdx b/apps/docs/docs/getting-started/installation/_mobileContent.mdx
index 60ab85c711..05d0067062 100644
--- a/apps/docs/docs/getting-started/installation/_mobileContent.mdx
+++ b/apps/docs/docs/getting-started/installation/_mobileContent.mdx
@@ -33,18 +33,24 @@ For React Native projects, ensure you have set up your environment for React Nat
 ## Getting started
 </MDXArticle>
 <MDXArticle>
-### 1. Render a ThemeProvider
+### 1. Render providers
 
-Render a ThemeProvider at the root of your application, and pass the `theme` and `activeColorScheme`.
+Render the following providers at the root of your application:
+
+- **ThemeProvider** — applies the CDS theme and color scheme
+- **PortalProvider** — manages the registry of active overlay components (Modal, Toast, Alert, Tooltip, Tray). ([read more &rarr;](/components/overlay/PortalProvider))
 
 ```tsx
 import { ThemeProvider } from '@coinbase/cds-mobile/system';
+import { PortalProvider } from '@coinbase/cds-mobile/overlays/PortalProvider';
 import { defaultTheme } from '@coinbase/cds-mobile/themes/defaultTheme';
 import App from './App';
 
 const Index = () => (
   <ThemeProvider theme={defaultTheme} activeColorScheme="light">
-    <App />
+    <PortalProvider>
+      <App />
+    </PortalProvider>
   </ThemeProvider>
 );
 
diff --git a/apps/docs/docs/getting-started/installation/_webContent.mdx b/apps/docs/docs/getting-started/installation/_webContent.mdx
index d0e5dac40a..fdeb0338b4 100644
--- a/apps/docs/docs/getting-started/installation/_webContent.mdx
+++ b/apps/docs/docs/getting-started/installation/_webContent.mdx
@@ -49,21 +49,26 @@ import '@coinbase/cds-web/defaultFontStyles';
 </MDXArticle>
 <MDXArticle>
 
-### 2. Render a ThemeProvider and MediaQueryProvider
+### 2. Render providers
 
-Render a ThemeProvider at the root of your application, and pass the `theme` and `activeColorScheme`.
+Render the following providers at the root of your application:
 
-Render a MediaQueryProvider for components that use the `useMediaQuery` hook.
+- **ThemeProvider** — applies the CDS theme and color scheme
+- **MediaQueryProvider** — prevents issues with `window.matchMedia()` in SSR environments ([read more &rarr;](/components/other/MediaQueryProvider#server-side-rendering))
+- **PortalProvider** — creates the DOM containers required by overlay components (Modal, Toast, Alert, Tooltip, Tray). ([read more &rarr;](/components/overlay/PortalProvider))
 
 ```tsx
 import { ThemeProvider, MediaQueryProvider } from '@coinbase/cds-web/system';
+import { PortalProvider } from '@coinbase/cds-web/overlays/PortalProvider';
 import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';
 import App from './App';
 
 const Index = () => (
   <MediaQueryProvider>
     <ThemeProvider theme={defaultTheme} activeColorScheme="light">
-      <App />
+      <PortalProvider>
+        <App />
+      </PortalProvider>
     </ThemeProvider>
   </MediaQueryProvider>
 );
@@ -104,6 +109,7 @@ import '@coinbase/cds-web/defaultFontStyles';
 import '@coinbase/cds-web/globalStyles';
 import { createRoot } from 'react-dom/client';
 import { ThemeProvider, MediaQueryProvider } from '@coinbase/cds-web/system';
+import { PortalProvider } from '@coinbase/cds-web/overlays/PortalProvider';
 import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';
 import App from './App';
 
@@ -112,7 +118,9 @@ const root = createRoot(document.getElementById('root'));
 root.render(
   <MediaQueryProvider>
     <ThemeProvider theme={defaultTheme} activeColorScheme="light">
-      <App />
+      <PortalProvider>
+        <App />
+      </PortalProvider>
     </ThemeProvider>
   </MediaQueryProvider>,
 );
diff --git a/apps/docs/docs/hooks/useMergeRefs/_api.mdx b/apps/docs/docs/hooks/useMergeRefs/_api.mdx
index 0266f16ead..ef38176406 100644
--- a/apps/docs/docs/hooks/useMergeRefs/_api.mdx
+++ b/apps/docs/docs/hooks/useMergeRefs/_api.mdx
@@ -5,10 +5,10 @@ import { MDXArticle } from '@site/src/components/page/MDXArticle';
 
 The `useMergeRefs` hook accepts a spread of refs as its parameter:
 
-- `...refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null)[]` - An array of refs to merge. Can include:
-  - `MutableRefObject` - Object-based refs created with `useRef`
-  - `LegacyRef` - Function-based refs or string refs (legacy)
-  - `undefined` or `null` - Optional refs that might not be provided
+- `...refs: (React.Ref<T> | undefined)[]` - An array of refs to merge. Can include:
+  - `RefObject` - Object-based refs created with `useRef` / `createRef`
+  - `RefCallback` - Function refs
+  - `undefined` - Optional refs that might not be provided
 
 </MDXArticle>
 
diff --git a/apps/docs/docs/hooks/useMergeRefs/metadata.json b/apps/docs/docs/hooks/useMergeRefs/metadata.json
index 22d542ff63..f958e8363a 100644
--- a/apps/docs/docs/hooks/useMergeRefs/metadata.json
+++ b/apps/docs/docs/hooks/useMergeRefs/metadata.json
@@ -1,5 +1,5 @@
 {
-  "import": "import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs'",
+  "import": "import { useMergeRefs } from '@coinbase/cds-common/utils/mergeRefs'",
   "source": "https://github.com/coinbase/cds/blob/master/packages/common/src/hooks/useMergeRefs.ts",
   "description": "Combines multiple refs into a single ref callback, allowing a component to work with multiple ref instances simultaneously. Useful when you need to combine refs from different sources, such as forwarded refs and internal component state."
 }
diff --git a/apps/docs/docusaurus.config.ts b/apps/docs/docusaurus.config.ts
index 63ce097a96..7e75ab7e7c 100644
--- a/apps/docs/docusaurus.config.ts
+++ b/apps/docs/docusaurus.config.ts
@@ -6,9 +6,7 @@ import commonPackageJson from '../../packages/common/package.json';
 import iconsPackageJson from '../../packages/icons/package.json';
 import illustrationsPackageJson from '../../packages/illustrations/package.json';
 import mobilePackageJson from '../../packages/mobile/package.json';
-import mobileVisualizationPackageJson from '../../packages/mobile-visualization/package.json';
 import webPackageJson from '../../packages/web/package.json';
-import webVisualizationPackageJson from '../../packages/web-visualization/package.json';
 
 import docgenConfig from './docgen.config';
 
@@ -50,15 +48,7 @@ const webpackPlugin = () => {
                 ),
                 '@coinbase/cds-utils': path.resolve(__dirname, '../../packages/utils/src'),
                 '@coinbase/cds-mobile': path.resolve(__dirname, '../../packages/mobile/src'),
-                '@coinbase/cds-mobile-visualization': path.resolve(
-                  __dirname,
-                  '../../packages/mobile-visualization/src',
-                ),
                 '@coinbase/cds-web': path.resolve(__dirname, '../../packages/web/src'),
-                '@coinbase/cds-web-visualization': path.resolve(
-                  __dirname,
-                  '../../packages/web-visualization/src',
-                ),
               }),
         },
       },
@@ -115,8 +105,6 @@ const config: Config = {
     cdsCommonVersion: commonPackageJson.version,
     cdsIconsVersion: iconsPackageJson.version,
     cdsIllustrationsVersion: illustrationsPackageJson.version,
-    cdsMobileVisualizationVersion: mobileVisualizationPackageJson.version,
-    cdsWebVisualizationVersion: webVisualizationPackageJson.version,
   },
 
   // Even if you don't use internationalization, you can use this field to set
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 78e8048584..e64cc54139 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -21,9 +21,7 @@
     "@coinbase/cds-icons": "workspace:^",
     "@coinbase/cds-illustrations": "workspace:^",
     "@coinbase/cds-mobile": "workspace:^",
-    "@coinbase/cds-mobile-visualization": "workspace:^",
     "@coinbase/cds-web": "workspace:^",
-    "@coinbase/cds-web-visualization": "workspace:^",
     "@coinbase/docusaurus-plugin-docgen": "workspace:^",
     "@coinbase/docusaurus-plugin-kbar": "workspace:^",
     "@coinbase/docusaurus-plugin-llm-dev-server": "workspace:^",
@@ -56,16 +54,16 @@
     "lz-string": "^1.5.0",
     "prettier": "^3.6.2",
     "prism-react-renderer": "^2.4.1",
-    "react": "^18.3.1",
+    "react": "19.1.2",
     "react-colorful": "^5.6.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "19.1.2",
     "react-live": "^4.1.8",
     "three": "0.177.0"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1",
     "@docusaurus/module-type-aliases": "~3.7.0",
     "@docusaurus/tsconfig": "~3.7.0",
@@ -75,8 +73,8 @@
     "@linaria/webpack-loader": "^3.0.0-beta.22",
     "@types/culori": "^4",
     "@types/lz-string": "^1.5.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
     "@types/three": "0.177.0",
     "babel-loader": "^10.0.0",
     "css-loader": "^7.1.2",
diff --git a/apps/docs/sidebars.ts b/apps/docs/sidebars.ts
index 69b6e4af3b..30c5041e80 100644
--- a/apps/docs/sidebars.ts
+++ b/apps/docs/sidebars.ts
@@ -939,26 +939,6 @@ const sidebars: SidebarsConfig = {
             },
           },
         },
-        {
-          type: 'link',
-          href: 'https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/CHANGELOG.md',
-          label: '@coinbase/cds-mobile-visualization',
-          customProps: {
-            kbar: {
-              keywords: 'changelog',
-            },
-          },
-        },
-        {
-          type: 'link',
-          href: 'https://github.com/coinbase/cds/blob/master/packages/web-visualization/CHANGELOG.md',
-          label: '@coinbase/cds-web-visualization',
-          customProps: {
-            kbar: {
-              keywords: 'changelog',
-            },
-          },
-        },
       ],
     },
   ],
diff --git a/apps/docs/src/components/ButtonLink/index.tsx b/apps/docs/src/components/ButtonLink/index.tsx
index c1f11fd01b..960b28b89d 100644
--- a/apps/docs/src/components/ButtonLink/index.tsx
+++ b/apps/docs/src/components/ButtonLink/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { cx } from '@coinbase/cds-web';
 import { Button, type ButtonProps } from '@coinbase/cds-web/buttons';
 import isInternalUrl from '@docusaurus/isInternalUrl';
diff --git a/apps/docs/src/components/FooterLink/index.tsx b/apps/docs/src/components/FooterLink/index.tsx
index adaacdfac4..d35c99daf2 100644
--- a/apps/docs/src/components/FooterLink/index.tsx
+++ b/apps/docs/src/components/FooterLink/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { Text, type TextDefaultElement, type TextProps } from '@coinbase/cds-web/typography/Text';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import Link, { type Props } from '@docusaurus/Link';
diff --git a/apps/docs/src/components/home/AnimatedHero/HeroCell.tsx b/apps/docs/src/components/home/AnimatedHero/HeroCell.tsx
index 2cbe2708f3..8978b282d9 100644
--- a/apps/docs/src/components/home/AnimatedHero/HeroCell.tsx
+++ b/apps/docs/src/components/home/AnimatedHero/HeroCell.tsx
@@ -66,10 +66,10 @@ export const HeroCell = ({
       <Box
         alignItems="center"
         borderRadius={{ base: 200, phone: 100 }}
-        dangerouslySetBackground={isColor ? character : undefined}
         height="100%"
         justifyContent="center"
         overflow="hidden"
+        style={isColor ? { backgroundColor: character } : undefined}
         width="100%"
       >
         <Text font={{ base: 'display2', tablet: 'display3', phone: 'title4' }}>
diff --git a/apps/docs/src/components/home/QuickStartCampaignCard/index.tsx b/apps/docs/src/components/home/QuickStartCampaignCard/index.tsx
index 0e2a272823..76b638e100 100644
--- a/apps/docs/src/components/home/QuickStartCampaignCard/index.tsx
+++ b/apps/docs/src/components/home/QuickStartCampaignCard/index.tsx
@@ -9,8 +9,8 @@ export type QuickStartLinkProps = {
   title: string;
   description: string;
   link: { label: string; to: string } | { label: string; href: string };
-  BannerComponentLight: React.ComponentType<React.SVGProps<SVGSVGElement>>;
-  BannerComponentDark: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  BannerComponentLight: React.ComponentType<{ width?: string | number; height?: string | number }>;
+  BannerComponentDark: React.ComponentType<{ width?: string | number; height?: string | number }>;
 };
 
 const cardTitleFontConfig = { base: 'title4', desktop: 'title2' } as const;
diff --git a/apps/docs/src/components/kbar/KBarAnimator.tsx b/apps/docs/src/components/kbar/KBarAnimator.tsx
index 1d0d78a6f5..aa2a8f67b5 100644
--- a/apps/docs/src/components/kbar/KBarAnimator.tsx
+++ b/apps/docs/src/components/kbar/KBarAnimator.tsx
@@ -30,7 +30,7 @@ const KBarAnimator = memo(function KBarAnimator({ children }: { children: React.
   const exitMs = options?.animations?.exitMs ?? 0;
 
   // Height animation
-  const previousHeight = useRef<number>();
+  const previousHeight = useRef<number>(undefined);
   useEffect(() => {
     // Only animate if we're actually showing
     if (visualState === VisualState.showing) {
diff --git a/apps/docs/src/components/page/ColorPairingTool/PlaygroundContent.tsx b/apps/docs/src/components/page/ColorPairingTool/PlaygroundContent.tsx
index 432027b8ae..7ad4f3107d 100644
--- a/apps/docs/src/components/page/ColorPairingTool/PlaygroundContent.tsx
+++ b/apps/docs/src/components/page/ColorPairingTool/PlaygroundContent.tsx
@@ -6,7 +6,7 @@ import { Card, MessagingCard } from '@coinbase/cds-web/cards';
 import { Box, HStack, VStack } from '@coinbase/cds-web/layout';
 import { Tag } from '@coinbase/cds-web/tag';
 import { Text } from '@coinbase/cds-web/typography';
-import { LineChart, Scrubber, SolidLine } from '@coinbase/cds-web-visualization';
+import { LineChart, Scrubber, SolidLine } from '@coinbase/cds-web/visualizations/chart';
 
 import CheckerboardSvg from './checkerboard.svg';
 import { aaTextColor } from './colorUtils';
diff --git a/apps/docs/src/components/page/ComponentPropsTable/ModalLink.tsx b/apps/docs/src/components/page/ComponentPropsTable/ModalLink.tsx
index dbec407807..b7fdd65977 100644
--- a/apps/docs/src/components/page/ComponentPropsTable/ModalLink.tsx
+++ b/apps/docs/src/components/page/ComponentPropsTable/ModalLink.tsx
@@ -9,7 +9,7 @@ import { Link, type LinkBaseProps } from '@coinbase/cds-web/typography/Link';
 export type ModalLinkProps = {
   children: string;
   content: React.ReactElement;
-  modalBodyRef?: React.RefObject<HTMLDivElement>;
+  modalBodyRef?: React.RefObject<HTMLDivElement | null>;
   modalBodyProps?: Omit<ModalBodyProps, 'children'>;
   title?: string;
 } & Omit<LinkBaseProps, 'content'>;
diff --git a/apps/docs/src/components/page/ComponentPropsTable/ParentTypesList.tsx b/apps/docs/src/components/page/ComponentPropsTable/ParentTypesList.tsx
index f41645312c..7ca9bc9bb4 100644
--- a/apps/docs/src/components/page/ComponentPropsTable/ParentTypesList.tsx
+++ b/apps/docs/src/components/page/ComponentPropsTable/ParentTypesList.tsx
@@ -22,7 +22,7 @@ function ParentTypesTable({
   sharedParentTypes,
   props,
   scrollContainerRef,
-}: ParentTypesItem & { scrollContainerRef: React.RefObject<HTMLDivElement> }) {
+}: ParentTypesItem & { scrollContainerRef: React.RefObject<HTMLDivElement | null> }) {
   const [searchValue, setSearchValue] = useState('');
   const filteredProps = useMemo(
     () =>
diff --git a/apps/docs/src/components/page/ComponentTabsContainer/index.tsx b/apps/docs/src/components/page/ComponentTabsContainer/index.tsx
index c7945480b2..a3bdde2817 100644
--- a/apps/docs/src/components/page/ComponentTabsContainer/index.tsx
+++ b/apps/docs/src/components/page/ComponentTabsContainer/index.tsx
@@ -49,7 +49,7 @@ const CustomTab = ({ id, label }: TabValue) => {
 };
 
 const CustomTabsActiveIndicator = (props: TabsActiveIndicatorProps) => {
-  return <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />;
+  return <TabsActiveIndicator background="bgPrimary" bottom={0} height={2} {...props} />;
 };
 
 export const ComponentTabsContainer: React.FC<ComponentMetaContainerProps> = ({
diff --git a/apps/docs/src/components/page/HookTabsContainer/index.tsx b/apps/docs/src/components/page/HookTabsContainer/index.tsx
index ac0273052b..df2a2cbc95 100644
--- a/apps/docs/src/components/page/HookTabsContainer/index.tsx
+++ b/apps/docs/src/components/page/HookTabsContainer/index.tsx
@@ -43,7 +43,7 @@ const CustomTab = ({ id, label }: TabValue) => {
 };
 
 const CustomTabsActiveIndicator = (props: TabsActiveIndicatorProps) => {
-  return <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />;
+  return <TabsActiveIndicator background="bgPrimary" bottom={0} height={2} {...props} />;
 };
 
 export const HookTabsContainer: React.FC<HookTabsContainerProps> = ({
diff --git a/apps/docs/src/components/page/JSONCodeBlock/index.tsx b/apps/docs/src/components/page/JSONCodeBlock/index.tsx
index f477eb4ea6..80eae8e223 100644
--- a/apps/docs/src/components/page/JSONCodeBlock/index.tsx
+++ b/apps/docs/src/components/page/JSONCodeBlock/index.tsx
@@ -5,8 +5,11 @@ import styles from './styles.module.css';
 
 export const JSONCodeBlock = ({ json }: { json: Serializable }) => {
   return (
-    <CodeBlock className={styles.jsonCodeBlock} language="json">
-      {JSON.stringify(json, null, 2)}
-    </CodeBlock>
+    <>
+      <CodeBlock className={styles.jsonCodeBlock} language="json">
+        {JSON.stringify(json, null, 2)}
+      </CodeBlock>
+      <br />
+    </>
   );
 };
diff --git a/apps/docs/src/components/page/ShareablePlayground/index.tsx b/apps/docs/src/components/page/ShareablePlayground/index.tsx
index b459d94057..a7bb73b72d 100644
--- a/apps/docs/src/components/page/ShareablePlayground/index.tsx
+++ b/apps/docs/src/components/page/ShareablePlayground/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { type JSX, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live';
 import { Collapsible } from '@coinbase/cds-web/collapsible/Collapsible';
 import { Icon } from '@coinbase/cds-web/icons/Icon';
diff --git a/apps/docs/src/components/page/SheetTabs/index.tsx b/apps/docs/src/components/page/SheetTabs/index.tsx
index 1d778b0cc0..c6cfd46b80 100644
--- a/apps/docs/src/components/page/SheetTabs/index.tsx
+++ b/apps/docs/src/components/page/SheetTabs/index.tsx
@@ -43,8 +43,8 @@ export const SheetTabs = (
   props: Omit<CDSTabsProps, 'TabComponent' | 'TabsActiveIndicatorComponent'>,
 ) => (
   <CDSTabs
-    {...props}
     TabComponent={CustomTab}
     TabsActiveIndicatorComponent={CustomTabsActiveIndicator}
+    {...props}
   />
 );
diff --git a/apps/docs/src/components/page/VersionLabel/index.tsx b/apps/docs/src/components/page/VersionLabel/index.tsx
index 87dcb579ef..295f4f7c29 100644
--- a/apps/docs/src/components/page/VersionLabel/index.tsx
+++ b/apps/docs/src/components/page/VersionLabel/index.tsx
@@ -30,12 +30,6 @@ export const VersionLabel = ({
     case '@coinbase/cds-illustrations':
       version = versions.cdsIllustrationsVersion;
       break;
-    case '@coinbase/cds-web-visualization':
-      version = versions.cdsWebVisualizationVersion;
-      break;
-    case '@coinbase/cds-mobile-visualization':
-      version = versions.cdsMobileVisualizationVersion;
-      break;
     default:
       throw new Error(`VersionLabel received invalid "packageName" prop: ${packageName}`);
   }
diff --git a/apps/docs/src/hooks/useCDSVersions.ts b/apps/docs/src/hooks/useCDSVersions.ts
index 6bdfe0bd02..2c8d61a8da 100644
--- a/apps/docs/src/hooks/useCDSVersions.ts
+++ b/apps/docs/src/hooks/useCDSVersions.ts
@@ -3,13 +3,8 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 /** Returns the CDS package versions which are defined in the docusaurus.config.ts file. */
 export const useCDSVersions = () => {
   const { siteConfig } = useDocusaurusContext();
-  const {
-    cdsCommonVersion,
-    cdsIconsVersion,
-    cdsIllustrationsVersion,
-    cdsMobileVisualizationVersion,
-    cdsWebVisualizationVersion,
-  } = siteConfig.customFields ?? {};
+  const { cdsCommonVersion, cdsIconsVersion, cdsIllustrationsVersion } =
+    siteConfig.customFields ?? {};
 
   if (typeof cdsCommonVersion !== 'string')
     throw Error(
@@ -23,20 +18,10 @@ export const useCDSVersions = () => {
     throw Error(
       'The "cdsIllustrationsVersion" string is not defined in docusaurus.config.ts "customFields"',
     );
-  if (typeof cdsMobileVisualizationVersion !== 'string')
-    throw Error(
-      'The "cdsMobileVisualizationVersion" string is not defined in docusaurus.config.ts "customFields"',
-    );
-  if (typeof cdsWebVisualizationVersion !== 'string')
-    throw Error(
-      'The "cdsWebVisualizationVersion" string is not defined in docusaurus.config.ts "customFields"',
-    );
 
   return {
     cdsCommonVersion,
     cdsIconsVersion,
     cdsIllustrationsVersion,
-    cdsMobileVisualizationVersion,
-    cdsWebVisualizationVersion,
   };
 };
diff --git a/apps/docs/src/theme/DocItem/Layout/index.tsx b/apps/docs/src/theme/DocItem/Layout/index.tsx
index 2d673b5dc5..3c4740d6d9 100644
--- a/apps/docs/src/theme/DocItem/Layout/index.tsx
+++ b/apps/docs/src/theme/DocItem/Layout/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { type JSX, useMemo } from 'react';
 import { VStack } from '@coinbase/cds-web/layout';
 import type { DocFrontMatter } from '@docusaurus/plugin-content-docs';
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
diff --git a/apps/docs/src/theme/DocRoot/Layout/Main/index.tsx b/apps/docs/src/theme/DocRoot/Layout/Main/index.tsx
index 030ceee955..08882be91d 100644
--- a/apps/docs/src/theme/DocRoot/Layout/Main/index.tsx
+++ b/apps/docs/src/theme/DocRoot/Layout/Main/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { HStack } from '@coinbase/cds-web/layout';
 import type { Props } from '@theme/DocRoot/Layout/Main';
 
diff --git a/apps/docs/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx b/apps/docs/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx
index c0afc87f1d..2fc394fef1 100644
--- a/apps/docs/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx
+++ b/apps/docs/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { translate } from '@docusaurus/Translate';
 import type { Props } from '@theme/DocRoot/Layout/Sidebar/ExpandButton';
 import IconArrow from '@theme/Icon/Arrow';
diff --git a/apps/docs/src/theme/DocRoot/Layout/Sidebar/index.tsx b/apps/docs/src/theme/DocRoot/Layout/Sidebar/index.tsx
index 9f02321b23..762a91b61b 100644
--- a/apps/docs/src/theme/DocRoot/Layout/Sidebar/index.tsx
+++ b/apps/docs/src/theme/DocRoot/Layout/Sidebar/index.tsx
@@ -1,4 +1,4 @@
-import React, { type ReactNode, useCallback, useState } from 'react';
+import React, { type JSX, type ReactNode, useCallback, useState } from 'react';
 import { cx } from '@coinbase/cds-web';
 import { useDocsSidebar } from '@docusaurus/plugin-content-docs/client';
 import { useLocation } from '@docusaurus/router';
diff --git a/apps/docs/src/theme/DocRoot/Layout/index.tsx b/apps/docs/src/theme/DocRoot/Layout/index.tsx
index 298c4a2c14..d8f86881e6 100644
--- a/apps/docs/src/theme/DocRoot/Layout/index.tsx
+++ b/apps/docs/src/theme/DocRoot/Layout/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { type JSX, useState } from 'react';
 import { Box, HStack } from '@coinbase/cds-web/layout';
 import { useDocsSidebar } from '@docusaurus/plugin-content-docs/client';
 import BackToTopButton from '@theme/BackToTopButton';
diff --git a/apps/docs/src/theme/DocSidebar/Desktop/CollapseButton/index.tsx b/apps/docs/src/theme/DocSidebar/Desktop/CollapseButton/index.tsx
index 2d4404764b..e33abd8ec9 100644
--- a/apps/docs/src/theme/DocSidebar/Desktop/CollapseButton/index.tsx
+++ b/apps/docs/src/theme/DocSidebar/Desktop/CollapseButton/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { cx } from '@coinbase/cds-web';
 import { translate } from '@docusaurus/Translate';
 import type { Props } from '@theme/DocSidebar/Desktop/CollapseButton';
diff --git a/apps/docs/src/theme/DocSidebar/Desktop/Content/index.tsx b/apps/docs/src/theme/DocSidebar/Desktop/Content/index.tsx
index aeea018217..80e9120374 100644
--- a/apps/docs/src/theme/DocSidebar/Desktop/Content/index.tsx
+++ b/apps/docs/src/theme/DocSidebar/Desktop/Content/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { type JSX, useState } from 'react';
 import { cx } from '@coinbase/cds-web';
 import { VStack } from '@coinbase/cds-web/layout';
 import { ThemeClassNames } from '@docusaurus/theme-common';
diff --git a/apps/docs/src/theme/DocSidebar/index.tsx b/apps/docs/src/theme/DocSidebar/index.tsx
index 6cc90ff6c3..1d00f852ba 100644
--- a/apps/docs/src/theme/DocSidebar/index.tsx
+++ b/apps/docs/src/theme/DocSidebar/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import type { PropSidebarItem } from '@docusaurus/plugin-content-docs';
 import { useWindowSizeWithBreakpointOverride } from '@site/src/utils/useWindowSizeWithBreakpointOverride';
 import type { Props } from '@theme/DocSidebar';
 import DocSidebarDesktop from '@theme/DocSidebar/Desktop';
 import DocSidebarMobile from '@theme/DocSidebar/Mobile';
 
-export default function DocSidebar(props: Props): JSX.Element {
+export default function DocSidebar({ sidebar, ...props }: Props): JSX.Element {
   const windowSize = useWindowSizeWithBreakpointOverride();
 
   const filterItems = (items: PropSidebarItem[] = []): PropSidebarItem[] => {
@@ -13,7 +13,7 @@ export default function DocSidebar(props: Props): JSX.Element {
   };
 
   // Filter the sidebar items
-  const filteredSidebar = filterItems([...props.sidebar]);
+  const filteredSidebar = filterItems([...sidebar]);
 
   // Desktop sidebar visible on hydration: need SSR rendering
   const shouldRenderSidebarDesktop = windowSize === 'desktop' || windowSize === 'ssr';
@@ -23,8 +23,8 @@ export default function DocSidebar(props: Props): JSX.Element {
 
   return (
     <>
-      {shouldRenderSidebarDesktop && <DocSidebarDesktop {...props} sidebar={filteredSidebar} />}
-      {shouldRenderSidebarMobile && <DocSidebarMobile {...props} sidebar={filteredSidebar} />}
+      {shouldRenderSidebarDesktop && <DocSidebarDesktop sidebar={filteredSidebar} {...props} />}
+      {shouldRenderSidebarMobile && <DocSidebarMobile sidebar={filteredSidebar} {...props} />}
     </>
   );
 }
diff --git a/apps/docs/src/theme/DocSidebarItem/Category/index.tsx b/apps/docs/src/theme/DocSidebarItem/Category/index.tsx
index 8a2ae4f429..6a1423b0ed 100644
--- a/apps/docs/src/theme/DocSidebarItem/Category/index.tsx
+++ b/apps/docs/src/theme/DocSidebarItem/Category/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { type JSX, useCallback, useEffect, useMemo } from 'react';
 import type { IconName } from '@coinbase/cds-common/types';
 import { cx } from '@coinbase/cds-web';
 import { Collapsible } from '@coinbase/cds-web/collapsible';
diff --git a/apps/docs/src/theme/DocSidebarItem/Html/index.tsx b/apps/docs/src/theme/DocSidebarItem/Html/index.tsx
index 8418d584b0..3eb57c8a0c 100644
--- a/apps/docs/src/theme/DocSidebarItem/Html/index.tsx
+++ b/apps/docs/src/theme/DocSidebarItem/Html/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { cx } from '@coinbase/cds-web';
 import { ThemeClassNames } from '@docusaurus/theme-common';
 import type { Props } from '@theme/DocSidebarItem/Html';
diff --git a/apps/docs/src/theme/DocSidebarItem/Link/index.tsx b/apps/docs/src/theme/DocSidebarItem/Link/index.tsx
index 7dbd328c60..dcc123b256 100644
--- a/apps/docs/src/theme/DocSidebarItem/Link/index.tsx
+++ b/apps/docs/src/theme/DocSidebarItem/Link/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { Box, HStack } from '@coinbase/cds-web/layout';
 import { Pressable } from '@coinbase/cds-web/system';
 import isInternalUrl from '@docusaurus/isInternalUrl';
diff --git a/apps/docs/src/theme/DocSidebarItem/index.tsx b/apps/docs/src/theme/DocSidebarItem/index.tsx
index 13602a3add..564a375f02 100644
--- a/apps/docs/src/theme/DocSidebarItem/index.tsx
+++ b/apps/docs/src/theme/DocSidebarItem/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import type { Props } from '@theme/DocSidebarItem';
 import DocSidebarItemCategory from '@theme/DocSidebarItem/Category';
 import DocSidebarItemHtml from '@theme/DocSidebarItem/Html';
diff --git a/apps/docs/src/theme/Footer/index.tsx b/apps/docs/src/theme/Footer/index.tsx
index b9f2383dd2..d870727d7a 100644
--- a/apps/docs/src/theme/Footer/index.tsx
+++ b/apps/docs/src/theme/Footer/index.tsx
@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { Box, HStack, VStack } from '@coinbase/cds-web/layout';
 import { Text } from '@coinbase/cds-web/typography';
 import type { FooterLinkItem } from '@docusaurus/theme-common';
diff --git a/apps/docs/src/theme/Heading/index.tsx b/apps/docs/src/theme/Heading/index.tsx
index 27624ceed4..6f11e8370d 100644
--- a/apps/docs/src/theme/Heading/index.tsx
+++ b/apps/docs/src/theme/Heading/index.tsx
@@ -15,7 +15,7 @@ export default function Heading({ as: As, id, ...props }: Props): ReactNode {
   } = useThemeConfig();
   // H1 headings do not need an id because they don't appear in the TOC.
   if (As === 'h1' || !id) {
-    return <As {...props} id={undefined} />;
+    return <As id={undefined} {...props} />;
   }
 
   brokenLinks.collectAnchor(id);
@@ -33,13 +33,13 @@ export default function Heading({ as: As, id, ...props }: Props): ReactNode {
 
   return (
     <As
-      {...props}
       className={clsx(
         'anchor',
         hideOnScroll ? styles.anchorWithHideOnScrollNavbar : styles.anchorWithStickyNavbar,
         props.className,
       )}
       id={id}
+      {...props}
     >
       {props.children}
       <Link aria-label={anchorTitle} className="hash-link" title={anchorTitle} to={`#${id}`}>
diff --git a/apps/docs/src/theme/Layout/Provider/index.tsx b/apps/docs/src/theme/Layout/Provider/index.tsx
index 4e5b7edb03..4a69c5a256 100644
--- a/apps/docs/src/theme/Layout/Provider/index.tsx
+++ b/apps/docs/src/theme/Layout/Provider/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { cx } from '@coinbase/cds-web';
 import { PortalProvider } from '@coinbase/cds-web/overlays/PortalProvider';
 import { defaultFontStyles } from '@coinbase/cds-web/styles/defaultFont';
diff --git a/apps/docs/src/theme/Layout/index.tsx b/apps/docs/src/theme/Layout/index.tsx
index 2359cd1615..ca156a67da 100644
--- a/apps/docs/src/theme/Layout/index.tsx
+++ b/apps/docs/src/theme/Layout/index.tsx
@@ -1,6 +1,6 @@
 import '@coinbase/cds-icons/fonts/web/icon-font.css';
 
-import { useCallback } from 'react';
+import { type JSX, useCallback } from 'react';
 import { cx } from '@coinbase/cds-web';
 import type { FallbackParams } from '@docusaurus/ErrorBoundary';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
diff --git a/apps/docs/src/theme/Navbar/Content/index.tsx b/apps/docs/src/theme/Navbar/Content/index.tsx
index cd955bb229..bb938da0ef 100644
--- a/apps/docs/src/theme/Navbar/Content/index.tsx
+++ b/apps/docs/src/theme/Navbar/Content/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react';
+import { type JSX, useMemo, useRef } from 'react';
 import { useDimensions } from '@coinbase/cds-web/hooks/useDimensions';
 import { HStack } from '@coinbase/cds-web/layout/HStack';
 import { Tooltip } from '@coinbase/cds-web/overlays/tooltip/Tooltip';
@@ -20,13 +20,7 @@ function useNavbarItems() {
 
 export default function NavbarContent(): JSX.Element {
   const windowSize = useWindowSizeWithBreakpointOverride();
-  const {
-    cdsCommonVersion,
-    cdsIconsVersion,
-    cdsIllustrationsVersion,
-    cdsMobileVisualizationVersion,
-    cdsWebVisualizationVersion,
-  } = useCDSVersions();
+  const { cdsCommonVersion, cdsIconsVersion, cdsIllustrationsVersion } = useCDSVersions();
 
   const items = useNavbarItems();
   const linkItems = useMemo(
@@ -61,8 +55,6 @@ export default function NavbarContent(): JSX.Element {
       <Text>@coinbase/cds-web@{cdsCommonVersion}</Text>
       <Text>@coinbase/cds-icons@{cdsIconsVersion}</Text>
       <Text>@coinbase/cds-illustrations@{cdsIllustrationsVersion}</Text>
-      <Text>@coinbase/cds-mobile-visualization@{cdsMobileVisualizationVersion}</Text>
-      <Text>@coinbase/cds-web-visualization@{cdsWebVisualizationVersion}</Text>
     </Text>
   );
 
diff --git a/apps/docs/src/theme/Navbar/Layout/index.tsx b/apps/docs/src/theme/Navbar/Layout/index.tsx
index 8270f353e3..56a1cffabd 100644
--- a/apps/docs/src/theme/Navbar/Layout/index.tsx
+++ b/apps/docs/src/theme/Navbar/Layout/index.tsx
@@ -10,7 +10,7 @@ import { useWindowSizeWithBreakpointOverride } from '../../../utils/useWindowSiz
 
 import styles from './styles.module.css';
 
-function NavbarBackdrop(props: ComponentProps<'div'>) {
+function NavbarBackdrop({ className, ...props }: ComponentProps<'div'>) {
   const mobileSidebar = useNavbarMobileSidebar();
   const windowSize = useWindowSizeWithBreakpointOverride();
   if (mobileSidebar.disabled || windowSize !== 'mobile') {
@@ -18,10 +18,10 @@ function NavbarBackdrop(props: ComponentProps<'div'>) {
   }
   return (
     <div
-      {...props}
-      className={clsx('navbar-sidebar__backdrop', props.className)}
+      className={clsx('navbar-sidebar__backdrop', className)}
       onClick={mobileSidebar.toggle}
       role="presentation"
+      {...props}
     />
   );
 }
diff --git a/apps/docs/src/theme/Navbar/MobileSidebar/Header/index.tsx b/apps/docs/src/theme/Navbar/MobileSidebar/Header/index.tsx
index b595cbd0ed..9095e0bd5e 100644
--- a/apps/docs/src/theme/Navbar/MobileSidebar/Header/index.tsx
+++ b/apps/docs/src/theme/Navbar/MobileSidebar/Header/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { IconButton } from '@coinbase/cds-web/buttons';
 import { HStack } from '@coinbase/cds-web/layout';
 import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
diff --git a/apps/docs/src/theme/Navbar/MobileSidebar/Layout/index.tsx b/apps/docs/src/theme/Navbar/MobileSidebar/Layout/index.tsx
index 0b137e1295..79428c1219 100644
--- a/apps/docs/src/theme/Navbar/MobileSidebar/Layout/index.tsx
+++ b/apps/docs/src/theme/Navbar/MobileSidebar/Layout/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { VStack } from '@coinbase/cds-web/layout';
 import type { Props } from '@theme/Navbar/MobileSidebar/Layout';
 
diff --git a/apps/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/apps/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
index 49990f1468..b08dbecabd 100644
--- a/apps/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
+++ b/apps/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { Icon } from '@coinbase/cds-web/icons/Icon';
 import { HStack, VStack } from '@coinbase/cds-web/layout';
 import { Pressable } from '@coinbase/cds-web/system/Pressable';
diff --git a/apps/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx b/apps/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
index 2a799d7d13..7560695f31 100644
--- a/apps/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
+++ b/apps/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { IconButton } from '@coinbase/cds-web/buttons';
 import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
 import { translate } from '@docusaurus/Translate';
diff --git a/apps/docs/src/theme/Navbar/MobileSidebar/index.tsx b/apps/docs/src/theme/Navbar/MobileSidebar/index.tsx
index ac0a3d8956..8aba5f2669 100644
--- a/apps/docs/src/theme/Navbar/MobileSidebar/index.tsx
+++ b/apps/docs/src/theme/Navbar/MobileSidebar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { type JSX, useCallback, useEffect, useRef } from 'react';
 import { FocusTrap } from '@coinbase/cds-web/overlays/FocusTrap';
 import { useLockBodyScroll, useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
 import { useWindowSizeWithBreakpointOverride } from '@site/src/utils/useWindowSizeWithBreakpointOverride';
diff --git a/apps/docs/src/theme/NavbarItem/NavbarNavLink/index.tsx b/apps/docs/src/theme/NavbarItem/NavbarNavLink/index.tsx
index 1db8fbf5b9..25c0bff7d7 100644
--- a/apps/docs/src/theme/NavbarItem/NavbarNavLink/index.tsx
+++ b/apps/docs/src/theme/NavbarItem/NavbarNavLink/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { cx } from '@coinbase/cds-web';
 import { Box } from '@coinbase/cds-web/layout';
 import { Pressable } from '@coinbase/cds-web/system/Pressable';
diff --git a/apps/docs/src/theme/Playground/index.tsx b/apps/docs/src/theme/Playground/index.tsx
index a14d4d04f1..0a0028900f 100644
--- a/apps/docs/src/theme/Playground/index.tsx
+++ b/apps/docs/src/theme/Playground/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import React, { type JSX, memo, useCallback, useEffect, useRef, useState } from 'react';
 import { LiveEditor, LiveError, LivePreview, LiveProvider, withLive } from 'react-live';
 import { Collapsible } from '@coinbase/cds-web/collapsible/Collapsible';
 import { Icon } from '@coinbase/cds-web/icons/Icon';
diff --git a/apps/docs/src/theme/Playground/sandbox/templateFiles.ts b/apps/docs/src/theme/Playground/sandbox/templateFiles.ts
index ae58ee35ad..632337b17f 100644
--- a/apps/docs/src/theme/Playground/sandbox/templateFiles.ts
+++ b/apps/docs/src/theme/Playground/sandbox/templateFiles.ts
@@ -35,7 +35,6 @@ export const PACKAGE_JSON = JSON.stringify(
       '@coinbase/cds-illustrations': 'latest',
       '@coinbase/cds-lottie-files': 'latest',
       '@coinbase/cds-utils': 'latest',
-      '@coinbase/cds-web-visualization': 'latest',
       'framer-motion': '^10.18.0',
     },
     devDependencies: {
diff --git a/apps/docs/src/theme/ReactLiveScope/index.tsx b/apps/docs/src/theme/ReactLiveScope/index.tsx
index 36d184ac2e..63674fb219 100644
--- a/apps/docs/src/theme/ReactLiveScope/index.tsx
+++ b/apps/docs/src/theme/ReactLiveScope/index.tsx
@@ -88,8 +88,8 @@ import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';
 import * as CDSTour from '@coinbase/cds-web/tour';
 import * as CDSTypography from '@coinbase/cds-web/typography';
 import * as CDSVisualizations from '@coinbase/cds-web/visualizations';
-import * as CDSChartComponents from '@coinbase/cds-web-visualization/chart';
-import * as CDSSparklineComponents from '@coinbase/cds-web-visualization/sparkline';
+import * as CDSChartComponents from '@coinbase/cds-web/visualizations/chart';
+import * as CDSSparklineComponents from '@coinbase/cds-web/visualizations/sparkline';
 import * as framerMotion from 'framer-motion';
 
 export type ImportMapEntry = {
@@ -122,8 +122,8 @@ const namespaceRegistrations: [Record<string, unknown>, string][] = [
   [CDSDates, '@coinbase/cds-web/dates'],
   [CDSNumbers, '@coinbase/cds-web/numbers'],
   [CDSVisualizations, '@coinbase/cds-web/visualizations'],
-  [CDSChartComponents, '@coinbase/cds-web-visualization/chart'],
-  [CDSSparklineComponents, '@coinbase/cds-web-visualization/sparkline'],
+  [CDSChartComponents, '@coinbase/cds-web/visualizations/chart'],
+  [CDSSparklineComponents, '@coinbase/cds-web/visualizations/sparkline'],
   [StepperComponents, '@coinbase/cds-web/stepper'],
   [ContentCardComponents, '@coinbase/cds-web/cards/ContentCard'],
   [CDSDataAssets, '@coinbase/cds-common/internal/data/assets'],
diff --git a/apps/docs/src/utils/useIsSticky.ts b/apps/docs/src/utils/useIsSticky.ts
index 4581b19a1a..94a4a3757c 100644
--- a/apps/docs/src/utils/useIsSticky.ts
+++ b/apps/docs/src/utils/useIsSticky.ts
@@ -13,12 +13,12 @@ type UseStickyOptions = {
    * Optional ref to a container element. If provided, the sticky behavior will be relative
    * to this container instead of the viewport.
    */
-  containerRef?: RefObject<HTMLElement>;
+  containerRef?: RefObject<HTMLElement | null>;
 };
 
 type UseStickyResult = {
   /** Ref to attach to the element that should become sticky */
-  elementRef: RefObject<HTMLDivElement>;
+  elementRef: RefObject<HTMLDivElement | null>;
   /** Whether the element is currently in "sticky" state */
   isSticky: boolean;
 };
@@ -38,7 +38,7 @@ type UseStickyResult = {
 
 export function useIsSticky(options: UseStickyOptions = {}): UseStickyResult {
   const { top = 0, containerRef } = options;
-  const elementRef = useRef<HTMLDivElement>(null);
+  const elementRef = useRef<HTMLDivElement | null>(null);
   const [isSticky, setIsSticky] = useState(false);
 
   useEffect(() => {
diff --git a/apps/docs/src/utils/useThrottledValue.ts b/apps/docs/src/utils/useThrottledValue.ts
index 6697e746a2..dcd32bed76 100644
--- a/apps/docs/src/utils/useThrottledValue.ts
+++ b/apps/docs/src/utils/useThrottledValue.ts
@@ -18,7 +18,7 @@ export const useThrottledValue = <T>(value: T, delay: number) => {
   const lastExecutedAt = useRef(0);
 
   // Ref to store the timeout ID that ensures the final synchronization of the throttled value after the value has not changed for the delay period
-  const throttleTimeoutIdRef = useRef<ReturnType<typeof setTimeout>>();
+  const throttleTimeoutIdRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   // updates the throttled value and schedules a final update after the delay period if needed
   const updateThrottledValue = useCallback(
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index db6c554e99..fbf4dd99c9 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -29,9 +29,6 @@
     {
       "path": "../../packages/web"
     },
-    {
-      "path": "../../packages/web-visualization"
-    },
     {
       "path": "../../libs/docusaurus-plugin-kbar"
     },
diff --git a/apps/docs/utils/generateComponentPeerDeps.ts b/apps/docs/utils/generateComponentPeerDeps.ts
index 4a009a0815..ef0c88459d 100644
--- a/apps/docs/utils/generateComponentPeerDeps.ts
+++ b/apps/docs/utils/generateComponentPeerDeps.ts
@@ -13,11 +13,6 @@ type PackageConfig = {
 const PACKAGES: PackageConfig[] = [
   { packageName: '@coinbase/cds-web', packageDir: 'packages/web' },
   { packageName: '@coinbase/cds-mobile', packageDir: 'packages/mobile' },
-  { packageName: '@coinbase/cds-web-visualization', packageDir: 'packages/web-visualization' },
-  {
-    packageName: '@coinbase/cds-mobile-visualization',
-    packageDir: 'packages/mobile-visualization',
-  },
 ];
 
 /**
diff --git a/apps/expo-app/.gitignore b/apps/expo-app/.gitignore
new file mode 100644
index 0000000000..66cc3840a6
--- /dev/null
+++ b/apps/expo-app/.gitignore
@@ -0,0 +1,49 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+dts/
+*.d.ts
+*.d.ts.map
+
+# generated native folders
+/ios
+/android
+
+# generated build artifacts (xcodebuild/gradle output, not committed)
+builds/
+# extracted prebuilt .app directories (recreated by patch-bundle from the committed tarballs)
+prebuilds/**/*.app
diff --git a/apps/mobile-app/src/App.tsx b/apps/expo-app/App.tsx
similarity index 69%
rename from apps/mobile-app/src/App.tsx
rename to apps/expo-app/App.tsx
index 901d982d8b..9ba7f3ebc8 100644
--- a/apps/mobile-app/src/App.tsx
+++ b/apps/expo-app/App.tsx
@@ -1,5 +1,6 @@
-import React, { memo, StrictMode, useCallback, useMemo, useState } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { Platform } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import type { ColorScheme } from '@coinbase/cds-common/core/theme';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
@@ -7,14 +8,14 @@ import { PortalProvider } from '@coinbase/cds-mobile/overlays/PortalProvider';
 import { StatusBar } from '@coinbase/cds-mobile/system/StatusBar';
 import { ThemeProvider } from '@coinbase/cds-mobile/system/ThemeProvider';
 import { defaultTheme } from '@coinbase/cds-mobile/themes/defaultTheme';
-import { ChartBridgeProvider } from '@coinbase/cds-mobile-visualization/chart';
-import { Playground } from '@coinbase/ui-mobile-playground';
+import { ChartBridgeProvider } from '@coinbase/cds-mobile/visualizations/chart';
 import { CommonActions, NavigationContainer } from '@react-navigation/native';
 import * as Linking from 'expo-linking';
 import * as SplashScreen from 'expo-splash-screen';
 
-import { useFonts } from './hooks/useFonts';
-import { routes as codegenRoutes } from './routes';
+import { useFonts } from './src/hooks/useFonts';
+import { Playground } from './src/playground';
+import { routes as codegenRoutes } from './src/routes';
 
 const linking = {
   prefixes: [Linking.createURL('/')],
@@ -32,36 +33,26 @@ const linking = {
     CommonActions.reset({ index: 1, routes: [{ name: 'DebugExamples' }, ...state.routes] }),
 };
 
-// this code allows the use of toLocaleString() on Android
 if (Platform.OS === 'android') {
   require('intl');
   require('intl/locale-data/jsonp/en-US');
 }
 
+const gestureHandlerStyle = { flex: 1 };
+
 const CdsSafeAreaProvider: React.FC<React.PropsWithChildren<unknown>> = memo(({ children }) => {
   const theme = useTheme();
   const style = useMemo(() => ({ backgroundColor: theme.color.bg }), [theme.color.bg]);
   return <SafeAreaProvider style={style}>{children}</SafeAreaProvider>;
 });
 
-const LocalStrictMode = ({ children }: { children: React.ReactNode }) => {
-  const strict = process.env.CI !== 'true';
-  return strict ? <StrictMode>{children}</StrictMode> : <>{children}</>;
-};
-
 const App = memo(() => {
-  const [colorScheme, setColorScheme] = useState<ColorScheme>('light');
-
   const [fontsLoaded] = useFonts();
+  const [colorScheme, setColorScheme] = useState<ColorScheme>('light');
 
-  const handleOnReady = useCallback(async () => {
+  React.useEffect(() => {
     if (fontsLoaded) {
-      // This tells the splash screen to hide immediately! If we call this after
-      // `setAppIsReady`, then we may see a blank screen while the app is
-      // loading its initial state and rendering its first pixels. So instead,
-      // we hide the splash screen once we know the root view has already
-      // performed layout.
-      await SplashScreen.hideAsync();
+      SplashScreen.hideAsync();
     }
   }, [fontsLoaded]);
 
@@ -70,20 +61,20 @@ const App = memo(() => {
   }
 
   return (
-    <LocalStrictMode>
+    <GestureHandlerRootView style={gestureHandlerStyle}>
       <ChartBridgeProvider>
         <ThemeProvider activeColorScheme={colorScheme} theme={defaultTheme}>
           <CdsSafeAreaProvider>
             <PortalProvider>
               <StatusBar hidden={!__DEV__} />
-              <NavigationContainer linking={linking} onReady={handleOnReady}>
+              <NavigationContainer linking={linking}>
                 <Playground routes={codegenRoutes} setColorScheme={setColorScheme} />
               </NavigationContainer>
             </PortalProvider>
           </CdsSafeAreaProvider>
         </ThemeProvider>
       </ChartBridgeProvider>
-    </LocalStrictMode>
+    </GestureHandlerRootView>
   );
 });
 
diff --git a/apps/expo-app/README.md b/apps/expo-app/README.md
new file mode 100644
index 0000000000..530cf7e39b
--- /dev/null
+++ b/apps/expo-app/README.md
@@ -0,0 +1,136 @@
+# expo-app
+
+Expo-based demo app for testing CDS mobile components. Used as the visual regression (visreg) target app for the CDS v9 branch.
+
+## Nx targets
+
+| Command                                                | Description                                                                             |
+| ------------------------------------------------------ | --------------------------------------------------------------------------------------- |
+| `yarn nx run expo-app:ios`                             | Build (if needed), install, launch, and start Metro — full dev loop for iOS (debug)     |
+| `yarn nx run expo-app:ios --configuration=release`     | Install and launch the release build artifact (no Metro)                                |
+| `yarn nx run expo-app:android`                         | Build (if needed), install, launch, and start Metro — full dev loop for Android (debug) |
+| `yarn nx run expo-app:android --configuration=release` | Install and launch the release build artifact (no Metro)                                |
+| `yarn nx run expo-app:start`                           | Start Metro bundler only (assumes app is already installed)                             |
+| `yarn nx run expo-app:build --configuration=<config>`  | Compile the native app and archive to a tarball in `prebuilds/`                         |
+| `yarn nx run expo-app:launch --configuration=<config>` | Install + launch an existing build artifact on a simulator/emulator                     |
+| `yarn nx run expo-app:patch-bundle-ios`                | Swap the JS bundle inside the committed iOS Release prebuild — used by visreg CI        |
+| `yarn nx run expo-app:patch-bundle-android`            | Swap the JS bundle inside the committed Android Release prebuild — used by visreg CI    |
+| `yarn nx run expo-app:validate`                        | Check Expo dependency versions for compatibility                                        |
+| `yarn nx run expo-app:lint`                            | Lint the app source                                                                     |
+| `yarn nx run expo-app:typecheck`                       | Type-check the app source                                                               |
+
+## Build configurations
+
+| Configuration        | Platform | Profile | Target    | Output                                     |
+| -------------------- | -------- | ------- | --------- | ------------------------------------------ |
+| `ios-debug`          | iOS      | Debug   | Simulator | `prebuilds/ios-debug/expoapp.tar.gz`       |
+| `ios-release`        | iOS      | Release | Simulator | `prebuilds/ios-release/expoapp.tar.gz`     |
+| `ios-debug-device`   | iOS      | Debug   | Device    | `prebuilds/ios-debug-device/expoapp.ipa`   |
+| `ios-release-device` | iOS      | Release | Device    | `prebuilds/ios-release-device/expoapp.ipa` |
+| `android-debug`      | Android  | Debug   | Emulator  | `prebuilds/android-debug/expoapp.apk`      |
+| `android-release`    | Android  | Release | Emulator  | `prebuilds/android-release/expoapp.apk`    |
+
+## Prebuilds
+
+The `prebuilds/` directory contains pre-compiled native artifacts (tarballs) that are committed to the repo. This means CI and team members never need to run a full native build just to run visreg or launch the app for JS-only development.
+
+**Committed:** iOS tarballs (`.tar.gz`), Android release zips (`.zip`)
+**Not committed:** Extracted `.app` directories (recreated at runtime from the tarball), Android debug APKs
+
+### Updating prebuilds
+
+Rebuild and commit a new tarball whenever native dependencies change (e.g. a new native module, an RN upgrade, or an Expo SDK bump):
+
+```bash
+# iOS release (used by visreg CI)
+yarn nx run expo-app:build --configuration=ios-release
+
+# iOS debug (used for local development)
+yarn nx run expo-app:build --configuration=ios-debug
+
+# Then commit the updated tarballs
+git add apps/expo-app/prebuilds/
+git commit -m "chore: update expo-app prebuilds"
+```
+
+### patch-bundle targets
+
+`patch-bundle-ios` and `patch-bundle-android` update the JS bundle inside an already-extracted prebuild without recompiling native code. This is what visreg CI runs instead of a full build:
+
+1. Extracts `prebuilds/ios-release/expoapp.tar.gz` → `prebuilds/ios-release/expoapp.app`
+2. Runs `expo export` to produce a fresh JS bundle from the current branch
+3. Replaces the JS bundle inside the `.app`
+
+The patched `.app` is then installed directly onto the simulator for screenshot capture.
+
+## Local development
+
+### iOS Simulator
+
+For first-time setup, see the [Expo iOS Simulator guide](https://docs.expo.dev/workflow/ios-simulator/).
+
+1. **Run the app**:
+
+   ```bash
+   yarn nx run expo-app:ios
+   ```
+
+   This will:
+   - Build the app if no artifact exists at `prebuilds/ios-debug/expoapp.tar.gz`
+   - Boot the iOS Simulator if not already running
+   - Extract, install, and launch the app
+   - Start Metro bundler (debug only — release builds launch standalone)
+
+2. **Rebuild when native dependencies change**:
+   ```bash
+   rm -rf prebuilds/ios-debug
+   yarn nx run expo-app:ios
+   ```
+
+### Android Emulator
+
+Android requires more manual steps due to expo-dev-client limitations.
+
+For first-time setup, see the [Expo Android Studio Emulator guide](https://docs.expo.dev/workflow/android-studio-emulator/).
+
+1. **Prerequisites**:
+   - Android Studio installed with an emulator configured
+   - `ANDROID_HOME` environment variable set
+
+2. **Run the app**:
+
+   ```bash
+   yarn nx run expo-app:android
+   ```
+
+   This will:
+   - Build the APK if no artifact exists at `prebuilds/android-debug/expoapp.apk`
+   - Start the Android emulator if not already running
+   - Install and launch the app via adb
+   - Start Metro bundler
+
+3. **Troubleshooting**:
+
+   If the app doesn't connect to Metro automatically:
+   - Press `r` in the Metro terminal to reload the app
+   - Or shake the device / press Cmd+M to open the dev menu and select "Reload"
+
+   If Metro connection fails entirely:
+
+   ```bash
+   adb reverse tcp:8081 tcp:8081
+   ```
+
+   Then reload the app.
+
+4. **Rebuild when native dependencies change**:
+   ```bash
+   rm -rf prebuilds/android-debug
+   yarn nx run expo-app:android
+   ```
+
+## Expo Go compatibility
+
+This app cannot run in Expo Go due to dependencies on native modules. Specifically, `@react-native-community/datetimepicker` (used by cds-mobile) contains native code not included in Expo Go.
+
+You must use the development build workflow described above.
diff --git a/apps/expo-app/app.json b/apps/expo-app/app.json
new file mode 100644
index 0000000000..8159a6f56a
--- /dev/null
+++ b/apps/expo-app/app.json
@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "expo-app",
+    "slug": "expo-app",
+    "version": "1.0.0",
+    "scheme": "expoapp",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.expo-app"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true,
+      "package": "com.anonymous.expoapp"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}
diff --git a/apps/expo-app/assets/adaptive-icon.png b/apps/expo-app/assets/adaptive-icon.png
new file mode 100644
index 0000000000..03d6f6b6c6
Binary files /dev/null and b/apps/expo-app/assets/adaptive-icon.png differ
diff --git a/apps/expo-app/assets/favicon.png b/apps/expo-app/assets/favicon.png
new file mode 100644
index 0000000000..e75f697b18
Binary files /dev/null and b/apps/expo-app/assets/favicon.png differ
diff --git a/apps/expo-app/assets/icon.png b/apps/expo-app/assets/icon.png
new file mode 100644
index 0000000000..a0b1526fc7
Binary files /dev/null and b/apps/expo-app/assets/icon.png differ
diff --git a/apps/expo-app/assets/splash-icon.png b/apps/expo-app/assets/splash-icon.png
new file mode 100644
index 0000000000..03d6f6b6c6
Binary files /dev/null and b/apps/expo-app/assets/splash-icon.png differ
diff --git a/apps/expo-app/babel.config.js b/apps/expo-app/babel.config.js
new file mode 100644
index 0000000000..8c5c851083
--- /dev/null
+++ b/apps/expo-app/babel.config.js
@@ -0,0 +1,10 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      // IMPORTANT: react-native-worklets/plugin must be listed LAST
+      'react-native-worklets/plugin',
+    ],
+  };
+};
diff --git a/apps/mobile-app/docs/building-mobile.md b/apps/expo-app/docs/building-mobile.md
similarity index 52%
rename from apps/mobile-app/docs/building-mobile.md
rename to apps/expo-app/docs/building-mobile.md
index 11d5215062..1c58fc12f0 100644
--- a/apps/mobile-app/docs/building-mobile.md
+++ b/apps/expo-app/docs/building-mobile.md
@@ -25,14 +25,14 @@ It is a native module build of your application that is:
 ### When do you need to rebuild debug builds?
 
 - If you don't have any local debug build to develop off of
-- If there's any dependency change in `apps/mobile-app/package.json` and `packages/mobile/package.json`
+- If there's any dependency change in `apps/expo-app/package.json` and `packages/mobile/package.json`
 
 ### How do I rebuild a debug build?
 
-| Platform | Profile - engine type | Command                                      |
-| -------- | --------------------- | -------------------------------------------- |
-| ios      | local - hermes        | `yarn nx run mobile-app:build:ios-debug`     |
-| android  | local -hermes         | `yarn nx run mobile-app:build:android-debug` |
+| Platform | Profile - engine type | Command                                    |
+| -------- | --------------------- | ------------------------------------------ |
+| ios      | local - hermes        | `yarn nx run expo-app:build:ios-debug`     |
+| android  | local -hermes         | `yarn nx run expo-app:build:android-debug` |
 
 ## Release Builds
 
@@ -46,8 +46,10 @@ It is a native module build of your application that is:
 
 ### When do you need to rebuild release builds?
 
-- Any dependency change in `apps/mobile-app/package.json` and `packages/mobile/package.json`
-- Any JS change in `packages/mobile/*`.
+- Any native dependency change in `apps/expo-app/package.json` or `packages/mobile/package.json`
+- Any change to native Expo config or build tooling
+
+> JS-only changes do not require a full rebuild — use `yarn nx run expo-app:patch-bundle-ios` / `patch-bundle-android` to swap the JS bundle into the existing prebuild instead.
 
 ### How do I rebuild a release build?
 
@@ -56,30 +58,16 @@ Generate the new shared, native module builds for everyone to use. **Be sure to
 **Note: Committing these builds reduces CI time drastically by 14min for ios and 7 mins for android**
 
 ```shell
-yarn nx run mobile-app:build:ios-release
-yarn nx run mobile-app:build:android-release
+yarn nx run expo-app:build:ios-release
+yarn nx run expo-app:build:android-release
 ```
 
 ## Advanced
 
 ### Creating new build configurations
 
-You can create other build types using [app.config.js](/apps/mobile-app/app.config.ts) and [project.json](/apps/mobile-app/project.json).
-
-Create a new config in [project.json](/apps/mobile-app/project.json) `targets.build.configurations`. The key will be come your new command for `yarn nx run mobile-app:build:<your key>`.
+You can create other build types using [app.json](/apps/expo-app/app.json) and [project.json](/apps/expo-app/project.json).
 
-Pass ENVs to configure your build. See [setEnvVars](/apps/mobile-app/scripts/utils/setEnvVars.mjs) for options and [project.json](/apps/mobile-app/project.json) for examples.
+Create a new config in [project.json](/apps/expo-app/project.json) `targets.build.configurations`. The key will become your new command for `yarn nx run expo-app:build:<your key>`.
 
 [Here is the reference guide on app configurations from Expo](https://docs.expo.dev/versions/latest/config/app/).
-
-### Run on real device
-
-With [Expo Go](https://docs.expo.dev/get-started/expo-go/), you can easily run the app on a real physical device by following these steps:
-
-**NOTE:** For security reasons, please make sure your device has Coinbase Security Profile installed before proceeding.
-
-1. Download [Expo Go](https://expo.dev/client) to your device.
-2. Run `yarn nx run mobile-app:go` to start the development server. This will output a QR code in your terminal.
-3. Make sure your device and metro are connected to the same network. You might also need to disconnect VPN.
-4. On your device, scan the QR code generated in step2. It will redirect you to Expo Go and install the debug app.
-5. The app will now reload whenever you save changes in your code.
diff --git a/apps/mobile-app/docs/help.md b/apps/expo-app/docs/help.md
similarity index 64%
rename from apps/mobile-app/docs/help.md
rename to apps/expo-app/docs/help.md
index d418151496..df724122f4 100644
--- a/apps/mobile-app/docs/help.md
+++ b/apps/expo-app/docs/help.md
@@ -3,28 +3,28 @@
 ## Debugging Tools
 
 1. How do I run `gradlew` locally for Android debugging?
-   Our expo builds are 'managed', and therefore are built in a temp directory outside of our repo that is cleaned at the end of an `eas` command. This means we do not keep `/ios` or `/android` directories in our `mobile-app`.
+   Our expo builds are 'managed', and therefore are built in a temp directory outside of our repo that is cleaned at the end of an `eas` command. This means we do not keep `/ios` or `/android` directories in our `expo-app`.
 
 To generate a local android directory to run `gradle`:
 
-- `yarn workspace mobile-app expo prebuild --platform android`
-- `cd apps/mobile-app/android`
-- Run gradle command. You can always find the gradle commands executed for debug and release builds in [eas.json](/apps/mobile-app/eas.json). For debug, you can run `./gradlew :app:assembleDebug :app:assembleAndroidTest -DtestBuildType=debug`. For release, you can run `./gradlew :app:assembleRelease :app:assembleAndroidTest -DtestBuildType=release`
-- `yarn clean-expo` from root when you're done! Leaving the `android` directory will impact future builds.
+- `yarn workspace expo-app expo prebuild --platform android`
+- `cd apps/expo-app/android`
+- Run gradle command. For debug, you can run `./gradlew :app:assembleDebug :app:assembleAndroidTest -DtestBuildType=debug`. For release, you can run `./gradlew :app:assembleRelease :app:assembleAndroidTest -DtestBuildType=release`
+- `rm -rf apps/expo-app/android` from root when you're done! Leaving the `android` directory will impact future builds.
 
 2. How do I run `pod` locally for iOS debugging?
-   Our expo builds are 'managed', and therefore are built in a temp directory outside of our repo that is cleaned at the end of an `eas` command. This means we do not keep `/ios` or `/android` directories in our `mobile-app`.
+   Our expo builds are 'managed', and therefore are built in a temp directory outside of our repo that is cleaned at the end of an `eas` command. This means we do not keep `/ios` or `/android` directories in our `expo-app`.
 
 To generate a local ios directory to run `pod`, you can run the prebuild command from expo. This will call `pod install` for you and show you a local failure:
 
-- `yarn workspace mobile-app expo prebuild --platform ios`
-- `yarn clean-expo` from root when you're done! Leaving the `ios` directory will impact future builds.
+- `yarn workspace expo-app expo prebuild --platform ios`
+- `rm -rf apps/expo-app/ios apps/expo-app/.expo` from root when you're done! Leaving the `ios` directory will impact future builds.
 
 3. Access expo build output directly for logs & to debug build failures.
 
-Our expo builds are 'managed', and therefore are built in a temp directory outside of our repo that is cleaned at the end of an `eas` command. In order to see the build output or logs generated from the `yarn nx run mobile-app:build:<config>`, you need to skip expo cleanup. This can also be used for `launch`
+Our expo builds are 'managed', and therefore are built in a temp directory outside of our repo that is cleaned at the end of an `eas` command. In order to see the build output or logs generated from the `yarn nx run expo-app:build:<config>`, you need to skip expo cleanup. This can also be used for `launch`
 
-- Go to our [build script](/apps/mobile-app/scripts/build.mjs)
+- Go to our [build script](/apps/expo-app/scripts/build.mjs)
 - Prepend `export EAS_LOCAL_BUILD_SKIP_CLEANUP=1 && ` prior to `eas build`...
 - Run build like normal
 - At the end of the build, you'll see an output `Skipping cleanup, /var/folders/.... won't be removed.`
@@ -36,21 +36,21 @@ Our expo builds are 'managed', and therefore are built in a temp directory outsi
 
 ## Common Errors
 
-1. `yarn nx run mobile-app:build:ios-debug` is throwing a `Error: spawn pod ENOENT` error.
+1. `yarn nx run expo-app:build:ios-debug` is throwing a `Error: spawn pod ENOENT` error.
 
-- Run `yarn workspace mobile-app run expo prebuild -p ios --clean`
-- `yarn clean-expo`
-- `yarn nx run mobile-app:build:ios-debug` should work as expected
+- Run `yarn workspace expo-app run expo prebuild -p ios --clean`
+- `rm -rf apps/expo-app/ios apps/expo-app/.expo`
+- `yarn nx run expo-app:build:ios-debug` should work as expected
 
-2. `yarn nx run mobile-app:build:android-debug` is throwing this error `mobile-app/android directory not found`
+2. `yarn nx run expo-app:build:android-debug` is throwing this error `expo-app/android directory not found`
 
-- Run `mkdir apps/mobile-app/android`
-- `yarn nx run mobile-app:build:android-debug` should work as expected
-- Delete the `mobile-app/android` directory
+- Run `mkdir apps/expo-app/android`
+- `yarn nx run expo-app:build:android-debug` should work as expected
+- Delete the `expo-app/android` directory
 
 3. An error like "You are on eas-cli@3.7.2 which does not satisfy the CLI version constraint in eas.json (3.8.1)"
 
-Look up the `cli.version` in `apps/mobile-app/eas.json`.
+Look up the required version in `apps/expo-app/package.json`.
 
 ```shell
 npm -g install eas-cli@<version>
@@ -73,12 +73,12 @@ This error can occur for a number of reasons. See debugging section above for ho
 
 This error can occur for a number of reasons. See debugging section above for how to run pod install locally.
 
-7. No development build (com.ui-systems.debug-ios-hermes) for this project is installed. Please make and install development build on the device first.
+7. No development build (com.anonymous.expo-app) for this project is installed. Please make and install development build on the device first.
 
-This error occurs because mobile-app/ios directory was present at the time of launching the build onto a simulator. This interferes with expos naming of the app on the device.
+This error occurs because expo-app/ios directory was present at the time of launching the build onto a simulator. This interferes with expo's naming of the app on the device.
 
 To resolve from root:
-`yarn clean-expo`
+`rm -rf apps/expo-app/ios apps/expo-app/.expo`
 
 8. I'm seeing this build error in my CDS log file in the expo temp directory:
 
@@ -88,8 +88,8 @@ To resolve from root:
 
 This error can be caused by two things:
 
-- The packages are incorrectly built. All packages should be built in the preinstall `eas-build-pre-install` script found in the `mobile-app/package.json` file. If the package has an empty or missing `lib` in the expo temp directory, it didn't correctly build.
-- Metro error. Package exports are processed from the metro.config.js for local development. You can verify through `yarn.lock`.
+- The packages are incorrectly built. All packages should be built in the preinstall `eas-build-pre-install` script found in the `expo-app/package.json` file. If the package has an empty or missing `lib` in the expo temp directory, it didn't correctly build.
+- Metro error. Package exports are resolved by Metro during local development. You can verify the resolution through `yarn.lock`.
 
 9. I'm seeing lots of warnings about watchman recrawling. How can I remove these from my terminal output?
 
@@ -130,16 +130,16 @@ which watchman
 - Press `shift + Command + .` at the same time to see all the directories list
 - Drill into the directory that `which watchman` printed and find all executables prefixed with `watchman` and add each one to have Full Disk Access list
   - even if `watchman*` processes were previously provided full-disk-access, make sure to re-add access after reinstalling watchman
-- Run `yarn nx run mobile-app:start` multiple times to confirm you are no longer seeing the warning
+- Run `yarn nx run expo-app:start` multiple times to confirm you are no longer seeing the warning
 
-10. Expo is throwing this error while I'm running a build or launch command (`yarn nx run mobile-app:<build|launch>:<build type>`): Props Authentication Token not found, Props token or EXPO login error.
+10. Expo is throwing this error while I'm running a build or launch command (`yarn nx run expo-app:<build|launch>:<build type>`): Props Authentication Token not found, Props token or EXPO login error.
 
 Approaches to resolve:
 
 - Run the following in the root directory
 
 ```shell
-cd apps/mobile-app && eas build --local --non-interactive --json --clear-cache --platform ios --profile debug
+cd apps/expo-app && eas build --local --non-interactive --json --clear-cache --platform ios --profile debug
 ```
 
 11. Cocoapods is not setup or the following error is thrown: Cocoapods is not available, make sure it's installed and in your PATH.
diff --git a/apps/mobile-app/docs/prebuilds.md b/apps/expo-app/docs/prebuilds.md
similarity index 54%
rename from apps/mobile-app/docs/prebuilds.md
rename to apps/expo-app/docs/prebuilds.md
index 56b283e728..435c7019c4 100644
--- a/apps/mobile-app/docs/prebuilds.md
+++ b/apps/expo-app/docs/prebuilds.md
@@ -1,19 +1,14 @@
 ## When to use prebuilds?
 
-Use Expo Go for normal dev workflow and testing simple JS code. Only use prebuilds if you:
-
-- Made dependencies changes
-- Want to test native modules that require prebuilds
+`expo-app` does not support Expo Go — it requires native modules (e.g. `react-native-date-picker`) that cannot run in the Expo Go sandbox. All development uses prebuilds. Use debug prebuilds for local development with hot reloading, and release prebuilds for visreg.
 
 ## Setup
 
 1. Setup your dependencies - fastlane, and eas-cli
 
-Get the eas version in [eas.json](/apps/mobile-app/eas.json) at `cli.version`.
-
 ```shell
 brew install fastlane
-npm install -g eas-cli@<insert version>
+npm install -g eas-cli
 ```
 
 2. Run `yarn install` from root
@@ -24,38 +19,37 @@ npm install -g eas-cli@<insert version>
 
 1. Build the application you wish to develop on with `build`
 
-**Note: you should only need to build if you're missing your desired build in [prebuilds](/apps/mobile-app/prebuilds) or if there's been a recent native dependency upgrade.**
+**Note: you should only need to build if you're missing your desired build in [prebuilds](/apps/expo-app/prebuilds) or if there's been a recent native dependency upgrade.**
 
-See more info about mobile builds [here](/apps/mobile-app/docs/building-mobile.md).
+See more info about mobile builds [here](/apps/expo-app/docs/building-mobile.md).
 
-| Platform | Profile - engine type | Command                                        |
-| -------- | --------------------- | ---------------------------------------------- |
-| ios      | debug - hermes        | `yarn nx run mobile-app:build:ios-debug`       |
-| ios      | release - hermes      | `yarn nx run mobile-app:build:ios-release`     |
-| android  | debug - hermes        | `yarn nx run mobile-app:build:android-debug`   |
-| android  | release - hermes      | `yarn nx run mobile-app:build:android-release` |
+| Platform | Profile - engine type | Command                                      |
+| -------- | --------------------- | -------------------------------------------- |
+| ios      | debug - hermes        | `yarn nx run expo-app:build:ios-debug`       |
+| ios      | release - hermes      | `yarn nx run expo-app:build:ios-release`     |
+| android  | debug - hermes        | `yarn nx run expo-app:build:android-debug`   |
+| android  | release - hermes      | `yarn nx run expo-app:build:android-release` |
 
-**Note: If you run into errors when trying to prebuild, check out our [Help](/apps/mobile-app/docs/help.md) page to debug.**
+**Note: If you run into errors when trying to prebuild, check out our [Help](/apps/expo-app/docs/help.md) page to debug.**
 
 2. Install app in your simulator with `launch` configuration.
 
-**Note: You can skip this if you've already launched the build in your [prebuilds](/apps/mobile-app/prebuilds) in your simulator.**
+**Note: You can skip this if you've already launched the build in your [prebuilds](/apps/expo-app/prebuilds) in your simulator.**
 
-| Platform | Profile - engine type | Command                                         |
-| -------- | --------------------- | ----------------------------------------------- |
-| ios      | debug - hermes        | `yarn nx run mobile-app:launch:ios-debug`       |
-| ios      | release - hermes      | `yarn nx run mobile-app:launch:ios-release`     |
-| android  | debug - hermes        | `yarn nx run mobile-app:launch:android-debug`   |
-| android  | release - hermes      | `yarn nx run mobile-app:launch:android-release` |
+| Platform | Profile - engine type | Command                                       |
+| -------- | --------------------- | --------------------------------------------- |
+| ios      | debug - hermes        | `yarn nx run expo-app:launch:ios-debug`       |
+| ios      | release - hermes      | `yarn nx run expo-app:launch:ios-release`     |
+| android  | debug - hermes        | `yarn nx run expo-app:launch:android-debug`   |
+| android  | release - hermes      | `yarn nx run expo-app:launch:android-release` |
 
 3. Start the metro server for installed application. Only relevant for debug builds because release builds do not have hot reloading.
 
-| Platform | Profile - engine type | Command                                      |
-| -------- | --------------------- | -------------------------------------------- |
-| ios      | debug - hermes        | `yarn nx run mobile-app:start:ios-debug`     |
-| android  | debug - hermes        | `yarn nx run mobile-app:start:android-debug` |
+```shell
+yarn nx run expo-app:start
+```
 
-**Note: If you see `CommandError: No development build (com.ui-systems.debug-ios-hermes) for this project is installed. Please make and install a development build on the device first.` run `yarn clean-expo` and rerun the `start` script. See more debug gotchas [here](/apps/mobile-app/docs/help.md)**
+**Note: If you see `CommandError: No development build (com.anonymous.expo-app) for this project is installed. Please make and install a development build on the device first.` run `rm -rf apps/expo-app/ios apps/expo-app/.expo` and rerun the `start` script. See more debug gotchas [here](/apps/expo-app/docs/help.md)**
 
 When running the debug app after a rebuild or restart, you'll most likely need to close out the Debug app and reopen it to trigger the bundler to recompile.
 
@@ -72,21 +66,21 @@ See the [mobile-visreg README](/packages/mobile-visreg/README.md) for full setup
 
 ## An overview of Expo NX Targets
 
-There are three core NX targets associated with Expo that we leverage to build and run mobile-app. The various contexts can be summarized as debug and release modes for development, with release builds also serving as the basis for visual regression testing.
+There are three core NX targets associated with Expo that we leverage to build and run expo-app. The various contexts can be summarized as debug and release modes for development, with release builds also serving as the basis for visual regression testing.
 
-The three NX Targets (also declared in `/apps/mobile-app/project.json`):
+The three NX Targets (also declared in `/apps/expo-app/project.json`):
 
 1. launch
 2. start
 3. build
 
-These targets call node scripts that live in the [scripts directory of mobile-app](/apps/mobile-app/scripts/). These scripts are intuitively named the same as their respective nx targets.
+`launch` and `build` call node scripts that live in the [scripts directory of expo-app](/apps/expo-app/scripts/). `start` runs `npx expo start` directly.
 
 Visual regression testing is handled separately by the [`packages/mobile-visreg`](/packages/mobile-visreg/README.md) package using Maestro and BrowserStack App Percy.
 
 ## Expo Debug vs Release Builds
 
-There are four relevant build variations associated with mobile-app:
+There are four relevant build variations associated with expo-app:
 
 Release builds:
 
@@ -105,7 +99,7 @@ There are two key ideas to understand about these build variations:
 
 ## The difference between a release and a debug build
 
-The key difference between release and debug builds is how the javascript is bundled with the native portion of mobile-app. In release builds a fully optimized version of the javascript bundle is packaged into the iOS ipa or Android apk and is referenced by the native app entry point. In a debug build the javascript bundle is not bundled into the app artifact, instead it is kept external to the shippable native portion and the native entry point references a bundle managed by the metro bundler (the metro bundler is what runs in your terminal when you run the start target). This difference is key to understanding why hot-reloading works in debug builds but not in release builds. It is also important to note here that debug is clearly a very different environment compared to release, which is why our visreg tests must be run in the context of release build as opposed to debug.
+The key difference between release and debug builds is how the javascript is bundled with the native portion of expo-app. In release builds a fully optimized version of the javascript bundle is packaged into the iOS ipa or Android apk and is referenced by the native app entry point. In a debug build the javascript bundle is not bundled into the app artifact, instead it is kept external to the shippable native portion and the native entry point references a bundle managed by the metro bundler (the metro bundler is what runs in your terminal when you run the start target). This difference is key to understanding why hot-reloading works in debug builds but not in release builds. It is also important to note here that debug is clearly a very different environment compared to release, which is why our visreg tests must be run in the context of release build as opposed to debug.
 
 ## Why visreg uses release builds
 
@@ -129,8 +123,8 @@ A key performance optimization keeps the committed prebuilds (native `.ipa` / `.
 Instead, CI uses a patch step:
 
 ```bash
-yarn nx run mobile-app:patch-bundle-ios      # iOS
-yarn nx run mobile-app:patch-bundle-android  # Android
+yarn nx run expo-app:patch-bundle-ios      # iOS
+yarn nx run expo-app:patch-bundle-android  # Android
 ```
 
 These scripts uncompress the committed release artifact, swap in the freshly bundled JS, and re-compress it into a valid platform artifact. This makes CI visreg runs fast while keeping the native prebuilds in sync with the JS codebase.
@@ -139,6 +133,6 @@ These scripts uncompress the committed release artifact, swap in the freshly bun
 Any time native dependencies, native Expo configs, or relevant build tooling changes. When this happens, regenerate and commit the updated prebuilds:
 
 ```bash
-yarn nx run mobile-app:build:ios-release
-yarn nx run mobile-app:build:android-release
+yarn nx run expo-app:build:ios-release
+yarn nx run expo-app:build:android-release
 ```
diff --git a/apps/mobile-app/docs/upgrade-rn.md b/apps/expo-app/docs/upgrade-rn.md
similarity index 57%
rename from apps/mobile-app/docs/upgrade-rn.md
rename to apps/expo-app/docs/upgrade-rn.md
index 01e871fcde..bbad073a3f 100644
--- a/apps/mobile-app/docs/upgrade-rn.md
+++ b/apps/expo-app/docs/upgrade-rn.md
@@ -5,42 +5,42 @@ Expo handles react native upgrades through their [SDK](https://docs.expo.dev/wor
 1.  Update to the new SDK version from root. You can check the [latest patch version on npm](https://www.npmjs.com/package/expo):
 
 ```shell
-yarn workspace mobile-app add expo@^<version on npm>
+yarn workspace expo-app add expo@^<version on npm>
 ```
 
 2. Fixes native and expo dependencies to match recommended versions. You can override versions in package.json after running the fix command.
 
 ```shell
-cd apps/mobile-app && npx expo install --fix
+cd apps/expo-app && npx expo install --fix
 ```
 
 3. Upgrade all native dependencies within our repo (cds-mobile, etc) to match the versions provided by expo.
 
-**This is super important because that native versions must match for the mobile-app build to be successful**
+**This is super important because that native versions must match for the expo-app build to be successful**
 
-4. Nuke your repo. Cached versions will be compiled in the expo build step and lead to version mismatches. .nx, apps/mobile-app/expo, apps/mobile-app/ios, apps/mobile-app/android should all be removed. Node Modules should be removed because of version mismatches as well. Start fresh :)
+4. Nuke your repo. Cached versions will be compiled in the expo build step and lead to version mismatches. `.nx`, `apps/expo-app/.expo`, `apps/expo-app/ios`, `apps/expo-app/android` should all be removed. Node modules should be removed because of version mismatches as well. Start fresh :)
 
 ```shell
-cd ../../ && yarn clean-expo && yarn clean && rm -rf node_modules
+cd ../../ && rm -rf apps/expo-app/ios apps/expo-app/android apps/expo-app/.expo && yarn clean && rm -rf node_modules
 ```
 
-6. Reboot with `yarn`
+5. Reboot with `yarn`
 
-7. Resolve any errors generated from dependency bumps or the react native upgrade.
+6. Resolve any errors generated from dependency bumps or the react native upgrade.
 
 ```shell
 yarn nx run mobile:build
 ```
 
-8. Test debug builds and generate the new shared, native module builds for everyone to use. Be sure to commit ios debug, ios release, and android release builds to your PR.
+7. Test debug builds and generate the new shared, native module builds for everyone to use. Be sure to commit ios debug, ios release, and android release builds to your PR.
 
 ```shell
-yarn nx run mobile-app:build:ios-debug
-yarn nx run mobile-app:build:android-debug
-yarn nx run mobile-app:build:ios-release
-yarn nx run mobile-app:build:android-release
+yarn nx run expo-app:build:ios-debug
+yarn nx run expo-app:build:android-debug
+yarn nx run expo-app:build:ios-release
+yarn nx run expo-app:build:android-release
 ```
 
 ## Having trouble?
 
-[See our help docs](/apps/mobile-app/docs/help.md)
+[See our help docs](/apps/expo-app/docs/help.md)
diff --git a/apps/mobile-app/docs/upgrading-mobile-dep.md b/apps/expo-app/docs/upgrading-mobile-dep.md
similarity index 82%
rename from apps/mobile-app/docs/upgrading-mobile-dep.md
rename to apps/expo-app/docs/upgrading-mobile-dep.md
index 8143c17799..c3167c2ec1 100644
--- a/apps/mobile-app/docs/upgrading-mobile-dep.md
+++ b/apps/expo-app/docs/upgrading-mobile-dep.md
@@ -2,14 +2,14 @@
 
 Expo handles react native upgrades through their [SDK](https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/). Their SDK will handle updating native modules, as well as recommend native package versions that are compatible with the new react native version.
 
-Check out this doc [for more about mobile builds in general](/apps/mobile-app/docs/building-mobile.md)
+Check out this doc [for more about mobile builds in general](/apps/expo-app/docs/building-mobile.md)
 
 **We can stray from their recommendations, but with caution.**
 
 1.  Update to the new package in all relevant packages.
 
 ```shell
-yarn workspace mobile-app add <dependency name>@<version>
+yarn workspace expo-app add <dependency name>@<version>
 yarn workspace @coinbase/cds-mobile add <dependency name>@<version>
 yarn
 ```
@@ -20,12 +20,12 @@ yarn
 yarn nx run mobile:test
 ```
 
-3. Test that your applications work locally as expected. You will need to build a new debug build & likely uninstall the previous application and reinstall your new build, following [setup instructions](/apps/mobile-app/README.md).
+3. Test that your applications work locally as expected. You will need to build a new debug build & likely uninstall the previous application and reinstall your new build, following [setup instructions](/apps/expo-app/README.md).
 
 4. Generate the new shared, native module builds for everyone to use. Be sure to commit the release builds. Visreg (via `packages/mobile-visreg`) uses the release builds to capture and compare screenshots. The android-debug build is too large to be committed locally, but should be tested.
 
 ```shell
-yarn nx run mobile-app:build:ios-debug
-yarn nx run mobile-app:build:ios-release
-yarn nx run mobile-app:build:android-release
+yarn nx run expo-app:build:ios-debug
+yarn nx run expo-app:build:ios-release
+yarn nx run expo-app:build:android-release
 ```
diff --git a/apps/expo-app/index.js b/apps/expo-app/index.js
new file mode 100644
index 0000000000..131fa8562d
--- /dev/null
+++ b/apps/expo-app/index.js
@@ -0,0 +1,10 @@
+import './polyfills/intl';
+
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);
diff --git a/apps/expo-app/package.json b/apps/expo-app/package.json
new file mode 100644
index 0000000000..d883b5b8f0
--- /dev/null
+++ b/apps/expo-app/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "expo-app",
+  "version": "1.0.0",
+  "main": "index.js",
+  "dependencies": {
+    "@coinbase/cds-icons": "workspace:^",
+    "@coinbase/cds-mobile": "workspace:^",
+    "@expo-google-fonts/inter": "^0.3.0",
+    "@expo-google-fonts/source-code-pro": "^0.3.0",
+    "@formatjs/intl-getcanonicallocales": "^2.5.5",
+    "@formatjs/intl-locale": "^4.2.11",
+    "@formatjs/intl-numberformat": "^8.15.4",
+    "@formatjs/intl-pluralrules": "^5.4.4",
+    "@react-navigation/native": "6.1.17",
+    "@react-navigation/native-stack": "6.9.26",
+    "@shopify/react-native-skia": "2.2.12",
+    "expo": "54.0.32",
+    "expo-dev-client": "6.0.20",
+    "expo-font": "14.0.11",
+    "expo-linking": "~8.0.11",
+    "expo-splash-screen": "31.0.13",
+    "expo-status-bar": "3.0.9",
+    "intl": "^1.2.5",
+    "lottie-react-native": "7.3.1",
+    "react": "19.1.2",
+    "react-native": "0.81.5",
+    "react-native-date-picker": "5.0.12",
+    "react-native-gesture-handler": "2.28.0",
+    "react-native-inappbrowser-reborn": "3.7.0",
+    "react-native-navigation-bar-color": "2.0.2",
+    "react-native-reanimated": "4.1.1",
+    "react-native-safe-area-context": "5.6.0",
+    "react-native-screens": "4.16.0",
+    "react-native-svg": "15.12.1",
+    "react-native-worklets": "0.5.2"
+  },
+  "private": true,
+  "scripts": {
+    "android": "expo run:android",
+    "ios": "expo run:ios"
+  }
+}
diff --git a/apps/mobile-app/src/polyfills/intl.ts b/apps/expo-app/polyfills/intl.ts
similarity index 100%
rename from apps/mobile-app/src/polyfills/intl.ts
rename to apps/expo-app/polyfills/intl.ts
diff --git a/apps/mobile-app/prebuilds/ios-debug-hermes.tar.gz b/apps/expo-app/prebuilds/ios-release/expoapp.tar.gz
similarity index 71%
rename from apps/mobile-app/prebuilds/ios-debug-hermes.tar.gz
rename to apps/expo-app/prebuilds/ios-release/expoapp.tar.gz
index 5ca70c1bd8..928c1c9d46 100644
Binary files a/apps/mobile-app/prebuilds/ios-debug-hermes.tar.gz and b/apps/expo-app/prebuilds/ios-release/expoapp.tar.gz differ
diff --git a/apps/expo-app/project.json b/apps/expo-app/project.json
new file mode 100644
index 0000000000..a51643e50f
--- /dev/null
+++ b/apps/expo-app/project.json
@@ -0,0 +1,115 @@
+{
+  "name": "expo-app",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/expo-app",
+  "tags": [],
+  "targets": {
+    "start": {
+      "command": "npx expo start",
+      "options": {
+        "cwd": "apps/expo-app"
+      }
+    },
+    "ios": {
+      "executor": "nx:run-commands",
+      "defaultConfiguration": "debug",
+      "configurations": {
+        "debug": {
+          "cwd": "apps/expo-app",
+          "command": "node ./scripts/run.mjs --platform ios --profile debug"
+        },
+        "release": {
+          "cwd": "apps/expo-app",
+          "command": "node ./scripts/run.mjs --platform ios --profile release"
+        }
+      }
+    },
+    "android": {
+      "executor": "nx:run-commands",
+      "defaultConfiguration": "debug",
+      "configurations": {
+        "debug": {
+          "cwd": "apps/expo-app",
+          "command": "node ./scripts/run.mjs --platform android --profile debug"
+        },
+        "release": {
+          "cwd": "apps/expo-app",
+          "command": "node ./scripts/run.mjs --platform android --profile release"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "typecheck": {
+      "command": "tsc --build --pretty --verbose"
+    },
+    "validate": {
+      "command": "npx expo install --check",
+      "options": {
+        "cwd": "apps/expo-app"
+      }
+    },
+    "launch": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "apps/expo-app",
+        "command": "node ./scripts/launch.mjs"
+      },
+      "configurations": {
+        "ios-debug": {
+          "args": "--platform ios --profile debug"
+        },
+        "ios-release": {
+          "args": "--platform ios --profile release"
+        },
+        "android-debug": {
+          "args": "--platform android --profile debug"
+        },
+        "android-release": {
+          "args": "--platform android --profile release"
+        }
+      }
+    },
+    "patch-bundle-ios": {
+      "command": "node ./scripts/patch-bundle.mjs --platform ios --profile release",
+      "options": {
+        "cwd": "apps/expo-app"
+      }
+    },
+    "patch-bundle-android": {
+      "command": "node ./scripts/patch-bundle.mjs --platform android --profile release",
+      "options": {
+        "cwd": "apps/expo-app"
+      }
+    },
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "apps/expo-app",
+        "command": "node ./scripts/build.mjs"
+      },
+      "configurations": {
+        "ios-debug": {
+          "args": "--platform ios --profile debug --target simulator"
+        },
+        "ios-release": {
+          "args": "--platform ios --profile release --target simulator"
+        },
+        "ios-debug-device": {
+          "args": "--platform ios --profile debug --target device"
+        },
+        "ios-release-device": {
+          "args": "--platform ios --profile release --target device"
+        },
+        "android-debug": {
+          "args": "--platform android --profile debug --target simulator"
+        },
+        "android-release": {
+          "args": "--platform android --profile release --target simulator"
+        }
+      }
+    }
+  }
+}
diff --git a/apps/expo-app/scripts/build.mjs b/apps/expo-app/scripts/build.mjs
new file mode 100644
index 0000000000..f01219aeae
--- /dev/null
+++ b/apps/expo-app/scripts/build.mjs
@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+import { parseArgs } from 'node:util';
+
+import { createBuilder } from './utils/createBuilder.mjs';
+import { getBuildInfo } from './utils/getBuildInfo.mjs';
+
+const { values } = parseArgs({
+  options: {
+    platform: { type: 'string' },
+    profile: { type: 'string', default: 'debug' },
+    target: { type: 'string', default: 'simulator' },
+  },
+});
+
+const { platform, profile, target } = values;
+
+if (!platform) {
+  console.error(
+    'Usage: node build.mjs --platform <ios|android> [--profile <debug|release>] [--target <simulator|device>]',
+  );
+  process.exit(1);
+}
+
+if (target !== 'simulator' && target !== 'device') {
+  console.error('Error: --target must be "simulator" or "device"');
+  process.exit(1);
+}
+
+const buildInfo = getBuildInfo({ platform, profile, target });
+const builder = createBuilder(buildInfo);
+
+await builder.build();
+
+console.log(`\nBuild artifacts are in: ${buildInfo.outputPath}/`);
+process.exit(0);
diff --git a/apps/expo-app/scripts/launch.mjs b/apps/expo-app/scripts/launch.mjs
new file mode 100644
index 0000000000..e213a6ba3d
--- /dev/null
+++ b/apps/expo-app/scripts/launch.mjs
@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+import { parseArgs } from 'node:util';
+
+import { createBuilder } from './utils/createBuilder.mjs';
+import { getBuildInfo } from './utils/getBuildInfo.mjs';
+
+const { values } = parseArgs({
+  options: {
+    platform: { type: 'string' },
+    profile: { type: 'string', default: 'debug' },
+  },
+});
+
+const { platform, profile } = values;
+
+if (!platform) {
+  console.error('Usage: node launch.mjs --platform <ios|android> [--profile <debug|release>]');
+  process.exit(1);
+}
+
+const buildInfo = getBuildInfo({ platform, profile, target: 'simulator' });
+const builder = createBuilder(buildInfo);
+
+// Check that build artifact exists
+if (!(await builder.hasBuildArtifact())) {
+  const config = `${platform}-${profile}`;
+  console.error(`Error: Build artifact not found.`);
+  console.error(`Run: yarn nx run expo-app:build --configuration=${config}`);
+  process.exit(1);
+}
+
+// Install and launch
+await builder.install();
+await builder.launch();
+
+console.log('\nApp launched! Run "yarn nx run expo-app:start" to connect Metro.');
diff --git a/apps/expo-app/scripts/patch-bundle.mjs b/apps/expo-app/scripts/patch-bundle.mjs
new file mode 100644
index 0000000000..4fddaf0fef
--- /dev/null
+++ b/apps/expo-app/scripts/patch-bundle.mjs
@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+/**
+ * Patches a fresh JS bundle into a pre-built native artifact (iOS .app / Android APK).
+ * This avoids a full native rebuild in CI — only the JS layer is updated.
+ *
+ * Usage:
+ *   node scripts/patch-bundle.mjs --platform ios [--profile release]
+ *   node scripts/patch-bundle.mjs --platform android [--profile release]
+ *
+ * Prerequisites: a build artifact must already exist at builds/{platform}-{profile}/.
+ * Build one with: yarn nx run expo-app:build --configuration={platform}-{profile}
+ */
+import { parseArgs } from 'node:util';
+
+import { createBuilder } from './utils/createBuilder.mjs';
+import { getBuildInfo } from './utils/getBuildInfo.mjs';
+
+const { values } = parseArgs({
+  options: {
+    platform: { type: 'string' },
+    profile: { type: 'string', default: 'release' },
+  },
+});
+
+const { platform, profile } = values;
+
+if (!platform || !['ios', 'android'].includes(platform)) {
+  console.error(
+    'Usage: node patch-bundle.mjs --platform <ios|android> [--profile <release|debug>]',
+  );
+  process.exit(1);
+}
+
+const buildInfo = getBuildInfo({ platform, profile, target: 'simulator' });
+const builder = createBuilder(buildInfo);
+
+await builder.patchBundle();
diff --git a/apps/expo-app/scripts/run.mjs b/apps/expo-app/scripts/run.mjs
new file mode 100644
index 0000000000..34a3a4f4fc
--- /dev/null
+++ b/apps/expo-app/scripts/run.mjs
@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+/**
+ * Smart run script that uses pre-built artifacts if available,
+ * otherwise falls back to building from source.
+ */
+import { parseArgs } from 'node:util';
+
+import { createBuilder } from './utils/createBuilder.mjs';
+import { getBuildInfo } from './utils/getBuildInfo.mjs';
+
+const { values } = parseArgs({
+  options: {
+    platform: { type: 'string' },
+    profile: { type: 'string', default: 'debug' },
+  },
+});
+
+const { platform, profile } = values;
+
+if (!platform) {
+  console.error('Usage: node run.mjs --platform <ios|android> [--profile <debug|release>]');
+  process.exit(1);
+}
+
+const buildInfo = getBuildInfo({ platform, profile, target: 'simulator' });
+const builder = createBuilder(buildInfo);
+
+await builder.buildIfNeeded();
+
+console.log(`Launching ${platform}...`);
+await builder.ensureSimulatorRunning();
+await builder.install();
+await builder.launch();
+
+if (profile === 'debug') {
+  await builder.startMetro();
+}
diff --git a/apps/expo-app/scripts/utils/AndroidBuilder.mjs b/apps/expo-app/scripts/utils/AndroidBuilder.mjs
new file mode 100644
index 0000000000..cac31d5706
--- /dev/null
+++ b/apps/expo-app/scripts/utils/AndroidBuilder.mjs
@@ -0,0 +1,155 @@
+import { execSync, spawn } from 'node:child_process';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+import { PlatformBuilder } from './PlatformBuilder.mjs';
+import { run, runCapture } from './shell.mjs';
+
+export class AndroidBuilder extends PlatformBuilder {
+  get android() {
+    return this.buildInfo.android;
+  }
+
+  // ─────────────────────────────────────────────────────────────────
+  // Build artifact management
+  // ─────────────────────────────────────────────────────────────────
+
+  async hasBuildArtifact() {
+    try {
+      await fs.access(this.android.apk);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  async compile() {
+    const { outputPath } = this.buildInfo;
+    const isDebug = this.buildInfo.profile === 'debug';
+    const buildType = isDebug ? 'Debug' : 'Release';
+    const buildTypeLC = buildType.toLowerCase();
+
+    console.log(`Building Android app (${buildType})...`);
+
+    await fs.mkdir(outputPath, { recursive: true });
+
+    const gradleTask = isDebug ? 'assembleDebug' : 'assembleRelease';
+    await run('./gradlew', [`:app:${gradleTask}`, '--no-daemon'], {
+      cwd: this.android.projectPath,
+    });
+
+    // Copy the built APK to output directory
+    const builtApkDir = path.join(
+      this.android.projectPath,
+      'app',
+      'build',
+      'outputs',
+      'apk',
+      buildTypeLC,
+    );
+    const builtApkPath = path.join(builtApkDir, `app-${buildTypeLC}.apk`);
+
+    try {
+      await fs.access(builtApkPath);
+      await fs.copyFile(builtApkPath, this.android.apk);
+      console.log(`Android APK created: ${this.android.apk}`);
+    } catch {
+      throw new Error(`APK not found at ${builtApkPath}`);
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────
+  // Emulator management
+  // ─────────────────────────────────────────────────────────────────
+
+  async isSimulatorRunning() {
+    const output = await runCapture('adb', ['devices']);
+    const lines = output.split('\n').slice(1); // Skip header
+    return lines.some((line) => line.trim() && line.includes('\tdevice'));
+  }
+
+  async bootSimulator() {
+    console.log('No Android emulator running, starting one...');
+
+    const avdList = await runCapture('emulator', ['-list-avds']);
+    const avds = avdList.trim().split('\n').filter(Boolean);
+
+    if (avds.length === 0) {
+      throw new Error('No Android Virtual Devices found. Create one in Android Studio first.');
+    }
+
+    const avd = avds[0];
+    console.log(`Starting emulator: ${avd}`);
+
+    // Start emulator in background (detached)
+    spawn('emulator', ['-avd', avd], {
+      detached: true,
+      stdio: 'ignore',
+    }).unref();
+
+    console.log('Waiting for emulator to boot...');
+    await run('adb', ['wait-for-device']);
+  }
+
+  async waitForSimulator() {
+    const maxAttempts = 60;
+    for (let i = 0; i < maxAttempts; i++) {
+      try {
+        const result = await runCapture('adb', ['shell', 'getprop', 'sys.boot_completed']);
+        if (result.trim() === '1') return;
+      } catch {
+        // Device not ready yet
+      }
+      await new Promise((r) => setTimeout(r, 1000));
+    }
+    throw new Error('Emulator failed to boot within timeout');
+  }
+
+  // ─────────────────────────────────────────────────────────────────
+  // App installation and launch
+  // ─────────────────────────────────────────────────────────────────
+
+  async extractArtifact() {
+    // Android APKs don't need extraction
+  }
+
+  async install() {
+    console.log('Installing on Android Emulator...');
+    await run('adb', ['install', '-r', this.android.apk]);
+  }
+
+  async launch() {
+    console.log(`Launching ${this.android.packageId}...`);
+    await run('adb', ['shell', 'am', 'start', '-n', `${this.android.packageId}/.MainActivity`]);
+  }
+
+  async applyBundle(bundlePath) {
+    const apk = path.resolve(this.android.apk);
+    const patchDir = `/tmp/apk-patch-${Date.now()}`;
+    const assetsDir = `${patchDir}/assets`;
+    const patchedBundle = `${assetsDir}/index.android.bundle`;
+    const alignedApk = `${apk}.aligned`;
+
+    await fs.mkdir(assetsDir, { recursive: true });
+    await fs.copyFile(bundlePath, patchedBundle);
+
+    // Replace assets/index.android.bundle in the APK (cd into patchDir so zip path is correct)
+    console.log(`\nPatching bundle into APK: ${apk}...`);
+    execSync(`zip -u ${apk} assets/index.android.bundle`, { cwd: patchDir, stdio: 'inherit' });
+
+    // Re-align (zip modification breaks alignment) then re-sign with debug keystore
+    execSync(`zipalign -f 4 ${apk} ${alignedApk}`, { stdio: 'inherit' });
+    await fs.rename(alignedApk, apk);
+
+    const debugKeystore = path.resolve(process.env.HOME, '.android/debug.keystore');
+    execSync(
+      `apksigner sign --ks ${debugKeystore} --ks-pass pass:android --key-pass pass:android ${apk}`,
+      { stdio: 'inherit' },
+    );
+
+    await fs.rm(patchDir, { recursive: true });
+
+    console.log('Android bundle patched successfully.');
+    console.log(`APK ready at: ${apk}`);
+  }
+}
diff --git a/apps/expo-app/scripts/utils/IOSBuilder.mjs b/apps/expo-app/scripts/utils/IOSBuilder.mjs
new file mode 100644
index 0000000000..5268cf584a
--- /dev/null
+++ b/apps/expo-app/scripts/utils/IOSBuilder.mjs
@@ -0,0 +1,196 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+import { PlatformBuilder } from './PlatformBuilder.mjs';
+import { run, runCapture } from './shell.mjs';
+
+export class IOSBuilder extends PlatformBuilder {
+  get ios() {
+    return this.buildInfo.ios;
+  }
+
+  // ─────────────────────────────────────────────────────────────────
+  // Build artifact management
+  // ─────────────────────────────────────────────────────────────────
+
+  async hasBuildArtifact() {
+    try {
+      await fs.access(this.ios.appTarball);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  async compile() {
+    const { outputPath } = this.buildInfo;
+    const configuration = this.buildInfo.profile === 'debug' ? 'Debug' : 'Release';
+
+    if (this.ios.isDevice) {
+      await this.#compileForDevice(configuration);
+    } else {
+      await this.#compileForSimulator(configuration, outputPath);
+    }
+  }
+
+  async #compileForSimulator(configuration, outputPath) {
+    const buildDir = path.resolve('build');
+
+    console.log(`Building iOS app (${configuration}) for simulator...`);
+    await run('xcodebuild', [
+      '-workspace',
+      this.ios.workspace,
+      '-scheme',
+      this.ios.scheme,
+      '-configuration',
+      configuration,
+      '-destination',
+      this.ios.destination,
+      '-derivedDataPath',
+      buildDir,
+      'build',
+    ]);
+
+    // Find the built .app and create tarball
+    const configFolder = `${configuration}-iphonesimulator`;
+    const appPath = path.join(
+      buildDir,
+      'Build',
+      'Products',
+      configFolder,
+      `${this.ios.scheme}.app`,
+    );
+    const appDir = path.dirname(appPath);
+    const appName = path.basename(appPath);
+
+    console.log(`Creating tarball: ${this.ios.appTarball}`);
+    await run('tar', ['-czf', path.resolve(this.ios.appTarball), '-C', appDir, appName]);
+
+    // Clean up
+    await fs.rm(buildDir, { recursive: true, force: true });
+    console.log(`iOS simulator build created: ${this.ios.appTarball}`);
+  }
+
+  async #compileForDevice(configuration) {
+    const { outputPath } = this.buildInfo;
+
+    console.log(`Archiving iOS app (${configuration}) for device...`);
+    await run('xcodebuild', [
+      '-workspace',
+      this.ios.workspace,
+      '-scheme',
+      this.ios.scheme,
+      '-configuration',
+      configuration,
+      '-destination',
+      this.ios.destination,
+      '-archivePath',
+      this.ios.archivePath,
+      'archive',
+      'CODE_SIGN_IDENTITY=-',
+      'AD_HOC_CODE_SIGNING_ALLOWED=YES',
+    ]);
+
+    console.log('Exporting IPA...');
+    await run('xcodebuild', [
+      '-exportArchive',
+      '-archivePath',
+      this.ios.archivePath,
+      '-exportPath',
+      outputPath,
+      '-exportOptionsPlist',
+      this.ios.exportOptionsPlist,
+      '-allowProvisioningUpdates',
+    ]);
+
+    // Rename if needed
+    const exportedIpa = path.join(outputPath, `${this.ios.scheme}.ipa`);
+    try {
+      await fs.access(exportedIpa);
+      await fs.rename(exportedIpa, this.ios.ipa);
+    } catch {
+      // Already named correctly
+    }
+
+    // Clean up archive
+    await fs.rm(this.ios.archivePath, { recursive: true, force: true });
+    console.log(`iOS device build created: ${this.ios.ipa}`);
+  }
+
+  // ─────────────────────────────────────────────────────────────────
+  // Simulator management
+  // ─────────────────────────────────────────────────────────────────
+
+  async isSimulatorRunning() {
+    const output = await runCapture('xcrun', ['simctl', 'list', 'devices', 'booted', '-j']);
+    const json = JSON.parse(output);
+    const bootedDevices = Object.values(json.devices).flat();
+    return bootedDevices.length > 0;
+  }
+
+  async bootSimulator() {
+    console.log('No iOS Simulator running, booting one...');
+
+    // Find an available iPhone
+    const output = await runCapture('xcrun', ['simctl', 'list', 'devices', 'available', '-j']);
+    const json = JSON.parse(output);
+
+    let deviceUDID = null;
+    let deviceName = null;
+
+    for (const [runtime, devices] of Object.entries(json.devices)) {
+      if (runtime.includes('iOS')) {
+        const iphone = devices.find((d) => d.name.includes('iPhone') && d.isAvailable);
+        if (iphone) {
+          deviceUDID = iphone.udid;
+          deviceName = iphone.name;
+          break;
+        }
+      }
+    }
+
+    if (!deviceUDID) {
+      throw new Error('No available iPhone simulator found.');
+    }
+
+    console.log(`Booting ${deviceName}...`);
+    await run('xcrun', ['simctl', 'boot', deviceUDID]);
+    await run('open', ['-a', 'Simulator']);
+  }
+
+  async waitForSimulator() {
+    await run('xcrun', ['simctl', 'bootstatus', 'booted', '-b']);
+  }
+
+  // ─────────────────────────────────────────────────────────────────
+  // App installation and launch
+  // ─────────────────────────────────────────────────────────────────
+
+  async extractArtifact() {
+    try {
+      await fs.access(this.ios.app);
+    } catch {
+      console.log(`Extracting ${this.ios.appTarball}...`);
+      await run('tar', ['-xzf', this.ios.appTarball, '-C', this.buildInfo.outputPath]);
+    }
+  }
+
+  async install() {
+    await this.extractArtifact();
+    console.log('Installing on iOS Simulator...');
+    await run('xcrun', ['simctl', 'install', 'booted', this.ios.app]);
+  }
+
+  async launch() {
+    console.log(`Launching ${this.ios.bundleId}...`);
+    await run('xcrun', ['simctl', 'launch', 'booted', this.ios.bundleId]);
+  }
+
+  async applyBundle(bundlePath) {
+    const outBundle = `${this.ios.app}/main.jsbundle`;
+    console.log(`\nCopying bundle → ${outBundle}...`);
+    await fs.copyFile(bundlePath, outBundle);
+    console.log('iOS bundle patched successfully.');
+    console.log(`App ready at: ${this.ios.app}`);
+  }
+}
diff --git a/apps/expo-app/scripts/utils/PlatformBuilder.mjs b/apps/expo-app/scripts/utils/PlatformBuilder.mjs
new file mode 100644
index 0000000000..cdd2e180b7
--- /dev/null
+++ b/apps/expo-app/scripts/utils/PlatformBuilder.mjs
@@ -0,0 +1,134 @@
+import { execSync } from 'node:child_process';
+import { readdirSync } from 'node:fs';
+import fs from 'node:fs/promises';
+
+import { run } from './shell.mjs';
+
+/**
+ * Abstract base class for platform-specific build operations.
+ * iOS and Android implement the abstract methods differently.
+ */
+export class PlatformBuilder {
+  constructor(buildInfo) {
+    this.buildInfo = buildInfo;
+  }
+
+  // ─────────────────────────────────────────────────────────────────
+  // Abstract methods - must be implemented by subclasses
+  // ─────────────────────────────────────────────────────────────────
+
+  /** Check if the build artifact exists */
+  async hasBuildArtifact() {
+    throw new Error('Not implemented');
+  }
+
+  /** Compile the native app (xcodebuild / gradle) */
+  async compile() {
+    throw new Error('Not implemented');
+  }
+
+  /** Check if a simulator/emulator is currently running */
+  async isSimulatorRunning() {
+    throw new Error('Not implemented');
+  }
+
+  /** Boot a simulator/emulator */
+  async bootSimulator() {
+    throw new Error('Not implemented');
+  }
+
+  /** Wait for the simulator/emulator to be fully ready */
+  async waitForSimulator() {
+    throw new Error('Not implemented');
+  }
+
+  /** Extract build artifact if needed (e.g., untar .tar.gz) */
+  async extractArtifact() {
+    throw new Error('Not implemented');
+  }
+
+  /** Install the app on the simulator/emulator */
+  async install() {
+    throw new Error('Not implemented');
+  }
+
+  /** Launch the app */
+  async launch() {
+    throw new Error('Not implemented');
+  }
+
+  /** Apply a bundle file to the native artifact — platform-specific */
+  async applyBundle(_bundlePath) {
+    throw new Error('Not implemented');
+  }
+
+  // ─────────────────────────────────────────────────────────────────
+  // Shared methods - common to both platforms
+  // ─────────────────────────────────────────────────────────────────
+
+  /** Run expo prebuild to generate native project files */
+  async prebuild() {
+    const { platform } = this.buildInfo;
+    console.log(`Running prebuild for ${platform}...`);
+    await run('npx', ['expo', 'prebuild', '--platform', platform, '--clean']);
+  }
+
+  /** Full build: prebuild + compile */
+  async build() {
+    const { platform, profile, outputPath } = this.buildInfo;
+    console.log(`Building ${platform} (${profile})...`);
+
+    await fs.mkdir(outputPath, { recursive: true });
+    await this.prebuild();
+    await this.compile();
+  }
+
+  /** Build only if artifact doesn't exist */
+  async buildIfNeeded() {
+    if (!(await this.hasBuildArtifact())) {
+      console.log('No build artifact found, building...');
+      await this.build();
+    }
+  }
+
+  /** Ensure simulator is running, boot if needed */
+  async ensureSimulatorRunning() {
+    if (!(await this.isSimulatorRunning())) {
+      await this.bootSimulator();
+    }
+    await this.waitForSimulator();
+  }
+
+  /**
+   * Patches a fresh JS bundle into the pre-built native artifact.
+   * Runs expo export, finds the output bundle, then delegates platform-specific
+   * placement to applyBundle().
+   */
+  async patchBundle() {
+    const { platform } = this.buildInfo;
+    const exportDir = `/tmp/expo-export-${platform}`;
+
+    await this.extractArtifact();
+
+    console.log(`\nExporting JS bundle to ${exportDir}...`);
+    execSync(`npx expo export --platform ${platform} --output-dir ${exportDir}`, {
+      stdio: 'inherit',
+    });
+
+    const jsDir = `${exportDir}/_expo/static/js/${platform}`;
+    const bundleFiles = readdirSync(jsDir).filter((f) => f.startsWith('index-'));
+    if (bundleFiles.length === 0) {
+      throw new Error(`No bundle found in ${jsDir}`);
+    }
+    const bundlePath = `${jsDir}/${bundleFiles[0]}`;
+    console.log(`\nFound bundle: ${bundlePath}`);
+
+    await this.applyBundle(bundlePath);
+  }
+
+  /** Start Metro bundler */
+  async startMetro() {
+    console.log('\nStarting Metro bundler...');
+    await run('npx', ['expo', 'start'], { interactive: true });
+  }
+}
diff --git a/apps/expo-app/scripts/utils/createBuilder.mjs b/apps/expo-app/scripts/utils/createBuilder.mjs
new file mode 100644
index 0000000000..e090a8f9f9
--- /dev/null
+++ b/apps/expo-app/scripts/utils/createBuilder.mjs
@@ -0,0 +1,12 @@
+import { AndroidBuilder } from './AndroidBuilder.mjs';
+import { IOSBuilder } from './IOSBuilder.mjs';
+
+/**
+ * Factory function to create the appropriate platform builder.
+ */
+export function createBuilder(buildInfo) {
+  if (buildInfo.platform === 'ios') {
+    return new IOSBuilder(buildInfo);
+  }
+  return new AndroidBuilder(buildInfo);
+}
diff --git a/apps/expo-app/scripts/utils/exportOptions.plist b/apps/expo-app/scripts/utils/exportOptions.plist
new file mode 100644
index 0000000000..d5b9e3ee1d
--- /dev/null
+++ b/apps/expo-app/scripts/utils/exportOptions.plist
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+    <key>method</key>
+    <string>development</string>
+    <key>compileBitcode</key>
+    <false/>
+    <key>thinning</key>
+    <string>&lt;none&gt;</string>
+    <key>signingStyle</key>
+    <string>automatic</string>
+</dict>
+</plist>
diff --git a/apps/expo-app/scripts/utils/getBuildInfo.mjs b/apps/expo-app/scripts/utils/getBuildInfo.mjs
new file mode 100644
index 0000000000..055e373ed0
--- /dev/null
+++ b/apps/expo-app/scripts/utils/getBuildInfo.mjs
@@ -0,0 +1,45 @@
+import path from 'node:path';
+
+const OUTPUT_DIRECTORY = 'prebuilds';
+const APP_NAME = 'expoapp';
+const IOS_SCHEME = 'expoapp';
+const IOS_BUNDLE_ID = 'com.anonymous.expo-app';
+const ANDROID_PACKAGE_ID = 'com.anonymous.expoapp';
+
+export function getBuildInfo({ platform, profile, target = 'simulator' }) {
+  const isDevice = target === 'device';
+  // Default builds are for simulator/emulator, device builds get -device suffix
+  const buildId = isDevice ? `${platform}-${profile}-device` : `${platform}-${profile}`;
+  const outputPath = `${OUTPUT_DIRECTORY}/${buildId}`;
+
+  const ios = {
+    scheme: IOS_SCHEME,
+    bundleId: IOS_BUNDLE_ID,
+    workspace: path.resolve('ios', 'expoapp.xcworkspace'),
+    isDevice,
+    destination: isDevice ? 'generic/platform=iOS' : 'generic/platform=iOS Simulator',
+    archivePath: `${outputPath}/${APP_NAME}.xcarchive`,
+    app: `${outputPath}/${APP_NAME}.app`,
+    appTarball: `${outputPath}/${APP_NAME}.tar.gz`,
+    ipa: `${outputPath}/${APP_NAME}.ipa`,
+    exportOptionsPlist: path.resolve('scripts/utils/exportOptions.plist'),
+  };
+
+  const android = {
+    packageId: ANDROID_PACKAGE_ID,
+    projectPath: path.resolve('android'),
+    apk: `${outputPath}/${APP_NAME}.apk`,
+    testApk: `${outputPath}/${APP_NAME}-androidTest.apk`,
+  };
+
+  return {
+    platform,
+    profile,
+    target,
+    buildId,
+    outputDirectory: OUTPUT_DIRECTORY,
+    outputPath,
+    ios,
+    android,
+  };
+}
diff --git a/apps/expo-app/scripts/utils/shell.mjs b/apps/expo-app/scripts/utils/shell.mjs
new file mode 100644
index 0000000000..ef577fce6f
--- /dev/null
+++ b/apps/expo-app/scripts/utils/shell.mjs
@@ -0,0 +1,44 @@
+import { spawn } from 'node:child_process';
+
+/**
+ * Runs a command with inherited stdio (output goes to terminal).
+ */
+export function run(command, args, options = {}) {
+  return new Promise((resolve, reject) => {
+    if (!options.silent) {
+      console.log(`> ${command} ${args.join(' ')}`);
+    }
+    const child = spawn(command, args, {
+      stdio: 'inherit',
+      shell: false,
+      ...options,
+    });
+    child.on('close', (code) => {
+      if (code === 0 || options.ignoreError) resolve();
+      else reject(new Error(`Command failed with code ${code}`));
+    });
+    child.on('error', (err) => {
+      if (options.ignoreError) resolve();
+      else reject(err);
+    });
+  });
+}
+
+/**
+ * Runs a command and captures its stdout (instead of inheriting stdio).
+ * Used when we need to parse the output of a command.
+ */
+export function runCapture(command, args) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, { shell: false });
+    let stdout = '';
+    child.stdout.on('data', (data) => {
+      stdout += data;
+    });
+    child.on('close', (code) => {
+      if (code === 0) resolve(stdout);
+      else reject(new Error(`Command failed with code ${code}`));
+    });
+    child.on('error', reject);
+  });
+}
diff --git a/packages/ui-mobile-playground/src/__generated__/iconSvgMap.ts b/apps/expo-app/src/__generated__/iconSvgMap.ts
similarity index 99%
rename from packages/ui-mobile-playground/src/__generated__/iconSvgMap.ts
rename to apps/expo-app/src/__generated__/iconSvgMap.ts
index 22845037d5..4ce64ef6a9 100644
--- a/packages/ui-mobile-playground/src/__generated__/iconSvgMap.ts
+++ b/apps/expo-app/src/__generated__/iconSvgMap.ts
@@ -1,7 +1,7 @@
 /**
  * DO NOT MODIFY
- * This file is generated by ui-mobile-playground/scripts/generateIconSvgMap.ts
- * 
+ * This file is generated by libs/codegen/src/icons/generateIconSvgMap.ts
+ *
  * Why this exists:
  * - Provides a static map of icon names to their SVG content for rendering Icons directly with react-native-svg components
  *
diff --git a/apps/mobile-app/src/hooks/useFonts.ts b/apps/expo-app/src/hooks/useFonts.ts
similarity index 96%
rename from apps/mobile-app/src/hooks/useFonts.ts
rename to apps/expo-app/src/hooks/useFonts.ts
index 133dc772ab..dbd71e608a 100644
--- a/apps/mobile-app/src/hooks/useFonts.ts
+++ b/apps/expo-app/src/hooks/useFonts.ts
@@ -1,4 +1,3 @@
-// import { useEffect, useState } from 'react';
 import { Inter_400Regular } from '@expo-google-fonts/inter/400Regular';
 import { Inter_600SemiBold } from '@expo-google-fonts/inter/600SemiBold';
 import { useFonts as useFontsInter } from '@expo-google-fonts/inter/useFonts';
diff --git a/packages/ui-mobile-playground/src/components/ExamplesListScreen.tsx b/apps/expo-app/src/playground/ExamplesListScreen.tsx
similarity index 74%
rename from packages/ui-mobile-playground/src/components/ExamplesListScreen.tsx
rename to apps/expo-app/src/playground/ExamplesListScreen.tsx
index a780a1499f..b17ecef828 100644
--- a/packages/ui-mobile-playground/src/components/ExamplesListScreen.tsx
+++ b/apps/expo-app/src/playground/ExamplesListScreen.tsx
@@ -1,29 +1,30 @@
 import React, { useCallback, useContext } from 'react';
 import { FlatList } from 'react-native';
 import type { ListRenderItem } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { CellSpacing } from '@coinbase/cds-mobile/cells/Cell';
 import { ListCell } from '@coinbase/cds-mobile/cells/ListCell';
 import { Box } from '@coinbase/cds-mobile/layout/Box';
-import { useNavigation, useRoute } from '@react-navigation/native';
-import includes from 'lodash/includes';
+import { useNavigation } from '@react-navigation/native';
 
 import { SearchFilterContext } from './ExamplesSearchProvider';
 import { keyToRouteName } from './keyToRouteName';
-import { initialRouteKey, searchRouteKey } from './staticRoutes';
+import type { ExamplesListScreenProps } from './types';
+
+const initialRouteKey = 'Examples';
+const searchRouteKey = 'Search';
 
 const innerSpacingConfig: CellSpacing = { paddingX: 1 };
 
-export function ExamplesListScreen() {
+export function ExamplesListScreen({ route }: ExamplesListScreenProps) {
   const searchFilter = useContext(SearchFilterContext);
-
-  // React Navigation Route Param typing is not clean because our routes are dynamic
-  const routeKeys = (useRoute().params as { routeKeys: string[] } | undefined)?.routeKeys ?? [];
+  const routeKeys = route.params?.routeKeys ?? [];
   const { navigate } = useNavigation();
+  const { bottom } = useSafeAreaInsets();
 
   const renderItem: ListRenderItem<string> = useCallback(
     ({ item }) => {
       const handlePress = () => {
-        // typing not clean due to dynamic routes
         navigate(keyToRouteName(item) as never);
       };
 
@@ -46,7 +47,7 @@ export function ExamplesListScreen() {
     .filter((key) => key !== initialRouteKey && key !== searchRouteKey)
     .filter((key) => {
       if (searchFilter !== '') {
-        return includes(key.toLowerCase(), searchFilter.toLowerCase());
+        return key.toLowerCase().includes(searchFilter.toLowerCase());
       }
       return true;
     });
@@ -55,6 +56,7 @@ export function ExamplesListScreen() {
     <Box background="bg" flexGrow={1} testID="mobile-playground-home-screen">
       <FlatList
         ItemSeparatorComponent={null}
+        contentContainerStyle={{ paddingBottom: bottom }}
         data={data}
         initialNumToRender={14}
         renderItem={renderItem}
diff --git a/packages/ui-mobile-playground/src/components/ExamplesSearchProvider.tsx b/apps/expo-app/src/playground/ExamplesSearchProvider.tsx
similarity index 100%
rename from packages/ui-mobile-playground/src/components/ExamplesSearchProvider.tsx
rename to apps/expo-app/src/playground/ExamplesSearchProvider.tsx
diff --git a/packages/ui-mobile-playground/src/components/IconSheetScreen.tsx b/apps/expo-app/src/playground/IconSheetScreen.tsx
similarity index 96%
rename from packages/ui-mobile-playground/src/components/IconSheetScreen.tsx
rename to apps/expo-app/src/playground/IconSheetScreen.tsx
index ebc66169c1..6b5505b4ec 100644
--- a/packages/ui-mobile-playground/src/components/IconSheetScreen.tsx
+++ b/apps/expo-app/src/playground/IconSheetScreen.tsx
@@ -5,7 +5,6 @@ import { IconSheet } from '@coinbase/cds-mobile/icons/__stories__/IconSheet';
 
 import { svgMap } from '../__generated__/iconSvgMap';
 
-// we only have svg assets for sizes xs, s, and m
 const getIconSourceSize = (iconSize: number): IconSourcePixelSize => {
   if (iconSize <= 12) return 12;
   if (iconSize <= 16) return 16;
diff --git a/apps/expo-app/src/playground/Playground.tsx b/apps/expo-app/src/playground/Playground.tsx
new file mode 100644
index 0000000000..78badfc0ed
--- /dev/null
+++ b/apps/expo-app/src/playground/Playground.tsx
@@ -0,0 +1,260 @@
+import React, { memo, useContext, useMemo } from 'react';
+import type { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { ColorScheme } from '@coinbase/cds-common/core/theme';
+import { IconButton } from '@coinbase/cds-mobile/buttons/IconButton';
+import { TextInput } from '@coinbase/cds-mobile/controls/TextInput';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Box } from '@coinbase/cds-mobile/layout/Box';
+import { HStack } from '@coinbase/cds-mobile/layout/HStack';
+import { Spacer } from '@coinbase/cds-mobile/layout/Spacer';
+import { Text } from '@coinbase/cds-mobile/typography/Text';
+import type { NativeStackNavigationOptions } from '@react-navigation/native-stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import { ExamplesListScreen } from './ExamplesListScreen';
+import {
+  ExamplesSearchProvider,
+  SearchFilterContext,
+  SetSearchFilterContext,
+} from './ExamplesSearchProvider';
+import { IconSheetScreen } from './IconSheetScreen';
+import { keyToRouteName } from './keyToRouteName';
+import type { PlaygroundRoute } from './PlaygroundRoute';
+import type { PlaygroundStackParamList } from './types';
+
+const initialRouteName = keyToRouteName('Examples');
+const searchRouteName = keyToRouteName('Search');
+
+const Stack = createNativeStackNavigator<PlaygroundStackParamList>();
+
+const titleOverrides: Record<string, string> = {
+  Examples: 'CDS',
+  Text: 'Text (all)',
+};
+
+type PlaygroundProps = {
+  routes?: PlaygroundRoute[];
+  listScreenTitle?: string;
+  setColorScheme?: React.Dispatch<React.SetStateAction<ColorScheme>>;
+};
+
+type HeaderProps = {
+  isSearch: boolean;
+  showBackButton: boolean;
+  showSearch: boolean;
+  title: string;
+  onGoBack: () => void;
+  onGoBackFromSearch: () => void;
+  onGoToSearch: () => void;
+  onToggleTheme: () => void;
+  onSearchChange: (e: NativeSyntheticEvent<TextInputChangeEventData>) => void;
+  searchFilter: string;
+  isDark: boolean;
+};
+
+const HeaderContent = memo(
+  ({
+    isSearch,
+    showBackButton,
+    showSearch,
+    title,
+    onGoBack,
+    onGoBackFromSearch,
+    onGoToSearch,
+    onToggleTheme,
+    onSearchChange,
+    searchFilter,
+    isDark,
+  }: HeaderProps) => {
+    const { top } = useSafeAreaInsets();
+    const style = useMemo(() => ({ paddingTop: top }), [top]);
+
+    const iconButtonPlaceholder = (
+      <Box opacity={0} pointerEvents="none">
+        <IconButton transparent accessibilityLabel="Close" name="close" />
+      </Box>
+    );
+
+    const leftHeaderButton = showSearch ? (
+      <Box marginX={-1}>
+        <IconButton
+          transparent
+          accessibilityLabel="Search for component"
+          name="search"
+          onPress={onGoToSearch}
+        />
+      </Box>
+    ) : showBackButton ? (
+      <Box marginX={-1}>
+        <IconButton
+          transparent
+          accessibilityLabel="Go back"
+          name="backArrow"
+          onPress={onGoBack}
+          testID="nav-back-button"
+        />
+      </Box>
+    ) : (
+      iconButtonPlaceholder
+    );
+
+    const rightHeaderButton = isSearch ? (
+      iconButtonPlaceholder
+    ) : (
+      <Box marginX={-1}>
+        <IconButton
+          transparent
+          accessibilityLabel="Toggle dark mode"
+          name={isDark ? 'moon' : 'light'}
+          onPress={onToggleTheme}
+        />
+      </Box>
+    );
+
+    return (
+      <Box animated background="bg" style={style}>
+        <HStack alignItems="center" justifyContent="center" paddingX={2} paddingY={1}>
+          {leftHeaderButton}
+          <Spacer />
+          <Box
+            alignItems="center"
+            pointerEvents={isSearch ? undefined : 'none'}
+            position="absolute"
+            width="100%"
+          >
+            {isSearch ? (
+              <TextInput
+                accessibilityHint="Search for component"
+                accessibilityLabel="Search for component"
+                label=""
+                onChange={onSearchChange}
+                placeholder="Search"
+                start={
+                  <IconButton
+                    transparent
+                    accessibilityLabel="Go back from search"
+                    name="backArrow"
+                    onPress={onGoBackFromSearch}
+                  />
+                }
+                value={searchFilter}
+              />
+            ) : (
+              <Text align="center" font="headline">
+                {title}
+              </Text>
+            )}
+          </Box>
+          <Spacer />
+          {rightHeaderButton}
+        </HStack>
+      </Box>
+    );
+  },
+);
+
+const PlaygroundContent = memo(
+  ({ routes = [], listScreenTitle, setColorScheme }: PlaygroundProps) => {
+    const theme = useTheme();
+    const searchFilter = useContext(SearchFilterContext);
+    const setFilter = useContext(SetSearchFilterContext);
+
+    const routeKeys = useMemo(() => routes.map(({ key }) => key), [routes]);
+
+    const screenOptions = useMemo(
+      (): NativeStackNavigationOptions => ({
+        headerBackTitleVisible: false,
+        headerStyle: {
+          backgroundColor: theme.color.bg,
+        },
+        headerShadowVisible: false,
+        header: ({ navigation, route, options }) => {
+          const routeName = route.name;
+          const isSearch = routeName === searchRouteName;
+          const showSearch = routeName === initialRouteName;
+          const canGoBack = navigation.canGoBack();
+          const isFocused = navigation.isFocused();
+          const showBackButton = isFocused && canGoBack && !isSearch;
+
+          const handleGoBack = () => navigation.goBack();
+          const handleGoBackFromSearch = () => {
+            setFilter('');
+            navigation.goBack();
+          };
+          const handleGoToSearch = () => navigation.navigate(searchRouteName);
+          const handleToggleTheme = () =>
+            setColorScheme?.((s) => (s === 'dark' ? 'light' : 'dark'));
+          const handleSearchChange = (e: NativeSyntheticEvent<TextInputChangeEventData>) =>
+            setFilter(e.nativeEvent.text);
+
+          return (
+            <HeaderContent
+              isDark={theme.activeColorScheme === 'dark'}
+              isSearch={isSearch}
+              onGoBack={handleGoBack}
+              onGoBackFromSearch={handleGoBackFromSearch}
+              onGoToSearch={handleGoToSearch}
+              onSearchChange={handleSearchChange}
+              onToggleTheme={handleToggleTheme}
+              searchFilter={searchFilter}
+              showBackButton={showBackButton}
+              showSearch={showSearch}
+              title={options.title ?? routeName}
+            />
+          );
+        },
+      }),
+      [theme.color.bg, theme.activeColorScheme, searchFilter, setFilter, setColorScheme],
+    );
+
+    const exampleScreens = useMemo(
+      () =>
+        [...routes].map((route) => {
+          const { key, getComponent } = route;
+          const name = keyToRouteName(key);
+          const title = titleOverrides[key] ?? key;
+          return (
+            <Stack.Screen
+              key={key}
+              component={getComponent() as React.ComponentType<object>}
+              name={name}
+              options={{ title }}
+            />
+          );
+        }),
+      [routes],
+    );
+
+    return (
+      <Stack.Navigator initialRouteName={initialRouteName} screenOptions={screenOptions}>
+        <Stack.Screen
+          component={ExamplesListScreen}
+          initialParams={{ routeKeys }}
+          name="DebugExamples"
+          options={{ title: listScreenTitle ?? 'CDS' }}
+        />
+        <Stack.Screen
+          component={ExamplesListScreen}
+          initialParams={{ routeKeys }}
+          name="DebugSearch"
+          options={{ title: 'Search' }}
+        />
+        <Stack.Screen
+          component={IconSheetScreen}
+          name="DebugIconSheet"
+          options={{ title: 'Icon Sheet' }}
+        />
+        {exampleScreens}
+      </Stack.Navigator>
+    );
+  },
+);
+
+export const Playground = memo((props: PlaygroundProps) => {
+  return (
+    <ExamplesSearchProvider>
+      <PlaygroundContent {...props} />
+    </ExamplesSearchProvider>
+  );
+});
diff --git a/apps/expo-app/src/playground/PlaygroundRoute.ts b/apps/expo-app/src/playground/PlaygroundRoute.ts
new file mode 100644
index 0000000000..6ce4a62e0c
--- /dev/null
+++ b/apps/expo-app/src/playground/PlaygroundRoute.ts
@@ -0,0 +1,6 @@
+import type React from 'react';
+
+export type PlaygroundRoute = {
+  key: string;
+  getComponent: () => React.ComponentType<unknown>;
+};
diff --git a/apps/expo-app/src/playground/index.ts b/apps/expo-app/src/playground/index.ts
new file mode 100644
index 0000000000..b163092b89
--- /dev/null
+++ b/apps/expo-app/src/playground/index.ts
@@ -0,0 +1,2 @@
+export { Playground } from './Playground';
+export type { PlaygroundRoute } from './PlaygroundRoute';
diff --git a/packages/ui-mobile-playground/src/components/keyToRouteName.ts b/apps/expo-app/src/playground/keyToRouteName.ts
similarity index 100%
rename from packages/ui-mobile-playground/src/components/keyToRouteName.ts
rename to apps/expo-app/src/playground/keyToRouteName.ts
diff --git a/apps/expo-app/src/playground/types.ts b/apps/expo-app/src/playground/types.ts
new file mode 100644
index 0000000000..a62d3d9f05
--- /dev/null
+++ b/apps/expo-app/src/playground/types.ts
@@ -0,0 +1,28 @@
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+
+type RouteParams = { routeKeys: string[] } | undefined;
+
+export type PlaygroundStackParamList = {
+  DebugExamples: { routeKeys: string[] };
+  DebugSearch: { routeKeys: string[] };
+  DebugIconSheet: undefined;
+} & {
+  [key: string]: RouteParams;
+};
+
+export type ExamplesListScreenProps = NativeStackScreenProps<
+  PlaygroundStackParamList,
+  'DebugExamples' | 'DebugSearch'
+>;
+
+export type IconSheetScreenProps = NativeStackScreenProps<
+  PlaygroundStackParamList,
+  'DebugIconSheet'
+>;
+
+declare global {
+  namespace ReactNavigation {
+    // eslint-disable-next-line no-restricted-syntax, @typescript-eslint/no-empty-object-type
+    interface RootParamList extends PlaygroundStackParamList {}
+  }
+}
diff --git a/apps/mobile-app/src/routes.ts b/apps/expo-app/src/routes.ts
similarity index 93%
rename from apps/mobile-app/src/routes.ts
rename to apps/expo-app/src/routes.ts
index ab6ce35e3d..56d9f29792 100644
--- a/apps/mobile-app/src/routes.ts
+++ b/apps/expo-app/src/routes.ts
@@ -1,6 +1,6 @@
 /**
  * DO NOT MODIFY
- * Generated from scripts/codegen/main.ts
+ * Generated from libs/codegen
  */
 export const routes = [
   {
@@ -54,6 +54,11 @@ export const routes = [
       require('@coinbase/cds-mobile/alpha/tabbed-chips/__stories__/AlphaTabbedChips.stories')
         .default,
   },
+  {
+    key: 'AndroidNavigationBar',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/system/__stories__/AndroidNavigationBar.stories').default,
+  },
   {
     key: 'AnimatedCaret',
     getComponent: () =>
@@ -62,7 +67,7 @@ export const routes = [
   {
     key: 'AreaChart',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/area/__stories__/AreaChart.stories')
+      require('@coinbase/cds-mobile/visualizations/chart/area/__stories__/AreaChart.stories')
         .default,
   },
   {
@@ -77,7 +82,7 @@ export const routes = [
   {
     key: 'Axis',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/axis/__stories__/Axis.stories').default,
+      require('@coinbase/cds-mobile/visualizations/chart/axis/__stories__/Axis.stories').default,
   },
   {
     key: 'Banner',
@@ -96,7 +101,7 @@ export const routes = [
   {
     key: 'BarChart',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/bar/__stories__/BarChart.stories').default,
+      require('@coinbase/cds-mobile/visualizations/chart/bar/__stories__/BarChart.stories').default,
   },
   {
     key: 'Box',
@@ -134,27 +139,22 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/carousel/__stories__/Carousel.stories').default,
   },
-  {
-    key: 'CarouselMedia',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/media/__stories__/CarouselMedia.stories').default,
-  },
   {
     key: 'CartesianChart',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/__stories__/CartesianChart.stories')
+      require('@coinbase/cds-mobile/visualizations/chart/__stories__/CartesianChart.stories')
         .default,
   },
   {
     key: 'ChartAccessibility',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/__stories__/ChartAccessibility.stories')
+      require('@coinbase/cds-mobile/visualizations/chart/__stories__/ChartAccessibility.stories')
         .default,
   },
   {
     key: 'ChartTransitions',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/__stories__/ChartTransitions.stories')
+      require('@coinbase/cds-mobile/visualizations/chart/__stories__/ChartTransitions.stories')
         .default,
   },
   {
@@ -347,7 +347,8 @@ export const routes = [
   {
     key: 'Legend',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/legend/__stories__/Legend.stories').default,
+      require('@coinbase/cds-mobile/visualizations/chart/legend/__stories__/Legend.stories')
+        .default,
   },
   {
     key: 'LinearGradient',
@@ -357,7 +358,7 @@ export const routes = [
   {
     key: 'LineChart',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/line/__stories__/LineChart.stories')
+      require('@coinbase/cds-mobile/visualizations/chart/line/__stories__/LineChart.stories')
         .default,
   },
   {
@@ -528,13 +529,13 @@ export const routes = [
   {
     key: 'PercentageBarChart',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/bar/__stories__/PercentageBarChart.stories')
+      require('@coinbase/cds-mobile/visualizations/chart/bar/__stories__/PercentageBarChart.stories')
         .default,
   },
   {
     key: 'PeriodSelector',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/__stories__/PeriodSelector.stories')
+      require('@coinbase/cds-mobile/visualizations/chart/__stories__/PeriodSelector.stories')
         .default,
   },
   {
@@ -575,7 +576,7 @@ export const routes = [
   {
     key: 'ReferenceLine',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/line/__stories__/ReferenceLine.stories')
+      require('@coinbase/cds-mobile/visualizations/chart/line/__stories__/ReferenceLine.stories')
         .default,
   },
   {
@@ -596,7 +597,7 @@ export const routes = [
   {
     key: 'Scrubber',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/scrubber/__stories__/Scrubber.stories')
+      require('@coinbase/cds-mobile/visualizations/chart/scrubber/__stories__/Scrubber.stories')
         .default,
   },
   {
@@ -640,24 +641,25 @@ export const routes = [
   {
     key: 'Sparkline',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/sparkline/__stories__/Sparkline.stories').default,
+      require('@coinbase/cds-mobile/visualizations/sparkline/__stories__/Sparkline.stories')
+        .default,
   },
   {
     key: 'SparklineGradient',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/sparkline/__stories__/SparklineGradient.stories')
+      require('@coinbase/cds-mobile/visualizations/sparkline/__stories__/SparklineGradient.stories')
         .default,
   },
   {
     key: 'SparklineInteractive',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories')
+      require('@coinbase/cds-mobile/visualizations/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories')
         .default,
   },
   {
     key: 'SparklineInteractiveHeader',
     getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories')
+      require('@coinbase/cds-mobile/visualizations/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories')
         .default,
   },
   {
diff --git a/apps/mobile-app/tsconfig.json b/apps/expo-app/tsconfig.json
similarity index 73%
rename from apps/mobile-app/tsconfig.json
rename to apps/expo-app/tsconfig.json
index 1352a8ed5f..754926c77e 100644
--- a/apps/mobile-app/tsconfig.json
+++ b/apps/expo-app/tsconfig.json
@@ -13,13 +13,10 @@
   },
   "include": [
     "src/**/*",
+    "*.tsx",
     "*.config.js",
     "*.config.ts",
-    "scripts",
-    ".eslintrc.cjs",
-    "*.d.ts",
-    "*.json",
-    "e2e"
+    "*.json"
   ],
   "exclude": [],
   "references": [
@@ -34,12 +31,6 @@
     },
     {
       "path": "../../packages/illustrations"
-    },
-    {
-      "path": "../../packages/ui-mobile-playground"
-    },
-    {
-      "path": "../../packages/mobile-visualization"
     }
   ]
 }
diff --git a/apps/mobile-app/README.md b/apps/mobile-app/README.md
deleted file mode 100644
index 373560ac0b..0000000000
--- a/apps/mobile-app/README.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# Mobile App
-
-This is a playground for mobile component development. It uses `packages/ui-mobile-playground` to manage the UI components that render the mobile storybook components. This app is primarily expo logic that wraps and renders `ui-mobile-playground` components.
-
-## When to use Expo Go vs Expo Prebuilds?
-
-**[Expo Go](#expo-go)** (Recommended for most cases)
-
-Expo Go enables fast development and testing directly on devices with over-the-air updates from your dev server.
-
-- Recommended for most development
-- For testing on physical device
-
-**[Expo Prebuilds](./docs/prebuilds.md)**
-
-Expo prebuilds generate full native iOS and Android binaries with embedded JS bundle for testing custom native code.
-
-- Required if you made dependency changes, like updating React Native
-- Needed for testing any custom native modules and integrations
-
-## Expo Go
-
-1. Run `yarn install` from root
-
-2. Start the [expo development server](https://docs.expo.dev/more/expo-cli/#develop) by running:
-
-```
-yarn nx run mobile-app:go
-```
-
-### Run the app in the iOS/Android simulator
-
-Press 'i' or 'a' to open iOS or Android simulator respectively.
-
-### Run the app on a physical device
-
-> For security reasons, please make sure your device has Coinbase Security Profile installed before proceeding.
-
-1. Download [Expo Go](https://expo.dev/client) on your device.
-2. Scan the QR code from the terminal using the Expo Go app on your phone.
-3. Make sure your device and metro server are connected to the same network. You might need to disconnect VPN.
-
-## Creating a new route
-
-Whenever you want to add a new screen to the mobile-app, you'll need to run this codegen script to generate the new route(s).
-
-```zsh
-yarn nx run codegen:mobile-routes
-```
-
-## Advanced
-
-<!-- - [How to share your builds with others](./docs/share-builds.md) -->
-
-- [How to generate prebuilds](./docs/prebuilds.md)
-- [How to upgrade React Native version](./docs/upgrade-rn.md)
-- [How and when to create new mobile build](./docs/building-mobile.md)
-- [How to upgrade a native dependency](./docs/upgrading-mobile-dep.md)
-- [How to debug failures & common errors](./docs/help.md)
diff --git a/apps/mobile-app/app.config.ts b/apps/mobile-app/app.config.ts
deleted file mode 100644
index 00cfabf2ba..0000000000
--- a/apps/mobile-app/app.config.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { getExpoSDKVersion } from '@expo/config';
-import { withProjectBuildGradle } from '@expo/config-plugins';
-import type { ExpoConfig } from '@expo/config-types';
-
-const profile = process.env.APP_PROFILE ?? ('debug' as const);
-const jsEngine = process.env.APP_JS_ENGINE ?? ('hermes' as const);
-const newArchEnabled = process.env.APP_NEW_ARCH_ENABLED === '1';
-const bundleIdentifier = process.env.APP_IOS_BUNDLE_IDENTIFIER ?? 'com.ui-systems.debug-ios-hermes';
-const packageIdentifier =
-  process.env.APP_ANDROID_PACKAGE_IDENTIFIER ?? 'com.ui_systems.debug_hermes';
-
-const lookupKey = `${profile}-${jsEngine}` as const;
-const iconName = `icon-${lookupKey}` as const;
-const splashName = `splash-${lookupKey}` as const;
-const splashColor = {
-  'debug-jsc': '#44C28D',
-  'debug-hermes': '#D058C1',
-  'release-jsc': '#E7C95B',
-  'release-hermes': '#06BEEC',
-}[lookupKey];
-
-const expo: ExpoConfig = {
-  name: 'CDS',
-  slug: 'cds', // we might need to change so it's unique across builds for deep linking
-  scheme: 'cds',
-  owner: 'ui-systems',
-  extra: {},
-  runtimeVersion: {
-    policy: 'sdkVersion',
-  },
-  orientation: 'default' as const,
-  icon: `./assets/${iconName}.png`,
-
-  sdkVersion: getExpoSDKVersion(__dirname),
-  jsEngine,
-  userInterfaceStyle: 'automatic' as const,
-  splash: {
-    image: `./assets/${splashName}.png`, // TODO: dynamically generate based on jsEngine https://github.com/expo/fyi/blob/main/black-screen-before-splash.md
-    resizeMode: 'contain',
-    backgroundColor: splashColor,
-  },
-  assetBundlePatterns: ['**/*'],
-  ios: {
-    supportsTablet: true,
-    bundleIdentifier,
-  },
-  android: {
-    adaptiveIcon: {
-      foregroundImage: './assets/adaptive-icon.png',
-      backgroundColor: splashColor,
-    },
-    package: packageIdentifier,
-  },
-  plugins: [
-    [
-      'expo-build-properties',
-      {
-        ios: {
-          newArchEnabled,
-        },
-        android: {
-          kotlinVersion: '1.8.0',
-          newArchEnabled,
-          /**
-           * https://docs.expo.dev/build-reference/e2e-tests/#51-patch-buildgradle
-           * Temporary patch required until detox integration is first class
-           *
-           * The Android build command that we use to produce the test build is ./gradlew :app:assembleRelease :app:assembleAndroidTest -DtestBuildType=release
-           * Notice that it consists of two Gradle tasks. Unfortunately, when building the *AndroidTest task, some versions of the expo-modules-core module change
-           * what native libraries are included in the app binary. Those settings don't work with settings for assembleRelease.
-           * To fix the problem, add the pickFirsts list under android.packagingOptions in your android/app/build.gradle.
-           * The pickFirsts property overrides the setting for your project.
-           */
-          packagingOptions: {
-            /** https://docs.expo.dev/versions/latest/sdk/build-properties/#pluginconfigtypeandroidpackagingoptions */
-            pickFirst: [
-              'lib/**/libc++_shared.so',
-              'lib/**/libreactnativejni.so',
-              'lib/**/libreact_nativemodule_core.so',
-              'lib/**/libglog.so',
-              'lib/**/libjscexecutor.so',
-              'lib/**/libfbjni.so',
-              'lib/**/libfolly_json.so',
-              'lib/**/libfolly_runtime.so',
-              'lib/**/libhermes.so',
-              'lib/**/libjsi.so',
-            ],
-          },
-        },
-      },
-    ],
-    '@config-plugins/detox',
-    [
-      'expo-gradle-ext-vars',
-      {
-        androidXBrowser: '1.5.0',
-      },
-    ],
-  ],
-};
-
-export default {
-  // TODO(cds-v9): remove this Gradle resolution override.
-  expo: withProjectBuildGradle(expo, (config) => {
-    config.modResults.contents += `
-subprojects {
-    configurations.all {
-        resolutionStrategy {
-            force 'androidx.annotation:annotation:1.9.1'
-            force 'androidx.annotation:annotation-jvm:1.9.1'
-        }
-    }
-}
-`;
-    return config;
-  }),
-};
diff --git a/apps/mobile-app/assets/adaptive-icon.png b/apps/mobile-app/assets/adaptive-icon.png
deleted file mode 100644
index 7f442f72c0..0000000000
Binary files a/apps/mobile-app/assets/adaptive-icon.png and /dev/null differ
diff --git a/apps/mobile-app/assets/icon-debug-hermes.png b/apps/mobile-app/assets/icon-debug-hermes.png
deleted file mode 100644
index 146558c347..0000000000
Binary files a/apps/mobile-app/assets/icon-debug-hermes.png and /dev/null differ
diff --git a/apps/mobile-app/assets/icon-debug-jsc.png b/apps/mobile-app/assets/icon-debug-jsc.png
deleted file mode 100644
index c885f43f4c..0000000000
Binary files a/apps/mobile-app/assets/icon-debug-jsc.png and /dev/null differ
diff --git a/apps/mobile-app/assets/icon-release-hermes.png b/apps/mobile-app/assets/icon-release-hermes.png
deleted file mode 100644
index 4327432bfe..0000000000
Binary files a/apps/mobile-app/assets/icon-release-hermes.png and /dev/null differ
diff --git a/apps/mobile-app/assets/icon-release-jsc.png b/apps/mobile-app/assets/icon-release-jsc.png
deleted file mode 100644
index 6cfb1dd33f..0000000000
Binary files a/apps/mobile-app/assets/icon-release-jsc.png and /dev/null differ
diff --git a/apps/mobile-app/assets/splash-debug-hermes.png b/apps/mobile-app/assets/splash-debug-hermes.png
deleted file mode 100644
index 5a23726ec1..0000000000
Binary files a/apps/mobile-app/assets/splash-debug-hermes.png and /dev/null differ
diff --git a/apps/mobile-app/assets/splash-debug-jsc.png b/apps/mobile-app/assets/splash-debug-jsc.png
deleted file mode 100644
index 6aead00d11..0000000000
Binary files a/apps/mobile-app/assets/splash-debug-jsc.png and /dev/null differ
diff --git a/apps/mobile-app/assets/splash-release-hermes.png b/apps/mobile-app/assets/splash-release-hermes.png
deleted file mode 100644
index 027c8a8e7f..0000000000
Binary files a/apps/mobile-app/assets/splash-release-hermes.png and /dev/null differ
diff --git a/apps/mobile-app/assets/splash-release-jsc.png b/apps/mobile-app/assets/splash-release-jsc.png
deleted file mode 100644
index d6459011ff..0000000000
Binary files a/apps/mobile-app/assets/splash-release-jsc.png and /dev/null differ
diff --git a/apps/mobile-app/babel.config.js b/apps/mobile-app/babel.config.js
deleted file mode 100644
index 5158e56cd1..0000000000
--- a/apps/mobile-app/babel.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = function getBabelConfig(api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-    plugins: ['transform-inline-environment-variables'],
-  };
-};
diff --git a/apps/mobile-app/credentials.json b/apps/mobile-app/credentials.json
deleted file mode 100644
index beff010add..0000000000
--- a/apps/mobile-app/credentials.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "android": {
-    "keystore": {
-      "keystorePath": "credentials/android-release-hermes.keystore",
-      "keyAlias": "detoxkey",
-      "keystorePassword": "android",
-      "keyPassword": "android"
-    }
-  }
-}
diff --git a/apps/mobile-app/credentials/android-release-hermes.keystore b/apps/mobile-app/credentials/android-release-hermes.keystore
deleted file mode 100644
index ff8e68ece8..0000000000
Binary files a/apps/mobile-app/credentials/android-release-hermes.keystore and /dev/null differ
diff --git a/apps/mobile-app/detox.config.js b/apps/mobile-app/detox.config.js
deleted file mode 100644
index 261df78e9e..0000000000
--- a/apps/mobile-app/detox.config.js
+++ /dev/null
@@ -1,75 +0,0 @@
-function isGithubActions() {
-  return !!process.env.GITHUB_ACTIONS;
-}
-
-function isCI() {
-  return !!process.env.CI || isGithubActions();
-}
-
-/**
- * TODO: handle config automatically based on eas build profiles
- */
-/** @type {Detox.DetoxConfig} */
-const config = {
-  testRunner: {
-    args: {
-      $0: 'jest',
-      config: 'e2e/jest.config.js',
-    },
-  },
-  apps: {
-    'ios-debug': {
-      type: 'ios.app',
-      binaryPath: 'prebuilds/ios-debug-hermes.app',
-    },
-    'android-debug': {
-      type: 'android.apk',
-      binaryPath: 'prebuilds/android-debug-hermes/binary.apk',
-      testBinaryPath: 'prebuilds/android-debug-hermes/testBinary.apk',
-    },
-    'ios-release': {
-      type: 'ios.app',
-      binaryPath: 'prebuilds/ios-release-hermes.app',
-    },
-    'android-release': {
-      type: 'android.apk',
-      binaryPath: 'prebuilds/android-release-hermes/binary.apk',
-      testBinaryPath: 'prebuilds/android-release-hermes/testBinary.apk',
-    },
-  },
-  devices: {
-    simulator: {
-      type: 'ios.simulator',
-      device: {
-        type: 'iPhone 16',
-      },
-    },
-    emulator: {
-      type: 'android.emulator',
-      device: {
-        avdName: isCI() ? 'cds_detox' : 'cds_detox_local',
-      },
-      bootArgs: isCI() ? '-skin 600x5000' : undefined,
-    },
-  },
-  configurations: {
-    'ios-debug': {
-      device: 'simulator',
-      app: 'ios-debug',
-    },
-    'android-debug': {
-      device: 'emulator',
-      app: 'android-debug',
-    },
-    'ios-release': {
-      device: 'simulator',
-      app: 'ios-release',
-    },
-    'android-release': {
-      device: 'emulator',
-      app: 'android-release',
-    },
-  },
-};
-
-module.exports = config;
diff --git a/apps/mobile-app/env.d.ts b/apps/mobile-app/env.d.ts
deleted file mode 100644
index 14c38d5e16..0000000000
--- a/apps/mobile-app/env.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/// <reference types="detox" />
-
-/* eslint-disable no-restricted-syntax */
-
-declare module 'process' {
-  global {
-    export const testFailed: boolean;
-    namespace NodeJS {
-      interface ProcessEnv {
-        readonly APP_DEBUG?: `${0 | 1}`;
-        readonly APP_JS_ENGINE?: 'jsc' | 'hermes';
-        readonly APP_PLATFORM: 'ios' | 'android';
-        readonly APP_NAME?: string;
-        readonly APP_NEW_ARCH_ENABLED?: `${0 | 1}`;
-        readonly APP_PROFILE?: 'debug' | 'release';
-      }
-    }
-  }
-}
diff --git a/apps/mobile-app/index.js b/apps/mobile-app/index.js
deleted file mode 100644
index 4f5df0f978..0000000000
--- a/apps/mobile-app/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import 'react-native-gesture-handler';
-import './src/polyfills/intl';
-
-import { registerRootComponent } from 'expo';
-import * as SplashScreen from 'expo-splash-screen';
-
-import App from './src/App';
-
-// It is recommended to call this in global scope without awaiting, rather than inside React components or hooks,
-// because otherwise this might be called too late, when the splash screen is already hidden.
-SplashScreen.preventAutoHideAsync();
-
-// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
-// It also ensures that whether you load the app in Expo Go or in a native build,
-// the environment is set up appropriately
-registerRootComponent(App);
diff --git a/apps/mobile-app/jest.config.js b/apps/mobile-app/jest.config.js
deleted file mode 100644
index 0ddaf11c1f..0000000000
--- a/apps/mobile-app/jest.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  preset: '../../jest.preset.js',
-};
diff --git a/apps/mobile-app/metro.config.js b/apps/mobile-app/metro.config.js
deleted file mode 100644
index 78e709847d..0000000000
--- a/apps/mobile-app/metro.config.js
+++ /dev/null
@@ -1,118 +0,0 @@
-const exclusionList = require('metro-config/src/defaults/exclusionList');
-const { resolve } = require('metro-resolver');
-const { getDefaultConfig } = require('expo/metro-config');
-const { mergeConfig } = require('@react-native/metro-config');
-const path = require('node:path');
-const { resolve: resolveExports } = require('resolve.exports');
-
-// Learn more https://docs.expo.io/guides/customizing-metro
-const expoConfig = getDefaultConfig(__dirname);
-const defaultSourceExts = ['ts', 'tsx', 'js', 'jsx', 'json', 'd.ts', 'cjs'];
-
-const aliases = {
-  '@coinbase/cds-common': path.resolve(__dirname, '../../packages/common/src'),
-  '@coinbase/cds-icons': path.resolve(__dirname, '../../packages/icons/src'),
-  '@coinbase/cds-illustrations': path.resolve(__dirname, '../../packages/illustrations/src'),
-  '@coinbase/cds-lottie-files': path.resolve(__dirname, '../../packages/lottie-files/src'),
-  '@coinbase/cds-mobile': path.resolve(__dirname, '../../packages/mobile/src'),
-  '@coinbase/cds-mobile-visualization': path.resolve(
-    __dirname,
-    '../../packages/mobile-visualization/src',
-  ),
-  '@coinbase/cds-utils': path.resolve(__dirname, '../../packages/utils/src'),
-  '@coinbase/ui-mobile-playground': path.resolve(
-    __dirname,
-    '../../packages/ui-mobile-playground/src',
-  ),
-};
-const pkgCache = {};
-
-const getBaseModule = (moduleName) => {
-  const parts = moduleName.split('/');
-  if (!moduleName.startsWith('@')) return parts[0];
-  return `${parts[0]}/${parts[1]}`;
-};
-
-function loadPackageJson(pkgPath) {
-  if (!pkgCache[pkgPath]) {
-    pkgCache[pkgPath] = require(pkgPath);
-  }
-
-  return pkgCache[pkgPath];
-}
-
-// This custom Metro resolver will try to use the aliases defined above.
-const customResolveRequest = (context, baseModuleName, platform) => {
-  const { resolveRequest: resolveRequestInner, ...ctx } = context;
-
-  const moduleName = context.redirectModulePath(baseModuleName);
-  const baseModule = moduleName && getBaseModule(moduleName);
-
-  // Custom resolver to map local package aliases to exports
-  if (
-    process.env.CI !== 'true' &&
-    process.env.NODE_ENV !== 'production' &&
-    process.env.CDS_METRO_RESOLVER !== 'false' &&
-    baseModule &&
-    aliases[baseModule]
-  ) {
-    const aliasPath = moduleName.replace(baseModule, aliases[baseModule]);
-    return context.resolveRequest(context, aliasPath, platform);
-  }
-
-  if (moduleName === false) {
-    return {
-      type: 'empty',
-    };
-  }
-
-  /**
-   * This custom resolver checks for an "exports" field in package.json and resolves accordingly.
-   * NOTE: This mimics the behavior of unstable_enablePackageExports which is unable to be used by CDS for some reason.
-   */
-  if (moduleName.startsWith('@cb')) {
-    const pkgPath = require.resolve(`${getBaseModule(moduleName)}/package.json`);
-    const pkg = loadPackageJson(pkgPath);
-
-    if ('exports' in pkg) {
-      const entryPoint = resolveExports(pkg, moduleName, {
-        conditions: ['react-native', 'browser', 'module', 'require', 'node', 'default'],
-        unsafe: true,
-      });
-
-      if (entryPoint) {
-        return {
-          filePath: path.join(path.dirname(pkgPath), String(entryPoint)),
-          type: 'sourceFile',
-        };
-      }
-    }
-  }
-
-  if (resolveRequestInner) {
-    // Nothing found, fallback to metro
-    return resolveRequestInner(context, moduleName, platform);
-  }
-
-  return resolve(ctx, moduleName, platform);
-};
-
-/**
- * Metro configuration
- * https://facebook.github.io/metro/docs/configuration
- *
- * @type {import('metro-config').MetroConfig}
- */
-const metroConfig = mergeConfig(expoConfig, {
-  resetCache: true,
-  resolver: {
-    blacklistRE: exclusionList([/dist\/@cb\/.*/]),
-    // https://github.com/wix/Detox/blob/master/docs/Guide.Mocking.md#Configuration
-    sourceExts: process.env.RN_SRC_EXT
-      ? process.env.RN_SRC_EXT.split(',').concat(defaultSourceExts)
-      : defaultSourceExts,
-    resolveRequest: customResolveRequest,
-  },
-});
-
-module.exports = metroConfig;
diff --git a/apps/mobile-app/package.json b/apps/mobile-app/package.json
deleted file mode 100644
index 30263a96ad..0000000000
--- a/apps/mobile-app/package.json
+++ /dev/null
@@ -1,70 +0,0 @@
-{
-  "name": "mobile-app",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "go": "expo start --go",
-    "start": "expo start --dev-client",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
-    "prebuild-install": "cd ../../ && yarn install && yarn nx run mobile-app:setup",
-    "should-run-visreg": "node ./scripts/utils/shouldRunVisreg.mjs"
-  },
-  "dependencies": {
-    "@bugsnag/react-native": "^7.18.0",
-    "@coinbase/cds-common": "workspace:^",
-    "@coinbase/cds-icons": "workspace:^",
-    "@coinbase/cds-illustrations": "workspace:^",
-    "@coinbase/cds-mobile": "workspace:^",
-    "@coinbase/cds-mobile-visualization": "workspace:^",
-    "@coinbase/ui-mobile-playground": "workspace:^",
-    "@config-plugins/detox": "^6.0.0",
-    "@expo-google-fonts/inter": "^0.3.0",
-    "@expo-google-fonts/source-code-pro": "^0.3.0",
-    "@formatjs/intl-getcanonicallocales": "^2.5.5",
-    "@formatjs/intl-locale": "^4.2.11",
-    "@formatjs/intl-numberformat": "^8.15.4",
-    "@formatjs/intl-pluralrules": "^5.4.4",
-    "@react-native/metro-config": "^0.72.9",
-    "@react-navigation/core": "^6.4.16",
-    "@react-navigation/native": "^6.1.6",
-    "@react-navigation/native-stack": "^6.9.26",
-    "@react-navigation/stack": "^6.3.16",
-    "@shopify/react-native-skia": "1.12.4",
-    "expo": "~51.0.31",
-    "expo-application": "~5.9.1",
-    "expo-asset": "~10.0.10",
-    "expo-build-properties": "~0.12.5",
-    "expo-clipboard": "~6.0.3",
-    "expo-dev-client": "4.0.27",
-    "expo-font": "~12.0.9",
-    "expo-gradle-ext-vars": "^0.1.1",
-    "expo-linking": "~6.3.1",
-    "expo-quick-actions": "2.0.0",
-    "expo-splash-screen": "~0.27.6",
-    "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.7",
-    "intl": "^1.2.5",
-    "lottie-react-native": "6.7.0",
-    "react": "^18.3.1",
-    "react-native": "0.74.5",
-    "react-native-gesture-handler": "2.16.2",
-    "react-native-inappbrowser-reborn": "3.7.0",
-    "react-native-navigation-bar-color": "2.0.2",
-    "react-native-reanimated": "3.14.0",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.32.0",
-    "react-native-svg": "14.1.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@expo/config": "~9.0.0",
-    "@expo/config-types": "~51.0.2",
-    "@types/react": "^18.3.12",
-    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "detox": "^20.14.8",
-    "jest": "^29.7.0",
-    "react-native-bundle-visualizer": "^3.1.3",
-    "zx": "^8.1.9"
-  }
-}
diff --git a/apps/mobile-app/prebuilds/android-release-hermes.zip b/apps/mobile-app/prebuilds/android-release-hermes.zip
deleted file mode 100644
index 84eee2c3fb..0000000000
Binary files a/apps/mobile-app/prebuilds/android-release-hermes.zip and /dev/null differ
diff --git a/apps/mobile-app/prebuilds/ios-release-hermes.tar.gz b/apps/mobile-app/prebuilds/ios-release-hermes.tar.gz
deleted file mode 100644
index 003859b2aa..0000000000
Binary files a/apps/mobile-app/prebuilds/ios-release-hermes.tar.gz and /dev/null differ
diff --git a/apps/mobile-app/project.json b/apps/mobile-app/project.json
deleted file mode 100644
index 8a30e68170..0000000000
--- a/apps/mobile-app/project.json
+++ /dev/null
@@ -1,147 +0,0 @@
-{
-  "name": "mobile-app",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "apps/mobile-app/src",
-  "projectType": "application",
-  "tags": [],
-  "targets": {
-    "setup": {
-      "executor": "nx:run-commands",
-      "dependsOn": [
-        "^build"
-      ],
-      "options": {
-        "cwd": "apps/mobile-app",
-        "commands": [
-          "mkdir -p ios",
-          "mkdir -p android"
-        ]
-      }
-    },
-    "launch": {
-      "executor": "nx:run-commands",
-      "options": {
-        "cwd": "apps/mobile-app",
-        "command": "node ./scripts/launch.mjs --profile {args.profile} --jsEngine {args.jsEngine} --platform {args.platform}"
-      },
-      "defaultConfiguration": "ios-debug",
-      "configurations": {
-        "ios-debug": {
-          "args": "--profile debug --jsEngine hermes --platform ios"
-        },
-        "android-debug": {
-          "args": "--profile debug --jsEngine hermes --platform android"
-        },
-        "ios-release": {
-          "args": "--profile release --jsEngine hermes --platform ios"
-        },
-        "android-release": {
-          "args": "--profile release --jsEngine hermes --platform android"
-        }
-      }
-    },
-    "start": {
-      "executor": "nx:run-commands",
-      "options": {
-        "cwd": "apps/mobile-app",
-        "command": "node ./scripts/start.mjs --profile {args.profile} --jsEngine {args.jsEngine} --platform {args.platform}"
-      },
-      "defaultConfiguration": "ios-debug",
-      "configurations": {
-        "ios-debug": {
-          "args": "--profile debug --jsEngine hermes --platform ios"
-        },
-        "android-debug": {
-          "args": "--profile debug --jsEngine hermes --platform android"
-        }
-      }
-    },
-    "build": {
-      "executor": "nx:run-commands",
-      "dependsOn": [],
-      "options": {
-        "cwd": "apps/mobile-app",
-        "command": "export CDS_METRO_RESOLVER=false && node ./scripts/build.mjs --profile {args.profile} --jsEngine {args.jsEngine} --platform {args.platform}"
-      },
-      "defaultConfiguration": "ios-debug",
-      "configurations": {
-        "ios-debug": {
-          "args": "--profile debug --jsEngine hermes --platform ios"
-        },
-        "android-debug": {
-          "args": "--profile debug --jsEngine hermes --platform android"
-        },
-        "ios-release": {
-          "args": "--profile release --jsEngine hermes --platform ios",
-          "dependsOn": [
-            "^build"
-          ]
-        },
-        "android-release": {
-          "args": "--profile release --jsEngine hermes --platform android",
-          "dependsOn": [
-            "^build"
-          ]
-        }
-      }
-    },
-    "detox": {
-      "executor": "nx:run-commands",
-      "dependsOn": [
-        "^build"
-      ],
-      "options": {
-        "cwd": "apps/mobile-app",
-        "command": "node ./scripts/detox.mjs --profile {args.profile} --jsEngine {args.jsEngine} --platform {args.platform}",
-        "env": {
-          "DETOX_TEST": "true"
-        }
-      },
-      "configurations": {
-        "ios-debug": {
-          "args": "--profile debug --jsEngine hermes --platform ios"
-        },
-        "android-debug": {
-          "args": "--profile debug --jsEngine hermes --platform android"
-        },
-        "ios-release": {
-          "args": "--profile release --jsEngine hermes --platform ios"
-        },
-        "android-release": {
-          "args": "--profile release --jsEngine hermes --platform android"
-        }
-      }
-    },
-    "validate": {
-      "executor": "nx:run-commands",
-      "options": {
-        "cwd": "apps/mobile-app",
-        "command": "node ./scripts/validate.mjs"
-      }
-    },
-    "patch-bundle-ios": {
-      "command": "node ./scripts/patch-bundle.mjs --platform ios --profile release --jsEngine hermes",
-      "options": {
-        "cwd": "apps/mobile-app"
-      }
-    },
-    "patch-bundle-android": {
-      "command": "node ./scripts/patch-bundle.mjs --platform android --profile release --jsEngine hermes",
-      "options": {
-        "cwd": "apps/mobile-app"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint"
-    },
-    "test": {
-      "executor": "@nx/jest:jest",
-      "options": {
-        "jestConfig": "{projectRoot}/jest.config.js"
-      }
-    },
-    "typecheck": {
-      "command": "tsc --build --pretty --verbose"
-    }
-  }
-}
diff --git a/apps/mobile-app/react-native.config.js b/apps/mobile-app/react-native.config.js
deleted file mode 100644
index f053ebf797..0000000000
--- a/apps/mobile-app/react-native.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = {};
diff --git a/apps/mobile-app/scripts/build.mjs b/apps/mobile-app/scripts/build.mjs
deleted file mode 100644
index 24a4ad87a3..0000000000
--- a/apps/mobile-app/scripts/build.mjs
+++ /dev/null
@@ -1,31 +0,0 @@
-import { $, argv, fs } from 'zx';
-
-import { buildAndroid } from './utils/buildAndroid.mjs';
-import { buildIOS } from './utils/buildIOS.mjs';
-import { getBuildInfo } from './utils/getBuildInfo.mjs';
-import { setEnvVars } from './utils/setEnvVars.mjs';
-
-$.verbose = true;
-
-const { platform, profile } = argv;
-const { ios, android, outputDirectory } = getBuildInfo();
-
-setEnvVars();
-
-// Ensure output directory exists
-await fs.ensureDir(outputDirectory);
-
-// Run prebuild to generate native projects
-console.log(`Running prebuild for ${platform}...`);
-await $`npx expo prebuild --platform ${platform} --clean`;
-
-// Build for the specific platform
-if (platform === 'ios') {
-  await buildIOS({ profile, ios });
-  await ios.unzip();
-}
-
-if (platform === 'android') {
-  await buildAndroid({ profile, android });
-  await android.unzip();
-}
diff --git a/apps/mobile-app/scripts/detox.mjs b/apps/mobile-app/scripts/detox.mjs
deleted file mode 100644
index bb9972f7d8..0000000000
--- a/apps/mobile-app/scripts/detox.mjs
+++ /dev/null
@@ -1,90 +0,0 @@
-import { $, argv, within } from 'zx'; // https://github.com/google/zx
-
-import detoxConfig from '../detox.config.js';
-
-import { isCI } from './utils/env.mjs';
-import { getAffectedRoutes } from './utils/getAffectedRoutes.mjs';
-import { getBuildInfo } from './utils/getBuildInfo.mjs';
-import { setEnvVars } from './utils/setEnvVars.mjs';
-
-$.verbose = true;
-
-const { platform, profile, jsEngine } = argv;
-
-const { commonChanged, affectedRouteKeys } = await getAffectedRoutes();
-
-const runAll = process.env.DETOX_RUN_ALL === 'true';
-
-// Only run detox if packages/common or code in a route's parent directory changed, or DETOX_RUN_ALL is true
-if (!runAll && !commonChanged && !affectedRouteKeys.length) {
-  console.log('No relevant changes to test, skipping detox');
-  process.exit(0);
-}
-
-// Set the affected route keys for playgroundRoutes.e2e.ts, and flag as Percy partial build
-if (!runAll && !commonChanged) {
-  console.log('Only testing routes affected by changes:', affectedRouteKeys);
-  process.env.DETOX_AFFECTED_ROUTE_KEYS = affectedRouteKeys.join(',');
-  process.env.PERCY_PARTIAL_BUILD = '1';
-} else console.log('Testing all routes');
-
-const { ios, android } = getBuildInfo();
-
-setEnvVars();
-
-if (platform === 'android') {
-  const targetAvd = detoxConfig.devices.emulator.device.avdName;
-  const { stdout: platformsAsString } = await $`ls ${process.env.ANDROID_SDK_ROOT}/platforms`;
-  const { stdout: buildToolsAsString } = await $`ls ${process.env.ANDROID_SDK_ROOT}/build-tools`;
-  const { stdout: emulatorsAsString } = await $`avdmanager list avd --compact`;
-  const platforms = platformsAsString.split('\n');
-  const buildTools = buildToolsAsString.split('\n');
-  const emulators = emulatorsAsString.split('\n');
-  const doesNotHavePlatform = !platforms.includes(`android-${android.sdkVersions.platform}`);
-  const doesNotHaveBuildTools = !buildTools.includes(android.sdkVersions.buildTools);
-  const doesNotHaveEmulator = !emulators.includes(targetAvd);
-
-  if (doesNotHavePlatform) {
-    await $`sdkmanager "platforms;android-${android.sdkVersions.platform}"`;
-  }
-
-  if (doesNotHaveBuildTools) {
-    await $`sdkmanager "build-tools;${android.sdkVersions.buildTools}"`;
-  }
-
-  if (doesNotHaveEmulator) {
-    const architecture = isCI ? android.architectures.ubuntu : android.architectures.m1;
-    const androidSdk = `system-images;android-${android.sdkVersions.systemImage};default;${architecture}`;
-
-    await $`sdkmanager ${androidSdk}`;
-    await $`echo no | avdmanager create avd --force --name ${targetAvd} --package ${androidSdk}`;
-  }
-}
-
-if (profile === 'debug') {
-  within(async () => {
-    await $`cd ../../ && yarn nx run mobile-app:launch --profile ${profile} --jsEngine ${jsEngine} --platform ${platform}`;
-    await $`cd ../../ && yarn nx run mobile-app:start --profile ${profile} --jsEngine ${jsEngine} --platform ${platform}`;
-  });
-}
-
-if (profile === 'release') {
-  if (platform === 'android') await android.patchBundle();
-  if (platform === 'ios') await ios.patchBundle();
-}
-
-// Rebuild Detox cache on MacOS to mitigate errors from Xcode updates
-if (platform === 'ios') {
-  await $`yarn workspace mobile-app detox rebuild-framework-cache`;
-}
-
-// Clear Jest cache
-await $`yarn workspace mobile-app detox test --configuration ${platform}-${profile} --clearCache`;
-
-const platformOptions = platform === 'android' ? '--force-adb-install' : '';
-
-if (isCI) {
-  await $`yarn workspace mobile-app detox test --configuration ${platform}-${profile} --headless --cleanup ${platformOptions}`;
-} else {
-  await $`yarn workspace mobile-app detox test --loglevel verbose --configuration ${platform}-${profile} --cleanup ${platformOptions}`;
-}
diff --git a/apps/mobile-app/scripts/launch.mjs b/apps/mobile-app/scripts/launch.mjs
deleted file mode 100644
index 8af226013e..0000000000
--- a/apps/mobile-app/scripts/launch.mjs
+++ /dev/null
@@ -1,34 +0,0 @@
-import { $, argv } from 'zx'; // https://github.com/google/zx
-
-import { getBuildInfo } from './utils/getBuildInfo.mjs';
-import { setEnvVars } from './utils/setEnvVars.mjs';
-
-$.verbose = true;
-
-const { android, ios } = getBuildInfo();
-const { platform } = argv;
-
-setEnvVars();
-
-const archivePath = platform === 'android' ? android.apk.signed : ios.app;
-
-if (platform === 'android') {
-  await android.patchBundle();
-}
-
-if (platform === 'ios') {
-  await ios.patchBundle();
-}
-
-// Install and run the built app using platform-specific tools
-if (platform === 'ios') {
-  await $`xcrun simctl install booted ${archivePath}`;
-  const bundleId = ios.bundleIdentifier;
-  await $`xcrun simctl launch booted ${bundleId}`;
-} else {
-  // For Android, install the APK
-  await $`adb install ${archivePath}`;
-  // Launch the app
-  const packageId = android.packageIdentifier;
-  await $`adb shell monkey -p ${packageId} -c android.intent.category.LAUNCHER 1`;
-}
diff --git a/apps/mobile-app/scripts/patch-bundle.mjs b/apps/mobile-app/scripts/patch-bundle.mjs
deleted file mode 100644
index 52725f70df..0000000000
--- a/apps/mobile-app/scripts/patch-bundle.mjs
+++ /dev/null
@@ -1,10 +0,0 @@
-import { argv } from 'zx';
-
-import { getBuildInfo } from './utils/getBuildInfo.mjs';
-import { setEnvVars } from './utils/setEnvVars.mjs';
-
-setEnvVars();
-const { ios, android } = getBuildInfo();
-
-if (argv.platform === 'ios') await ios.patchBundle();
-if (argv.platform === 'android') await android.patchBundle();
diff --git a/apps/mobile-app/scripts/start.mjs b/apps/mobile-app/scripts/start.mjs
deleted file mode 100644
index e1ad5d0aaa..0000000000
--- a/apps/mobile-app/scripts/start.mjs
+++ /dev/null
@@ -1,19 +0,0 @@
-import { $, argv } from 'zx'; // https://github.com/google/zx
-
-import { getBuildInfo } from './utils/getBuildInfo.mjs';
-import { setEnvVars } from './utils/setEnvVars.mjs';
-
-$.verbose = true;
-
-const { platform } = argv;
-const { ios } = getBuildInfo();
-
-setEnvVars();
-
-if (platform === 'ios') {
-  await $`expo start --${argv.platform} --dev-client --localhost --scheme ${ios.bundleIdentifier}`;
-}
-
-if (platform === 'android') {
-  await $`expo start --${argv.platform} --dev-client --localhost`;
-}
diff --git a/apps/mobile-app/scripts/utils/apktool.jar b/apps/mobile-app/scripts/utils/apktool.jar
deleted file mode 100644
index 24a539a247..0000000000
Binary files a/apps/mobile-app/scripts/utils/apktool.jar and /dev/null differ
diff --git a/apps/mobile-app/scripts/utils/buildAndroid.mjs b/apps/mobile-app/scripts/utils/buildAndroid.mjs
deleted file mode 100644
index 6535cb5f7f..0000000000
--- a/apps/mobile-app/scripts/utils/buildAndroid.mjs
+++ /dev/null
@@ -1,60 +0,0 @@
-import path from 'path';
-import { $, fs } from 'zx';
-
-export async function buildAndroid({ profile, android }) {
-  const androidProjectPath = path.resolve('android');
-  const isDebug = profile === 'debug';
-  const buildType = isDebug ? 'Debug' : 'Release';
-
-  console.log(`Building Android app with build type: ${buildType}`);
-
-  // Set up gradle command based on profile
-  let gradleTasks;
-  if (isDebug) {
-    gradleTasks = [':app:assembleDebug', ':app:assembleAndroidTest', '-DtestBuildType=debug'];
-  } else {
-    gradleTasks = [':app:assembleRelease', ':app:assembleAndroidTest', '-DtestBuildType=release'];
-  }
-
-  // Build the APK
-  await $`cd ${androidProjectPath} && ./gradlew ${gradleTasks} --no-daemon`;
-
-  // Find the built APKs
-  const buildOutputDir = path.join(androidProjectPath, 'app', 'build', 'outputs', 'apk');
-  const testOutputDir = path.join(buildOutputDir, 'androidTest', profile);
-  const appOutputDir = path.join(buildOutputDir, profile);
-
-  // Create output directory for our builds
-  const outputDir = path.dirname(android.zipFile);
-  await fs.ensureDir(outputDir);
-
-  // Create a temporary directory for the zip contents
-  const tempDir = path.join(outputDir, 'temp');
-  await fs.ensureDir(tempDir);
-
-  // Create the expected directory structure for the zip
-  const testFolder = path.join(tempDir, 'androidTest', profile);
-  const buildFolder = path.join(tempDir, profile);
-  await fs.ensureDir(testFolder);
-  await fs.ensureDir(buildFolder);
-
-  // Copy APKs to the temporary directory with expected names
-  const appApkName = `app-${profile}.apk`;
-  const testApkName = `app-${profile}-androidTest.apk`;
-
-  // Find and copy the actual APK files
-  const appApkSource = path.join(appOutputDir, appApkName);
-  const testApkSource = path.join(testOutputDir, testApkName);
-
-  await fs.copy(appApkSource, path.join(buildFolder, appApkName));
-  await fs.copy(testApkSource, path.join(testFolder, testApkName));
-
-  // Create the zip file (tar format to match the original unzip logic)
-  console.log(`Creating archive: ${android.zipFile}`);
-  await $`cd ${tempDir} && zip -r ${path.resolve(android.zipFile)} .`;
-
-  // Clean up temporary directory
-  await $`rm -rf ${tempDir}`;
-
-  console.log(`Android build completed: ${android.zipFile}`);
-}
diff --git a/apps/mobile-app/scripts/utils/buildIOS.mjs b/apps/mobile-app/scripts/utils/buildIOS.mjs
deleted file mode 100644
index 0cfcc31da3..0000000000
--- a/apps/mobile-app/scripts/utils/buildIOS.mjs
+++ /dev/null
@@ -1,38 +0,0 @@
-import path from 'path';
-import { $, fs } from 'zx';
-
-export async function buildIOS({ profile, ios }) {
-  const buildConfiguration = profile === 'debug' ? 'Debug' : 'Release';
-  const iosProjectPath = path.resolve('ios');
-  const workspacePath = path.join(iosProjectPath, 'CDS.xcworkspace');
-  const scheme = 'CDS';
-
-  console.log(`Building iOS app with configuration: ${buildConfiguration}`);
-
-  // Build directory for output
-  const buildDir = path.resolve('build');
-  await fs.ensureDir(buildDir);
-
-  // Build command for simulator
-  await $`xcodebuild -workspace ${workspacePath} -scheme ${scheme} -configuration ${buildConfiguration} -derivedDataPath ./build -destination 'generic/platform=iOS Simulator' build`;
-
-  // Find the built app
-  const appPath = path.join(
-    buildDir,
-    'Build',
-    'Products',
-    `${buildConfiguration}-iphonesimulator`,
-    'CDS.app',
-  );
-
-  // Create tarball
-  console.log(`Creating tarball: ${ios.tarball}`);
-  await $`cd ${path.dirname(appPath)} && tar -czf ${path.resolve(ios.tarball)} ${path.basename(
-    appPath,
-  )}`;
-
-  // Clean up build directory
-  await $`rm -rf ${buildDir}`;
-
-  console.log(`iOS build completed: ${ios.tarball}`);
-}
diff --git a/apps/mobile-app/scripts/utils/env.mjs b/apps/mobile-app/scripts/utils/env.mjs
deleted file mode 100644
index 3753b3acac..0000000000
--- a/apps/mobile-app/scripts/utils/env.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export const isCI = process.env.CI === 'true';
diff --git a/apps/mobile-app/scripts/utils/getAffectedRoutes.mjs b/apps/mobile-app/scripts/utils/getAffectedRoutes.mjs
deleted file mode 100644
index 0e8ff9ff92..0000000000
--- a/apps/mobile-app/scripts/utils/getAffectedRoutes.mjs
+++ /dev/null
@@ -1,146 +0,0 @@
-import { spawnSync } from 'node:child_process';
-import path from 'node:path';
-
-import pkg from '../../package.json' with { type: 'json' };
-
-import { routes } from './routes.mjs';
-
-const IGNORE_CHANGED_FILES_REGEX =
-  /^((CHANGELOG|README|MIGRATION|CONTRIBUTING)(\.md)?|[^/]+\.yml|OWNERS|project\.json|[^/]+\.[dD]ockerfile|tsconfig\.json|jest\.config\.js|\.?eslint.*)$/;
-const DEV_FILES_REGEX = /(\.(spec|test|figma)\.[jt]sx?(\.snap)?$)/;
-
-/**
- * Returns an array of changed filepaths between a branch and another base branch
- */
-const getChangedFilesOnBranch = (branch, baseBranch) => {
-  const command = `git diff --name-only ${branch} $(git merge-base ${branch} ${baseBranch})`.split(
-    ' ',
-  );
-  const changedFiles = spawnSync(command.shift() ?? '', command, { encoding: 'utf8', shell: true });
-  return changedFiles.stdout.split('\n').filter(Boolean);
-};
-
-/**
- * Returns an array of workspace dependency package names
- */
-const getWorkspaceDependencies = (dependencies) =>
-  Object.entries(dependencies)
-    .filter(([, version]) => version.startsWith('workspace:'))
-    .map(([dependency]) => dependency);
-
-/**
- * Returns a map of workspace dependencies to their directories resolved from tsconfig paths
- */
-const getWorkspaceDirectoryMap = (workspaceDependencies, tsconfigPaths) =>
-  Object.fromEntries(
-    workspaceDependencies.map((dependency) => {
-      if (!tsconfigPaths[dependency])
-        throw Error(`Missing dependency in tsconfig "paths": ${dependency}`);
-      return [
-        dependency,
-        tsconfigPaths[dependency].map((dependencyPath) => dependencyPath.replace('/*', '')),
-      ];
-    }),
-  );
-
-/**
- * Returns the workspace dependency that maps to the given directory
- */
-const getWorkspaceDependencyByDirectory = (workspaceDirectory, workspaceDirectoryMap) =>
-  Object.entries(workspaceDirectoryMap).find(([, directories]) =>
-    directories.includes(workspaceDirectory),
-  )[0];
-
-/**
- * Returns an array of objects with playground route keys and import paths
- */
-const getRoutesData = (generatedRoutes) =>
-  generatedRoutes.map((route) => ({
-    key: route.key,
-    importPath: route.getComponent.toString().split("'")[1],
-  }));
-
-/**
- * Returns an array of import paths for the changed files
- */
-const getImportPathsFromFiles = (files, sourceDirectories, workspaceDirectoryMap) =>
-  files.map((file) => {
-    const matchingDirectory = sourceDirectories.find((directory) => file.startsWith(directory));
-    const workspaceDependency = getWorkspaceDependencyByDirectory(
-      matchingDirectory,
-      workspaceDirectoryMap,
-    );
-    const matchingDirectoryPathsLength = matchingDirectory.split('/').length;
-    const filePaths = file.split('/');
-    const truncatedFilepath = filePaths.slice(0, matchingDirectoryPathsLength + 1).join('/');
-    return truncatedFilepath.replace(matchingDirectory, workspaceDependency);
-  });
-
-/**
- * Returns true when a changed file should impact mobile visreg.
- */
-const isFileVisregRelevant = (file, sourceDirectories) => {
-  const matchingDirectory = sourceDirectories.find((directory) => file.startsWith(directory));
-  if (!matchingDirectory) {
-    return false;
-  }
-
-  const relativeFilePath = file.slice(matchingDirectory.length + 1);
-  return (
-    !DEV_FILES_REGEX.test(relativeFilePath) && !IGNORE_CHANGED_FILES_REGEX.test(relativeFilePath)
-  );
-};
-
-/**
- * Returns an object with a boolean for whether the common package changed and an array of
- * ui-mobile-playground route keys that were affected by the changed files.
- */
-export const getAffectedRoutes = async (log = false) => {
-  const baseBranch = process.env.GITHUB_BASE_REF || process.env.BASE_BRANCH || 'master';
-  const changedFiles = getChangedFilesOnBranch('HEAD', baseBranch);
-  const workspaceDependencies = getWorkspaceDependencies(pkg.dependencies);
-
-  const MONOREPO_ROOT = process.env.PROJECT_CWD ?? process.env.NX_MONOREPO_ROOT;
-  const tsconfigPath = path.resolve(MONOREPO_ROOT, 'tsconfig.base.json');
-  const tsconfig = (await import(tsconfigPath, { assert: { type: 'json' } })).default;
-  const tsconfigPaths = tsconfig.compilerOptions.paths;
-
-  const workspaceDirectoryMap = getWorkspaceDirectoryMap(workspaceDependencies, tsconfigPaths);
-  const sourceDirectories = Object.values(workspaceDirectoryMap).flat();
-
-  const relevantChangedFiles = changedFiles.filter((file) =>
-    isFileVisregRelevant(file, sourceDirectories),
-  );
-  const commonChanged = relevantChangedFiles.some((file) => file.startsWith('packages/common/'));
-
-  const affectedImportPaths = getImportPathsFromFiles(
-    relevantChangedFiles,
-    sourceDirectories,
-    workspaceDirectoryMap,
-  );
-
-  const routesData = getRoutesData(routes);
-
-  const affectedRoutesData = routesData.filter((routeData) =>
-    affectedImportPaths.some((changedImportPath) =>
-      routeData.importPath.startsWith(changedImportPath),
-    ),
-  );
-
-  const affectedRouteKeys = affectedRoutesData.map((routeData) => routeData.key);
-
-  if (log) {
-    console.log('changedFiles', changedFiles);
-    console.log('commonChanged', commonChanged);
-    console.log('workspaceDependencies', workspaceDependencies);
-    console.log('workspaceDirectoryMap', workspaceDirectoryMap);
-    console.log('sourceDirectories', sourceDirectories);
-    console.log('relevantChangedFiles', relevantChangedFiles);
-    console.log('affectedImportPaths', affectedImportPaths);
-    console.log('routesData', routesData);
-    console.log('affectedRoutesData', affectedRoutesData);
-    console.log('affectedRouteKeys', affectedRouteKeys);
-  }
-
-  return { commonChanged, affectedRouteKeys };
-};
diff --git a/apps/mobile-app/scripts/utils/getBuildInfo.mjs b/apps/mobile-app/scripts/utils/getBuildInfo.mjs
deleted file mode 100644
index dba2660cc0..0000000000
--- a/apps/mobile-app/scripts/utils/getBuildInfo.mjs
+++ /dev/null
@@ -1,142 +0,0 @@
-import path from 'node:path';
-import { $, argv, glob } from 'zx'; // https://github.com/google/zx
-
-import credentials from '../../credentials.json' with { type: 'json' };
-
-$.verbose = true;
-
-const outputDirectory = 'prebuilds';
-const filePath = new URL(import.meta.url).pathname;
-const scriptUtilsDirectory = path.dirname(filePath);
-const { platform, profile, jsEngine, newArchEnabled = false } = argv;
-
-async function patchBundleForPlatform({ platform: platformParam, fileToPatch }) {
-  await $`expo export --output-dir lib -p ${platformParam}`;
-  const matches = await glob([`lib/_expo/static/js/${platformParam}/index-*`]);
-  if (matches.length) {
-    const jsBundle = matches[0];
-    await $`mv ${jsBundle} ${fileToPatch}`;
-    await $`rm -rf lib`;
-  } else {
-    throw new Error(`Unable to find jsbundle for ${platformParam}`);
-  }
-}
-
-export function getBuildInfo() {
-  const kebabCaseId = `${platform}-${profile}-${jsEngine}${newArchEnabled ? '-newArch' : ''}`;
-  const snakeCaseId = kebabCaseId.replaceAll('-', '_');
-  const outputName = `${outputDirectory}/${kebabCaseId}`;
-
-  const ios = {
-    tarball: `${outputName}.tar.gz`,
-    bundleIdentifier: `com.ui-systems.${kebabCaseId}`,
-    app: `${outputName}.app`,
-    unzip: async function unzip() {
-      await $`rm -rf ${this.app}`;
-      await $`tar -zxvf ${this.tarball}`;
-      await $`mv CDS.app ${this.app}`;
-    },
-    patchBundle: async function patchBundle() {
-      if (process.env.SKIP_PATCH_BUNDLE) return;
-      await this.unzip();
-      if (profile !== 'debug') {
-        await patchBundleForPlatform({
-          platform: 'ios',
-          fileToPatch: `${this.app}/main.jsbundle`,
-        });
-      }
-    },
-  };
-
-  const android = {
-    sdkVersions: {
-      platform: '34',
-      buildTools: '35.0.0',
-      systemImage: '30',
-    },
-    zipFile: `${outputName}.zip`,
-    packageIdentifier: `com.ui_systems.${snakeCaseId}`,
-    keystore: credentials.android.keystore,
-    apk: {
-      contents: `${outputName}/build`,
-      rebuilt: `${outputName}/binary-rebuilt.apk`,
-      rebuiltAligned: `${outputName}/binary-rebuilt-aligned.apk`,
-      signed: `${outputName}/binary.apk`,
-    },
-    testApk: `${outputName}/testBinary.apk`,
-    // https://expo.canny.io/feature-requests/p/add-reactnativearchitecture-support-in-expo-build-properties
-    // There archs are also set in eas.json, ORG_GRADLE_PROJECT_reactNativeArchitectures env variable
-    architectures: {
-      ubuntu: 'x86_64',
-      m1: 'arm64-v8a',
-    },
-    getBuildTool: async function getBuildTool(name) {
-      return path.join(
-        process.env.ANDROID_SDK_ROOT,
-        'build-tools',
-        this.sdkVersions.buildTools,
-        name,
-      );
-    },
-    unzip: async function unzip() {
-      await $`rm -rf ${outputName}`;
-      await $`mkdir -p ${outputName}`;
-      const testFolder = `${outputName}/androidTest/${profile}`;
-      const buildFolder = `${outputName}/${profile}`;
-      await $`unzip -q ${this.zipFile} -d ${outputName}`;
-      await $`mv ${testFolder}/app-${profile}-androidTest.apk ${this.testApk}`;
-      await $`mv ${buildFolder}/app-${profile}.apk ${this.apk.signed}`;
-      await $`rm -rf ${path.dirname(testFolder)} && rm -rf ${buildFolder}`;
-    },
-    /**
-     * What's java -jar?
-     * https://bitbucket.org/iBotPeaches/apktool/downloads/
-     * Instead of installing apktool locally and in CI, we commit the apktool.jar and
-     * run executable via java -jar and point to the .jar file we commit.
-     *
-     * Why String.split?
-     * https://github.com/google/zx/blob/main/docs/quotes.md#array-of-arguments
-     * zx escapes and adds quotes to any interpolations used in a $ command.
-     * Because this string as command + args we have to convert it into an array of args
-     * to avoid it being treated as one single string when used in zx's $ template literal.
-     */
-    apktool: `java -jar ${scriptUtilsDirectory}/apktool.jar`.split(' '),
-    decodeApk: async function decode() {
-      await this.unzip();
-      await $`${this.apktool} decode -f ${this.apk.signed} --output ${this.apk.contents}`;
-    },
-    rebuildApk: async function rebuildApk() {
-      const [apksigner, zipalign] = await Promise.all([
-        this.getBuildTool('apksigner'),
-        this.getBuildTool('zipalign'),
-      ]);
-      const ksPass = `pass:${this.keystore.keystorePassword}`;
-      const keyPass = `pass:${this.keystore.keyPassword}`;
-      await $`${this.apktool} build ${this.apk.contents} --output ${this.apk.rebuilt}`;
-      await $`${zipalign} 4 ${this.apk.rebuilt} ${this.apk.rebuiltAligned}`;
-      await $`${apksigner} sign --ks ${this.keystore.keystorePath} --ks-key-alias ${this.keystore.keyAlias} --ks-pass ${ksPass} --key-pass ${keyPass} --out ${this.apk.signed} ${this.apk.rebuiltAligned}`;
-      await Promise.all([$`rm -rf ${this.apk.rebuilt}`, $`rm -rf ${this.apk.rebuiltAligned}`]);
-    },
-    patchBundle: async function patchBundle() {
-      if (process.env.SKIP_PATCH_BUNDLE) return;
-      if (profile === 'debug') {
-        await this.unzip();
-        return;
-      }
-
-      await this.decodeApk();
-      await patchBundleForPlatform({
-        platform: 'android',
-        fileToPatch: `${this.apk.contents}/assets/index.android.bundle`,
-      });
-      await this.rebuildApk();
-      await $`rm -rf ${this.apk.contents}`;
-    },
-  };
-
-  return {
-    ios,
-    android,
-    outputDirectory,
-  };
-}
diff --git a/apps/mobile-app/scripts/utils/routes.mjs b/apps/mobile-app/scripts/utils/routes.mjs
deleted file mode 100644
index ac70f70b4d..0000000000
--- a/apps/mobile-app/scripts/utils/routes.mjs
+++ /dev/null
@@ -1,910 +0,0 @@
-/**
- * DO NOT MODIFY
- * Generated from scripts/codegen/main.ts
- */
-export const routes = [
-  {
-    key: 'Accordion',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/accordion/__stories__/Accordion.stories').default,
-  },
-  {
-    key: 'AlertBasic',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/AlertBasic.stories').default,
-  },
-  {
-    key: 'AlertLongTitle',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/AlertLongTitle.stories').default,
-  },
-  {
-    key: 'AlertOverModal',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/AlertOverModal.stories').default,
-  },
-  {
-    key: 'AlertPortal',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/AlertPortal.stories').default,
-  },
-  {
-    key: 'AlertSingleAction',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/AlertSingleAction.stories').default,
-  },
-  {
-    key: 'AlertVerticalActions',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/AlertVerticalActions.stories').default,
-  },
-  {
-    key: 'AlphaSelect',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/alpha/select/__stories__/AlphaSelect.stories').default,
-  },
-  {
-    key: 'AlphaSelectChip',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/alpha/select-chip/__stories__/AlphaSelectChip.stories').default,
-  },
-  {
-    key: 'AlphaTabbedChips',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/alpha/tabbed-chips/__stories__/AlphaTabbedChips.stories')
-        .default,
-  },
-  {
-    key: 'AnimatedCaret',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/motion/__stories__/AnimatedCaret.stories').default,
-  },
-  {
-    key: 'AreaChart',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/area/__stories__/AreaChart.stories')
-        .default,
-  },
-  {
-    key: 'Avatar',
-    getComponent: () => require('@coinbase/cds-mobile/media/__stories__/Avatar.stories').default,
-  },
-  {
-    key: 'AvatarButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/buttons/__stories__/AvatarButton.stories').default,
-  },
-  {
-    key: 'Axis',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/axis/__stories__/Axis.stories').default,
-  },
-  {
-    key: 'Banner',
-    getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/Banner.stories').default,
-  },
-  {
-    key: 'BannerActions',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/banner/__stories__/BannerActions.stories').default,
-  },
-  {
-    key: 'BannerLayout',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/banner/__stories__/BannerLayout.stories').default,
-  },
-  {
-    key: 'BarChart',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/bar/__stories__/BarChart.stories').default,
-  },
-  {
-    key: 'Box',
-    getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Box.stories').default,
-  },
-  {
-    key: 'BrowserBar',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/BrowserBar.stories').default,
-  },
-  {
-    key: 'BrowserBarSearchInput',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/BrowserBarSearchInput.stories').default,
-  },
-  {
-    key: 'Button',
-    getComponent: () => require('@coinbase/cds-mobile/buttons/__stories__/Button.stories').default,
-  },
-  {
-    key: 'ButtonGroup',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/buttons/__stories__/ButtonGroup.stories').default,
-  },
-  {
-    key: 'Calendar',
-    getComponent: () => require('@coinbase/cds-mobile/dates/__stories__/Calendar.stories').default,
-  },
-  {
-    key: 'Card',
-    getComponent: () => require('@coinbase/cds-mobile/cards/__stories__/Card.stories').default,
-  },
-  {
-    key: 'Carousel',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/carousel/__stories__/Carousel.stories').default,
-  },
-  {
-    key: 'CarouselMedia',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/media/__stories__/CarouselMedia.stories').default,
-  },
-  {
-    key: 'CartesianChart',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/__stories__/CartesianChart.stories')
-        .default,
-  },
-  {
-    key: 'ChartAccessibility',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/__stories__/ChartAccessibility.stories')
-        .default,
-  },
-  {
-    key: 'ChartTransitions',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/__stories__/ChartTransitions.stories')
-        .default,
-  },
-  {
-    key: 'Checkbox',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/Checkbox.stories').default,
-  },
-  {
-    key: 'CheckboxCell',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/CheckboxCell.stories').default,
-  },
-  {
-    key: 'Chip',
-    getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/Chip.stories').default,
-  },
-  {
-    key: 'Coachmark',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/coachmark/__stories__/Coachmark.stories').default,
-  },
-  {
-    key: 'Collapsible',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/collapsible/__stories__/Collapsible.stories').default,
-  },
-  {
-    key: 'Combobox',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/alpha/combobox/__stories__/Combobox.stories').default,
-  },
-  {
-    key: 'ComponentConfigProvider',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/ComponentConfigProvider.stories').default,
-  },
-  {
-    key: 'ComponentConfigProviderCustom',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/ComponentConfigProviderCustom.stories')
-        .default,
-  },
-  {
-    key: 'ContainedAssetCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cards/__stories__/ContainedAssetCard.stories').default,
-  },
-  {
-    key: 'ContentCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cards/__stories__/ContentCard.stories').default,
-  },
-  {
-    key: 'ContentCell',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cells/__stories__/ContentCell.stories').default,
-  },
-  {
-    key: 'ContentCellFallback',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cells/__stories__/ContentCellFallback.stories').default,
-  },
-  {
-    key: 'ControlGroup',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/ControlGroup.stories').default,
-  },
-  {
-    key: 'DataCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/alpha/data-card/__stories__/DataCard.stories').default,
-  },
-  {
-    key: 'DateInput',
-    getComponent: () => require('@coinbase/cds-mobile/dates/__stories__/DateInput.stories').default,
-  },
-  {
-    key: 'DatePicker',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/dates/__stories__/DatePicker.stories').default,
-  },
-  {
-    key: 'Divider',
-    getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Divider.stories').default,
-  },
-  {
-    key: 'Dot',
-    getComponent: () => require('@coinbase/cds-mobile/dots/__stories__/Dot.stories').default,
-  },
-  {
-    key: 'DotMisc',
-    getComponent: () => require('@coinbase/cds-mobile/dots/__stories__/DotMisc.stories').default,
-  },
-  {
-    key: 'DrawerBottom',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerBottom.stories').default,
-  },
-  {
-    key: 'DrawerFallback',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerFallback.stories').default,
-  },
-  {
-    key: 'DrawerLeft',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerLeft.stories').default,
-  },
-  {
-    key: 'DrawerMisc',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerMisc.stories').default,
-  },
-  {
-    key: 'DrawerReduceMotion',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerReduceMotion.stories').default,
-  },
-  {
-    key: 'DrawerRight',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerRight.stories').default,
-  },
-  {
-    key: 'DrawerScrollable',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerScrollable.stories').default,
-  },
-  {
-    key: 'DrawerTop',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerTop.stories').default,
-  },
-  {
-    key: 'Fallback',
-    getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Fallback.stories').default,
-  },
-  {
-    key: 'FloatingAssetCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cards/__stories__/FloatingAssetCard.stories').default,
-  },
-  {
-    key: 'Frontier',
-    getComponent: () => require('@coinbase/cds-mobile/system/__stories__/Frontier.stories').default,
-  },
-  {
-    key: 'Group',
-    getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Group.stories').default,
-  },
-  {
-    key: 'HeroSquare',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/illustrations/__stories__/HeroSquare.stories').default,
-  },
-  {
-    key: 'HintMotion',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/motion/__stories__/HintMotion.stories').default,
-  },
-  {
-    key: 'IconButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/buttons/__stories__/IconButton.stories').default,
-  },
-  {
-    key: 'IconCounterButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/buttons/__stories__/IconCounterButton.stories').default,
-  },
-  {
-    key: 'InputChip',
-    getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/InputChip.stories').default,
-  },
-  {
-    key: 'InputIcon',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/InputIcon.stories').default,
-  },
-  {
-    key: 'InputIconButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/InputIconButton.stories').default,
-  },
-  {
-    key: 'InputStack',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/InputStack.stories').default,
-  },
-  {
-    key: 'Legend',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/legend/__stories__/Legend.stories').default,
-  },
-  {
-    key: 'LinearGradient',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/gradients/__stories__/LinearGradient.stories').default,
-  },
-  {
-    key: 'LineChart',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/line/__stories__/LineChart.stories')
-        .default,
-  },
-  {
-    key: 'Link',
-    getComponent: () => require('@coinbase/cds-mobile/typography/__stories__/Link.stories').default,
-  },
-  {
-    key: 'ListCell',
-    getComponent: () => require('@coinbase/cds-mobile/cells/__stories__/ListCell.stories').default,
-  },
-  {
-    key: 'ListCellFallback',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cells/__stories__/ListCellFallback.stories').default,
-  },
-  {
-    key: 'Logo',
-    getComponent: () => require('@coinbase/cds-mobile/icons/__stories__/Logo.stories').default,
-  },
-  {
-    key: 'Lottie',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/animation/__stories__/Lottie.stories').default,
-  },
-  {
-    key: 'LottieStatusAnimation',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/animation/__stories__/LottieStatusAnimation.stories').default,
-  },
-  {
-    key: 'MediaCard',
-    getComponent: () => require('@coinbase/cds-mobile/cards/__stories__/MediaCard.stories').default,
-  },
-  {
-    key: 'MediaChip',
-    getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/MediaChip.stories').default,
-  },
-  {
-    key: 'MessagingCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cards/__stories__/MessagingCard.stories').default,
-  },
-  {
-    key: 'ModalBackButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/ModalBackButton.stories').default,
-  },
-  {
-    key: 'ModalBasic',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/ModalBasic.stories').default,
-  },
-  {
-    key: 'ModalCustomPadding',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/ModalCustomPadding.stories').default,
-  },
-  {
-    key: 'ModalLong',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/ModalLong.stories').default,
-  },
-  {
-    key: 'ModalPortal',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/ModalPortal.stories').default,
-  },
-  {
-    key: 'MultiContentModule',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/multi-content-module/__stories__/MultiContentModule.stories')
-        .default,
-  },
-  {
-    key: 'NavBarIconButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/NavBarIconButton.stories').default,
-  },
-  {
-    key: 'NavigationSubtitle',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/NavigationSubtitle.stories').default,
-  },
-  {
-    key: 'NavigationTitle',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/NavigationTitle.stories').default,
-  },
-  {
-    key: 'NavigationTitleSelect',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/NavigationTitleSelect.stories').default,
-  },
-  {
-    key: 'NudgeCard',
-    getComponent: () => require('@coinbase/cds-mobile/cards/__stories__/NudgeCard.stories').default,
-  },
-  {
-    key: 'Numpad',
-    getComponent: () => require('@coinbase/cds-mobile/numpad/__stories__/Numpad.stories').default,
-  },
-  {
-    key: 'Overlay',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/Overlay.stories').default,
-  },
-  {
-    key: 'PageFooter',
-    getComponent: () => require('@coinbase/cds-mobile/page/__stories__/PageFooter.stories').default,
-  },
-  {
-    key: 'PageFooterInPage',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/page/__stories__/PageFooterInPage.stories').default,
-  },
-  {
-    key: 'PageHeader',
-    getComponent: () => require('@coinbase/cds-mobile/page/__stories__/PageHeader.stories').default,
-  },
-  {
-    key: 'PageHeaderInErrorEmptyState',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/page/__stories__/PageHeaderInErrorEmptyState.stories').default,
-  },
-  {
-    key: 'PageHeaderInPage',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/page/__stories__/PageHeaderInPage.stories').default,
-  },
-  {
-    key: 'Palette',
-    getComponent: () => require('@coinbase/cds-mobile/system/__stories__/Palette.stories').default,
-  },
-  {
-    key: 'PatternDisclosureHighFrictionBenefit',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/PatternDisclosureHighFrictionBenefit.stories')
-        .default,
-  },
-  {
-    key: 'PatternDisclosureHighFrictionRisk',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/PatternDisclosureHighFrictionRisk.stories')
-        .default,
-  },
-  {
-    key: 'PatternDisclosureLowFriction',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/PatternDisclosureLowFriction.stories')
-        .default,
-  },
-  {
-    key: 'PatternDisclosureMedFriction',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/PatternDisclosureMedFriction.stories')
-        .default,
-  },
-  {
-    key: 'PatternError',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/PatternError.stories').default,
-  },
-  {
-    key: 'PercentageBarChart',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/bar/__stories__/PercentageBarChart.stories')
-        .default,
-  },
-  {
-    key: 'PeriodSelector',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/__stories__/PeriodSelector.stories')
-        .default,
-  },
-  {
-    key: 'Pictogram',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/illustrations/__stories__/Pictogram.stories').default,
-  },
-  {
-    key: 'Pressable',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/Pressable.stories').default,
-  },
-  {
-    key: 'PressableOpacity',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/PressableOpacity.stories').default,
-  },
-  {
-    key: 'ProgressBar',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/visualizations/__stories__/ProgressBar.stories').default,
-  },
-  {
-    key: 'ProgressCircle',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/visualizations/__stories__/ProgressCircle.stories').default,
-  },
-  {
-    key: 'RadioCell',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/RadioCell.stories').default,
-  },
-  {
-    key: 'RadioGroup',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/RadioGroup.stories').default,
-  },
-  {
-    key: 'ReferenceLine',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/line/__stories__/ReferenceLine.stories')
-        .default,
-  },
-  {
-    key: 'RemoteImage',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/media/__stories__/RemoteImage.stories').default,
-  },
-  {
-    key: 'RemoteImageGroup',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/media/__stories__/RemoteImageGroup.stories').default,
-  },
-  {
-    key: 'RollingNumber',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/numbers/__stories__/RollingNumber.stories').default,
-  },
-  {
-    key: 'Scrubber',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/scrubber/__stories__/Scrubber.stories')
-        .default,
-  },
-  {
-    key: 'SearchInput',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/SearchInput.stories').default,
-  },
-  {
-    key: 'SectionHeader',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/section-header/__stories__/SectionHeader.stories').default,
-  },
-  {
-    key: 'SegmentedTabs',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/tabs/__stories__/SegmentedTabs.stories').default,
-  },
-  {
-    key: 'Select',
-    getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/Select.stories').default,
-  },
-  {
-    key: 'SelectChip',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/chips/__stories__/SelectChip.stories').default,
-  },
-  {
-    key: 'SelectOption',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/SelectOption.stories').default,
-  },
-  {
-    key: 'SlideButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/buttons/__stories__/SlideButton.stories').default,
-  },
-  {
-    key: 'Spacer',
-    getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Spacer.stories').default,
-  },
-  {
-    key: 'Sparkline',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/sparkline/__stories__/Sparkline.stories').default,
-  },
-  {
-    key: 'SparklineGradient',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/sparkline/__stories__/SparklineGradient.stories')
-        .default,
-  },
-  {
-    key: 'SparklineInteractive',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories')
-        .default,
-  },
-  {
-    key: 'SparklineInteractiveHeader',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories')
-        .default,
-  },
-  {
-    key: 'Spectrum',
-    getComponent: () => require('@coinbase/cds-mobile/system/__stories__/Spectrum.stories').default,
-  },
-  {
-    key: 'Spinner',
-    getComponent: () => require('@coinbase/cds-mobile/loaders/__stories__/Spinner.stories').default,
-  },
-  {
-    key: 'SpotIcon',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/illustrations/__stories__/SpotIcon.stories').default,
-  },
-  {
-    key: 'SpotRectangle',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/illustrations/__stories__/SpotRectangle.stories').default,
-  },
-  {
-    key: 'SpotSquare',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/illustrations/__stories__/SpotSquare.stories').default,
-  },
-  {
-    key: 'StepperHorizontal',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/stepper/__stories__/StepperHorizontal.stories').default,
-  },
-  {
-    key: 'StepperVertical',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/stepper/__stories__/StepperVertical.stories').default,
-  },
-  {
-    key: 'StickyFooter',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/sticky-footer/__stories__/StickyFooter.stories').default,
-  },
-  {
-    key: 'StickyFooterWithTray',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/sticky-footer/__stories__/StickyFooterWithTray.stories')
-        .default,
-  },
-  {
-    key: 'Switch',
-    getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/Switch.stories').default,
-  },
-  {
-    key: 'TabbedChips',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/chips/__stories__/TabbedChips.stories').default,
-  },
-  {
-    key: 'TabIndicator',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/tabs/__stories__/TabIndicator.stories').default,
-  },
-  {
-    key: 'TabLabel',
-    getComponent: () => require('@coinbase/cds-mobile/tabs/__stories__/TabLabel.stories').default,
-  },
-  {
-    key: 'TabNavigation',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/tabs/__stories__/TabNavigation.stories').default,
-  },
-  {
-    key: 'Tabs',
-    getComponent: () => require('@coinbase/cds-mobile/tabs/__stories__/Tabs.stories').default,
-  },
-  {
-    key: 'Tag',
-    getComponent: () => require('@coinbase/cds-mobile/tag/__stories__/Tag.stories').default,
-  },
-  {
-    key: 'Text',
-    getComponent: () => require('@coinbase/cds-mobile/typography/__stories__/Text.stories').default,
-  },
-  {
-    key: 'TextBody',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextBody.stories').default,
-  },
-  {
-    key: 'TextCaption',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextCaption.stories').default,
-  },
-  {
-    key: 'TextCore',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextCore.stories').default,
-  },
-  {
-    key: 'TextDisplay1',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextDisplay1.stories').default,
-  },
-  {
-    key: 'TextDisplay2',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextDisplay2.stories').default,
-  },
-  {
-    key: 'TextDisplay3',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextDisplay3.stories').default,
-  },
-  {
-    key: 'TextHeadline',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextHeadline.stories').default,
-  },
-  {
-    key: 'TextInput',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/TextInput.stories').default,
-  },
-  {
-    key: 'TextLabel1',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextLabel1.stories').default,
-  },
-  {
-    key: 'TextLabel2',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextLabel2.stories').default,
-  },
-  {
-    key: 'TextLegal',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextLegal.stories').default,
-  },
-  {
-    key: 'TextTitle1',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextTitle1.stories').default,
-  },
-  {
-    key: 'TextTitle2',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextTitle2.stories').default,
-  },
-  {
-    key: 'TextTitle3',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextTitle3.stories').default,
-  },
-  {
-    key: 'TextTitle4',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextTitle4.stories').default,
-  },
-  {
-    key: 'ThemeProvider',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/ThemeProvider.stories').default,
-  },
-  {
-    key: 'Toast',
-    getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/Toast.stories').default,
-  },
-  {
-    key: 'TooltipV2',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TooltipV2.stories').default,
-  },
-  {
-    key: 'TopNavBar',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/TopNavBar.stories').default,
-  },
-  {
-    key: 'Tour',
-    getComponent: () => require('@coinbase/cds-mobile/tour/__stories__/Tour.stories').default,
-  },
-  {
-    key: 'TrayAction',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayAction.stories').default,
-  },
-  {
-    key: 'TrayBasic',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayBasic.stories').default,
-  },
-  {
-    key: 'TrayFallback',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayFallback.stories').default,
-  },
-  {
-    key: 'TrayFeedCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayFeedCard.stories').default,
-  },
-  {
-    key: 'TrayInformational',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayInformational.stories').default,
-  },
-  {
-    key: 'TrayMessaging',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayMessaging.stories').default,
-  },
-  {
-    key: 'TrayMisc',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayMisc.stories').default,
-  },
-  {
-    key: 'TrayNavigation',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayNavigation.stories').default,
-  },
-  {
-    key: 'TrayPromotional',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayPromotional.stories').default,
-  },
-  {
-    key: 'TrayRedesign',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayRedesign.stories').default,
-  },
-  {
-    key: 'TrayReduceMotion',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayReduceMotion.stories').default,
-  },
-  {
-    key: 'TrayScrollable',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayScrollable.stories').default,
-  },
-  {
-    key: 'TrayTall',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayTall.stories').default,
-  },
-  {
-    key: 'TrayWithTitle',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayWithTitle.stories').default,
-  },
-  {
-    key: 'UpsellCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cards/__stories__/UpsellCard.stories').default,
-  },
-];
diff --git a/apps/mobile-app/scripts/utils/setEnvVars.mjs b/apps/mobile-app/scripts/utils/setEnvVars.mjs
deleted file mode 100644
index c2b501d05b..0000000000
--- a/apps/mobile-app/scripts/utils/setEnvVars.mjs
+++ /dev/null
@@ -1,38 +0,0 @@
-import { $, argv } from 'zx'; // https://github.com/google/zx
-
-import { getBuildInfo } from './getBuildInfo.mjs';
-
-export function setEnvVars() {
-  const { debug = false, newArchEnabled = false, jsEngine, profile, platform } = argv;
-  const { ios, android, outputDirectory } = getBuildInfo();
-
-  /**
-   * Environment variables for Expo CLI builds
-   */
-  $.prefix += `
-  export RCT_NO_LAUNCH_PACKAGER=1;
-  export APP_PROFILE=${profile};
-  export APP_PLATFORM=${platform};
-  export APP_JS_ENGINE=${jsEngine};
-  export APP_IOS_BUNDLE_IDENTIFIER=${ios.bundleIdentifier};
-  export APP_ANDROID_PACKAGE_IDENTIFIER=${android.packageIdentifier};
-  export EXPO_NO_TELEMETRY=1;
-  export EXPO_USE_CUSTOM_INSPECTOR_PROXY=1;
-  export BUILD_ARTIFACTS_DIR=${outputDirectory};
-  export EXPO_NO_REDIRECT_PAGE=1;
-  export EXPO_USE_UPDATES=1;
-  `;
-
-  if (debug) {
-    $.prefix += `
-    export DEBUG=*;
-    export APP_DEBUG=1;
-    export BUILD_SKIP_CLEANUP=1;
-    export EXPO_PROFILE=1;
-    `;
-  }
-
-  if (newArchEnabled) {
-    $.prefix += `export APP_NEW_ARCH_ENABLED=1;`;
-  }
-}
diff --git a/apps/mobile-app/scripts/utils/shouldRunVisreg.mjs b/apps/mobile-app/scripts/utils/shouldRunVisreg.mjs
deleted file mode 100644
index 29a6dce323..0000000000
--- a/apps/mobile-app/scripts/utils/shouldRunVisreg.mjs
+++ /dev/null
@@ -1,8 +0,0 @@
-import { getAffectedRoutes } from './getAffectedRoutes.mjs';
-
-const { commonChanged, affectedRouteKeys } = await getAffectedRoutes();
-
-// If we're not on the master branch and nothing relevant has changed, we don't need to run detox
-if (!commonChanged && !affectedRouteKeys.length) process.exit(1);
-
-process.exit(0);
diff --git a/apps/mobile-app/scripts/validate.mjs b/apps/mobile-app/scripts/validate.mjs
deleted file mode 100644
index 09da5d919c..0000000000
--- a/apps/mobile-app/scripts/validate.mjs
+++ /dev/null
@@ -1,16 +0,0 @@
-import { $, log } from 'zx'; // https://github.com/google/zx
-
-$.verbose = true;
-
-/**
- * Fail if any installed packages are outdated.
- * https://docs.expo.dev/workflow/expo-cli/#environment-variables:~:text=on%20your%20machine.-,CI,-boolean
- */
-const { stdout, stderr } = await $`expo install --check`;
-if (stdout) {
-  log({ kind: 'stdout', data: stdout });
-}
-
-if (stderr) {
-  log({ kind: 'stderr', data: stderr });
-}
diff --git a/apps/mobile-app/src/index.ts b/apps/mobile-app/src/index.ts
deleted file mode 100644
index 2bd5dc541f..0000000000
--- a/apps/mobile-app/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-// Empty file to please tsconfig `include` `src` config
diff --git a/apps/storybook/.storybook/main.ts b/apps/storybook/.storybook/main.ts
index 9549d3063d..2c48226e3c 100644
--- a/apps/storybook/.storybook/main.ts
+++ b/apps/storybook/.storybook/main.ts
@@ -24,8 +24,8 @@ const bundleStatsFilename = path.resolve(
 );
 const addons = [
   // '@chromatic-com/storybook',
-  '@storybook/addon-storysource',
   '@storybook-community/storybook-dark-mode',
+  '@storybook/addon-docs',
   ...(!isPercyBuild ? ['@storybook/addon-a11y', '@storybook/addon-vitest'] : []),
 ];
 
@@ -46,10 +46,7 @@ const config: StorybookConfig = {
     options: {},
   },
   addons,
-  stories: [
-    '../../../packages/web/**/*.stories.@(tsx|mdx)',
-    '../../../packages/web-visualization/**/*.stories.@(tsx|mdx)',
-  ],
+  stories: ['../../../packages/web/**/*.stories.@(tsx|mdx)'],
   staticDirs: [
     {
       from: path.resolve(MONOREPO_ROOT, 'packages/icons/src'),
@@ -91,10 +88,6 @@ const config: StorybookConfig = {
           '@coinbase/cds-lottie-files': path.resolve(MONOREPO_ROOT, 'packages/lottie-files/src'),
           '@coinbase/cds-utils': path.resolve(MONOREPO_ROOT, 'packages/utils/src'),
           '@coinbase/cds-web': path.resolve(MONOREPO_ROOT, 'packages/web/src'),
-          '@coinbase/cds-web-visualization': path.resolve(
-            MONOREPO_ROOT,
-            'packages/web-visualization/src',
-          ),
         },
       },
     });
diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts
index 7090edef8b..618f80314f 100644
--- a/apps/storybook/.storybook/preview.ts
+++ b/apps/storybook/.storybook/preview.ts
@@ -54,7 +54,7 @@ const preview: Preview = {
   decorators: [StoryContainer],
   parameters: {
     layout: 'fullscreen',
-    backgrounds: { disable: true },
+    backgrounds: { disabled: true },
     globalStyles: `${globalStyles} ${defaultFontStyles}`,
     controls: {
       matchers: {
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index 561f5f3ab3..dc1ae3331c 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -11,36 +11,35 @@
     "@coinbase/cds-icons": "workspace:^",
     "@coinbase/cds-illustrations": "workspace:^",
     "@coinbase/cds-web": "workspace:^",
-    "@coinbase/cds-web-visualization": "workspace:^",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "19.1.2",
+    "react-dom": "19.1.2"
   },
   "devDependencies": {
     "@linaria/babel-preset": "^3.0.0-beta.22",
     "@linaria/core": "^3.0.0-beta.22",
     "@linaria/rollup": "^3.0.0-beta.22",
     "@percy/cli": "^1.31.1",
-    "@percy/storybook": "^9.0.0",
+    "@percy/storybook": "^9.1.0",
     "@shopify/storybook-a11y-test": "^1.2.1",
     "@storybook-community/storybook-dark-mode": "^6.0.0",
     "@storybook/addon-a11y": "^9.1.19",
-    "@storybook/addon-storysource": "^8.6.14",
+    "@storybook/addon-docs": "9.1.17",
     "@storybook/addon-vitest": "^9.1.2",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react-vite": "^9.1.2",
+    "@storybook/react-vite": "9.1.17",
     "@storybook/testing-library": "^0.2.2",
     "@types/diff": "^5.0.9",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^5.0.0",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
+    "@vitejs/plugin-react": "^5.1.2",
     "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
     "diff": "^5.1.0",
     "playwright": "^1.58.2",
     "rollup-plugin-visualizer": "^6.0.3",
-    "storybook": "^9.1.2",
+    "storybook": "9.1.17",
     "typescript": "~5.9.2",
-    "vite": "^7.1.2",
+    "vite": "^7.3.1",
     "vitest": "^4.0.18"
   }
 }
diff --git a/apps/storybook/project.json b/apps/storybook/project.json
index 0706bfb3da..84bd2bfebf 100644
--- a/apps/storybook/project.json
+++ b/apps/storybook/project.json
@@ -22,7 +22,6 @@
         "{projectRoot}/**/__stories__/**",
         "{projectRoot}/**/*.stories.*",
         "{workspaceRoot}/packages/web/**/*.stories.*",
-        "{workspaceRoot}/packages/web-visualization/**/*.stories.*",
         "!{projectRoot}/scripts/**"
       ],
       "outputs": [
@@ -40,7 +39,6 @@
         "{projectRoot}/**/__stories__/**",
         "{projectRoot}/**/*.stories.*",
         "{workspaceRoot}/packages/web/**/*.stories.*",
-        "{workspaceRoot}/packages/web-visualization/**/*.stories.*",
         "!{projectRoot}/scripts/**"
       ],
       "outputs": [
@@ -70,8 +68,7 @@
       "inputs": [
         "{projectRoot}/**/__stories__/**",
         "{projectRoot}/**/*.stories.*",
-        "{workspaceRoot}/packages/web/**/*.stories.*",
-        "{workspaceRoot}/packages/web-visualization/**/*.stories.*"
+        "{workspaceRoot}/packages/web/**/*.stories.*"
       ],
       "outputs": [
         "{projectRoot}/dist"
@@ -87,8 +84,7 @@
       "inputs": [
         "{projectRoot}/**/__stories__/**",
         "{projectRoot}/**/*.stories.*",
-        "{workspaceRoot}/packages/web/**/*.stories.*",
-        "{workspaceRoot}/packages/web-visualization/**/*.stories.*"
+        "{workspaceRoot}/packages/web/**/*.stories.*"
       ],
       "outputs": [
         "{projectRoot}/dist",
@@ -130,8 +126,7 @@
       "inputs": [
         "{projectRoot}/**/__stories__/**",
         "{projectRoot}/**/*.stories.*",
-        "{workspaceRoot}/packages/web/**/*.stories.*",
-        "{workspaceRoot}/packages/web-visualization/**/*.stories.*"
+        "{workspaceRoot}/packages/web/**/*.stories.*"
       ],
       "outputs": [
         "{projectRoot}/dist"
diff --git a/apps/storybook/scripts/shouldRunVisreg.mjs b/apps/storybook/scripts/shouldRunVisreg.mjs
index b8185fef25..6183656dae 100644
--- a/apps/storybook/scripts/shouldRunVisreg.mjs
+++ b/apps/storybook/scripts/shouldRunVisreg.mjs
@@ -4,7 +4,6 @@ const RELEVANT_ROOTS = [
   'apps/storybook',
   'packages/common',
   'packages/web',
-  'packages/web-visualization',
   'packages/icons',
   'packages/illustrations',
 ];
diff --git a/apps/storybook/tsconfig.json b/apps/storybook/tsconfig.json
index f1dd49fa55..24977feae5 100644
--- a/apps/storybook/tsconfig.json
+++ b/apps/storybook/tsconfig.json
@@ -26,9 +26,6 @@
     },
     {
       "path": "../../packages/illustrations"
-    },
-    {
-      "path": "../../packages/web-visualization"
     }
   ]
 }
diff --git a/apps/vite-app/index.html b/apps/vite-app/index.html
index c19f9c4a27..a14497510e 100644
--- a/apps/vite-app/index.html
+++ b/apps/vite-app/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CDS Vite App</title>
   </head>
diff --git a/apps/vite-app/package.json b/apps/vite-app/package.json
index c8f9a300e1..888ade3742 100644
--- a/apps/vite-app/package.json
+++ b/apps/vite-app/package.json
@@ -13,17 +13,17 @@
     "@coinbase/cds-icons": "workspace:^",
     "@coinbase/cds-illustrations": "workspace:^",
     "@coinbase/cds-web": "workspace:^",
-    "@coinbase/cds-web-visualization": "workspace:^",
     "framer-motion": "^10.18.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "19.1.2",
+    "react-dom": "19.1.2"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^5.0.0",
+    "@coinbase/cds-migrator": "workspace:^",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
+    "@vitejs/plugin-react": "^5.1.2",
     "typescript": "~5.9.2",
-    "vite": "^7.1.2"
+    "vite": "^7.3.1"
   },
   "packageManager": "yarn@4.7.0"
 }
diff --git a/apps/vite-app/src/components/CardList/ETHStakingCard.tsx b/apps/vite-app/src/components/CardList/ETHStakingCard.tsx
index 4d976dbebb..b33bda12f7 100644
--- a/apps/vite-app/src/components/CardList/ETHStakingCard.tsx
+++ b/apps/vite-app/src/components/CardList/ETHStakingCard.tsx
@@ -7,7 +7,6 @@ export const ETHStakingCard = () => {
   return (
     <UpsellCard
       action="Start earning"
-      dangerouslySetBackground="rgb(var(--purple70))"
       description={
         <Text as="p" color="fgInverse" font="label2" numberOfLines={3}>
           Earn staking rewards on ETH by holding it on Coinbase
@@ -18,6 +17,7 @@ export const ETHStakingCard = () => {
           <RemoteImage height={174} source="/staking.png" />
         </Box>
       }
+      style={{ backgroundColor: 'rgb(var(--purple70))' }}
       title={
         <Text as="h3" color="fgInverse" font="headline">
           Up to 3.29% APR on ETHs
diff --git a/apps/vite-app/tsconfig.app.json b/apps/vite-app/tsconfig.app.json
index e61b84d78c..bb78b43086 100644
--- a/apps/vite-app/tsconfig.app.json
+++ b/apps/vite-app/tsconfig.app.json
@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.project.json",
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
+    "target": "ES2022",
     "useDefineForClassFields": true,
     "noEmit": true,
     "noUncheckedSideEffectImports": true
@@ -22,9 +22,6 @@
     },
     {
       "path": "../../packages/illustrations"
-    },
-    {
-      "path": "../../packages/web-visualization"
     }
   ]
 }
diff --git a/apps/vite-app/tsconfig.node.json b/apps/vite-app/tsconfig.node.json
index 09d8b6a68f..8381935dd9 100644
--- a/apps/vite-app/tsconfig.node.json
+++ b/apps/vite-app/tsconfig.node.json
@@ -21,9 +21,6 @@
     },
     {
       "path": "../../packages/illustrations"
-    },
-    {
-      "path": "../../packages/web-visualization"
     }
   ]
 }
diff --git a/eslint.config.mjs b/eslint.config.mjs
index aa1085e4b6..1f3e98e7a0 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -32,24 +32,35 @@ const ignores = [
   '**/esm/**',
   '**/lib/**',
   '**/templates/**',
+  '**/__testfixtures__/**',
   '**/.next/**',
   // These files use assert { type: 'json' } syntax that breaks eslint and must be fully ignored
   '**/getAffectedRoutes.mjs',
   '**/getBuildInfo.mjs',
-  'apps/mobile-app/prebuilds',
   // within their NX project, these files are not included by the Typescript config
   // when linting with TS types (e.g. internal/safely-spread-props) this will raise an error
   'packages/web/optimize-css.ts',
   'packages/icons/scripts/*.ts',
   'packages/illustrations/scripts/*.ts',
-  'packages/ui-mobile-playground/scripts/*.ts',
   'libs/docusaurus-plugin-docgen/module-declarations.d.ts',
 ];
 
+// TODO (CDS-1412): Fix these react-hooks rule violations and re-enable them
+const disabledNewReactHooksRules = {
+  'react-hooks/immutability': 'off',
+  'react-hooks/purity': 'off',
+  'react-hooks/refs': 'off',
+  'react-hooks/set-state-in-effect': 'off',
+  'react-hooks/set-state-in-render': 'off',
+  'react-hooks/static-components': 'off',
+  'react-hooks/preserve-manual-memoization': 'off',
+};
+
 // These rules apply to all files
 const sharedRules = {
   'internal/no-object-rest-spread-in-worklet': 'error',
   'internal/deprecated-jsdoc-has-removal-version': 'error',
+  'internal/spread-props-last': 'warn',
   'import/default': 'off',
   'import/extensions': 'off',
   'import/named': 'off',
@@ -68,6 +79,16 @@ const sharedRules = {
           message:
             'Do not import `cx` from Linaria. Use the `cx` function from @coinbase/cds-web instead.',
         },
+        {
+          name: 'react-popper',
+          message:
+            'Do not import `react-popper` directly. Use Floating UI instead; the legacy dependency is only allowed in `packages/web/src/overlays/popover/usePopper.ts` for backwards compatibility.',
+        },
+        {
+          name: '@popperjs/core',
+          message:
+            'Do not import `@popperjs/core` directly. Use Floating UI instead; the legacy dependency is only allowed in `packages/web/src/overlays/popover/usePopper.ts` for backwards compatibility.',
+        },
       ],
       patterns: [
         {
@@ -137,6 +158,96 @@ const sharedRules = {
   ],
   'react/prop-types': 'off',
   'react/react-in-jsx-scope': 'off',
+  ...disabledNewReactHooksRules,
+};
+
+// React 19 introduced new APIs that do not exist in React 18.
+// CDS must remain compatible with React 18 consumers, so we restrict these imports
+// in all publishable packages. The `no-restricted-imports` rule in this object
+// is a superset of the one in `sharedRules` to avoid flat-config override issues.
+const react19CompatibilityRules = {
+  'no-restricted-imports': [
+    'error',
+    {
+      paths: [
+        // Existing restrictions (duplicated because flat config replaces, not merges)
+        {
+          name: '@linaria/core',
+          importNames: ['cx'],
+          message:
+            'Do not import `cx` from Linaria. Use the `cx` function from @coinbase/cds-web instead.',
+        },
+        {
+          name: 'react-popper',
+          message:
+            'Do not import `react-popper` directly. Use Floating UI instead; the legacy dependency is only allowed in `packages/web/src/overlays/popover/usePopper.ts` for backwards compatibility.',
+        },
+        {
+          name: '@popperjs/core',
+          message:
+            'Do not import `@popperjs/core` directly. Use Floating UI instead; the legacy dependency is only allowed in `packages/web/src/overlays/popover/usePopper.ts` for backwards compatibility.',
+        },
+        // React 19-only runtime APIs
+        {
+          name: 'react',
+          importNames: ['cache', 'captureOwnerStack', 'use', 'useActionState', 'useOptimistic'],
+          message:
+            'This is a React 19-only API. CDS must remain compatible with React 18 consumers.',
+        },
+        // React 19-only types (would break .d.ts output for React 18 consumers)
+        {
+          name: 'react',
+          importNames: ['ActionDispatch', 'AnyActionArg', 'AwaitedReactNode', 'Usable'],
+          message:
+            'This is a React 19-only type. CDS must remain compatible with React 18 consumers.',
+        },
+        // React DOM 19-only runtime APIs
+        {
+          name: 'react-dom',
+          importNames: [
+            'preconnect',
+            'prefetchDNS',
+            'preinit',
+            'preinitModule',
+            'preload',
+            'preloadModule',
+            'requestFormReset',
+            'useFormState',
+            'useFormStatus',
+          ],
+          message:
+            'This is a React 19-only API. CDS must remain compatible with React 18 consumers.',
+        },
+        // React DOM 19-only types
+        {
+          name: 'react-dom',
+          importNames: [
+            'FormStatus',
+            'FormStatusNotPending',
+            'FormStatusPending',
+            'PreconnectOptions',
+            'PreinitAs',
+            'PreinitModuleAs',
+            'PreinitModuleOptions',
+            'PreinitOptions',
+            'PreloadAs',
+            'PreloadModuleAs',
+            'PreloadModuleOptions',
+            'PreloadOptions',
+          ],
+          message:
+            'This is a React 19-only type. CDS must remain compatible with React 18 consumers.',
+        },
+      ],
+      patterns: [
+        {
+          group: ['*/booleanStyles', '*/responsive/*'],
+          message:
+            'Do not import these styles directly, as it will cause non-deterministic CSS generation. Use the `getStyles` function from @coinbase/cds-web/styles/styleProps.ts or the component StyleProps API instead.',
+        },
+      ],
+    },
+  ],
 };
 
 // These rules only apply to TS/TSX files in packages/**, and do not apply to stories or tests
@@ -176,6 +287,7 @@ const typescriptRules = {
 
 // These rules only apply to test files
 const testRules = {
+  'internal/spread-props-last': 'off',
   'jest/no-mocks-import': 'off',
   'testing-library/await-async-events': 'off',
   'testing-library/await-async-queries': 'off',
@@ -209,7 +321,7 @@ const sharedExtends = [
   eslintJs.configs.recommended,
   eslintImport.flatConfigs.recommended,
   eslintReact.configs.flat.recommended,
-  eslintReactHooks.configs['recommended-latest'],
+  eslintReactHooks.configs.flat['recommended-latest'],
   eslintReactPerf.configs.flat.recommended,
   eslintJsxA11y.flatConfigs.recommended,
 ];
@@ -274,7 +386,6 @@ export default tseslint.config(
     files: ['packages/**/*.{ts,tsx}'],
     ignores: [
       'packages/illustrations/src/__generated__/**',
-      'packages/ui-mobile-playground/**',
       'packages/**/__stories__/**',
       'packages/**/__tests__/**',
       'packages/**/__mocks__/**',
@@ -309,6 +420,23 @@ export default tseslint.config(
       ...typescriptRules,
     },
   },
+  // Restrict React 19-only APIs in publishable packages to maintain React 18 compatibility
+  {
+    files: [
+      'packages/web/**/*.{ts,tsx}',
+      'packages/common/**/*.{ts,tsx}',
+      'packages/mobile/**/*.{ts,tsx}',
+    ],
+    rules: {
+      ...react19CompatibilityRules,
+    },
+  },
+  {
+    files: ['**/*.stories.{js,jsx,ts,tsx}', '**/__stories__/**'],
+    rules: {
+      'internal/spread-props-last': 'off',
+    },
+  },
   // Rules specific to mobile story files
   {
     files: ['packages/mobile/**/*.stories.tsx'],
@@ -318,13 +446,16 @@ export default tseslint.config(
   {
     files: ['**/*.figma.tsx'],
     extends: [internalPlugin.configs.figmaConnectRules],
+    rules: {
+      'internal/spread-props-last': 'off',
+    },
   },
   {
     files: ['**/*.mdx'],
     processor: internalPlugin.processors.mdx,
   },
   {
-    files: ['**/*.test.{ts,tsx}', '**/__tests__/**', '**/setup.js'],
+    files: ['**/*.test.{ts,tsx}', '**/__tests__/**', '**/jest/**/*.js'],
     settings: sharedSettings,
     languageOptions: {
       globals: {
@@ -348,4 +479,17 @@ export default tseslint.config(
       ...testRules,
     },
   },
+  {
+    files: ['packages/migrator/**/*.test.{ts,tsx}'],
+    rules: {
+      'jest/expect-expect': 'off',
+    },
+  },
+  {
+    files: ['packages/migrator/src/transforms/**/*.ts'],
+    ignores: ['packages/migrator/src/transforms/**/__tests__/**'],
+    rules: {
+      'no-restricted-exports': 'off',
+    },
+  },
 );
diff --git a/figma.config.mobile.json b/figma.config.mobile.json
index ca11d800b8..29fedf2496 100644
--- a/figma.config.mobile.json
+++ b/figma.config.mobile.json
@@ -3,8 +3,7 @@
     "parser": "react",
     "label": "React Native",
     "include": [
-      "packages/mobile/src/**/*.tsx",
-      "packages/mobile-visualization/src/**/*.tsx"
+      "packages/mobile/src/**/*.tsx"
     ],
     "exclude": [
       "**/__tests__/**",
diff --git a/figma.config.web.json b/figma.config.web.json
index 4a3dbbe934..d18cd6edf9 100644
--- a/figma.config.web.json
+++ b/figma.config.web.json
@@ -3,8 +3,7 @@
     "parser": "react",
     "label": "React",
     "include": [
-      "packages/web/src/**/*.tsx",
-      "packages/web-visualization/src/**/*.tsx"
+      "packages/web/src/**/*.tsx"
     ],
     "exclude": [
       "**/__tests__/**",
diff --git a/jest.preset-mobile.js b/jest.preset-mobile.js
index 7e9524b889..b732cfd97e 100644
--- a/jest.preset-mobile.js
+++ b/jest.preset-mobile.js
@@ -18,7 +18,7 @@ const config = {
     '\\.(jpg|jpeg|png|gif)$': 'identity-obj-proxy',
   },
   setupFiles: [...reactNativePreset.setupFiles],
-  setupFilesAfterEnv: ['jest-extended', '@testing-library/jest-native/extend-expect'],
+  setupFilesAfterEnv: ['jest-extended'],
   testMatch: ['**/*.test.[jt]s?(x)'],
   testPathIgnorePatterns: [
     '/node_modules/',
diff --git a/libs/codegen/README.md b/libs/codegen/README.md
index 28c6d441ed..1af1fd8452 100644
--- a/libs/codegen/README.md
+++ b/libs/codegen/README.md
@@ -1,15 +1,46 @@
 # Codegen
 
-We have a number of disparate codegen scripts in our repo. This doc page serves as the jump off doc for understanding their functionality.
+A collection of code generation scripts for the CDS monorepo.
 
-# Codegen Scripts in this Package
+## Nx Targets
 
-- Adoption Tracker
-- Icons
-- Illustrations
-- Playground route generation
-- cds-web/cds-mobile/cds-common token generator scripts
+### `yarn nx run codegen:mobile-routes`
 
-## EJS Templates
+Scans all mobile story files (`packages/**/mobile/src/**/__stories__/*.stories.tsx`) and generates the route table for `apps/expo-app/src/routes.ts`.
 
-Codegen needs to be run before using CDS or running the storybook. It uses [ejs](https://ejs.co/) templates to generate source code. The ejs templates live in [`templates/`](./templates). The folder structure in `templates/` should mimic the source file structure that the codegen output should be. The only exception is codegen a component. The component's folder can be skipped by having `shouldCreateFolder` option set to `true` in the codegen script. Rather than creating `templates/components/Button/Button.ejs`, `templates/components/Button.ejs` will suffice.
+Run this when adding or removing mobile component stories.
+
+**Source:** `src/playground/prepareRoutes.ts`
+
+---
+
+### `yarn nx run codegen:icon-svg-map`
+
+Reads every SVG file from `packages/icons/src/svgs/` and generates a static map at `apps/expo-app/src/__generated__/iconSvgMap.ts`. The map keys are `iconName-size-state` (e.g. `account-24-active`) and each value holds the raw SVG string, used by expo-app to render icons directly via `react-native-svg`.
+
+Run this when icons are added, removed, or updated in `packages/icons`.
+
+**Source:** `src/icons/generateIconSvgMap.ts`
+
+---
+
+### `yarn nx run codegen:update-packages-generic-bump`
+
+Syncs the version numbers of `web`, `mobile`, `common`, and `mcp-server` packages to the highest version among them, and inserts a corresponding entry into each out-of-date `CHANGELOG.md`. Used during the release process to keep versions in lockstep.
+
+**Source:** `src/release/updatePkgsForGenericBump.ts`
+
+---
+
+## Utilities
+
+Shared helpers used internally by codegen scripts (`src/utils/`):
+
+- `getSourcePath` — resolves an absolute path from the monorepo root, using `PROJECT_CWD` or `NX_MONOREPO_ROOT` env vars
+- `writeFile` — renders an EJS template (or raw string) and writes the output, optionally running Prettier
+- `buildTemplates` — batch wrapper around `writeFile` for running multiple template renders
+- `writePrettyFile` — writes a file and formats it with Prettier
+- `getHeaderCommentForFileType` — returns the appropriate "DO NOT MODIFY" header comment for a given file extension
+- `getPrettierParser` — returns the Prettier parser for a given file extension
+- `sortAlphabetically` — sorts an array of strings alphabetically
+- `logError` — standardized error logging
diff --git a/libs/codegen/package.json b/libs/codegen/package.json
index e936f26d08..ba16032160 100644
--- a/libs/codegen/package.json
+++ b/libs/codegen/package.json
@@ -33,20 +33,15 @@
   ],
   "dependencies": {
     "@coinbase/cds-utils": "workspace:^",
-    "@k-vyn/coloralgorithm": "^1.0.0",
     "chalk": "^4.1.2",
     "ejs": "^3.1.7",
-    "enquirer": "^2.3.6",
     "fast-glob": "^3.2.11",
-    "hygen": "patch:hygen@^6.2.0#./patches/hygen.patch",
-    "semver": "^7.5.4",
-    "yargs": "^17.5.1",
-    "yargs-parser": "^21.0.1"
+    "semver": "^7.5.4"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1"
   }
 }
diff --git a/libs/codegen/patches/hygen.patch b/libs/codegen/patches/hygen.patch
deleted file mode 100644
index ca3c810f6d..0000000000
--- a/libs/codegen/patches/hygen.patch
+++ /dev/null
@@ -1,98 +0,0 @@
-diff --git a/dist/engine.js b/dist/engine.js
-index a677fad981f78e88b142de9f037b5e1c544523bd..704e11c205dc316e89a1cfdb53d784f331a4e3b4 100644
---- a/dist/engine.js
-+++ b/dist/engine.js
-@@ -62,7 +62,7 @@ Options:
-     if (!action) {
-         throw new ShowHelpError(`please specify an action for ${generator}.`);
-     }
--    logger.log(`Loaded templates: ${templates.replace(`${cwd}/`, '')}`);
-+    
-     if (!(yield fs_extra_1.default.exists(actionfolder))) {
-         throw new ShowHelpError(`I can't find action '${action}' for generator '${generator}'.
- 
-diff --git a/dist/ops/add.js b/dist/ops/add.js
-index e2c120a440fe363b9b3e4640a7873754afd5d4cf..95f4081c2fb7222ca0ee8f465cfdefd6eef4f3cd 100644
---- a/dist/ops/add.js
-+++ b/dist/ops/add.js
-@@ -16,7 +16,7 @@ const path_1 = __importDefault(require("path"));
- const fs_extra_1 = __importDefault(require("fs-extra"));
- const chalk_1 = require("chalk");
- const result_1 = __importDefault(require("./result"));
--const add = (action, args, { logger, cwd, createPrompter }) => __awaiter(void 0, void 0, void 0, function* () {
-+const add = (action, args, { logger, cwd, createPrompter, writeFile }) => __awaiter(void 0, void 0, void 0, function* () {
-     const { attributes: { to, inject, unless_exists, force, from, skip_if }, } = action;
-     const result = (0, result_1.default)('add', to);
-     const prompter = createPrompter();
-@@ -48,13 +48,13 @@ const add = (action, args, { logger, cwd, createPrompter }) => __awaiter(void 0,
-         return result('skipped');
-     }
-     if (from) {
--        const from_path = path_1.default.join(args.templates, from);
-+        const from_path = path_1.default.join(cwd, from);
-         const file = fs_extra_1.default.readFileSync(from_path).toString();
-         action.body = file;
-     }
-     if (!args.dry) {
-         yield fs_extra_1.default.ensureDir(path_1.default.dirname(absTo));
--        yield fs_extra_1.default.writeFile(absTo, action.body);
-+        writeFile ? yield writeFile(absTo, action.body, args) : yield fs_extra_1.default.writeFile(absTo, action.body);
-     }
-     const pathToLog = process.env.HYGEN_OUTPUT_ABS_PATH ? absTo : to;
-     logger.ok(`       ${force ? 'FORCED' : 'added'}: ${pathToLog}`);
-diff --git a/dist/render.js b/dist/render.js
-index 5d7c6e52834117fff8180ec75e4c79a69fcd002e..a0c76d955306e551721ace6827732509eac7d9a4 100644
---- a/dist/render.js
-+++ b/dist/render.js
-@@ -60,14 +60,22 @@ const render = (args, config) => __awaiter(void 0, void 0, void 0, function* ()
-         return Object.assign({ file }, (0, front_matter_1.default)(text, { allowUnsafe: true }));
-     }))
-         .then(map(({ file, attributes, body }) => {
-+        const argsAsObject = {};
-+        for (const [key, value] of Object.entries(args)) {
-+          try {
-+            argsAsObject[key] = JSON.parse(value);
-+          } catch (err) {
-+            argsAsObject[key] = value;
-+          }
-+        }
-         const renderedAttrs = Object.entries(attributes).reduce((obj, [key, value]) => {
--            return Object.assign(Object.assign({}, obj), { [key]: renderTemplate(value, args, config) });
-+            return Object.assign(Object.assign({}, obj), { [key]: renderTemplate(value, argsAsObject, config) });
-         }, {});
-         debug('Rendering file: %o', file);
-         return {
-             file,
-             attributes: renderedAttrs,
--            body: renderTemplate(body, Object.assign(Object.assign({}, args), { attributes: renderedAttrs }), config),
-+            body: renderTemplate(body, Object.assign(Object.assign({}, argsAsObject), { attributes: renderedAttrs }), config),
-         };
-     }));
- });
-diff --git a/dist/types.d.ts b/dist/types.d.ts
-index c2d1f2c33b6a65d43121a0488e46b90b7871e50e..2ab5c977206bb97ee657db64c74691eea1a68945 100644
---- a/dist/types.d.ts
-+++ b/dist/types.d.ts
-@@ -14,7 +14,11 @@ export interface RenderedAction {
-     attributes: any;
-     body: string;
- }
--export interface RunnerConfig {
-+export interface RunnerConfig<Args = {
-+  dest: string;
-+  data: string;
-+  config: string
-+}> {
-     exec?: (sh: string, body: string) => void;
-     templates?: string;
-     cwd?: string;
-@@ -23,7 +27,9 @@ export interface RunnerConfig {
-     helpers?: any;
-     localsDefaults?: any;
-     createPrompter?: <Q, T>() => Prompter<Q, T>;
-+    writeFile?: (path: string, contents: string, args: Args) => Promise<void>;
- }
-+
- export interface ResolverIO {
-     exists: (arg0: string) => Promise<boolean>;
-     load: (arg0: string) => Promise<Record<string, any>>;
diff --git a/libs/codegen/project.json b/libs/codegen/project.json
index 7efd5cd7c8..eab5055529 100644
--- a/libs/codegen/project.json
+++ b/libs/codegen/project.json
@@ -28,9 +28,9 @@
       }
     },
     "update-packages-generic-bump": {
-      "command": "node ./src/release/updatePkgsForGenericBump.mjs",
+      "command": "node {projectRoot}/src/release/updatePkgsForGenericBump.mjs",
       "options": {
-        "cwd": "libs/codegen"
+        "cwd": "{workspaceRoot}"
       }
     },
     "mobile-routes": {
@@ -38,6 +38,12 @@
       "options": {
         "cwd": "libs/codegen"
       }
+    },
+    "icon-svg-map": {
+      "command": "tsx ./src/icons/generateIconSvgMap.ts",
+      "options": {
+        "cwd": "libs/codegen"
+      }
     }
   }
 }
diff --git a/libs/codegen/src/bin.ts b/libs/codegen/src/bin.ts
deleted file mode 100644
index 2857074da9..0000000000
--- a/libs/codegen/src/bin.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import parser from 'yargs-parser';
-
-import { codegen } from './codegen';
-
-// The first two items in process.argv is path to process and path of this file, which are not needed.
-const args = process.argv.slice(2);
-const { _: template, ...cliArgs } = parser(args);
-
-/**
- * Execute hygen via terminal with optional args.
- * Custom config for this CDS version of hygen can be found in codegen/config.ts file.
- * @example
- * ```sh
- * yarn codegen cli
- * ```
- * @link http://www.hygen.io/docs/generators#interactive-prompt
- */
-void codegen(template.join('/'), cliArgs);
diff --git a/libs/codegen/src/codegen.ts b/libs/codegen/src/codegen.ts
deleted file mode 100644
index 6735f788fd..0000000000
--- a/libs/codegen/src/codegen.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { runner } from 'hygen/dist/index';
-
-import { config } from './config';
-
-function parseArgs(template: string, opts: Record<string, unknown>) {
-  const [generator, action, subaction] = template.split('/');
-  const formattedOpts = Object.entries(opts).reduce((prev, [key, value]) => {
-    /** Hygen accepts args via cli which requires the value to be converted to a string */
-    const sanitizedValue = typeof value === 'object' ? JSON.stringify(value) : value;
-    return [...prev, `--${key}=${sanitizedValue}`];
-  }, [] as string[]);
-
-  return [generator, subaction ? `${action}:${subaction}` : action, ...formattedOpts];
-}
-
-export async function codegen<T>(template: string, opts?: T) {
-  await runner(parseArgs(template, opts ?? {}), config).then(({ failure }) => {
-    if (failure) {
-      process.exit(1);
-    }
-  });
-}
diff --git a/libs/codegen/src/config.ts b/libs/codegen/src/config.ts
deleted file mode 100644
index 0245d05c56..0000000000
--- a/libs/codegen/src/config.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { kebabCase, pascalCase, toCssVar, toCssVarFn } from '@coinbase/cds-utils';
-import enquirer from 'enquirer';
-import type { Options } from 'execa';
-import { command } from 'execa';
-import HygenLogger from 'hygen/dist/logger';
-import type { RunnerConfig } from 'hygen/dist/types';
-import lodash from 'lodash';
-import fs from 'node:fs';
-import path from 'node:path';
-
-import { formatTemplateType } from './utils/formatTemplateType';
-import { getHeaderCommentForFileType } from './utils/getHeaderCommentForFileType';
-import { getPrettierParser } from './utils/getPrettierParser';
-import { getSourcePath } from './utils/getSourcePath';
-import { writePrettyFile } from './utils/writePrettyFile';
-
-const root = process.env.PROJECT_CWD ?? process.env.NX_MONOREPO_ROOT;
-const templates = getSourcePath('libs/codegen/src/templates');
-
-const { camelCase } = lodash;
-
-const Logger = (HygenLogger as any).default as HygenLogger;
-
-type WriteFileConfig = {
-  defaultExport?: boolean;
-  commonJS?: boolean;
-  disableAsConst?: boolean;
-  disableStringify?: boolean;
-  disablePrettier?: boolean;
-  sort?: boolean;
-};
-
-/** Custom write file fn for hygen to format contents with prettier and add header comment. */
-async function writeFile(dest: string, contents: string, { config }: { config?: string }) {
-  const { disablePrettier } = (config ? JSON.parse(config) : {}) as WriteFileConfig;
-  try {
-    const ext = path.extname(dest);
-    const newContents = getHeaderCommentForFileType(ext) + contents;
-    const dirForFile = path.dirname(dest);
-    // If directory doesn't already exist, create it.
-    fs.mkdirSync(dirForFile, { recursive: true });
-    if (disablePrettier) {
-      await fs.promises.writeFile(dest, newContents, { encoding: 'utf8', flag: 'w' });
-    } else {
-      await writePrettyFile({
-        outFile: dest,
-        contents: newContents,
-        logInfo: false,
-        parser: getPrettierParser(ext),
-      });
-    }
-  } catch (error) {
-    if (error instanceof Error) {
-      console.error(error);
-      throw new Error(`Couldn't generate ${dest}.`);
-    } else {
-      throw error;
-    }
-  }
-}
-
-/** Accessible in templates directly.
- * @example
- * ```sh
- * ---
- * to: packages/common/src/internal/data/iconData.ts
- * force: true
- * ---
- * <%- include(partial.objectMap, { data: iconData }); %>
- * ```
- */
-const localsDefaults = {
-  partial: {
-    objectMap: path.join(templates, `partials/objectMap.ejs.t`),
-    typescript: path.join(templates, `partials/typescript.ejs.t`),
-  },
-};
-
-/**
- *
- * @param prefix - the prefix you want the css variable to use. This will be the broader cateogry a token belongs to like sizing or palette.
- * @param alias - the alias for this token. i.e. rounded or xs
- * @returns string - the final css variable
- */
-function getCssAlias(prefix: string, alias: string) {
-  return `${kebabCase(prefix)}-${alias}`;
-}
-
-function toCssVarSetter(prefix: string, alias: string) {
-  return toCssVar(getCssAlias(prefix, alias));
-}
-
-function toCssVarGetter(prefix: string, alias: string) {
-  return toCssVarFn(getCssAlias(prefix, alias));
-}
-
-/**
- * Add any helpers you want to have accessible in hygen templates i.e `h.camelCase`
- * @link http://www.hygen.io/docs/templates
- * @example
- * ```sh
- * ---
- * to: apps/website/docs/components/<%- h.pascalCase(name) %>.tsx
- * force: true
- * ---
- * ```
- */
-const helpers = {
-  camelCase,
-  kebabCase,
-  format: formatTemplateType,
-  pascalCase,
-  toCssVarGetter,
-  toCssVarSetter,
-};
-
-export const config: RunnerConfig = {
-  cwd: root,
-  templates,
-  // @ts-expect-error HygenLogger types are invalid
-  logger: new Logger(console.log.bind(console)),
-  debug: !!process.env.DEBUG,
-  exec: async (action: string, body: string) => {
-    const opts: Options<string> = { input: body && body.length > 0 ? body : '' };
-    return command(action, { ...opts, shell: true });
-  },
-  // @ts-expect-error Enquirer types are narrower then hygen prompter types
-  createPrompter: () => enquirer,
-  localsDefaults,
-  helpers,
-  writeFile,
-};
diff --git a/libs/codegen/src/icons/generateIconSvgMap.ts b/libs/codegen/src/icons/generateIconSvgMap.ts
new file mode 100644
index 0000000000..39899b444e
--- /dev/null
+++ b/libs/codegen/src/icons/generateIconSvgMap.ts
@@ -0,0 +1,71 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { getSourcePath } from '../utils/getSourcePath';
+import { writeFile } from '../utils/writeFile';
+
+const SVG_SOURCE_DIR = 'packages/icons/src/svgs';
+const OUTPUT_PATH = 'apps/expo-app/src/__generated__/iconSvgMap.ts';
+
+const HEADER = `/**
+ * DO NOT MODIFY
+ * This file is generated by libs/codegen/src/icons/generateIconSvgMap.ts
+ *
+ * Why this exists:
+ * - Provides a static map of icon names to their SVG content for rendering Icons directly with react-native-svg components
+ *
+ * What this provides:
+ * - A static map of iconName-12|16|24|32-active|inactive → { content: "svg-string" }
+ *
+ * Usage:
+ * - Access SVG string content via: svgMap['icon-name-12-active'].content
+ */`;
+
+export function generateIconSvgMap(): void {
+  console.log('Generating React Native SVG map...');
+
+  const svgDir = getSourcePath(SVG_SOURCE_DIR);
+  const svgFiles = fs
+    .readdirSync(svgDir)
+    .filter((file) => file.endsWith('.svg'))
+    .sort((a, b) => a.localeCompare(b));
+
+  if (svgFiles.length === 0) {
+    console.log('No SVG files found, skipping SVG map generation');
+    return;
+  }
+
+  const mapEntries = svgFiles.map((file) => {
+    const base = file.replace(/\.svg$/, '');
+    const svgContent = fs.readFileSync(path.join(svgDir, file), 'utf8');
+    const escaped = svgContent
+      .replace(/\\/g, '\\\\')
+      .replace(/"/g, '\\"')
+      .replace(/\n/g, '\\n')
+      .replace(/\r/g, '\\r');
+    return `  '${base}': { content: "${escaped}" },`;
+  });
+
+  const content = `${HEADER}
+
+export const svgMap: Record<string, SvgMapEntry> = {
+${mapEntries.join('\n')}
+} as const;
+
+export type SvgMapEntry = { content: string };
+export type SvgMap = Record<string, SvgMapEntry>;
+export type SvgKey = keyof typeof svgMap;
+
+export default svgMap;
+`;
+
+  void writeFile({
+    data: content,
+    dest: OUTPUT_PATH,
+    config: { disablePrettier: true },
+  }).then(() => {
+    console.log(`Generated React Native SVG map with ${svgFiles.length} entries -> ${OUTPUT_PATH}`);
+  });
+}
+
+generateIconSvgMap();
diff --git a/libs/codegen/src/playground/prepareRoutes.ts b/libs/codegen/src/playground/prepareRoutes.ts
index d4eb5cbb47..64cd5e87bc 100644
--- a/libs/codegen/src/playground/prepareRoutes.ts
+++ b/libs/codegen/src/playground/prepareRoutes.ts
@@ -5,20 +5,10 @@ import { getSourcePath } from '../utils/getSourcePath';
 import { writeFile } from '../utils/writeFile';
 
 /**
+ * Computes the package import path for a given story file path.
  *
- * We need to compute the relative path given a filePath. It should
- * be relative to the 'packages/mobile/examples' folder.
- *
- * Previously, we hardcoded the relative path in
- * mobileRoutes.ejs. But with more mobile packages, stories can be live in
- * other packages other than packages/mobile. Thus, adding '../' is
- * insufficient. You can't reach mobile-visualization by going 1 folder up from
- * 'packages/mobile/examples'. You need to go 2 folders up, so you need to
- * appending '../../' to the filePath. This function determines its folder and
- * computes the correct relative path.
- *
- * @param filePath The path of the file
- * @returns The relative path. It is relative to 'packages/mobile/examples'
+ * @param filePath The path of the file relative to packages/
+ * @returns The package import path (e.g. `@coinbase/cds-mobile/...`)
  */
 function getRelativePath(filePath: string) {
   const relativePath = filePath.replace('.tsx', '');
@@ -30,18 +20,12 @@ async function getRoutes() {
   try {
     const rootDir = getSourcePath('packages');
 
-    // Our stories may come from other packages not within mobile, so
-    // we are adding a new regular expression to capture stories that are
-    // in other mobile packages
-    const files = await glob(
-      ['**/(mobile|mobile-visualization)/src/**/__stories__/*.stories.(ts|tsx|js|jsx)'],
-      {
-        ignore: ['__tests__/*'],
-        onlyFiles: true,
-        cwd: rootDir,
-        absolute: false,
-      },
-    );
+    const files = await glob(['**/mobile/src/**/__stories__/*.stories.(ts|tsx|js|jsx)'], {
+      ignore: ['__tests__/*'],
+      onlyFiles: true,
+      cwd: rootDir,
+      absolute: false,
+    });
 
     const processedFiles = files
       .map((file) => {
@@ -69,48 +53,16 @@ export async function prepare() {
   try {
     const routes = await getRoutes();
 
-    const hotReloadRoutes = routes.map((route) => ({
-      name: route.name,
-      path: route.path,
-    }));
     const consumerRoutes = routes.map((route) => ({
       name: route.name,
       path: route.consumerPath,
     }));
 
-    // Write to ui-mobile-playground package. This includes the route paths that consumers would use.
-    await writeFile({
-      data: { routes: consumerRoutes },
-      template: 'mobileRoutes.ejs',
-      dest: `packages/ui-mobile-playground/src/routes.ts`,
-    });
-
-    // Write to mobile-app. This is required for hot reload - internal packages need src in path for hot reload, while consumers do not.
-    await writeFile({
-      data: { routes: hotReloadRoutes },
-      template: 'mobileRoutes.ejs',
-      dest: `apps/mobile-app/src/routes.ts`,
-    });
-
-    // Write to mobile-app. This is required for hot reload - internal packages need src in path for hot reload, while consumers do not.
-    await writeFile({
-      data: { routes: hotReloadRoutes },
-      template: 'mobileRoutes.ejs',
-      dest: `apps/mobile-app/src/routes.ts`,
-    });
-
-    // Write to mobile-app. This is required for evaluating which routes to run during visreg testing.
-    await writeFile({
-      data: { routes: consumerRoutes },
-      template: 'mobileRoutes.ejs',
-      dest: `apps/mobile-app/scripts/utils/routes.mjs`,
-    });
-
-    // Write to mobile-app. This is required for evaluating which routes to run during visreg testing.
+    // Write to expo-app for Expo demo app
     await writeFile({
       data: { routes: consumerRoutes },
       template: 'mobileRoutes.ejs',
-      dest: `apps/mobile-app/scripts/utils/routes.mjs`,
+      dest: `apps/expo-app/src/routes.ts`,
     });
   } catch (err) {
     if (err instanceof Error) {
diff --git a/libs/codegen/src/templates/partials/objectMap.ejs.t b/libs/codegen/src/templates/partials/objectMap.ejs.t
deleted file mode 100644
index 617d89a352..0000000000
--- a/libs/codegen/src/templates/partials/objectMap.ejs.t
+++ /dev/null
@@ -1,21 +0,0 @@
-<% 
-let config = locals.config || { commonJS: false, defaultExport: false, disableAsConst: false, sort: false }; 
-
-let types = locals.types || {};
-
-const prependedText = config.disableAsConst ? ';' : 'as const;';
-
-const items = config.sort ? Object.entries(data).sort(([prevKey], [nextKey]) => prevKey.localeCompare(nextKey)) : Object.entries(data);
-
-%>
-
-<% if (config.commonJS){ %>
-  module.exports = <%- JSON.stringify(data) %>
-<% } else if (config.defaultExport){ %>
-  export default <%- JSON.stringify(data) %> <%- prependedText %>
-<% } else { %>
-<%_ items.map(([name, value]) => { _%>
-  export const <%- name %><%- types[name] ? `: ${types[name]}` : `` %> = <%- JSON.stringify(value) %> <%- prependedText %>
-  
-<%_ }) _%> 
-<% } %>
\ No newline at end of file
diff --git a/libs/codegen/src/templates/partials/typescript.ejs.t b/libs/codegen/src/templates/partials/typescript.ejs.t
deleted file mode 100644
index a2fbff0240..0000000000
--- a/libs/codegen/src/templates/partials/typescript.ejs.t
+++ /dev/null
@@ -1,11 +0,0 @@
-<% if(data){ %>
-  <%_ Object.entries(data).map(([name, value]) => { _%>
-    <% if(typeof value === 'object' && value.length){ %>
-      export type <%- name %> = <%- value.map(h.format).join('|') -%>;
-    <% } %>
-    <% if(typeof value === 'string'){ %>
-      export type <%- name %> = <%- value %>;
-    <% } %>
-
-  <%_ }) _%>
-<% } %>
\ No newline at end of file
diff --git a/libs/codegen/src/utils/getHeaderCommentForFileType.ts b/libs/codegen/src/utils/getHeaderCommentForFileType.ts
index c0a26fa486..0911ef78df 100644
--- a/libs/codegen/src/utils/getHeaderCommentForFileType.ts
+++ b/libs/codegen/src/utils/getHeaderCommentForFileType.ts
@@ -10,7 +10,7 @@ export const getHeaderCommentForFileType = (ext: string) => {
       return `
 /**
  * DO NOT MODIFY
- * Generated from scripts/codegen/main.ts
+ * Generated from libs/codegen
  */
 `;
   }
diff --git a/libs/docusaurus-plugin-docgen/package.json b/libs/docusaurus-plugin-docgen/package.json
index 5e988e810a..89d5e0da1d 100644
--- a/libs/docusaurus-plugin-docgen/package.json
+++ b/libs/docusaurus-plugin-docgen/package.json
@@ -46,10 +46,14 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1",
     "@docusaurus/types": "~3.7.0",
     "@types/ejs": "^3.1.0",
-    "@types/lodash": "^4.14.178"
+    "@types/lodash": "^4.14.178",
+    "fast-glob": "^3.2.11",
+    "lodash": "^4.17.21",
+    "prettier": "^3.6.2",
+    "type-fest": "^2.19.0"
   }
 }
diff --git a/libs/docusaurus-plugin-kbar/package.json b/libs/docusaurus-plugin-kbar/package.json
index 6d32eeef4a..aa9487fbaa 100644
--- a/libs/docusaurus-plugin-kbar/package.json
+++ b/libs/docusaurus-plugin-kbar/package.json
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1"
   }
 }
diff --git a/libs/docusaurus-plugin-llm-dev-server/package.json b/libs/docusaurus-plugin-llm-dev-server/package.json
index a5140a1d2e..84bc994fb1 100644
--- a/libs/docusaurus-plugin-llm-dev-server/package.json
+++ b/libs/docusaurus-plugin-llm-dev-server/package.json
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1",
     "@docusaurus/types": "~3.7.0",
     "@types/express": "^4.17.21"
diff --git a/libs/eslint-plugin-internal/README.md b/libs/eslint-plugin-internal/README.md
index 9fdc7a32a8..553a2375a8 100644
--- a/libs/eslint-plugin-internal/README.md
+++ b/libs/eslint-plugin-internal/README.md
@@ -100,6 +100,16 @@ We have encountered situations where developers accidentally forgot to destructu
 
 At this time this rule is intended to only be used within this repo in the cds-web and cds-mobile packages. However, after a trial period we may consider opening it up to a wider audience.
 
+## spread-props-last
+
+Requires JSX spread props that come from a component's own `props` parameter to appear after all explicit JSX props in an element.
+
+This helps avoid accidental prop overrides and keeps prop ordering predictable:
+
+- Good: `<Button variant="primary" disabled {...props} />`
+- Bad: `<Button {...props} variant="primary" disabled />`
+- Supports autofix by moving the relevant spread props to the end of the JSX attributes.
+
 ## example-screen-default
 
 Ensures every Storybook file default-exports a component whose rendered output is rooted in `ExampleScreen`. This keeps documentation consistent and aligns with the patterns showcased in the mobile package.
diff --git a/libs/eslint-plugin-internal/src/figma-connect-imports-package-match/index.test.mjs b/libs/eslint-plugin-internal/src/figma-connect-imports-package-match/index.test.mjs
index 87cd1d239e..a5fc955980 100644
--- a/libs/eslint-plugin-internal/src/figma-connect-imports-package-match/index.test.mjs
+++ b/libs/eslint-plugin-internal/src/figma-connect-imports-package-match/index.test.mjs
@@ -1,8 +1,7 @@
+import { RuleTester } from '@typescript-eslint/rule-tester';
 import fs from 'fs';
 import path from 'path';
 
-import { RuleTester } from '@typescript-eslint/rule-tester';
-
 import rule from './index.mjs';
 
 RuleTester.afterAll = afterAll;
@@ -31,21 +30,14 @@ describe("'figma-connect-imports-package-match' rule", () => {
     fs.existsSync = (filePath) => {
       if (filePath.endsWith('package.json')) {
         // Return true for our test package paths
-        if (
-          filePath.includes('/packages/web/') ||
-          filePath.includes('/packages/mobile/') ||
-          filePath.includes('/packages/web-visualization/') ||
-          filePath.includes('/packages/mobile-visualization/')
-        ) {
+        if (filePath.includes('/packages/web/') || filePath.includes('/packages/mobile/')) {
           return true;
         }
         // Check if it's a direct package.json path we want to mock
         const normalizedPath = filePath.replace(/\\/g, '/');
         if (
           normalizedPath === '/project/packages/web/package.json' ||
-          normalizedPath === '/project/packages/mobile/package.json' ||
-          normalizedPath === '/project/packages/web-visualization/package.json' ||
-          normalizedPath === '/project/packages/mobile-visualization/package.json'
+          normalizedPath === '/project/packages/mobile/package.json'
         ) {
           return true;
         }
@@ -62,12 +54,6 @@ describe("'figma-connect-imports-package-match' rule", () => {
       if (normalizedPath.includes('/packages/mobile/package.json')) {
         return JSON.stringify({ name: '@coinbase/cds-mobile' });
       }
-      if (normalizedPath.includes('/packages/web-visualization/package.json')) {
-        return JSON.stringify({ name: '@coinbase/cds-web-visualization' });
-      }
-      if (normalizedPath.includes('/packages/mobile-visualization/package.json')) {
-        return JSON.stringify({ name: '@coinbase/cds-mobile-visualization' });
-      }
 
       return originalReadFileSync(filePath, encoding);
     };
@@ -116,14 +102,15 @@ describe("'figma-connect-imports-package-match' rule", () => {
 
           figma.connect(Sparkline, 'https://figma.com/design/abc', {
             imports: [
-              "import { Sparkline } from '@coinbase/cds-web-visualization';",
+              "import { Sparkline } from '@coinbase/cds-web/visualizations/sparkline';",
               "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';",
             ],
             props: {},
             example: () => <Sparkline />,
           });
         `,
-        filename: '/project/packages/web-visualization/src/sparkline/__figma__/Sparkline.figma.tsx',
+        filename:
+          '/project/packages/web/src/visualizations/sparkline/__figma__/Sparkline.figma.tsx',
       },
       {
         // Valid: not a figma.connect call (should be ignored)
diff --git a/libs/eslint-plugin-internal/src/index.mjs b/libs/eslint-plugin-internal/src/index.mjs
index 84dfec0f75..0df7fc474c 100644
--- a/libs/eslint-plugin-internal/src/index.mjs
+++ b/libs/eslint-plugin-internal/src/index.mjs
@@ -7,6 +7,7 @@ import noDeprecatedJsdocRule from './no-deprecated-jsdoc/index.mjs';
 import noObjectRestSpreadInWorkletRule from './no-object-rest-spread-in-worklet/index.mjs';
 import { processor as noTypescriptInJsxCodeblockProcessor } from './no-typescript-in-jsx-codeblock/index.mjs';
 import safelySpreadPropsRule from './safely-spread-props/index.mjs';
+import spreadPropsLastRule from './spread-props-last/index.mjs';
 
 const plugin = {
   name: '@coinbase/eslint-plugin-internal',
@@ -19,6 +20,7 @@ const plugin = {
     'no-object-rest-spread-in-worklet': noObjectRestSpreadInWorkletRule,
     'figma-connect-imports-required': figmaConnectImportsRequiredRule,
     'figma-connect-imports-package-match': figmaConnectImportsPackageMatchRule,
+    'spread-props-last': spreadPropsLastRule,
   },
   processors: {
     mdx: noTypescriptInJsxCodeblockProcessor,
diff --git a/libs/eslint-plugin-internal/src/spread-props-last/index.mjs b/libs/eslint-plugin-internal/src/spread-props-last/index.mjs
new file mode 100644
index 0000000000..3dd5eee8f4
--- /dev/null
+++ b/libs/eslint-plugin-internal/src/spread-props-last/index.mjs
@@ -0,0 +1,282 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+
+const createRule = ESLintUtils.RuleCreator(() => null);
+const componentWrapperNames = new Set(['memo', 'forwardRef']);
+
+const isFunctionNode = (node) =>
+  node?.type === 'FunctionDeclaration' ||
+  node?.type === 'FunctionExpression' ||
+  node?.type === 'ArrowFunctionExpression';
+
+const isPascalCase = (name) => /^[A-Z]/.test(name);
+
+const isComponentWrapperCall = (node) => {
+  if (!node || node.type !== 'CallExpression') {
+    return false;
+  }
+
+  if (node.callee.type === 'Identifier') {
+    return componentWrapperNames.has(node.callee.name);
+  }
+
+  if (
+    node.callee.type === 'MemberExpression' &&
+    !node.callee.computed &&
+    node.callee.property.type === 'Identifier'
+  ) {
+    return componentWrapperNames.has(node.callee.property.name);
+  }
+
+  return false;
+};
+
+const getNearestFunctionAncestor = (node) => {
+  let current = node;
+
+  while (current) {
+    if (isFunctionNode(current)) {
+      return current;
+    }
+
+    current = current.parent;
+  }
+
+  return null;
+};
+
+const getFirstParamSpreadablePropNames = (functionNode) => {
+  const names = new Set();
+  const firstParam = functionNode?.params?.[0];
+
+  const collectNames = (paramNode) => {
+    if (!paramNode) {
+      return;
+    }
+
+    if (paramNode.type === 'Identifier') {
+      names.add(paramNode.name);
+      return;
+    }
+
+    if (paramNode.type === 'AssignmentPattern') {
+      collectNames(paramNode.left);
+      return;
+    }
+
+    if (paramNode.type === 'ObjectPattern') {
+      for (const property of paramNode.properties) {
+        if (property.type === 'RestElement') {
+          collectNames(property.argument);
+        }
+      }
+      return;
+    }
+
+    if (paramNode.type === 'RestElement') {
+      collectNames(paramNode.argument);
+    }
+  };
+
+  collectNames(firstParam);
+
+  return names;
+};
+
+const isComponentFunction = (functionNode) => {
+  if (!functionNode) {
+    return false;
+  }
+
+  if (
+    (functionNode.type === 'FunctionDeclaration' || functionNode.type === 'FunctionExpression') &&
+    functionNode.id?.type === 'Identifier' &&
+    isPascalCase(functionNode.id.name)
+  ) {
+    return true;
+  }
+
+  let current = functionNode;
+
+  while (current?.parent) {
+    const parent = current.parent;
+
+    if (parent.type === 'VariableDeclarator' && parent.id.type === 'Identifier') {
+      return isPascalCase(parent.id.name);
+    }
+
+    if (
+      parent.type === 'CallExpression' &&
+      parent.arguments.includes(current) &&
+      isComponentWrapperCall(parent)
+    ) {
+      current = parent;
+      continue;
+    }
+
+    if (parent.type === 'ExportDefaultDeclaration') {
+      return true;
+    }
+
+    return false;
+  }
+
+  return false;
+};
+
+const resolveVariableFromIdentifier = (context, identifierNode) => {
+  const sourceCode = context.sourceCode ?? context.getSourceCode?.();
+  const scope = sourceCode?.getScope?.(identifierNode);
+
+  if (!scope) {
+    return null;
+  }
+
+  let currentScope = scope;
+  while (currentScope) {
+    const reference = currentScope.references.find((candidate) => {
+      return candidate.identifier === identifierNode;
+    });
+
+    if (reference) {
+      return reference.resolved ?? null;
+    }
+
+    currentScope = currentScope.upper;
+  }
+
+  return null;
+};
+
+const isSpreadFromComponentProps = (context, spreadAttribute) => {
+  if (spreadAttribute.argument.type !== 'Identifier') {
+    return false;
+  }
+
+  const variable = resolveVariableFromIdentifier(context, spreadAttribute.argument);
+  if (!variable) {
+    return false;
+  }
+
+  const parameterDef = variable.defs.find((definition) => definition.type === 'Parameter');
+  if (!parameterDef?.name) {
+    return false;
+  }
+
+  const definingFunction = getNearestFunctionAncestor(parameterDef.name);
+  if (!isComponentFunction(definingFunction)) {
+    return false;
+  }
+
+  const spreadablePropNames = getFirstParamSpreadablePropNames(definingFunction);
+  return spreadablePropNames.has(variable.name);
+};
+
+const rule = createRule({
+  name: 'spread-props-last',
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    docs: {
+      description:
+        "Require JSX spreads sourced from a component's own props to be listed after explicit props",
+      recommended: 'error',
+    },
+    schema: [],
+    messages: {
+      spreadPropsMustBeLast:
+        'Place JSX spread props at the end of the element so explicit props are defined first.',
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode?.();
+
+    return {
+      JSXOpeningElement(node) {
+        const { attributes } = node;
+
+        let lastNamedAttributeIndex = -1;
+        for (let index = attributes.length - 1; index >= 0; index -= 1) {
+          if (attributes[index].type === 'JSXAttribute') {
+            lastNamedAttributeIndex = index;
+            break;
+          }
+        }
+
+        if (lastNamedAttributeIndex === -1) {
+          return;
+        }
+
+        const offendingSpreadIndices = [];
+
+        for (let index = 0; index <= lastNamedAttributeIndex; index += 1) {
+          const attribute = attributes[index];
+          if (attribute.type !== 'JSXSpreadAttribute') {
+            continue;
+          }
+
+          if (!isSpreadFromComponentProps(context, attribute)) {
+            continue;
+          }
+          offendingSpreadIndices.push(index);
+        }
+
+        if (offendingSpreadIndices.length === 0) {
+          return;
+        }
+
+        const firstOffendingSpread = attributes[offendingSpreadIndices[0]];
+        const firstAttribute = attributes[0];
+        const lastAttribute = attributes[attributes.length - 1];
+
+        context.report({
+          node: firstOffendingSpread,
+          messageId: 'spreadPropsMustBeLast',
+          fix(fixer) {
+            if (!sourceCode?.text || !firstAttribute?.range || !lastAttribute?.range) {
+              return null;
+            }
+
+            const attributesText = sourceCode.text.slice(
+              firstAttribute.range[0],
+              lastAttribute.range[1],
+            );
+            // Skip autofix when comments are mixed into attributes because a safe reorder
+            // would require comment-aware placement.
+            if (attributesText.includes('/*') || attributesText.includes('//')) {
+              return null;
+            }
+
+            const movedSpreadSet = new Set(offendingSpreadIndices);
+            const fixedOrder = [];
+            const movedSpreads = [];
+
+            for (let index = 0; index < attributes.length; index += 1) {
+              const attribute = attributes[index];
+              if (movedSpreadSet.has(index)) {
+                movedSpreads.push(sourceCode.getText(attribute));
+                continue;
+              }
+
+              fixedOrder.push(sourceCode.getText(attribute));
+            }
+
+            fixedOrder.push(...movedSpreads);
+
+            const multiline = attributesText.includes('\n');
+            const indent = ' '.repeat(firstAttribute.loc.start.column);
+            const joiner = multiline ? `\n${indent}` : ' ';
+            const replacement = fixedOrder.join(joiner);
+
+            return fixer.replaceTextRange(
+              [firstAttribute.range[0], lastAttribute.range[1]],
+              replacement,
+            );
+          },
+        });
+      },
+    };
+  },
+});
+
+export default rule;
diff --git a/libs/eslint-plugin-internal/src/spread-props-last/index.test.mjs b/libs/eslint-plugin-internal/src/spread-props-last/index.test.mjs
new file mode 100644
index 0000000000..392781c137
--- /dev/null
+++ b/libs/eslint-plugin-internal/src/spread-props-last/index.test.mjs
@@ -0,0 +1,162 @@
+import { RuleTester } from '@typescript-eslint/rule-tester';
+
+import rule from './index.mjs';
+
+RuleTester.afterAll = afterAll;
+RuleTester.describe = describe;
+RuleTester.it = it;
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+});
+
+describe("'spread-props-last' rule", () => {
+  ruleTester.run('spread-props-last', rule, {
+    valid: [
+      {
+        code: `
+          const Component = (props) => (
+            <RenderedTab
+              data-rendered-tab
+              className="className"
+              tabIndex={0}
+              {...props}
+            />
+          );
+        `,
+        filename: 'valid-props-last.tsx',
+      },
+      {
+        code: `
+          const Component = () => {
+            const animationProps = { animate: { opacity: 1 } };
+            return <Button {...animationProps} testID="foo" />;
+          };
+        `,
+        filename: 'valid-non-component-props-spread.tsx',
+      },
+      {
+        code: `
+          const Component = ({ role }) => {
+            const roleBasedA11yProps =
+              role === 'radiogroup'
+                ? { 'aria-checked': true }
+                : { 'aria-selected': true };
+
+            return <Pressable {...roleBasedA11yProps} background="transparent" />;
+          };
+        `,
+        filename: 'valid-local-helper-spread.tsx',
+      },
+      {
+        code: `
+          const Component = ({ tabs }) => {
+            const getChildren = ({ label, ...props }) => {
+              return <TabLabel active={props.id === 'tab-1'} {...props} variant="primary">{label}</TabLabel>;
+            };
+
+            return tabs.map(getChildren);
+          };
+        `,
+        filename: 'valid-inner-callback-rest-props.tsx',
+      },
+      {
+        code: `
+          const Component = ({ size, strokeWidth }) => (
+            <circle
+              {...getProgressCircleParams({ size, strokeWidth })}
+              className="circle"
+            />
+          );
+        `,
+        filename: 'valid-function-call-spread.tsx',
+      },
+      {
+        code: `
+          const Component = () => <Button variant="primary" disabled />;
+        `,
+        filename: 'valid-no-spread.tsx',
+      },
+    ],
+    invalid: [
+      {
+        code: `
+          const Component = (props) => (
+            <RenderedTab
+              {...props}
+              data-rendered-tab
+              className="className"
+            />
+          );
+        `,
+        output: `
+          const Component = (props) => (
+            <RenderedTab
+              data-rendered-tab
+              className="className"
+              {...props}
+            />
+          );
+        `,
+        filename: 'invalid-spread-before-named-props.tsx',
+        errors: [{ messageId: 'spreadPropsMustBeLast' }],
+      },
+      {
+        code: `
+          const Component = ({ testID, ...props }) => (
+            <VStack testID={testID} {...props} padding={0} />
+          );
+        `,
+        output: `
+          const Component = ({ testID, ...props }) => (
+            <VStack testID={testID} padding={0} {...props} />
+          );
+        `,
+        filename: 'invalid-destructured-rest-props.tsx',
+        errors: [{ messageId: 'spreadPropsMustBeLast' }],
+      },
+      {
+        code: `
+          const Component = (props) => {
+            const tabs = ['a'];
+            return tabs.map((tab) => <Button key={tab} {...props} disabled />);
+          };
+        `,
+        output: `
+          const Component = (props) => {
+            const tabs = ['a'];
+            return tabs.map((tab) => <Button key={tab} disabled {...props} />);
+          };
+        `,
+        filename: 'invalid-outer-component-props-in-callback.tsx',
+        errors: [{ messageId: 'spreadPropsMustBeLast' }],
+      },
+      {
+        code: `
+          const TabNavigationComponent = memo(
+            forwardRef(({ testID, ...props }, ref) => {
+              return <VStack testID={testID} {...props} padding={0} ref={ref} />;
+            }),
+          );
+        `,
+        output: `
+          const TabNavigationComponent = memo(
+            forwardRef(({ testID, ...props }, ref) => {
+              return <VStack testID={testID} padding={0} ref={ref} {...props} />;
+            }),
+          );
+        `,
+        filename: 'invalid-forward-ref-component-props.tsx',
+        errors: [{ messageId: 'spreadPropsMustBeLast' }],
+      },
+    ],
+  });
+});
diff --git a/libs/web-utils/package.json b/libs/web-utils/package.json
index cab3cdf320..5ac4ac21e1 100644
--- a/libs/web-utils/package.json
+++ b/libs/web-utils/package.json
@@ -32,9 +32,6 @@
     "CHANGELOG"
   ],
   "dependencies": {
-    "@babel/types": "^7.20.7",
-    "@linaria/babel-preset": "^3.0.0-beta.22",
-    "@testing-library/react": "^16.0.1",
     "chalk": "^4.1.2",
     "jest-axe": "^10.0.0",
     "source-map": "^0.7.3",
@@ -44,7 +41,10 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1"
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.27.1",
+    "@babel/types": "^7.20.7",
+    "@linaria/babel-preset": "^3.0.0-beta.22",
+    "@testing-library/react": "^16.3.2"
   }
 }
diff --git a/package.json b/package.json
index 7f006e0a12..f1b4a3edd6 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,6 @@
     "clean-dist-outs": "rm -rf packages/*/dist || true",
     "reset-nx-daemon": "nx reset",
     "clean": "yarn clean-nx-dir && yarn clean-packemon-outs && yarn clean-dist-outs && yarn reset-nx-daemon",
-    "clean-expo": "rm -rf apps/mobile-app/ios && rm -rf apps/mobile-app/android && rm -rf apps/mobile-app/.expo",
     "release": "node tools/ci/validators/validateVersioned.mjs && yarn nx run codegen:update-packages-generic-bump && node ./tools/validateCDSVersions.mjs",
     "generate-tarballs": "node tools/generateTarballs.mjs",
     "audit-figma-integration": "node scripts/auditFigmaIntegration/index.mjs",
@@ -68,39 +67,39 @@
     "perf:component-config": "yarn exec jest --config packages/web/jest.config.js --runTestsByPath packages/web/src/perf/component-config/Button.component-config.perf-test.tsx packages/web/src/perf/component-config/ComponentConfigProvider.perf-test.tsx packages/web/src/perf/component-config/ComponentConfigStickerSheet.perf-test.tsx --testMatch='**/*.perf-test.tsx' && yarn exec jest --config packages/mobile/jest.config.js --runTestsByPath packages/mobile/src/perf/component-config/Button.component-config.perf-test.tsx packages/mobile/src/perf/component-config/ComponentConfigProvider.perf-test.tsx packages/mobile/src/perf/component-config/ComponentConfigStickerSheet.perf-test.tsx --testMatch='**/*.perf-test.tsx'"
   },
   "resolutions": {
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
     "@testing-library/user-event@^14.0.4": "patch:@testing-library/user-event@npm:14.0.4#.yarn/patches/@testing-library-user-event-npm-14.0.4-109d618170",
     "framer-motion@^10.18.0": "patch:framer-motion@npm:10.18.0#.yarn/patches/framer-motion-npm-10.18.0-ae9ea02138",
-    "@expo/cli": "patch:@expo/cli@npm:0.18.29#.yarn/patches/@expo-cli-npm-0.18.29-f58906fdfb.patch",
-    "react-native": "patch:react-native@npm:0.74.5#.yarn/patches/react-native-npm-0.74.5-db5164f47b.patch",
-    "react-native-gesture-handler": "patch:react-native-gesture-handler@npm:2.16.2#.yarn/patches/react-native-gesture-handler-npm-2.16.2-c16529326b.patch",
-    "expo-splash-screen": "patch:expo-splash-screen@npm:0.27.5#.yarn/patches/expo-splash-screen-npm-0.27.5-f91e0b41df.patch",
     "react-native-navigation-bar-color": "patch:react-native-navigation-bar-color@npm:2.0.2#.yarn/patches/react-native-navigation-bar-color-npm-2.0.2-9a2ea3aaf6.patch",
-    "expo-dev-launcher": "patch:expo-dev-launcher@npm:4.0.27#.yarn/patches/expo-dev-launcher-npm-4.0.27-c2ab5dd4a5.patch",
+    "@expo/cli": "patch:@expo/cli@npm:54.0.22#.yarn/patches/@expo-cli-npm-54.0.22-eb5155f2b5.patch",
+    "@expo/metro-config": "patch:@expo/metro-config@npm:54.0.14#.yarn/patches/@expo-metro-config-npm-54.0.14-88915da766.patch",
+    "react-native": "patch:react-native@npm:0.81.5#.yarn/patches/react-native-npm-0.81.5-0a0008b930.patch",
+    "expo-modules-core": "patch:expo-modules-core@npm:3.0.29#.yarn/patches/expo-modules-core-npm-3.0.29-7b93dc0961.patch",
     "react-helmet-async": "^2.0.5",
     "ajv@^6.0.0": "^6.14.0",
     "elliptic": "^6.6.0",
     "ip": "^2.0.1",
     "minimatch": "^10.2.4",
-    "glob@7.1.6": "patch:glob@npm:7.1.6#.yarn/patches/glob-npm-7.1.6-minimatch10-symbol.patch",
     "koa": "^3.1.2",
     "tar": "^7.5.12",
     "bn.js": "^5.2.3"
   },
   "resolutionComments": {
+    "@types/react": "Forces a single version across all packages to prevent dual React types. Without this, dependencies like @docusaurus/types resolve a nested @types/react@18 which conflicts with React 19 types.",
+    "@types/react-dom": "Forces a single version across all packages to prevent dual React types. Without this, dependencies like @docusaurus/types resolve a nested @types/react@18 which conflicts with React 19 types.",
     "@testing-library/user-event@^14.0.4": "Create subpath export for types.",
     "framer-motion@^10.18.0": "Export missing types",
-    "@expo/cli": "[Managed by CMR] Necessary to use the proper appId when opening the app via Expo CLI shortcuts `i` or `a`. Handle tar v7 compatibility (tar v7 sets __esModule:true with no default export).",
-    "react-native": "[Managed by CMR] Fixes bug presenting a modal on iOS.",
-    "react-native-gesture-handler": "[Managed by CMR] Fix performance regression. Can remove once upgrading to version 2.18.0",
-    "expo-splash-screen": "[Managed by CMR] Adds support for transitions and bottom images in the splash screen. We aim to upstream some of those improvements to Expo.",
     "react-native-navigation-bar-color": "[Managed by CMR] Promisify react-native-navigation-bar-color.",
-    "expo-dev-launcher": "[Managed by CMR] Necessary to install the Expo network inspector for the Android `development` build type. Issue tracked internally by Expo.",
+    "@expo/cli": "[Managed by CMR] Necessary to use the proper appId when opening the app via Expo CLI shortcuts `i` or `a`",
+    "@expo/metro-config": "[Managed by CMR] Fixes Expo serializer to pick up custom defined env variables to be used in the app",
+    "react-native": "[Managed by CMR] Fixes bug presenting a modal on iOS (See https://github.cbhq.net/consumer/react-native/pull/30568). Allows to use React 19.1.2 due to a high severity security vulnerability.",
+    "expo-modules-core": "[Managed by CMR] Avoid initializing EXJavaScriptRuntimeManager runtimeFromBridge from the main thread on iOS to avoid JSI crash",
     "react-helmet-async": "Working around Nx graph resolution issue",
     "ajv": "Request from Coinbase Security team to fix security vulnerability",
     "elliptic": "Request from Coinbase Security team to fix security vulnerability",
     "ip": "Request from Coinbase Security team to fix security vulnerability",
     "minimatch": "Request from Coinbase Security team to fix security vulnerability",
-    "glob@7.1.6": "Handle minimatch@10's Symbol(GLOBSTAR) in pattern arrays (used by @expo/config). Avoids 'Cannot convert a Symbol value to a string' when starting Expo.",
     "koa": "Request from Coinbase Security team to fix security vulnerability",
     "tar": "Request from Coinbase Security team to fix security vulnerability",
     "bn.js": "Request from Coinbase Security team to fix security vulnerability"
@@ -119,9 +118,8 @@
     "@babel/plugin-external-helpers": "^7.18.6",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1",
     "@babel/register": "^7.18.9",
     "@babel/runtime": "^7.28.2",
@@ -139,10 +137,6 @@
     "@nx/jest": "20.8.2",
     "@nx/workspace": "20.8.2",
     "@parcel/css-cli": "^1.9.0",
-    "@testing-library/jest-native": "^5.4.3",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.0.4",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",
     "@types/d3-interpolate": "^3.0.4",
@@ -160,9 +154,7 @@
     "@types/lodash": "^4.14.178",
     "@types/mini-css-extract-plugin": "^2.2.0",
     "@types/node": "^22",
-    "@types/react-is": "^17.0.2",
     "@types/react-router-dom": "^5.2.0",
-    "@types/react-test-renderer": "^18.3.0",
     "@types/react-virtualized": "^9.21.13",
     "@types/semver": "^7",
     "@types/url-parse": "^1.4.3",
@@ -185,13 +177,13 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-native": "^5.0.0",
     "eslint-plugin-react-native-a11y": "^3.5.1",
     "eslint-plugin-react-perf": "^3.3.3",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^9.1.2",
+    "eslint-plugin-storybook": "9.1.17",
     "eslint-plugin-testing-library": "^7.1.1",
     "execa": "^5.1.1",
     "fast-glob": "^3.2.11",
@@ -210,7 +202,6 @@
     "postcss-sort-media-queries": "^4.2.1",
     "postcss-styled-syntax": "^0.7.1",
     "prettier": "^3.6.2",
-    "react-test-renderer": "^18.3.1",
     "reassure": "^0.7.1",
     "shelljs": "^0.8.5",
     "simple-git": "^3.19.1",
diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md
index c7ed06e1e2..447b4a3d9c 100644
--- a/packages/common/CHANGELOG.md
+++ b/packages/common/CHANGELOG.md
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.0.0 (5/20/2026 PST)
+
+CDS 9 is here!!
+
+For more details and to help upgrading from CDS 8 using our automated migration tool, see our official [upgrade guide](https://cds.coinbase.com/guides/v9-upgrade-guide)!
+
+#### 💥 Breaking
+
+- Dropped various deprecated variables and utilities.
+- Read our upgrade guilde for more details!
+-
+
 ## 8.75.2 ((5/19/2026, 01:13 PM PST))
 
 This is an artificial version bump with no new change.
diff --git a/packages/common/package.json b/packages/common/package.json
index 8be15dc79b..024cfa3987 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "8.75.2",
+  "version": "9.0.0",
   "description": "Coinbase Design System - Common",
   "repository": {
     "type": "git",
@@ -34,8 +34,7 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
     "@coinbase/cds-icons": "workspace:^",
@@ -49,16 +48,18 @@
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "lodash": "^4.17.21",
-    "react-is": "^17.0.2",
+    "react-is": "19.1.2",
     "type-fest": "^2.19.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1",
-    "@types/react": "^18.3.12",
-    "jest-date-mock": "^1.0.8"
+    "@types/react": "19.1.2",
+    "@types/react-is": "^19.0.0",
+    "jest-date-mock": "^1.0.8",
+    "react": "19.1.2"
   }
 }
diff --git a/packages/common/src/accordion/__tests__/AccordionProvider.test.tsx b/packages/common/src/accordion/__tests__/AccordionProvider.test.tsx
index 17541ac6c6..c31287b336 100644
--- a/packages/common/src/accordion/__tests__/AccordionProvider.test.tsx
+++ b/packages/common/src/accordion/__tests__/AccordionProvider.test.tsx
@@ -1,5 +1,5 @@
 import React, { act } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import {
   AccordionProvider,
diff --git a/packages/common/src/carousel/__tests__/useCarouselAutoplay.test.ts b/packages/common/src/carousel/__tests__/useCarouselAutoplay.test.ts
index 2aed327576..d75835c2a1 100644
--- a/packages/common/src/carousel/__tests__/useCarouselAutoplay.test.ts
+++ b/packages/common/src/carousel/__tests__/useCarouselAutoplay.test.ts
@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 
 import type { CarouselAutoplayOptions } from '../useCarouselAutoplay';
 import { useCarouselAutoplay } from '../useCarouselAutoplay';
diff --git a/packages/common/src/dates/__tests__/useDateInput.test.ts b/packages/common/src/dates/__tests__/useDateInput.test.ts
index 0263108bf3..b06f24b34a 100644
--- a/packages/common/src/dates/__tests__/useDateInput.test.ts
+++ b/packages/common/src/dates/__tests__/useDateInput.test.ts
@@ -1,5 +1,5 @@
 import { act } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { DateInputValidationError } from '../DateInputValidationError';
 import { IntlDateFormat } from '../IntlDateFormat';
diff --git a/packages/common/src/hooks/__tests__/useFallbackShape.test.ts b/packages/common/src/hooks/__tests__/useFallbackShape.test.ts
index 46a4ec21df..0c2e7aa76b 100644
--- a/packages/common/src/hooks/__tests__/useFallbackShape.test.ts
+++ b/packages/common/src/hooks/__tests__/useFallbackShape.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useFallbackShape } from '../useFallbackShape';
 
diff --git a/packages/common/src/hooks/__tests__/useMergeRefs.test.ts b/packages/common/src/hooks/__tests__/useMergeRefs.test.ts
deleted file mode 100644
index a2a353b6f4..0000000000
--- a/packages/common/src/hooks/__tests__/useMergeRefs.test.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { createRef, useRef } from 'react';
-import { renderHook } from '@testing-library/react';
-
-import { useMergeRefs } from '../useMergeRefs';
-
-describe('useMergeRefs', () => {
-  it('writes the value to all object refs', () => {
-    const refA = createRef<HTMLDivElement>();
-    const refB = createRef<HTMLDivElement>();
-    const node = document.createElement('div');
-
-    const { result } = renderHook(() => useMergeRefs(refA, refB));
-    result.current(node);
-
-    expect(refA.current).toBe(node);
-    expect(refB.current).toBe(node);
-  });
-
-  it('invokes function refs with the value', () => {
-    const fnRefA = jest.fn();
-    const fnRefB = jest.fn();
-    const node = document.createElement('div');
-
-    const { result } = renderHook(() => useMergeRefs(fnRefA, fnRefB));
-    result.current(node);
-
-    expect(fnRefA).toHaveBeenCalledWith(node);
-    expect(fnRefB).toHaveBeenCalledWith(node);
-  });
-
-  it('safely ignores null and undefined refs', () => {
-    const ref = createRef<HTMLDivElement>();
-    const node = document.createElement('div');
-
-    const { result } = renderHook(() => useMergeRefs<HTMLDivElement>(ref, null, undefined));
-    expect(() => result.current(node)).not.toThrow();
-    expect(ref.current).toBe(node);
-  });
-
-  it('returns a stable callback when underlying refs do not change', () => {
-    const refA = createRef<HTMLDivElement>();
-    const refB = createRef<HTMLDivElement>();
-
-    const { result, rerender } = renderHook(() => useMergeRefs(refA, refB));
-    const firstCallback = result.current;
-
-    rerender();
-    expect(result.current).toBe(firstCallback);
-
-    rerender();
-    expect(result.current).toBe(firstCallback);
-  });
-
-  it('returns a new callback when an underlying ref changes identity', () => {
-    const stableRef = createRef<HTMLDivElement>();
-
-    const { result, rerender } = renderHook(
-      ({ otherRef }: { otherRef: React.Ref<HTMLDivElement> | null }) =>
-        useMergeRefs(stableRef, otherRef),
-      { initialProps: { otherRef: createRef<HTMLDivElement>() } },
-    );
-    const firstCallback = result.current;
-
-    rerender({ otherRef: createRef<HTMLDivElement>() });
-    expect(result.current).not.toBe(firstCallback);
-  });
-
-  it('returns a stable callback when called via a parent useRef pattern', () => {
-    // Simulates the common pattern in CDS components: a parent passes a
-    // forwarded `ref` and the component creates an internal ref via `useRef`.
-    // The merged callback must be stable so that React 19 does not trigger a
-    // detach/attach loop on every render.
-    const externalRef = createRef<HTMLDivElement>();
-    const { result, rerender } = renderHook(() => {
-      const internalRef = useRef<HTMLDivElement>(null);
-      return useMergeRefs(externalRef, internalRef);
-    });
-    const firstCallback = result.current;
-
-    rerender();
-    expect(result.current).toBe(firstCallback);
-  });
-});
diff --git a/packages/common/src/hooks/__tests__/usePrefixedId.test.ts b/packages/common/src/hooks/__tests__/usePrefixedId.test.ts
index b52c7a5881..b359e23b22 100644
--- a/packages/common/src/hooks/__tests__/usePrefixedId.test.ts
+++ b/packages/common/src/hooks/__tests__/usePrefixedId.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { usePrefixedId } from '../usePrefixedId';
 
diff --git a/packages/common/src/hooks/__tests__/usePreviousValue.test.ts b/packages/common/src/hooks/__tests__/usePreviousValue.test.ts
index 75ac1ba74b..ee08b11869 100644
--- a/packages/common/src/hooks/__tests__/usePreviousValue.test.ts
+++ b/packages/common/src/hooks/__tests__/usePreviousValue.test.ts
@@ -1,40 +1,42 @@
-import { useState } from 'react';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { usePreviousValue } from '../usePreviousValue';
 
 describe('usePreviousValue', () => {
-  const useMockPreviousValue = () => {
-    const [currentValue, setCurrentValue] = useState(false);
-    const previousValue = usePreviousValue(currentValue);
-    return {
-      setCurrentValue,
-      previousValue,
-      currentValue,
-    };
-  };
-
-  it('returns the previous value when input changes', () => {
-    const { result } = renderHook(() => useMockPreviousValue());
-    expect(result.current.previousValue).toBeUndefined();
-    expect(result.current.currentValue).toBe(false);
-
-    act(() => {
-      result.current.setCurrentValue(true);
+  it('returns undefined on initial render', () => {
+    const { result } = renderHook(({ value }) => usePreviousValue(value), {
+      initialProps: { value: 'initial' },
     });
-    expect(result.current.previousValue).toBe(false);
-    expect(result.current.currentValue).toBe(true);
 
-    act(() => {
-      result.current.setCurrentValue(false);
+    expect(result.current).toBeUndefined();
+  });
+
+  it('returns the previous value after rerender with a new value', () => {
+    const { result, rerender } = renderHook(({ value }) => usePreviousValue(value), {
+      initialProps: { value: 'a' },
     });
-    expect(result.current.previousValue).toBe(true);
-    expect(result.current.currentValue).toBe(false);
 
-    act(() => {
-      result.current.setCurrentValue(false);
+    rerender({ value: 'b' });
+    expect(result.current).toBe('a');
+
+    rerender({ value: 'c' });
+    expect(result.current).toBe('b');
+  });
+
+  it('returns the last distinct value when rerendered with unchanged value', () => {
+    const { result, rerender } = renderHook(({ value }) => usePreviousValue(value), {
+      initialProps: { value: 'a' },
     });
-    expect(result.current.previousValue).toBe(false);
-    expect(result.current.currentValue).toBe(false);
+
+    rerender({ value: 'b' });
+    expect(result.current).toBe('a');
+
+    // Rerender with same value - effect doesn't re-run, so previous becomes 'b'
+    rerender({ value: 'b' });
+    expect(result.current).toBe('b');
+
+    // Change to new value - previous should be 'b'
+    rerender({ value: 'c' });
+    expect(result.current).toBe('b');
   });
 });
diff --git a/packages/common/src/hooks/__tests__/useRefMap.test.ts b/packages/common/src/hooks/__tests__/useRefMap.test.ts
index 9bd4da6cf9..a717ea92f7 100644
--- a/packages/common/src/hooks/__tests__/useRefMap.test.ts
+++ b/packages/common/src/hooks/__tests__/useRefMap.test.ts
@@ -1,5 +1,5 @@
 import { act } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useRefMap } from '../useRefMap';
 
diff --git a/packages/common/src/hooks/__tests__/useSort.test.ts b/packages/common/src/hooks/__tests__/useSort.test.ts
index 075c8f5665..e72861024d 100644
--- a/packages/common/src/hooks/__tests__/useSort.test.ts
+++ b/packages/common/src/hooks/__tests__/useSort.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useSort } from '../useSort';
 
diff --git a/packages/common/src/hooks/__tests__/useTimer.test.ts b/packages/common/src/hooks/__tests__/useTimer.test.ts
index b3309cc136..100531df47 100644
--- a/packages/common/src/hooks/__tests__/useTimer.test.ts
+++ b/packages/common/src/hooks/__tests__/useTimer.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useTimer } from '../useTimer';
 
diff --git a/packages/common/src/hooks/useFallbackShape.ts b/packages/common/src/hooks/useFallbackShape.ts
index a16cf9d22e..456944898c 100644
--- a/packages/common/src/hooks/useFallbackShape.ts
+++ b/packages/common/src/hooks/useFallbackShape.ts
@@ -10,9 +10,9 @@ export type UseFallbackShapeOptions = {
   rectWidthVariant?: number;
 };
 
-export function useFallbackShape(
+export function useFallbackShape<T = string | number>(
   shape: Shape,
-  baseWidth: number | string,
+  baseWidth: T,
   options?: UseFallbackShapeOptions,
 ) {
   const width = useMemo(() => {
diff --git a/packages/common/src/hooks/useGroupToggler.ts b/packages/common/src/hooks/useGroupToggler.ts
index 61b91f4ae9..b34a6ac683 100644
--- a/packages/common/src/hooks/useGroupToggler.ts
+++ b/packages/common/src/hooks/useGroupToggler.ts
@@ -36,7 +36,7 @@ export const useGroupToggler = <T extends string>(
   // and just throwing it away immediately.
   const initialStateSet = useMemo(() => new Set<T>(initialState), [initialState]);
   const [state, setState] = useState<Set<T>>(initialStateSet);
-  const lastMixedStateRef = useRef<Set<T> | undefined>();
+  const lastMixedStateRef = useRef<Set<T> | undefined>(undefined);
 
   useEffect(() => {
     const isStateMixed = state.size !== 0 && state.size !== values.length;
diff --git a/packages/common/src/hooks/useMergeRefs.ts b/packages/common/src/hooks/useMergeRefs.ts
index a1c1cc7d40..2855235c0f 100644
--- a/packages/common/src/hooks/useMergeRefs.ts
+++ b/packages/common/src/hooks/useMergeRefs.ts
@@ -1,35 +1,5 @@
-import { useCallback } from 'react';
-
 /**
- * Merges multiple refs into a single ref callback. Supports both callback refs
- * and object refs. `null`/`undefined` refs are ignored.
- *
- * The returned callback is referentially stable across renders as long as the
- * underlying refs themselves are stable. This is critical under React 19,
- * which schedules a detach (`oldRef(null)`) followed by an attach
- * (`newRef(node)`) every time a ref-callback's identity changes. Without
- * `useCallback` here, every render would create a new merged callback,
- * triggering React 19's detach/attach lifecycle and — when one of the merged
- * refs synchronously sets state during attach/detach — an infinite update
- * loop ending in `Maximum update depth exceeded`.
+ * @deprecated Import from `@coinbase/cds-common/utils/mergeRefs` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
  */
-export const useMergeRefs = <T = any>(
-  ...refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null)[]
-): React.RefCallback<T> => {
-  return useCallback(
-    (value) => {
-      refs.forEach((ref) => {
-        if (typeof ref === 'function') {
-          ref(value);
-        } else if (ref != null) {
-          (ref as React.MutableRefObject<T | null>).current = value;
-        }
-      });
-    },
-    // The deps are the spread refs themselves. React's `useCallback` shallow-
-    // compares each element of the deps array, so the returned callback stays
-    // stable when each underlying ref keeps the same identity across renders.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    refs,
-  );
-};
+export { useMergeRefs } from '../utils/mergeRefs';
diff --git a/packages/common/src/hooks/usePreviousValue.ts b/packages/common/src/hooks/usePreviousValue.ts
index f64ff8f32b..6aa12dd207 100644
--- a/packages/common/src/hooks/usePreviousValue.ts
+++ b/packages/common/src/hooks/usePreviousValue.ts
@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 export const usePreviousValue = <T>(value: T): T | undefined => {
   // The ref object is a generic container whose current property is mutable ...
   // ... and can hold any value, similar to an instance property on a class
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
   // Store current value in ref
   useEffect(() => {
     ref.current = value;
diff --git a/packages/common/src/hooks/useTimer.ts b/packages/common/src/hooks/useTimer.ts
index a6723720f1..c34827ea1b 100644
--- a/packages/common/src/hooks/useTimer.ts
+++ b/packages/common/src/hooks/useTimer.ts
@@ -2,10 +2,10 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 // Timer for single execution
 export const useTimer = () => {
-  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const startTimeRef = useRef<number>(0);
   const remainingTimeRef = useRef<number>(0);
-  const callbackRef = useRef<() => void>();
+  const callbackRef = useRef<() => void>(undefined);
   const isPausedRef = useRef<boolean>(false);
 
   const clear = useCallback(() => {
diff --git a/packages/common/src/internal/utils/storyBuilder.tsx b/packages/common/src/internal/utils/storyBuilder.tsx
index 4c403c148e..54f5787df5 100644
--- a/packages/common/src/internal/utils/storyBuilder.tsx
+++ b/packages/common/src/internal/utils/storyBuilder.tsx
@@ -112,7 +112,7 @@ export const baseConfig = {
   },
   argTypes: {
     isDarkMode: {
-      control: 'boolean',
+      control: 'boolean' as const,
       description: 'Enable dark mode',
     },
   },
diff --git a/packages/common/src/lottie/useStatusAnimationPoller.ts b/packages/common/src/lottie/useStatusAnimationPoller.ts
index 806c0ddade..cbb4016521 100644
--- a/packages/common/src/lottie/useStatusAnimationPoller.ts
+++ b/packages/common/src/lottie/useStatusAnimationPoller.ts
@@ -48,7 +48,7 @@ export const useStatusAnimationPoller = ({
     }
   }, [playMarkers]);
 
-  const previousStatusRef = useRef<typeof status>();
+  const previousStatusRef = useRef<typeof status>(undefined);
 
   // onAnimationFinish will get triggered after our first useEffect
   // play completes and then after each play within onAnimationFinish completes.
diff --git a/packages/common/src/overlays/ToastProvider.tsx b/packages/common/src/overlays/ToastProvider.tsx
index aea6a6f13a..79cfc91e76 100644
--- a/packages/common/src/overlays/ToastProvider.tsx
+++ b/packages/common/src/overlays/ToastProvider.tsx
@@ -1,12 +1,7 @@
 import React, { cloneElement, createContext, isValidElement, useMemo } from 'react';
 
 import type { ThemeVars } from '../core/theme';
-import type {
-  DimensionValue,
-  OverlayLifecycleProps,
-  SharedAccessibilityProps,
-  SharedProps,
-} from '../types';
+import type { OverlayLifecycleProps, SharedAccessibilityProps, SharedProps } from '../types';
 
 import { useToastQueue } from './useToastQueue';
 
@@ -48,7 +43,7 @@ export type ToastBaseProps = SharedProps &
     /**
      * The vertical offset from the bottom of the screen
      */
-    bottomOffset?: DimensionValue;
+    bottomOffset?: string | number;
     /**
      * Controls color surge of the Toast background
      * @default primary
diff --git a/packages/common/src/overlays/__tests__/useOverlay.test.tsx b/packages/common/src/overlays/__tests__/useOverlay.test.tsx
index 51546378c8..9345a3e01b 100644
--- a/packages/common/src/overlays/__tests__/useOverlay.test.tsx
+++ b/packages/common/src/overlays/__tests__/useOverlay.test.tsx
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useOverlay } from '../useOverlay';
 
diff --git a/packages/common/src/overlays/__tests__/useToastQueue.test.tsx b/packages/common/src/overlays/__tests__/useToastQueue.test.tsx
index b6d3567d86..809c1d251c 100644
--- a/packages/common/src/overlays/__tests__/useToastQueue.test.tsx
+++ b/packages/common/src/overlays/__tests__/useToastQueue.test.tsx
@@ -1,5 +1,5 @@
 import { act } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useToastQueue } from '../useToastQueue';
 
diff --git a/packages/common/src/overlays/useAlert.ts b/packages/common/src/overlays/useAlert.ts
index 8b04b00111..d07129ec62 100644
--- a/packages/common/src/overlays/useAlert.ts
+++ b/packages/common/src/overlays/useAlert.ts
@@ -1,7 +1,7 @@
 import { useOverlay } from './useOverlay';
 
 /**
- * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
+ * @deprecated Use the `visible` and `onRequestClose` props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
  * @deprecationExpectedRemoval v7
  */
 export const useAlert = () => {
diff --git a/packages/common/src/overlays/useModal.ts b/packages/common/src/overlays/useModal.ts
index 08c84656af..a8dab349dd 100644
--- a/packages/common/src/overlays/useModal.ts
+++ b/packages/common/src/overlays/useModal.ts
@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { useOverlay } from './useOverlay';
 
 /**
- * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
+ * @deprecated Use the `visible` and `onRequestClose` props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
  * @deprecationExpectedRemoval v7
  */
 export const useModal = () => {
diff --git a/packages/common/src/overlays/useToastQueue.ts b/packages/common/src/overlays/useToastQueue.ts
index 27724b46ba..afd7fcd022 100644
--- a/packages/common/src/overlays/useToastQueue.ts
+++ b/packages/common/src/overlays/useToastQueue.ts
@@ -1,6 +1,7 @@
 import { cloneElement, useCallback, useEffect, useRef, useState } from 'react';
 
 import { useTimer } from '../hooks/useTimer';
+import { mergeReactElementRef } from '../utils/mergeRefs';
 
 import type { ToastNode, ToastRefHandle } from './ToastProvider';
 
@@ -28,7 +29,9 @@ export const useToastQueue = () => {
 
       setActiveToast({
         ...toast,
-        element: cloneElement(toast.element, { ref: activeToastRef }),
+        element: cloneElement(toast.element, {
+          ref: mergeReactElementRef(toast.element, activeToastRef),
+        }),
       });
 
       // remove toast after duration
diff --git a/packages/common/src/stepper/__tests__/useStepper.test.ts b/packages/common/src/stepper/__tests__/useStepper.test.ts
index ba9ea701de..00ab5bcf44 100644
--- a/packages/common/src/stepper/__tests__/useStepper.test.ts
+++ b/packages/common/src/stepper/__tests__/useStepper.test.ts
@@ -1,4 +1,5 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act } from 'react';
+import { renderHook } from '@testing-library/react';
 
 import { useStepper } from '../useStepper';
 
diff --git a/packages/common/src/svg/shape.ts b/packages/common/src/svg/shape.ts
new file mode 100644
index 0000000000..d84ecdac4f
--- /dev/null
+++ b/packages/common/src/svg/shape.ts
@@ -0,0 +1,2 @@
+export const hexagonShapePath =
+  'M15.4855 6.0242C16.1715 7.24852 16.1715 8.75148 15.4855 9.97581L13.4213 13.6598C12.7259 14.9008 11.4317 15.6667 10.0301 15.6667H5.96994C4.56828 15.6667 3.2741 14.9008 2.57874 13.6598L0.514515 9.97581C-0.171504 8.75148 -0.171505 7.24852 0.514514 6.0242L2.57874 2.34022C3.2741 1.09922 4.56828 0.333336 5.96994 0.333336H10.0301C11.4317 0.333336 12.7259 1.09922 13.4213 2.34022L15.4855 6.0242Z';
diff --git a/packages/common/src/system/__tests__/EventHandlerProvider.test.tsx b/packages/common/src/system/__tests__/EventHandlerProvider.test.tsx
index eb18e93730..2f6c0408c0 100644
--- a/packages/common/src/system/__tests__/EventHandlerProvider.test.tsx
+++ b/packages/common/src/system/__tests__/EventHandlerProvider.test.tsx
@@ -1,5 +1,5 @@
 import { act } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useEventHandler } from '../../hooks/useEventHandler';
 import type { EventHandlerConfig, EventHandlerCustomConfig } from '../EventHandlerProvider';
diff --git a/packages/common/src/tabs/__tests__/TabsContext.test.tsx b/packages/common/src/tabs/__tests__/TabsContext.test.tsx
index 0ddcec311c..505b8cbc3e 100644
--- a/packages/common/src/tabs/__tests__/TabsContext.test.tsx
+++ b/packages/common/src/tabs/__tests__/TabsContext.test.tsx
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { TabsContext, type TabsContextValue, useTabsContext } from '../TabsContext';
 
@@ -25,7 +25,6 @@ describe('useTabsContext', () => {
   });
 
   it('throw an error if not wrapped inside the provider', () => {
-    const { result } = renderHook(() => useTabsContext());
-    expect(result.error).toEqual(HOOK_ERROR);
+    expect(() => renderHook(() => useTabsContext())).toThrow(HOOK_ERROR);
   });
 });
diff --git a/packages/common/src/tabs/__tests__/useTabs.test.tsx b/packages/common/src/tabs/__tests__/useTabs.test.tsx
index 2922a3daf1..5ec51b55c3 100644
--- a/packages/common/src/tabs/__tests__/useTabs.test.tsx
+++ b/packages/common/src/tabs/__tests__/useTabs.test.tsx
@@ -1,5 +1,5 @@
 import { act } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { NoopFn } from '../../utils/mockUtils';
 import { type TabsOptions, useTabs } from '../useTabs';
diff --git a/packages/common/src/tokens/button.ts b/packages/common/src/tokens/button.ts
index 966fd8e8b9..79cd00de96 100644
--- a/packages/common/src/tokens/button.ts
+++ b/packages/common/src/tokens/button.ts
@@ -21,9 +21,9 @@ export const variants = {
     borderColor: 'bgSecondary',
   },
   tertiary: {
-    color: 'fgInverse',
-    background: 'bgInverse',
-    borderColor: 'bgInverse',
+    color: 'fg',
+    background: 'bgTertiary',
+    borderColor: 'bgTertiary',
   },
   foregroundMuted: {
     color: 'fgMuted',
@@ -40,6 +40,11 @@ export const variants = {
     background: 'bgNegative',
     borderColor: 'bgNegative',
   },
+  inverse: {
+    color: 'fgInverse',
+    background: 'bgInverse',
+    borderColor: 'bgInverse',
+  },
 } as const satisfies ButtonVariantConfig;
 
 export const transparentVariants = {
@@ -73,4 +78,9 @@ export const transparentVariants = {
     background: 'bg',
     borderColor: 'transparent',
   },
+  inverse: {
+    color: 'fg',
+    background: 'bg',
+    borderColor: 'transparent',
+  },
 } as const satisfies ButtonVariantConfig;
diff --git a/packages/common/src/tokens/cell.ts b/packages/common/src/tokens/cell.ts
index d29c97af6f..1364a0b868 100644
--- a/packages/common/src/tokens/cell.ts
+++ b/packages/common/src/tokens/cell.ts
@@ -9,8 +9,16 @@ export const imageSize = 48;
 
 export const pictogramScaleMultiplier = 1;
 
+/**
+ * @deprecated This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ * */
 export const listHeight = 80;
 
+/**
+ * @deprecated This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ * */
 export const compactListHeight = 40;
 
 /** Spacing configs for Cells to be parsed in [web/mobile]/hooks/useCellSpacing */
@@ -29,6 +37,10 @@ export const defaultSpacingConfig = {
   },
 } as const;
 
+/**
+ * @deprecated Used by deprecated Select component. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const selectOptionHeight = 56;
 
 export const cellPriorities = ['start', 'middle', 'end'] as const;
diff --git a/packages/common/src/tokens/dot.ts b/packages/common/src/tokens/dot.ts
index 737d52f846..6aa69a0f98 100644
--- a/packages/common/src/tokens/dot.ts
+++ b/packages/common/src/tokens/dot.ts
@@ -19,11 +19,24 @@ export const avatarDotSizeMap: Record<AvatarSize, DotSize> = {
   s: 'xs',
 } as const;
 
+/**
+ * The fixed height of the DotCount component.
+ * Width grows based on content length.
+ **/
 export const dotCountSize = 24;
 
-// This works for the purposes of TabNavigation, but it's not stable
-// TODO Update this with more stable values
-export const dotSizeTokens = { s: 28, m: 36, l: 42 } as const;
+/**
+ * @deprecated Use local sizing logic instead. This export is temporarily supported for
+ * compatibility. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+export const dotSizeTokens = { s: 28, m: 36, l: 48 } as const;
+
+/**
+ * @deprecated Use local sizing logic instead. This export is temporarily supported for
+ * compatibility. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const getDotSize = (count?: number) => {
   if (!count || count < 10) return dotSizeTokens.s;
   if (count >= 10 && count < 100) return dotSizeTokens.m;
diff --git a/packages/common/src/tokens/select.ts b/packages/common/src/tokens/select.ts
index a5fe9050d2..4a66f8162a 100644
--- a/packages/common/src/tokens/select.ts
+++ b/packages/common/src/tokens/select.ts
@@ -7,7 +7,7 @@ export const labelTextColor: InputVariant = 'foreground';
 /** Spacing config for Select Option (web) */
 export const selectCellSpacingConfig: CellSpacingConfig = {
   outerSpacing: { paddingX: 0, paddingY: 0 },
-  innerSpacing: { marginX: 0, paddingX: 2 },
+  innerSpacing: { marginX: 0, paddingX: 3 },
 };
 
 /** Spacing config for Select Option (mobile) */
diff --git a/packages/common/src/tour/TourContext.ts b/packages/common/src/tour/TourContext.ts
index cafd16e11b..372ba53bb9 100644
--- a/packages/common/src/tour/TourContext.ts
+++ b/packages/common/src/tour/TourContext.ts
@@ -2,14 +2,20 @@ import { type Context, createContext, useContext } from 'react';
 
 import type { TourApi } from './useTour';
 
-export type TourContextValue<TourStepId extends string = string> = TourApi<TourStepId>;
+export type TourContextValue<TourStepId extends string = string, TTarget = unknown> = TourApi<
+  TourStepId,
+  TTarget
+>;
 
 export const TourContext = createContext<TourContextValue | undefined>(undefined);
 
 export const useTourContext = <
   TourStepId extends string = string,
->(): TourContextValue<TourStepId> => {
-  const context = useContext(TourContext as unknown as Context<TourContextValue<TourStepId>>);
+  TTarget = unknown,
+>(): TourContextValue<TourStepId, TTarget> => {
+  const context = useContext(
+    TourContext as unknown as Context<TourContextValue<TourStepId, TTarget> | undefined>,
+  );
   if (!context) throw Error('useTourContext must be called inside a Tour');
   return context;
 };
diff --git a/packages/common/src/tour/__tests__/TourContext.test.tsx b/packages/common/src/tour/__tests__/TourContext.test.tsx
index 0dd0b29aae..2c54fc1787 100644
--- a/packages/common/src/tour/__tests__/TourContext.test.tsx
+++ b/packages/common/src/tour/__tests__/TourContext.test.tsx
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { TourContext, type TourContextValue, useTourContext } from '../TourContext';
 
@@ -29,7 +29,6 @@ describe('useTourContext', () => {
   });
 
   it('throw an error if not wrapped inside the provider', () => {
-    const { result } = renderHook(() => useTourContext());
-    expect(result.error).toEqual(HOOK_ERROR);
+    expect(() => renderHook(() => useTourContext())).toThrow(HOOK_ERROR);
   });
 });
diff --git a/packages/common/src/tour/__tests__/useTour.test.tsx b/packages/common/src/tour/__tests__/useTour.test.tsx
index 4896566bf9..32dc018f67 100644
--- a/packages/common/src/tour/__tests__/useTour.test.tsx
+++ b/packages/common/src/tour/__tests__/useTour.test.tsx
@@ -1,5 +1,5 @@
 import { act } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { NoopFn } from '../../utils/mockUtils';
 import { type TourOptions, useTour } from '../useTour';
diff --git a/packages/common/src/tour/useTour.ts b/packages/common/src/tour/useTour.ts
index 978dc7715e..edb548be02 100644
--- a/packages/common/src/tour/useTour.ts
+++ b/packages/common/src/tour/useTour.ts
@@ -1,24 +1,52 @@
 import { useCallback, useMemo, useState } from 'react';
 import type React from 'react';
-import type { View } from 'react-native';
-import { type Coords, type Placement } from '@floating-ui/react-dom';
+
+// TODO: move all props irrelevant to useTour core logic to web and mobile packages. eg TourStepArrowComponent, TourStepComponent, TourScrollOptions, etc.
+
+/**
+ * Placement for the tour step arrow. Matches the placement values used by positioning libraries
+ * (e.g. @floating-ui) so web/mobile can pass through their placement directly.
+ */
+export type TourStepArrowPlacement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end';
+
+/**
+ * Arrow coordinates and offsets for the tour step arrow. Matches the shape provided by arrow
+ * middleware (e.g. @floating-ui) so web/mobile can pass through their arrow data directly.
+ */
+export type TourStepArrowData = {
+  x?: number;
+  y?: number;
+  centerOffset?: number;
+  alignmentOffset?: number;
+};
 
 /**
  * @deprecated Import from `@coinbase/cds-web` or `@coinbase/cds-mobile` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
 export type TourStepArrowComponentProps = {
-  /* The `@floating-ui` `arrow` coordinates and offsets https://floating-ui.com/docs/arrow#data */
-  arrow?: Partial<Coords> & {
-    centerOffset: number;
-    alignmentOffset?: number;
-  };
-  /* The `@floating-ui` `arrow` placement https://floating-ui.com/docs/arrow#placement */
-  placement: Placement;
+  /** Arrow coordinates and offsets for positioning the arrow element. */
+  arrow?: TourStepArrowData;
+  /** Placement of the arrow relative to the floating element. */
+  placement: TourStepArrowPlacement;
   style?: Record<string, string | number>;
 };
 
 /**
+ * The TourStepArrowComponent forwards a ref to the underlying element.
+ * This is required for the positioning library to work correctly.
  * @deprecated Import from `@coinbase/cds-web` or `@coinbase/cds-mobile` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
@@ -104,14 +132,19 @@ export type TourOptions<TourStepId extends string = string> = {
   onChange: (tourStep: TourStepValue<TourStepId> | null) => void;
 };
 
-export type TourApi<TourStepId extends string = string> = Omit<
+/**
+ * API returned by useTour and provided via TourContext.
+ * @template TourStepId - Step id string literal type.
+ * @template TTarget - Type of the active step's target element (e.g. HTMLElement for web, View for react-native). Defaults to unknown.
+ */
+export type TourApi<TourStepId extends string = string, TTarget = unknown> = Omit<
   TourOptions<TourStepId>,
   'onChange'
 > & {
-  /* The target element of the currently active tour step. */
-  activeTourStepTarget: HTMLElement | View | null;
-  /* Set the target element of the currently active tour step. */
-  setActiveTourStepTarget: (target: HTMLElement | View | null) => void;
+  /** The target element of the currently active tour step. */
+  activeTourStepTarget: TTarget | null;
+  /** Set the target element of the currently active tour step. */
+  setActiveTourStepTarget: (target: TTarget | null) => void;
   /* Jumps to a specified step of the tour. */
   setActiveTourStep: (tourStepId: TourStepId | null) => void;
   /* Starts the tour; can optionally start at a specified step ID. */
@@ -128,12 +161,12 @@ export type TourApi<TourStepId extends string = string> = Omit<
  * A controlled hook for managing tour state, such as the currently active tour step.
  * @see {@link https://linear.app/coinbase/issue/CDS-1878 CDS-1878} for planned refactor to make this API platform agnostic.
  */
-export const useTour = <TourStepId extends string = string>({
+export const useTour = <TourStepId extends string = string, TTarget = unknown>({
   steps,
   activeTourStep,
   onChange,
-}: TourOptions<TourStepId>): TourApi<TourStepId> => {
-  const [activeTourStepTarget, setActiveTourStepTarget] = useState<HTMLElement | View | null>(null);
+}: TourOptions<TourStepId>): TourApi<TourStepId, TTarget> => {
+  const [activeTourStepTarget, setActiveTourStepTarget] = useState<TTarget | null>(null);
   const startTour = useCallback(
     async (tourStepId?: TourStepId | null) => {
       if (typeof tourStepId === 'undefined') return onChange(steps[0]);
@@ -200,17 +233,18 @@ export const useTour = <TourStepId extends string = string>({
   }, [activeTourStep, steps, onChange]);
 
   const api = useMemo(
-    () => ({
-      steps,
-      activeTourStep,
-      setActiveTourStep,
-      activeTourStepTarget,
-      setActiveTourStepTarget,
-      startTour,
-      stopTour,
-      goNextTourStep,
-      goPreviousTourStep,
-    }),
+    () =>
+      ({
+        steps,
+        activeTourStep,
+        setActiveTourStep,
+        activeTourStepTarget,
+        setActiveTourStepTarget,
+        startTour,
+        stopTour,
+        goNextTourStep,
+        goPreviousTourStep,
+      }) as TourApi<TourStepId, TTarget>,
     [
       steps,
       activeTourStep,
diff --git a/packages/common/src/types/BoxBaseProps.ts b/packages/common/src/types/BoxBaseProps.ts
index cc58a4a9dc..1f28a1af55 100644
--- a/packages/common/src/types/BoxBaseProps.ts
+++ b/packages/common/src/types/BoxBaseProps.ts
@@ -58,6 +58,10 @@ export type FlexStyles = {
 
 export type PinningDirection = 'top' | 'bottom' | 'left' | 'right' | 'all';
 
+/**
+ * @deprecated Use PositionStyles type in mobile/src/styles/styleProps.ts instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type PositionStyles = {
   /** Position the box to the bottom edge. */
   bottom?: DimensionValue;
diff --git a/packages/common/src/types/ButtonBaseProps.ts b/packages/common/src/types/ButtonBaseProps.ts
index 32236cb19f..ac829ef010 100644
--- a/packages/common/src/types/ButtonBaseProps.ts
+++ b/packages/common/src/types/ButtonBaseProps.ts
@@ -4,4 +4,8 @@ export type ButtonVariant =
   | 'tertiary'
   | 'positive'
   | 'negative'
-  | 'foregroundMuted';
+  /**
+   * @deprecated Use `secondary` directly. `foregroundMuted` is temporarily supported for compatibility and will be removed in a future release.
+   */
+  | 'foregroundMuted'
+  | 'inverse';
diff --git a/packages/common/src/types/DimensionStyles.ts b/packages/common/src/types/DimensionStyles.ts
index 76d1c534a6..3426eff339 100644
--- a/packages/common/src/types/DimensionStyles.ts
+++ b/packages/common/src/types/DimensionStyles.ts
@@ -1,8 +1,24 @@
+/**
+ * @deprecated Use the dimension props (e.g. `width`, `height`) directly with values of type `'auto' | number | string`. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type FixedValue = number | string; // px
+/**
+ * @deprecated Use the dimension props (e.g. `width`, `height`) directly with values of type `'auto' | number | string`. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type PercentageValue = string;
+/**
+ * @deprecated Use the dimension props (e.g. `width`, `height`) directly with values of type `'auto' | number | string`. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type DimensionValue = 'auto' | FixedValue | PercentageValue;
 export type ResizeMode = 'cover' | 'contain';
 
+/**
+ * @deprecated Use the dimension props (e.g. `width`, `height`) directly with values of type `'auto' | number | string`. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type DimensionStyles = {
   /** Set a fixed height. */
   height?: DimensionValue;
diff --git a/packages/common/src/types/Position.ts b/packages/common/src/types/Position.ts
index 013a8b4bef..9287bcea68 100644
--- a/packages/common/src/types/Position.ts
+++ b/packages/common/src/types/Position.ts
@@ -1 +1,5 @@
+/**
+ * @deprecated Use the CSSProperties['position'] or ViewStyle['position'] instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type Position = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky';
diff --git a/packages/common/src/types/StickyFooterProps.ts b/packages/common/src/types/StickyFooterProps.ts
deleted file mode 100644
index 76b8a59fb4..0000000000
--- a/packages/common/src/types/StickyFooterProps.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { SharedAccessibilityProps } from './SharedAccessibilityProps';
-import type { SharedProps } from './SharedProps';
-import type { PaddingProps } from './SpacingProps';
-
-/**
- * @deprecated Use StickyFooterProps from @coinbase/cds-mobile instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
-export type StickyFooterProps = {
-  /**
-   * React children to be rendered inside the StickyFooter.
-   */
-  children?: React.ReactNode;
-  /**
-   * Whether to apply a top border and shadow to the StickyFooter.
-   */
-  elevated?: boolean;
-  /**
-   * The WAI-ARIA role for the StickyFooter element.
-   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
-   */
-  role?: React.AriaRole;
-} & SharedProps &
-  PaddingProps &
-  Pick<SharedAccessibilityProps, 'accessibilityLabel'>;
diff --git a/packages/common/src/types/index.ts b/packages/common/src/types/index.ts
index 824e13f007..7047ee3916 100644
--- a/packages/common/src/types/index.ts
+++ b/packages/common/src/types/index.ts
@@ -49,7 +49,6 @@ export * from './SharedProps';
 export * from './SpacingProps';
 export * from './SparklineInteractiveHeaderBaseProps';
 export * from './SpreadPropsSafely';
-export * from './StickyFooterProps';
 export * from './TagBaseProps';
 export * from './TextBaseProps';
 export * from './TooltipBaseProps';
diff --git a/packages/common/src/utils/__tests__/flattenNodes.test.tsx b/packages/common/src/utils/__tests__/flattenNodes.test.tsx
index 592a864e83..bbe58e5e29 100644
--- a/packages/common/src/utils/__tests__/flattenNodes.test.tsx
+++ b/packages/common/src/utils/__tests__/flattenNodes.test.tsx
@@ -1,15 +1,6 @@
-import { createElement } from 'react';
-
-import flattenNodes, { hasProps } from '../flattenNodes';
+import flattenNodes from '../flattenNodes';
 
 describe('flattenNodes', () => {
-  it('checks if child has props', () => {
-    const element = createElement('div');
-
-    expect(hasProps(element)).toBe(true);
-    expect(hasProps('test')).toBe(false);
-  });
-
   it('flatten nodes', () => {
     const flattenedNodes1 = flattenNodes([
       <>
diff --git a/packages/common/src/utils/__tests__/mergeRefs.test.tsx b/packages/common/src/utils/__tests__/mergeRefs.test.tsx
new file mode 100644
index 0000000000..efdd60a72a
--- /dev/null
+++ b/packages/common/src/utils/__tests__/mergeRefs.test.tsx
@@ -0,0 +1,197 @@
+import React, { createRef, useRef } from 'react';
+import { renderHook } from '@testing-library/react';
+
+import { mergeReactElementRef, mergeRefs, useMergeRefs } from '../mergeRefs';
+
+describe('mergeRefs module', () => {
+  describe('mergeRefs', () => {
+    it('sets object refs', () => {
+      const ref1: React.MutableRefObject<string | null> = { current: null };
+      const ref2: React.MutableRefObject<string | null> = { current: null };
+
+      const merged = mergeRefs(ref1, ref2);
+      merged('hello');
+
+      expect(ref1.current).toBe('hello');
+      expect(ref2.current).toBe('hello');
+    });
+
+    it('calls callback refs', () => {
+      const calls: Array<string | null> = [];
+      const cb: React.RefCallback<string> = (value) => {
+        calls.push(value);
+      };
+
+      const merged = mergeRefs(cb);
+      merged('a');
+      merged(null);
+
+      expect(calls).toEqual(['a', null]);
+    });
+
+    it('supports mixing callback refs and object refs', () => {
+      const obj: React.MutableRefObject<number | null> = { current: null };
+      const calls: Array<number | null> = [];
+      const cb: React.RefCallback<number> = (value) => {
+        calls.push(value);
+      };
+
+      const merged = mergeRefs(obj, cb);
+      merged(123);
+
+      expect(obj.current).toBe(123);
+      expect(calls).toEqual([123]);
+    });
+
+    it('ignores null and undefined refs', () => {
+      const obj: React.MutableRefObject<boolean | null> = { current: null };
+      const merged = mergeRefs(obj, null, undefined);
+
+      merged(true);
+      expect(obj.current).toBe(true);
+    });
+  });
+
+  describe('useMergeRefs', () => {
+    it('delegates to mergeRefs', () => {
+      const ref1: React.MutableRefObject<string | null> = { current: null };
+      const ref2: React.MutableRefObject<string | null> = { current: null };
+
+      const { result } = renderHook(() => useMergeRefs(ref1, ref2));
+      result.current('hello');
+
+      expect(ref1.current).toBe('hello');
+      expect(ref2.current).toBe('hello');
+    });
+
+    it('writes the value to all object refs', () => {
+      const refA = createRef<HTMLDivElement>();
+      const refB = createRef<HTMLDivElement>();
+      const node = document.createElement('div');
+
+      const { result } = renderHook(() => useMergeRefs(refA, refB));
+      result.current(node);
+
+      expect(refA.current).toBe(node);
+      expect(refB.current).toBe(node);
+    });
+
+    it('invokes function refs with the value', () => {
+      const fnRefA = jest.fn();
+      const fnRefB = jest.fn();
+      const node = document.createElement('div');
+
+      const { result } = renderHook(() => useMergeRefs(fnRefA, fnRefB));
+      result.current(node);
+
+      expect(fnRefA).toHaveBeenCalledWith(node);
+      expect(fnRefB).toHaveBeenCalledWith(node);
+    });
+
+    it('safely ignores null and undefined refs', () => {
+      const ref = createRef<HTMLDivElement>();
+      const node = document.createElement('div');
+
+      const { result } = renderHook(() => useMergeRefs<HTMLDivElement>(ref, null, undefined));
+      expect(() => result.current(node)).not.toThrow();
+      expect(ref.current).toBe(node);
+    });
+
+    it('returns a stable callback when underlying refs do not change', () => {
+      const refA = createRef<HTMLDivElement>();
+      const refB = createRef<HTMLDivElement>();
+
+      const { result, rerender } = renderHook(() => useMergeRefs(refA, refB));
+      const firstCallback = result.current;
+
+      rerender();
+      expect(result.current).toBe(firstCallback);
+
+      rerender();
+      expect(result.current).toBe(firstCallback);
+    });
+
+    it('returns a new callback when an underlying ref changes identity', () => {
+      const stableRef = createRef<HTMLDivElement>();
+
+      const { result, rerender } = renderHook(
+        ({ otherRef }: { otherRef: React.Ref<HTMLDivElement> | null }) =>
+          useMergeRefs(stableRef, otherRef),
+        { initialProps: { otherRef: createRef<HTMLDivElement>() } },
+      );
+      const firstCallback = result.current;
+
+      rerender({ otherRef: createRef<HTMLDivElement>() });
+      expect(result.current).not.toBe(firstCallback);
+    });
+
+    it('returns a stable callback when called via a parent useRef pattern', () => {
+      // Simulates the common pattern in CDS components: a parent passes a
+      // forwarded `ref` and the component creates an internal ref via `useRef`.
+      // The merged callback must be stable so that React 19 does not trigger a
+      // detach/attach loop on every render.
+      const externalRef = createRef<HTMLDivElement>();
+      const { result, rerender } = renderHook(() => {
+        const internalRef = useRef<HTMLDivElement>(null);
+        return useMergeRefs(externalRef, internalRef);
+      });
+      const firstCallback = result.current;
+
+      rerender();
+      expect(result.current).toBe(firstCallback);
+    });
+  });
+
+  describe('mergeReactElementRef', () => {
+    it('merges the element ref (React 19 style: props.ref) with provided refs', () => {
+      const elementRefCalls: Array<HTMLDivElement | null> = [];
+      const elementRef: React.RefCallback<HTMLDivElement> = (value) => {
+        elementRefCalls.push(value);
+      };
+
+      const element = <div ref={elementRef} />;
+      const objRef: React.MutableRefObject<HTMLDivElement | null> = { current: null };
+
+      const merged = mergeReactElementRef<HTMLDivElement>(element, objRef);
+      const node = document.createElement('div');
+
+      merged(node);
+      merged(null);
+
+      expect(objRef.current).toBe(null);
+      expect(elementRefCalls).toEqual([node, null]);
+    });
+
+    it('merges the element ref (React 18 style: element.ref) with provided refs', () => {
+      const elementRefCalls: Array<HTMLSpanElement | null> = [];
+      const elementRef: React.RefCallback<HTMLSpanElement> = (value) => {
+        elementRefCalls.push(value);
+      };
+
+      const element = React.createElement('span');
+      // React elements are frozen, so to simulate React 18's `element.ref` location
+      // we create a shallow clone with a `ref` field.
+      const elementWithLegacyRef = { ...(element as any), ref: elementRef } as React.ReactElement;
+
+      const objRef: React.MutableRefObject<HTMLSpanElement | null> = { current: null };
+      const merged = mergeReactElementRef<HTMLSpanElement>(elementWithLegacyRef, objRef);
+      const node = document.createElement('span');
+
+      merged(node);
+
+      expect(objRef.current).toBe(node);
+      expect(elementRefCalls).toEqual([node]);
+    });
+
+    it('works when the element has no ref', () => {
+      const element = <div />;
+      const objRef: React.MutableRefObject<HTMLDivElement | null> = { current: null };
+      const merged = mergeReactElementRef<HTMLDivElement>(element, objRef);
+      const node = document.createElement('div');
+
+      merged(node);
+
+      expect(objRef.current).toBe(node);
+    });
+  });
+});
diff --git a/packages/common/src/utils/flattenNodes.ts b/packages/common/src/utils/flattenNodes.ts
index 0b443ce344..c9c8af9080 100644
--- a/packages/common/src/utils/flattenNodes.ts
+++ b/packages/common/src/utils/flattenNodes.ts
@@ -5,30 +5,24 @@
 */
 
 import { Children, cloneElement, isValidElement } from 'react';
+import type { FragmentProps } from 'react';
 import { isFragment } from 'react-is';
 
-type Child = string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-
-// typeguard to check for props in a ReactChild
-export function hasProps(child: Child): child is React.ReactElement {
-  return (child as React.ReactElement).props !== undefined;
-}
+type FlattenedNode = React.ReactElement | string | number;
 
 // eslint-disable-next-line no-restricted-exports
 export default function flattenNodes(
   children: React.ReactNode,
   depth = 0,
   keys: (string | number)[] = [],
-): Child[] {
-  return Children.toArray(children).reduce((acc: Child[], node, nodeIndex) => {
+): FlattenedNode[] {
+  return Children.toArray(children).reduce((acc: FlattenedNode[], node, nodeIndex) => {
     if (isFragment(node)) {
+      // react-is only narrows type down to ReactElement, not FragmentElement
+      const fragmentNode = node as React.ReactElement<FragmentProps>;
       return [
         ...acc,
-        ...flattenNodes(
-          node.props.children as React.ReactNode,
-          depth + 1,
-          keys.concat(node.key ?? nodeIndex),
-        ),
+        ...flattenNodes(fragmentNode.props.children, depth + 1, keys.concat(node.key ?? nodeIndex)),
       ];
     }
 
diff --git a/packages/common/src/utils/getButtonSpacingProps.ts b/packages/common/src/utils/getButtonSpacingProps.ts
index 8b73bcf63e..ace8636ff0 100644
--- a/packages/common/src/utils/getButtonSpacingProps.ts
+++ b/packages/common/src/utils/getButtonSpacingProps.ts
@@ -25,6 +25,10 @@ type ButtonSpacingValue = {
   marginStart?: NegativeSpace;
 };
 
+/**
+ * @deprecated This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const getButtonSpacingProps = ({
   compact,
   flush,
@@ -32,6 +36,7 @@ export const getButtonSpacingProps = ({
   if (flush)
     return {
       paddingX: buttonPaddingX.flush,
+      paddingY: compact ? buttonPaddingY.compact : buttonPaddingY.default,
       marginEnd: flush === 'end' ? (-buttonPaddingX.flush as NegativeSpace) : undefined,
       marginStart: flush === 'start' ? (-buttonPaddingX.flush as NegativeSpace) : undefined,
     };
diff --git a/packages/common/src/utils/mergeRefs.ts b/packages/common/src/utils/mergeRefs.ts
new file mode 100644
index 0000000000..293fc6ff21
--- /dev/null
+++ b/packages/common/src/utils/mergeRefs.ts
@@ -0,0 +1,84 @@
+import { useCallback } from 'react';
+import type React from 'react';
+
+type OptionalRef<T> = React.Ref<T> | undefined;
+
+function getReactElementRef<T = unknown>(element: React.ReactElement): React.Ref<T> | null {
+  // React 19: refs are on props
+  if (
+    typeof element.props === 'object' &&
+    element.props !== null &&
+    'ref' in (element.props as object)
+  ) {
+    return (element.props as { ref?: React.Ref<T> }).ref ?? null;
+  }
+
+  // React 18 and earlier: refs are on the element
+  if ('ref' in (element as any)) {
+    return ((element as any).ref as React.Ref<T> | undefined) ?? null;
+  }
+
+  return null;
+}
+
+/**
+ * Merge multiple refs into a single ref callback.
+ *
+ * - Supports callback refs and object refs.
+ * - Ignores `null`/`undefined` refs.
+ * - Intentionally does not support legacy string refs.
+ */
+export const mergeRefs = <T = unknown>(...refs: OptionalRef<T>[]): React.RefCallback<T> => {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        (ref as { current: T | null }).current = value;
+      }
+    });
+  };
+};
+
+/**
+ * Like `mergeRefs`, but also includes an existing ref already present on a React element.
+ *
+ * This is React 18/19 compatible:
+ * - React 19 stores refs on `element.props.ref`
+ * - React 18 and earlier store refs on `element.ref`
+ */
+export const mergeReactElementRef = <T = unknown>(
+  element: React.ReactElement,
+  ...refs: OptionalRef<T>[]
+): React.RefCallback<T> => {
+  const existingRef = getReactElementRef<T>(element);
+  return mergeRefs(...refs, existingRef);
+};
+
+/**
+ * @deprecated Prefer `mergeRefs` function instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+export const useMergeRefs = <T = unknown>(...refs: OptionalRef<T>[]): React.RefCallback<T> => {
+  /**
+   * Merges multiple refs into a single ref callback. Supports both callback refs
+   * and object refs. `null`/`undefined` refs are ignored.
+   *
+   * The returned callback is referentially stable across renders as long as the
+   * underlying refs themselves are stable. This is critical under React 19,
+   * which schedules a detach (`oldRef(null)`) followed by an attach
+   * (`newRef(node)`) every time a ref-callback's identity changes. Without
+   * `useCallback` here, every render would create a new merged callback,
+   * triggering React 19's detach/attach lifecycle and — when one of the merged
+   * refs synchronously sets state during attach/detach — an infinite update
+   * loop ending in `Maximum update depth exceeded`.
+   */
+  return useCallback(
+    (value) => {
+      mergeRefs(...refs)(value);
+    },
+    // The deps are the individual refs, not the rest-parameter array.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    refs,
+  );
+};
diff --git a/packages/common/src/visualizations/__tests__/useCounter.test.ts b/packages/common/src/visualizations/__tests__/useCounter.test.ts
index a30312da6d..1dcecdb267 100644
--- a/packages/common/src/visualizations/__tests__/useCounter.test.ts
+++ b/packages/common/src/visualizations/__tests__/useCounter.test.ts
@@ -1,5 +1,5 @@
 import { act } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useCounter } from '../useCounter';
 
diff --git a/packages/common/src/visualizations/__tests__/useSparklineArea.test.ts b/packages/common/src/visualizations/__tests__/useSparklineArea.test.ts
index 6f0ad22e98..ae99f4f243 100644
--- a/packages/common/src/visualizations/__tests__/useSparklineArea.test.ts
+++ b/packages/common/src/visualizations/__tests__/useSparklineArea.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useSparklineArea } from '../useSparklineArea';
 import type { UseSparklinePathParams } from '../useSparklinePathGenerator';
diff --git a/packages/common/src/visualizations/__tests__/useSparklineCoordinates.test.ts b/packages/common/src/visualizations/__tests__/useSparklineCoordinates.test.ts
index d7eda0a36a..6dbd0829f4 100644
--- a/packages/common/src/visualizations/__tests__/useSparklineCoordinates.test.ts
+++ b/packages/common/src/visualizations/__tests__/useSparklineCoordinates.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import type { UseSparklineCoordinatesParams } from '../useSparklineCoordinates';
 import { useSparklineCoordinates } from '../useSparklineCoordinates';
diff --git a/packages/common/src/visualizations/__tests__/useSparklinePath.test.ts b/packages/common/src/visualizations/__tests__/useSparklinePath.test.ts
index 44195000c2..e883cd5423 100644
--- a/packages/common/src/visualizations/__tests__/useSparklinePath.test.ts
+++ b/packages/common/src/visualizations/__tests__/useSparklinePath.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useSparklinePath } from '../useSparklinePath';
 import type { UseSparklinePathParams } from '../useSparklinePathGenerator';
diff --git a/packages/common/src/visualizations/useCounter.ts b/packages/common/src/visualizations/useCounter.ts
index 8b8ae8d2ec..8290ec7852 100644
--- a/packages/common/src/visualizations/useCounter.ts
+++ b/packages/common/src/visualizations/useCounter.ts
@@ -10,7 +10,7 @@ export type UseCounterParams = {
 export const useCounter = ({ startNum, endNum, durationInMillis }: UseCounterParams) => {
   const skipAnimation = isStorybook();
   const [count, setCount] = useState(skipAnimation ? endNum : startNum);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   useEffect(() => {
     const clearTimeoutRef = () => {
diff --git a/packages/common/src/visualizations/useVisualizationDimensions.ts b/packages/common/src/visualizations/useVisualizationDimensions.ts
index 304fa11342..6891af7718 100644
--- a/packages/common/src/visualizations/useVisualizationDimensions.ts
+++ b/packages/common/src/visualizations/useVisualizationDimensions.ts
@@ -1,20 +1,18 @@
 import { useMemo } from 'react';
 
-import type { DimensionValue } from '../types';
-
-type VisualizationDimensions = {
-  userDefinedWidth: DimensionValue;
-  userDefinedHeight: DimensionValue;
+type VisualizationDimensions<DimensionType> = {
+  userDefinedWidth: DimensionType;
+  userDefinedHeight: DimensionType;
   calculatedWidth: number;
   calculatedHeight: number;
 };
 
-export const useVisualizationDimensions = ({
+export const useVisualizationDimensions = <DimensionType = string | number | undefined | null>({
   userDefinedWidth,
   userDefinedHeight,
   calculatedWidth,
   calculatedHeight,
-}: VisualizationDimensions) => {
+}: VisualizationDimensions<DimensionType>) => {
   return useMemo(() => {
     let width = calculatedWidth;
     let height = calculatedHeight;
diff --git a/packages/eslint-plugin-cds/CHANGELOG.md b/packages/eslint-plugin-cds/CHANGELOG.md
index d23cc6c9e5..d579c552f0 100644
--- a/packages/eslint-plugin-cds/CHANGELOG.md
+++ b/packages/eslint-plugin-cds/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## Unreleased
+
+#### 📘 Misc
+
+- Dependency upgrades.
+
 ## 3.4.0 (3/27/2026 PST)
 
 #### 🚀 Updates
diff --git a/packages/eslint-plugin-cds/package.json b/packages/eslint-plugin-cds/package.json
index aba919aca0..0c77292c25 100644
--- a/packages/eslint-plugin-cds/package.json
+++ b/packages/eslint-plugin-cds/package.json
@@ -29,12 +29,16 @@
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-typescript": "^7.27.1",
+    "@coinbase/cds-common": "workspace:^",
+    "@coinbase/cds-mobile": "workspace:^",
+    "@coinbase/cds-web": "workspace:^",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/eslint-plugin-jsx-a11y": "^6.10.0",
     "@typescript-eslint/rule-tester": "^8.29.0",
     "@typescript-eslint/utils": "^8.29.0",
+    "eslint": "^9.22.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react-native-a11y": "^3.5.1",
     "jest": "^29.7.0",
diff --git a/packages/eslint-plugin-cds/tests/mobile-chart-scrubbing-accessibility.test.ts b/packages/eslint-plugin-cds/tests/mobile-chart-scrubbing-accessibility.test.ts
index f1f1979bc4..feb75b30fb 100644
--- a/packages/eslint-plugin-cds/tests/mobile-chart-scrubbing-accessibility.test.ts
+++ b/packages/eslint-plugin-cds/tests/mobile-chart-scrubbing-accessibility.test.ts
@@ -17,6 +17,19 @@ const ruleTester = new RuleTester({
 // @ts-expect-error RuleTester types mismatch in current setup
 ruleTester.run('mobile-chart-scrubbing-accessibility', rule, {
   valid: [
+    normalizeIndent`
+      import { LineChart } from '@coinbase/cds-mobile/visualizations/chart';
+      const getScrubberAccessibilityLabel = (index) => String(index);
+      const Component = () => {
+        return (
+          <LineChart
+            enableScrubbing
+            accessibilityLabel="Price chart"
+            getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
+          />
+        );
+      }
+    `,
     normalizeIndent`
       import { LineChart } from '@coinbase/cds-mobile-visualization';
       const getScrubberAccessibilityLabel = (index) => String(index);
diff --git a/packages/eslint-plugin-cds/tests/web-chart-scrubbing-accessibility.test.ts b/packages/eslint-plugin-cds/tests/web-chart-scrubbing-accessibility.test.ts
index d338796838..3fad6b83dd 100644
--- a/packages/eslint-plugin-cds/tests/web-chart-scrubbing-accessibility.test.ts
+++ b/packages/eslint-plugin-cds/tests/web-chart-scrubbing-accessibility.test.ts
@@ -17,6 +17,19 @@ const ruleTester = new RuleTester({
 // @ts-expect-error RuleTester types mismatch in current setup
 ruleTester.run('web-chart-scrubbing-accessibility', rule, {
   valid: [
+    normalizeIndent`
+      import { LineChart } from '@coinbase/cds-web/visualizations/chart';
+      const getScrubberAccessibilityLabel = (index) => String(index);
+      const Component = () => {
+        return (
+          <LineChart
+            enableScrubbing
+            accessibilityLabel="Price chart"
+            getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
+          />
+        );
+      }
+    `,
     normalizeIndent`
       import { LineChart } from '@coinbase/cds-web-visualization';
       const getScrubberAccessibilityLabel = (index) => String(index);
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 4f67470fa3..86b11ae334 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## Unreleased
+
+#### 📘 Misc
+
+- Dependency upgrades.
+
 ## 5.16.0 (4/27/2026 PST)
 
 #### 🚀 Updates
diff --git a/packages/icons/package.json b/packages/icons/package.json
index d20325e595..7c7d3f2b83 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1",
     "chalk": "^4.1.2",
     "prettier": "^3.6.2"
diff --git a/packages/illustrations/CHANGELOG.md b/packages/illustrations/CHANGELOG.md
index 9acf219362..7d7057e8f1 100644
--- a/packages/illustrations/CHANGELOG.md
+++ b/packages/illustrations/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## Unreleased
+
+#### 📘 Misc
+
+- Dependency upgrades.
+
 ## 4.40.1 (5/14/2026 PST)
 
 #### 🐞 Fixes
diff --git a/packages/illustrations/package.json b/packages/illustrations/package.json
index 6cc1f1ab5a..b81bc549d2 100644
--- a/packages/illustrations/package.json
+++ b/packages/illustrations/package.json
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1",
     "chalk": "^4.1.2",
     "prettier": "^3.6.2"
diff --git a/packages/lottie-files/CHANGELOG.md b/packages/lottie-files/CHANGELOG.md
index d6c51f186d..5037cbee93 100644
--- a/packages/lottie-files/CHANGELOG.md
+++ b/packages/lottie-files/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## Unreleased
+
+#### 📘 Misc
+
+- Dependency upgrades.
+
 ## 3.3.4 (12/17/2025 PST)
 
 #### 🐞 Fixes
diff --git a/packages/lottie-files/package.json b/packages/lottie-files/package.json
index 3c10e785f5..5ef0cb952b 100644
--- a/packages/lottie-files/package.json
+++ b/packages/lottie-files/package.json
@@ -83,7 +83,7 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1"
   }
 }
diff --git a/packages/mcp-server/CHANGELOG.md b/packages/mcp-server/CHANGELOG.md
index 1bba336734..43107ed928 100644
--- a/packages/mcp-server/CHANGELOG.md
+++ b/packages/mcp-server/CHANGELOG.md
@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.0.0 (5/20/2026 PST)
+
+CDS 9 is here!!
+
+For more details and to help upgrading from CDS 8 using our automated migration tool, see our official [upgrade guide](https://cds.coinbase.com/guides/v9-upgrade-guide)!
+
+There are no new changes/features for the MCP server in this release.
+
 ## 8.75.2 ((5/19/2026, 01:13 PM PST))
 
 This is an artificial version bump with no new change.
diff --git a/packages/mcp-server/package.json b/packages/mcp-server/package.json
index f56d2be05c..e5b3a094a3 100644
--- a/packages/mcp-server/package.json
+++ b/packages/mcp-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.75.2",
+  "version": "9.0.0",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",
diff --git a/packages/migrator/.gitignore b/packages/migrator/.gitignore
new file mode 100644
index 0000000000..42ff955ace
--- /dev/null
+++ b/packages/migrator/.gitignore
@@ -0,0 +1,14 @@
+# Build outputs
+esm/
+dts/
+*.tsbuildinfo
+
+# Node modules
+node_modules/
+
+# Migration history files (user-specific)
+.cds-migration-history.json
+
+# Logs
+*.log
+migration.log
diff --git a/packages/migrator/.npmignore b/packages/migrator/.npmignore
new file mode 100644
index 0000000000..a0af7f8f71
--- /dev/null
+++ b/packages/migrator/.npmignore
@@ -0,0 +1,12 @@
+src/
+tsconfig.json
+tsconfig.build.json
+babel.config.cjs
+project.json
+__tests__/
+__stories__/
+__mocks__/
+__fixtures__/
+*.test.*
+*.spec.*
+*.stories.*
diff --git a/packages/migrator/CHANGELOG.md b/packages/migrator/CHANGELOG.md
new file mode 100644
index 0000000000..c746b854ae
--- /dev/null
+++ b/packages/migrator/CHANGELOG.md
@@ -0,0 +1,24 @@
+# Changelog
+
+## 1.0.0 (05/20/2026 PST)
+
+Initial release of `@coinbase/cds-migrator`.
+
+### ✨ New features
+
+- **CLI** (`cds-migrate`) with interactive prompts, preset mode (`-p`), direct transform mode (`-t`), dry-run (`-d`), partial selection (`--partial`), package-scope filtering (`-ps`), and skip-confirmation (`--skip-confirmation`) flags.
+- **Migration history** tracking via `.cds-migration-history.json` — prevents duplicate runs across the team. Clear with `--clear-history`.
+- **`migration.log`** written after every run with a full record of successes, warnings, and manual TODOs.
+- **`TODO(cds-migration):` comments** inserted automatically wherever a transform cannot safely rewrite code automatically.
+- **`v8-to-v9-web` preset** — seven transforms for upgrading from CDS v8 to v9 on web:
+  - `button-variant-values` — remaps `Button`/`IconButton` `variant` prop values: `tertiary → inverse`, `foregroundMuted → secondary`; flags dynamic expressions for manual review.
+  - `migrate-use-merge-refs-import` — migrates `useMergeRefs` import from `@coinbase/cds-common/hooks/useMergeRefs` to `utils/mergeRefs`, renames the binding, and merges duplicate imports.
+  - `migrate-layout-types-web` — migrates layout types from `@coinbase/cds-common` to `@coinbase/cds-web`.
+  - `migrate-visualization-imports` — migrates `@coinbase/cds-web-visualization` imports to `@coinbase/cds-web/visualizations` sub-paths.
+  - `migrate-interactable-css-vars` — renames `--interactable-*` CSS custom properties to `--inter-*` in JS/TS files.
+  - `migrate-interactable-css-vars-css` — same rename in CSS/SCSS/HTML files.
+  - `theme-provider-isolated` — adds the `isolated` prop to all `ThemeProvider` usages to preserve v8 CSS-variable injection behaviour.
+- **`v8-to-v9-mobile` preset** — counterpart transforms for React Native.
+- **Shared utilities** for transform authors: `transformLogger`, `addTodoComment`, `hasMigrationTodo`, `getPackageScopeFromOptions`.
+- **Import mappings** (`--import-mapping`): teach transforms to recognise call sites that import CDS through a wrapper or re-exporting package. Pass `'<from>=<to>'` on the CLI (repeatable) or declare `importMappings` in a `cds-migrator.config.json` file at your repo root. CLI values win on conflicts; rewrites affect only import matching and never mutate the AST.
+- **Repo config file** (`cds-migrator.config.json`): persist standing defaults (`packageScope`, `importMappings`) so every migration run picks them up automatically without extra flags. The file is resolved from the migration target path first, then from `cwd`.
diff --git a/packages/migrator/README.md b/packages/migrator/README.md
new file mode 100644
index 0000000000..fba0d09251
--- /dev/null
+++ b/packages/migrator/README.md
@@ -0,0 +1,307 @@
+# @coinbase/cds-migrator
+
+Code migration tools for the Coinbase Design System.
+
+## Installation
+
+```bash
+# Install as dev dependency (recommended)
+yarn add -D @coinbase/cds-migrator
+
+# Or use npx without installing
+npx @coinbase/cds-migrator
+```
+
+## Quick Start
+
+### Your First Migration
+
+**1. Run the CLI**
+
+```bash
+npx @coinbase/cds-migrator
+# Or with path: npx @coinbase/cds-migrator ./src
+```
+
+**2. Follow the Prompts**
+
+```
+? Enter the path to your codebase: ./src
+? Which migration preset do you need? v8 to v9
+```
+
+**That's it!** Runs all transforms by default. Use `--partial` to select specific ones.
+
+**3. Review Changes**
+
+The migrator will:
+
+- Run transforms and display progress
+- Create `migration.log` with details
+- Add TODO comments where manual work is needed
+
+**4. Commit**
+
+```bash
+git add .
+git commit -m "Migrate from CDS v8 to v9"
+```
+
+### Common Workflows
+
+**Quick & Complete:**
+
+```bash
+# Preview
+npx @coinbase/cds-migrator ./src -p v8-to-v9 --dry-run
+
+# Review log
+cat migration.log
+
+# Apply
+npx @coinbase/cds-migrator ./src -p v8-to-v9
+```
+
+**One Transform:**
+
+```bash
+npx @coinbase/cds-migrator ./src -t button-variant-values --dry-run
+```
+
+**Multiple Transforms:**
+
+```bash
+npx @coinbase/cds-migrator ./src -t button-variant -t input-size --dry-run
+```
+
+## Features
+
+- 🎯 **Smart Prompting** - Only prompts for missing information
+- 📦 **Flexible Execution** - Use presets for grouped migrations or run transforms directly
+- 📝 **History Tracking** - Automatically prevents duplicate migrations
+- 🌊 **Dry-Run Mode** - Preview all changes before applying
+- 📊 **Comprehensive Logging** - Track successes, warnings, and manual TODOs
+- 💬 **TODO Comments** - Automatically marks code that needs manual review
+- 🔀 **Import Rewrites** - Cover wrapper packages that re-export CDS so transforms apply to call sites that don't import from CDS directly
+
+## How It Works
+
+**Presets** are curated collections of related transforms (e.g., all transforms needed for v8→v9 migration). You can use a preset to run multiple transforms at once, or run individual transforms directly.
+
+| Preset       | Description                                          | Status       |
+| ------------ | ---------------------------------------------------- | ------------ |
+| **v8-to-v9** | Component API updates, hook changes, utility updates | ✅ Available |
+
+**Note:** Presets aren't just for version migrations - you can create presets for any collection of code transforms (deprecations, refactors, style updates, etc.).
+
+## Usage
+
+### Preset Mode
+
+Run all transforms in a preset (default) or select specific ones:
+
+```bash
+# Run all transforms in preset (default)
+npx @coinbase/cds-migrator ./src -p v8-to-v9
+
+# Select specific transforms with multi-select
+npx @coinbase/cds-migrator ./src -p v8-to-v9 --partial
+```
+
+### Direct Transform Mode
+
+Run transforms directly without a preset:
+
+```bash
+# Single transform
+npx @coinbase/cds-migrator ./src -t button-variant-values
+
+# Multiple transforms
+npx @coinbase/cds-migrator ./src -t button-variant-values -t input-size-values
+
+# Transform in subdirectory
+npx @coinbase/cds-migrator ./src -t components/button-variant
+```
+
+### Wrapper Packages / Import Rewrites
+
+If your repo re-exports CDS through a wrapper package (e.g. `@acme/shared/cds/buttons/Button` instead of `@coinbase/cds-web/buttons/Button`), transforms will skip those call sites by default because they don't match the CDS package names.
+
+Use `--import-mapping` to tell the migrator to treat one import prefix as another **before** testing any transform regex:
+
+```bash
+# One-off via CLI flag
+npx @coinbase/cds-migrator ./src -p v8-to-v9 -ir '@acme/shared/cds=@coinbase/cds-web'
+
+# Multiple rewrites
+npx @coinbase/cds-migrator ./src -p v8-to-v9 \
+  -ir '@acme/shared/cds=@coinbase/cds-web' \
+  -ir '@acme/ui/cds=@coinbase/cds-web'
+```
+
+Or drop a **`cds-migrator.config.json`** at your repo root so every run picks it up automatically—no flag required:
+
+```json
+{
+  "packageScope": "coinbase",
+  "importMappings": [{ "from": "@acme/shared/cds", "to": "@coinbase/cds-web" }]
+}
+```
+
+CLI flags always take precedence over the config file when the same `from` key appears in both. The rewrite affects only **import matching**—it never changes the import path written to disk.
+
+### Fully Interactive
+
+Omit flags to be prompted for everything:
+
+```bash
+npx @coinbase/cds-migrator
+# Prompts for: path → preset → transforms (if --partial)
+```
+
+**Note:** Path is the first positional argument. The CLI prompts only for missing information.
+
+## Documentation
+
+### 📘 For Users
+
+1. **[CLI Reference](./docs/CLI_REFERENCE.md)** - Complete CLI usage guide
+2. **[History Guide](./docs/HISTORY.md)** - Advanced history tracking
+
+### 🔧 For Contributors
+
+1. **[Presets & Transforms](./docs/PRESETS_AND_TRANSFORMS.md)** - Creating presets, transforms, and APIs
+
+## What Gets Created
+
+After running a migration:
+
+```
+your-project/
+├── src/
+│   ├── .cds-migration-history.json  # ← Tracks applied migrations (commit this!)
+│   └── ... (your modified files)
+├── cds-migrator.config.json         # ← Optional: standing defaults (commit this!)
+└── migration.log                    # ← Detailed log (review then delete)
+```
+
+## Migration History
+
+The migrator automatically tracks which transforms have been run to prevent duplicates.
+
+### How It Works
+
+When you run a migration (not in dry-run mode):
+
+1. Records which transform was run and when
+2. Stores in `.cds-migration-history.json` in the target directory
+3. Checks history before running to prevent duplicates
+
+**The history file should be committed to version control** so team members don't re-run the same migrations.
+
+### What Happens with Duplicates
+
+If you try to run already-applied transforms:
+
+```
+⚠️  Warning: Some transforms have already been run on this path:
+  • button-variant-values
+
+? How would you like to proceed?
+  ❯ Skip already-run transforms (recommended)
+    Re-run all transforms
+    Cancel
+```
+
+**Use `--skip-confirmation`** to auto-filter duplicates without prompting.
+
+### Clearing History
+
+```bash
+# With confirmation
+npx @coinbase/cds-migrator ./src --clear-history
+
+# Skip confirmation
+npx @coinbase/cds-migrator ./src --clear-history --skip-confirmation
+```
+
+**When to clear:**
+
+- Failed migration that needs to be re-run
+- Testing/development
+- After rolling back code changes
+
+**See [docs/HISTORY.md](./docs/HISTORY.md) for advanced usage.**
+
+## Project Structure
+
+```
+packages/migrator/
+├── docs/
+│   ├── CLI_REFERENCE.md           # CLI usage guide
+│   ├── PRESETS_AND_TRANSFORMS.md  # Creating presets and transforms
+│   └── HISTORY.md                 # History tracking
+├── src/
+│   ├── cli.ts                     # Main CLI
+│   ├── runner.ts                  # Migration executor
+│   ├── types.ts                   # TypeScript types
+│   ├── presets/                   # Preset configurations (auto-discovered!)
+│   │   └── v8-to-v9/
+│   │       └── manifest.json
+│   ├── transforms/                # Jscodeshift codemods (e.g. versioned v9/)
+│   │   └── v9/
+│   │       └── migrate-use-merge-refs.ts
+│   └── utils/                     # Shared utilities
+│       ├── import-mapping.ts      #   Import prefix rewrites (-ir / config)
+│       ├── package-scope.ts       #   Package scope filtering (-ps)
+│       └── ...
+└── package.json
+```
+
+## Development
+
+### Build & Test
+
+```bash
+# Build the package
+yarn nx run migrator:build
+
+# Type check
+yarn nx run migrator:typecheck
+
+# Lint
+yarn nx run migrator:lint
+
+# Test the CLI
+cd packages/migrator
+node cjs/cli.js
+```
+
+### Adding New Presets
+
+See [docs/PRESETS_AND_TRANSFORMS.md](./docs/PRESETS_AND_TRANSFORMS.md#creating-presets) for complete instructions.
+
+Quick steps:
+
+1. Create `src/presets/v9-to-v10/` directory
+2. Add `manifest.json` with a flat list of transforms:
+   ```json
+   {
+     "preset": "v9-to-v10",
+     "description": "Migration from CDS v9 to v10",
+     "transforms": [
+       {
+         "name": "my-transform",
+         "description": "What it does (@package/name)",
+         "file": "my-transform"
+       }
+     ]
+   }
+   ```
+3. Create transform file in `src/transforms/my-transform.ts`
+
+**Note:** Presets are auto-discovered from the `src/presets/` directory!
+
+## License
+
+See LICENSE in the root of the repository.
diff --git a/packages/ui-mobile-playground/babel.config.cjs b/packages/migrator/babel.config.cjs
similarity index 86%
rename from packages/ui-mobile-playground/babel.config.cjs
rename to packages/migrator/babel.config.cjs
index bd2fee9a44..774b76cd40 100644
--- a/packages/ui-mobile-playground/babel.config.cjs
+++ b/packages/migrator/babel.config.cjs
@@ -4,7 +4,7 @@ const isTestEnv = process.env.NODE_ENV === 'test';
 /** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: [
-    ['@babel/preset-env', { modules: isTestEnv ? 'commonjs' : false }],
+    ['@babel/preset-env', { modules: 'commonjs' }],
     ['@babel/preset-react', { runtime: 'automatic' }],
     '@babel/preset-typescript',
   ],
diff --git a/packages/migrator/docs/CLI_REFERENCE.md b/packages/migrator/docs/CLI_REFERENCE.md
new file mode 100644
index 0000000000..14eb4cfd2e
--- /dev/null
+++ b/packages/migrator/docs/CLI_REFERENCE.md
@@ -0,0 +1,271 @@
+# CLI Reference
+
+Complete reference for the CDS Migrator CLI.
+
+## Installation
+
+```bash
+# Install as dev dependency (recommended)
+yarn add -D @coinbase/cds-migrator
+
+# Or use npx without installing
+npx @coinbase/cds-migrator
+```
+
+## How It Works
+
+The CLI prompts only for missing information:
+
+- Provide all args → runs immediately
+- Provide some args → prompts for the rest
+- Provide no args → prompts for everything
+
+## Quick Reference
+
+```bash
+# Run entire preset (default)
+npx @coinbase/cds-migrator ./src -p v8-to-v9
+
+# Select specific transforms
+npx @coinbase/cds-migrator ./src -p v8-to-v9 --partial
+
+# Run transforms directly (no preset!)
+npx @coinbase/cds-migrator ./src -t button-variant-values
+
+# Multiple transforms
+npx @coinbase/cds-migrator ./src -t button-variant -t input-size
+
+# Dry-run mode
+npx @coinbase/cds-migrator ./src -p v8-to-v9 --dry-run
+
+# Clear history
+npx @coinbase/cds-migrator ./src --clear-history
+
+# Handle a wrapper package that re-exports CDS
+npx @coinbase/cds-migrator ./src -p v8-to-v9 -ir '@acme/shared/cds=@coinbase/cds-web'
+```
+
+Use `npx` for one-off usage without installing, or `yarn cds-migrate` if you've installed the package.
+
+---
+
+## CLI Arguments & Flags
+
+### Positional Argument
+
+#### `[path]`
+
+Target path to migrate (optional, defaults to `./src`).
+
+```bash
+# Explicit path
+npx @coinbase/cds-migrator ./my-app/src -p v8-to-v9
+
+# Default path
+npx @coinbase/cds-migrator -p v8-to-v9  # Uses ./src
+```
+
+### Selection Flags
+
+#### `-p, --preset <name>`
+
+Run transforms from a preset. **Runs all by default.**
+
+```bash
+# Run all transforms
+npx @coinbase/cds-migrator ./src -p v8-to-v9
+
+# Select specific transforms
+npx @coinbase/cds-migrator ./src -p v8-to-v9 --partial
+```
+
+**Available presets:** See [README](../README.md#how-it-works).
+
+#### `--partial`
+
+Select specific transforms from a preset using multi-select checkbox.
+
+```bash
+npx @coinbase/cds-migrator ./src -p v8-to-v9 --partial
+```
+
+**Prompt shows:**
+
+```
+? Which transforms do you want to run? (spacebar to select)
+  ◯ button-variant-values
+  ◉ input-size-values
+  ◯ use-theme-return-type
+```
+
+#### `-t, --transform <transforms...>`
+
+Run transforms directly - no preset needed:
+
+```bash
+# Single transform
+npx @coinbase/cds-migrator ./src -t button-variant-values
+
+# Multiple transforms
+npx @coinbase/cds-migrator ./src -t button-variant -t input-size
+```
+
+**Transforms are standalone files** in `src/transforms/` that run independently.
+
+#### `-ps, --package-scope <scope>`
+
+Limit scope-aware transforms (for example `button-variant-values`, `migrate-use-merge-refs`) to imports under a single npm scope. Omit this flag to rewrite every scope (for example both `@coinbase/cds-web` and `@acme/cds-web`).
+
+```bash
+# Only rewrite @coinbase/cds-* imports
+npx @coinbase/cds-migrator ./src -t button-variant-values --package-scope coinbase
+
+# Shorthand
+npx @coinbase/cds-migrator ./src -t button-variant-values -ps coinbase
+
+# Equivalent
+npx @coinbase/cds-migrator ./src -t button-variant-values --package-scope @coinbase
+```
+
+#### `--import-mapping <mapping...>`
+
+Rewrite an import source prefix **before** any transform regex runs. Use this when a wrapper or re-exporting package stands between your call sites and CDS (e.g. `@acme/shared/cds/buttons/Button` instead of `@coinbase/cds-web/buttons/Button`).
+
+**Format:** `'<from>=<to>'` where `<from>` and `<to>` are import source prefixes. Pass the flag multiple times for multiple rewrites.
+
+```bash
+# Single rewrite
+npx @coinbase/cds-migrator ./src -p v8-to-v9 -ir '@acme/shared/cds=@coinbase/cds-web'
+
+# Multiple rewrites
+npx @coinbase/cds-migrator ./src -p v8-to-v9 \
+  -ir '@acme/shared/cds=@coinbase/cds-web' \
+  -ir '@acme/ui/cds=@coinbase/cds-web'
+
+# Combined with package scope
+npx @coinbase/cds-migrator ./src -p v8-to-v9 -ps coinbase -ir '@acme/shared/cds=@coinbase/cds-web'
+```
+
+The rewrite applies **only to import matching**—it never changes the import path written to disk.
+
+**Interaction with `--package-scope`:** `packageScope` constrains the regex used to match the **rewritten** path, so the `to` value must resolve to a path under that scope. If they disagree the rewrite silently has no effect:
+
+```
+# ✓ consistent — to resolves under the same scope as packageScope
+-ps coinbase -ir '@acme/shared/cds=@coinbase/cds-web'
+
+# ✗ mismatch — to is @coinbase but scope filter is @cbhq, match never fires
+-ps cbhq -ir '@acme/shared/cds=@coinbase/cds-web'
+```
+
+When in doubt, omit `-ps` — the regex then matches any npm scope.
+
+Rewrites are also accepted via `cds-migrator.config.json` (see [Repo Config File](#repo-config-file-cds-migratorconfig-json)). CLI values win on conflicts.
+
+#### `--clear-history`
+
+Clear migration history for a path.
+
+```bash
+# With confirmation
+npx @coinbase/cds-migrator ./src --clear-history
+
+# Skip confirmation
+npx @coinbase/cds-migrator ./src --clear-history --skip-confirmation
+```
+
+### Mode Flags
+
+#### `-d, --dry-run`
+
+Preview changes without modifying files.
+
+```bash
+# Dry-run (safe to test)
+npx @coinbase/cds-migrator ./src -p v8-to-v9 --dry-run
+
+# Apply changes (no flag)
+npx @coinbase/cds-migrator ./src -p v8-to-v9
+```
+
+#### `--skip-confirmation`
+
+Automatically filter out already-run transforms without prompting.
+
+```bash
+# For automation
+npx @coinbase/cds-migrator ./src -p v8-to-v9 --skip-confirmation
+```
+
+**Use for:** CI/CD pipelines, scripts, repeated operations.
+
+#### `-h, --help`
+
+Show help message with all flags.
+
+```bash
+npx @coinbase/cds-migrator --help
+```
+
+#### `-V, --version`
+
+Show package version.
+
+```bash
+npx @coinbase/cds-migrator --version
+```
+
+---
+
+## Repo Config File (`cds-migrator.config.json`)
+
+Place a `cds-migrator.config.json` at your repo root (or at the migration target path) to set standing defaults that apply on every run without requiring CLI flags. **Commit this file** so all team members benefit.
+
+```json
+{
+  "packageScope": "cbhq",
+  "importMappings": [{ "from": "@acme/shared/cds", "to": "@coinbase/cds-web" }]
+}
+```
+
+**Fields:**
+
+| Field            | Type             | Equivalent CLI flag | Description                                        |
+| ---------------- | ---------------- | ------------------- | -------------------------------------------------- |
+| `packageScope`   | `string`         | `-ps`               | Default npm scope filter                           |
+| `importMappings` | `{ from, to }[]` | `--import-mapping`  | Import source prefix mappings for wrapper packages |
+
+**Precedence:** CLI flags override config file values. If the same `from` key appears in both, the CLI value wins.
+
+**Scope consistency:** If `packageScope` is set (here or via CLI), the `to` value of every `importMapping` must resolve to a path under that same scope — otherwise the rewrite fires but the resulting path won't match the transform regex and the file will be skipped silently. When in doubt, omit `packageScope` so the regex matches any npm scope.
+
+The migrator searches for the config file at `<targetPath>/cds-migrator.config.json`, then falls back to `<cwd>/cds-migrator.config.json`. Throws if the file exists but contains malformed JSON.
+
+---
+
+## Troubleshooting
+
+### "Warning: Some transforms have already been run"
+
+Options:
+
+1. Use `--skip-confirmation` (auto-filters duplicates)
+2. Use `--clear-history` first to reset
+3. Choose "Skip" when prompted interactively
+
+```bash
+# Auto-filter duplicates
+npx @coinbase/cds-migrator ./src -p v8-to-v9 --skip-confirmation
+```
+
+### Invalid Preset
+
+Available presets are listed in the [README](../README.md#how-it-works).
+
+Currently available: `v8-to-v9`
+
+## See Also
+
+- [Presets & Transforms](./PRESETS_AND_TRANSFORMS.md) - Creating presets and transforms
+- [History Guide](./HISTORY.md) - Advanced history tracking
+- [Repo Config File](#repo-config-file-cds-migratorconfig-json) - `cds-migrator.config.json` reference
diff --git a/packages/migrator/docs/HISTORY.md b/packages/migrator/docs/HISTORY.md
new file mode 100644
index 0000000000..4f5184de6b
--- /dev/null
+++ b/packages/migrator/docs/HISTORY.md
@@ -0,0 +1,177 @@
+# Migration History - Advanced Guide
+
+Detailed information about migration history tracking, team collaboration, and advanced usage.
+
+> **Quick reference:** See [README](../README.md#migration-history) for basic usage and [Presets & Transforms](./PRESETS_AND_TRANSFORMS.md#advanced-apis) for the programmatic API.
+
+## History File Format
+
+```json
+{
+  "entries": [
+    {
+      "transform": "button-variant-values",
+      "timestamp": "2026-03-05T14:00:00.000Z"
+    }
+  ],
+  "lastUpdated": "2026-03-05T14:05:00.000Z"
+}
+```
+
+- `transform`: File path relative to `src/transforms/`
+- `timestamp`: ISO timestamp when applied
+- File location indicates which directory was migrated
+- Dry-run mode doesn't update history
+
+## Team Collaboration
+
+### Multiple Developers
+
+1. **Developer A** runs migration and commits:
+
+   ```bash
+   npx @coinbase/cds-migrator ./src -p v8-to-v9
+   git add .cds-migration-history.json
+   git commit -m "Run v8-to-v9 migration"
+   ```
+
+2. **Developer B** pulls and tries same migration:
+   - Migrator detects it was already run
+   - Shows warning with history
+   - Recommends skipping
+
+### Multiple Directories
+
+Each directory tracks independently:
+
+```
+project/
+├── src/.cds-migration-history.json      # Independent
+└── legacy/.cds-migration-history.json   # Independent
+```
+
+## Clearing History
+
+### CLI Command
+
+```bash
+# With confirmation
+npx @coinbase/cds-migrator ./src --clear-history
+
+# Skip confirmation
+npx @coinbase/cds-migrator ./src --clear-history --skip-confirmation
+```
+
+### When to Clear
+
+**Failed Migration:**
+
+```bash
+# Migration failed midway
+npx @coinbase/cds-migrator ./src -p v8-to-v9
+# Some transforms succeeded, others didn't
+
+# Clear and retry
+npx @coinbase/cds-migrator ./src --clear-history --skip-confirmation
+npx @coinbase/cds-migrator ./src -p v8-to-v9
+```
+
+**Testing:**
+
+```bash
+# Test
+npx @coinbase/cds-migrator ./test-dir -p v8-to-v9
+
+# Clear for next test
+npx @coinbase/cds-migrator ./test-dir --clear-history --skip-confirmation
+```
+
+**After Rollback:**
+
+```bash
+git reset --hard HEAD~1
+npx @coinbase/cds-migrator ./src --clear-history --skip-confirmation
+```
+
+### Bulk Clear
+
+```bash
+#!/bin/bash
+for dir in ./src ./lib ./packages; do
+  npx @coinbase/cds-migrator "$dir" --clear-history --skip-confirmation
+done
+```
+
+### Manual Deletion
+
+```bash
+# Direct file deletion
+rm ./src/.cds-migration-history.json
+```
+
+## Troubleshooting
+
+### Re-running a Transform
+
+**Options:**
+
+1. Choose "Re-run all" when prompted
+2. Clear history first
+3. Manually edit `.cds-migration-history.json` to remove specific entries
+
+### Out of Sync History
+
+If team members have conflicting history:
+
+1. Review both files
+2. Merge entries manually
+3. Keep most complete version
+4. Resolve through code review
+
+### Transform Not Recorded
+
+**Causes:**
+
+- Dry-run mode (by design)
+- Crash before saving
+- File permission issues
+
+**Fix:** Manually add entry to history file
+
+## Best Practices
+
+### ✅ Do
+
+- Commit `.cds-migration-history.json` to version control
+- Review history before migrations
+- Use `--dry-run` first
+- Skip already-run transforms (default)
+
+### ❌ Don't
+
+- Delete history file without reason
+- Re-run transforms unnecessarily
+- Ignore duplicate warnings
+- Add to `.gitignore`
+
+## Configuration
+
+### Disable History Tracking
+
+History is always enabled. To skip tracking:
+
+1. Use `--dry-run` mode (doesn't record)
+2. Or delete history file after run (not recommended)
+
+### Custom History Location
+
+History file is always in the target directory. This ensures:
+
+- Each directory migrates independently
+- History travels with code
+- No global state
+
+## See Also
+
+- [CLI Reference](./CLI_REFERENCE.md) - Complete CLI usage
+- [Presets & Transforms](./PRESETS_AND_TRANSFORMS.md) - Creating presets and transforms
diff --git a/packages/migrator/docs/PRESETS_AND_TRANSFORMS.md b/packages/migrator/docs/PRESETS_AND_TRANSFORMS.md
new file mode 100644
index 0000000000..9ecf38958a
--- /dev/null
+++ b/packages/migrator/docs/PRESETS_AND_TRANSFORMS.md
@@ -0,0 +1,426 @@
+# Presets & Transforms Guide
+
+Guide to creating presets, transforms, and using the migrator APIs.
+
+## Creating Transforms
+
+### Quick Start
+
+### 1. Create Transform File
+
+Create a file in `src/transforms/`:
+
+```typescript
+// src/transforms/my-transform.ts
+import type { API, FileInfo } from 'jscodeshift';
+import { addTodoComment, hasMigrationTodo, transformLogger } from '../utils/transform-utils';
+
+// eslint-disable-next-line no-restricted-exports -- jscodeshift requires default export
+export default function transformer(file: FileInfo, api: API) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  let hasChanges = false;
+
+  // Your transformation logic here
+
+  return hasChanges ? root.toSource() : null;
+}
+```
+
+### 2. Test It
+
+```bash
+# Build
+yarn nx run migrator:build
+
+# Run directly (no preset needed!)
+npx @coinbase/cds-migrator ./test -t my-transform --dry-run
+```
+
+### 3. (Optional) Add to Preset
+
+If you want to include it in a preset:
+
+```json
+{
+  "preset": "v8-to-v9",
+  "transforms": [
+    {
+      "name": "my-transform",
+      "description": "What it does (@coinbase/cds-web)",
+      "file": "my-transform"
+    }
+  ]
+}
+```
+
+## Transform Template
+
+```typescript
+import type { API, FileInfo } from 'jscodeshift';
+import { addTodoComment, hasMigrationTodo, transformLogger } from '../utils/transform-utils';
+
+// eslint-disable-next-line no-restricted-exports -- jscodeshift requires default export
+export default function transformer(file: FileInfo, api: API) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  let hasChanges = false;
+
+  // 1. Find and transform automatically
+  root.find(j.JSXAttribute, { name: { name: 'oldProp' } }).forEach((path) => {
+    if (j.JSXIdentifier.check(path.value.name)) {
+      path.value.name.name = 'newProp';
+      hasChanges = true;
+
+      transformLogger.success('Renamed oldProp to newProp', file.path);
+    }
+  });
+
+  // 2. Add TODOs for complex cases
+  root.find(j.JSXAttribute, { name: { name: 'complexProp' } }).forEach((path) => {
+    if (!hasMigrationTodo(path.parent)) {
+      addTodoComment(j, path, 'complexProp needs manual migration', 'See: https://...');
+      transformLogger.warn('Manual migration required', file.path);
+      hasChanges = true;
+    }
+  });
+
+  // Return null if no changes (skip file write)
+  return hasChanges ? root.toSource() : null;
+}
+```
+
+## Available Utilities
+
+### Transform Utilities
+
+For use in transform files (from `transform-utils.ts`):
+
+#### transformLogger
+
+Simple console-based logger:
+
+```typescript
+transformLogger.success('Renamed prop', file.path, line);
+transformLogger.warn('Could not migrate', file.path, line);
+transformLogger.info('Processing file', file.path);
+transformLogger.error('Transform failed', file.path, line);
+```
+
+#### addTodoComment()
+
+Add a TODO comment to an AST node:
+
+```typescript
+addTodoComment(j, path, 'Manual migration needed', 'See docs...');
+```
+
+**Output:**
+
+```tsx
+// TODO(cds-migration): Manual migration needed
+// See docs...
+<Button deprecatedProp="value" />
+```
+
+#### hasMigrationTodo()
+
+Check if a node already has a migration TODO:
+
+```typescript
+if (!hasMigrationTodo(path.parent)) {
+  addTodoComment(j, path, 'Message');
+}
+```
+
+### Advanced Utilities
+
+For CLI/runner usage (rarely needed in transforms):
+
+#### createLogger()
+
+Creates the full logging system for `migration.log`:
+
+```typescript
+const logger = createLogger(process.cwd());
+logger.info('Starting migration');
+logger.success('Renamed prop', file, line);
+```
+
+#### History Tracking
+
+```typescript
+hasTransformBeenRun(targetPath, transformPath);
+getAlreadyRunTransforms(targetPath, transformPaths);
+recordTransformRun(targetPath, transformPath, dryRun);
+```
+
+#### Config Loading
+
+```typescript
+loadMigrationManifest(presetDir);
+getSelectedTransforms(manifest, selection);
+buildMigrationSummary(manifest, selection);
+```
+
+## Common Patterns
+
+### Rename JSX Component
+
+```typescript
+root
+  .find(j.JSXElement)
+  .filter((path) => {
+    const name = path.value.openingElement.name;
+    return j.JSXIdentifier.check(name) && name.name === 'OldButton';
+  })
+  .forEach((path) => {
+    const opening = path.value.openingElement;
+    const closing = path.value.closingElement;
+
+    if (j.JSXIdentifier.check(opening.name)) {
+      opening.name.name = 'Button';
+      transformLogger.success('Renamed OldButton to Button', file.path);
+    }
+    if (closing && j.JSXIdentifier.check(closing.name)) {
+      closing.name.name = 'Button';
+    }
+  });
+```
+
+### Rename JSX Prop
+
+```typescript
+root
+  .find(j.JSXElement, {
+    openingElement: { name: { name: 'Button' } },
+  })
+  .find(j.JSXAttribute, { name: { name: 'variant' } })
+  .forEach((path) => {
+    if (j.JSXIdentifier.check(path.value.name)) {
+      path.value.name.name = 'appearance';
+      transformLogger.success('Renamed variant to appearance', file.path);
+    }
+  });
+```
+
+### Update Prop Values
+
+```typescript
+root.find(j.JSXAttribute, { name: { name: 'size' } }).forEach((path) => {
+  const value = path.value.value;
+
+  if (j.StringLiteral.check(value)) {
+    const mapping = { sm: 'small', md: 'medium', lg: 'large' };
+    const newValue = mapping[value.value];
+
+    if (newValue) {
+      value.value = newValue;
+      transformLogger.success(`Updated size: ${value.value} → ${newValue}`, file.path);
+    }
+  }
+});
+```
+
+### Update Imports
+
+```typescript
+root
+  .find(j.ImportDeclaration, {
+    source: { value: '@coinbase/cds-web' },
+  })
+  .forEach((path) => {
+    path.value.specifiers?.forEach((specifier) => {
+      if (j.ImportSpecifier.check(specifier) && specifier.imported.name === 'OldButton') {
+        specifier.imported.name = 'Button';
+        if (specifier.local) {
+          specifier.local.name = 'Button';
+        }
+        transformLogger.success('Updated import: OldButton → Button', file.path);
+      }
+    });
+  });
+```
+
+## Best Practices
+
+### 1. Make Transforms Idempotent
+
+Safe to run multiple times:
+
+```typescript
+// ✅ Good: Check before modifying
+const hasImport =
+  root.find(j.ImportDeclaration, {
+    source: { value: '@coinbase/cds' },
+  }).length > 0;
+
+if (hasImport) return null;
+
+// ❌ Bad: Always adds
+root.find(j.Program).forEach((path) => {
+  path.value.body.unshift(newImport);
+});
+```
+
+### 2. Always Use transformLogger
+
+```typescript
+// ✅ Good
+transformLogger.success('Renamed prop', file.path);
+
+// ❌ Bad
+console.log('Renamed prop'); // Output goes nowhere useful
+```
+
+### 3. Add TODOs for Complex Cases
+
+```typescript
+if (!canAutoMigrate) {
+  addTodoComment(j, path, 'This requires manual migration', 'See documentation: ...');
+  transformLogger.warn('Manual migration needed', file.path);
+}
+```
+
+### 4. Return null for Unchanged Files
+
+```typescript
+if (!hasChanges) {
+  return null; // Skip write
+}
+return root.toSource();
+```
+
+### 5. Check for Existing TODOs
+
+```typescript
+if (!hasMigrationTodo(path.parent)) {
+  addTodoComment(j, path, 'Message');
+}
+```
+
+### Run in Dry-Run
+
+```bash
+npx @coinbase/cds-migrator /tmp/migration-test/src -t my-transform --dry-run
+```
+
+### Verify Output
+
+Check:
+
+- ✅ Correct files were modified
+- ✅ Changes are accurate
+- ✅ TODOs added where needed
+- ✅ No unintended side effects
+
+## Transform Organization
+
+### Subdirectories
+
+Organize transforms by type:
+
+```
+src/transforms/
+├── components/
+│   ├── button-variant.ts
+│   └── input-size.ts
+├── hooks/
+│   └── use-theme.ts
+└── utils/
+    └── format-currency.ts
+```
+
+### In manifest.json
+
+```json
+{
+  "transforms": [
+    {
+      "name": "button-variant",
+      "file": "components/button-variant"
+    }
+  ]
+}
+```
+
+## Complete Example
+
+```typescript
+import type { API, FileInfo } from 'jscodeshift';
+import { addTodoComment, hasMigrationTodo, transformLogger } from '../utils/transform-utils';
+
+export default function transformer(file: FileInfo, api: API) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  let hasChanges = false;
+
+  // 1. Simple rename - fully automatic
+  root
+    .find(j.JSXAttribute, { name: { name: 'variant' } })
+    .filter((path) => {
+      const element = path.parent.value.openingElement;
+      return j.JSXIdentifier.check(element.name) && element.name.name === 'Button';
+    })
+    .forEach((path) => {
+      if (j.JSXIdentifier.check(path.value.name)) {
+        path.value.name.name = 'appearance';
+        hasChanges = true;
+        transformLogger.success('Renamed variant to appearance', file.path);
+      }
+    });
+
+  // 2. Complex case - needs TODO
+  root.find(j.JSXAttribute, { name: { name: 'complexProp' } }).forEach((path) => {
+    if (!hasMigrationTodo(path.parent)) {
+      addTodoComment(j, path, 'complexProp API has changed', 'See docs...');
+      transformLogger.warn('Complex prop needs manual migration', file.path);
+      hasChanges = true;
+    }
+  });
+
+  return hasChanges ? root.toSource() : null;
+}
+```
+
+## Resources
+
+- [jscodeshift Documentation](https://github.com/facebook/jscodeshift)
+- [AST Explorer](https://astexplorer.net/) - Visualize JavaScript/TypeScript AST
+- [Preset Guide](./PRESET.md) - Creating presets
+- [CLI Reference](./CLI_REFERENCE.md) - Running the migrator
+
+## Troubleshooting
+
+### "Transform not found"
+
+Error: `Transform file /path/to/transform.js does not exist`
+
+**Solution:** Check the transform filename in `src/transforms/` matches what you specified with `-t` flag (without extension).
+
+### "No changes detected"
+
+The transform runs but no files are modified.
+
+**Debug:** Use AST Explorer to verify your selector matches the actual code structure.
+
+### Transform runs on wrong files
+
+**Solution:** Specify `extensions` in manifest.json:
+
+```json
+{
+  "name": "jsx-only-transform",
+  "file": "jsx-transform",
+  "extensions": "jsx,tsx"
+}
+```
+
+## See Also
+
+- [Preset Guide](./PRESET.md) - Creating presets
+- [CLI Reference](./CLI_REFERENCE.md) - Running the migrator
+- [History](./HISTORY.md) - History tracking
diff --git a/packages/migrator/jest.config.js b/packages/migrator/jest.config.js
new file mode 100644
index 0000000000..fd9163ce5a
--- /dev/null
+++ b/packages/migrator/jest.config.js
@@ -0,0 +1,8 @@
+/** @type {import('jest').Config} */
+const config = {
+  preset: '../../jest.preset.js',
+  displayName: 'migrator',
+  testEnvironment: 'node',
+};
+
+module.exports = config;
diff --git a/packages/migrator/jest.config.mjs b/packages/migrator/jest.config.mjs
new file mode 100644
index 0000000000..31d0831027
--- /dev/null
+++ b/packages/migrator/jest.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  displayName: 'migrator',
+  preset: '../../jest.preset.js',
+  testEnvironment: 'node',
+};
diff --git a/packages/migrator/package.json b/packages/migrator/package.json
new file mode 100644
index 0000000000..6bd0410f20
--- /dev/null
+++ b/packages/migrator/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@coinbase/cds-migrator",
+  "version": "1.0.0",
+  "description": "Coinbase Design System - Code Migration Tools",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:coinbase/cds.git",
+    "directory": "packages/migrator"
+  },
+  "type": "commonjs",
+  "main": "./cjs/index.js",
+  "types": "./dts/index.d.ts",
+  "bin": {
+    "cds-migrate": "./cjs/cli.js"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dts/index.d.ts",
+      "default": "./cjs/index.js"
+    },
+    "./*": {
+      "types": "./dts/*.d.ts",
+      "default": "./cjs/*.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dts",
+    "cjs",
+    "CHANGELOG.md"
+  ],
+  "dependencies": {
+    "commander": "^11.1.0",
+    "fast-glob": "^3.2.11",
+    "inquirer": "^12.1.0",
+    "jscodeshift": "^0.15.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.27.1",
+    "@types/inquirer": "^9.0.7",
+    "@types/jscodeshift": "^0.11.10"
+  }
+}
diff --git a/packages/ui-mobile-playground/project.json b/packages/migrator/project.json
similarity index 57%
rename from packages/ui-mobile-playground/project.json
rename to packages/migrator/project.json
index 122079c5ed..6c564ed1ae 100644
--- a/packages/ui-mobile-playground/project.json
+++ b/packages/migrator/project.json
@@ -1,35 +1,27 @@
 {
-  "name": "ui-mobile-playground",
+  "name": "migrator",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/ui-mobile-playground/src",
+  "sourceRoot": "packages/migrator/src",
   "projectType": "library",
   "targets": {
-    "generate-icon-svg-map": {
-      "executor": "nx:run-commands",
-      "options": {
-        "commands": [
-          "tsx packages/ui-mobile-playground/scripts/generateIconSvgMap.ts"
-        ]
-      }
-    },
     "build": {
       "executor": "nx:run-commands",
       "defaultConfiguration": "dev",
-      "dependsOn": [
-        "generate-icon-svg-map"
-      ],
       "configurations": {
         "dev": {
-          "command": "rm -rf esm && babel ./src --out-dir esm --extensions .ts,.tsx,.js,.jsx --copy-files --no-copy-ignored"
+          "command": "rm -rf cjs && babel ./src --out-dir cjs --extensions .ts,.tsx,.js,.jsx --copy-files --no-copy-ignored"
         },
         "prod": {
-          "commands": [
-            "rm -rf esm && babel ./src --out-dir esm --extensions .ts,.tsx,.js,.jsx --copy-files --no-copy-ignored"
-          ],
-          "parallel": false
+          "command": "rm -rf cjs && babel ./src --out-dir cjs --extensions .ts,.tsx,.js,.jsx --copy-files --no-copy-ignored"
         }
       }
     },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "options": {
+        "jestConfig": "{projectRoot}/jest.config.mjs"
+      }
+    },
     "lint": {
       "executor": "@nx/eslint:lint"
     },
diff --git a/packages/migrator/src/cli-args.ts b/packages/migrator/src/cli-args.ts
new file mode 100644
index 0000000000..78399a5f8d
--- /dev/null
+++ b/packages/migrator/src/cli-args.ts
@@ -0,0 +1,74 @@
+/**
+ * CLI argument parsing
+ */
+
+import { Command } from 'commander';
+
+export type CliArgs = {
+  preset?: string;
+  path?: string;
+  dryRun?: boolean;
+  skipConfirmation?: boolean;
+  clearHistory?: boolean;
+  partial?: boolean;
+  transform?: string[];
+  /** When set, only rewrite imports from this npm scope (e.g. coinbase or @coinbase). */
+  packageScope?: string;
+  /**
+   * Map import source prefixes before transforms run their regex matching.
+   * Use this when a wrapper or re-exporting package stands between call sites and
+   * the CDS package, so transforms process those call sites as if they imported
+   * from CDS directly.
+   *
+   * Format: `'<from>=<to>'`  e.g. `'@acme/shared/cds=@coinbase/cds-web'`
+   *
+   * May be repeated for multiple mappings. Entries in `cds-migrator.config.json`
+   * are merged with these flags; CLI wins when the same `from` path appears in both.
+   */
+  importMapping?: string[];
+};
+
+export function parseCliArgs(): CliArgs {
+  const program = new Command();
+
+  program
+    .name('cds-migrate')
+    .description('CDS code migration tool')
+    .version('1.0.0')
+    .argument('[path]', 'Target path to migrate')
+    .option('-p, --preset <name>', 'Migration preset (e.g., v8-to-v9)')
+    .option('-d, --dry-run', 'Run in dry-run mode (preview changes)', false)
+    .option('--skip-confirmation', 'Skip confirmation prompts', false)
+    .option('--clear-history', 'Clear migration history for the specified path', false)
+    .option('--partial', 'Select specific transforms (default: run all transforms)', false)
+    .option(
+      '-t, --transform <transforms...>',
+      'Migrate specific transforms by name (preset auto-detected)',
+    )
+    .option(
+      '-ps, --package-scope <scope>',
+      'Only rewrite imports from this npm scope (e.g. coinbase or @coinbase). Omit to include every scope',
+    )
+    .option(
+      '--import-mapping <mapping...>',
+      "Map an import source prefix to another before transforms run (format: '<from>=<to>', repeatable). " +
+        "Example: '@acme/shared/cds=@coinbase/cds-web'. Merged with cds-migrator.config.json; CLI wins on conflicts.",
+    );
+
+  program.parse();
+
+  const options = program.opts();
+  const [path] = program.args;
+
+  return {
+    preset: options.preset,
+    path,
+    dryRun: options.dryRun,
+    skipConfirmation: options.skipConfirmation,
+    clearHistory: options.clearHistory,
+    partial: options.partial,
+    transform: options.transform,
+    packageScope: options.packageScope,
+    importMapping: options.importMapping,
+  };
+}
diff --git a/packages/migrator/src/cli.ts b/packages/migrator/src/cli.ts
new file mode 100644
index 0000000000..0aae657300
--- /dev/null
+++ b/packages/migrator/src/cli.ts
@@ -0,0 +1,388 @@
+#!/usr/bin/env node
+
+/**
+ * CDS Migrator CLI
+ *
+ * Interactive tool to migrate codebases between CDS major versions
+ * Also supports non-interactive mode via CLI flags
+ */
+
+import fs from 'fs';
+import inquirer from 'inquirer';
+import path from 'path';
+
+import {
+  buildMigrationSummary,
+  getSelectedTransforms,
+  loadMigrationManifest,
+} from './utils/config-loader';
+import {
+  buildHistorySummary,
+  clearMigrationHistory,
+  getAlreadyRunTransforms,
+  loadMigrationHistory,
+} from './utils/migration-history';
+import { type CliArgs, parseCliArgs } from './cli-args';
+import { runMigration } from './runner';
+import type { MigrationSelection, Transform } from './types';
+
+// In CommonJS, __dirname is automatically available
+declare const __dirname: string;
+
+/**
+ * Discover available presets by scanning the presets directory
+ */
+function getAvailablePresets(): Array<{ name: string; value: string; description: string }> {
+  const presetsDir = path.join(__dirname, 'presets');
+
+  if (!fs.existsSync(presetsDir)) {
+    return [];
+  }
+
+  const presetDirs = fs.readdirSync(presetsDir).filter((item) => {
+    const itemPath = path.join(presetsDir, item);
+    return fs.statSync(itemPath).isDirectory();
+  });
+
+  const presets: Array<{ name: string; value: string; description: string }> = [];
+
+  for (const presetName of presetDirs) {
+    const presetDir = path.join(presetsDir, presetName);
+    try {
+      const manifest = loadMigrationManifest(presetDir);
+      presets.push({
+        name: manifest.preset,
+        value: manifest.preset,
+        description: manifest.description,
+      });
+    } catch (error) {
+      // Skip invalid presets
+      continue;
+    }
+  }
+
+  return presets;
+}
+
+const AVAILABLE_PRESETS = getAvailablePresets();
+
+/**
+ * Handle duplicate transforms: prompt user or auto-filter based on flags
+ * Returns filtered transforms or undefined if cancelled
+ */
+async function handleDuplicateTransforms(
+  transformsToRun: Transform[],
+  targetPath: string,
+  args: CliArgs,
+): Promise<Transform[] | undefined> {
+  const transformPaths = transformsToRun.map((t) => t.file);
+  const alreadyRun = getAlreadyRunTransforms(targetPath, transformPaths);
+
+  // No duplicates - return as-is
+  if (alreadyRun.length === 0 || args.dryRun) {
+    return transformsToRun;
+  }
+
+  // Auto-filter with --skip-confirmation
+  if (args.skipConfirmation) {
+    const filtered = transformsToRun.filter((t) => !alreadyRun.includes(t.file));
+
+    if (filtered.length === 0) {
+      console.log('\n⚠️  No transforms to run (all have already been applied).\n');
+      process.exit(0);
+    }
+
+    return filtered;
+  }
+
+  // Interactive: prompt user
+  console.log('\n⚠️  Warning: Some transforms have already been run on this path:\n');
+  for (const transformPath of alreadyRun) {
+    console.log(`  • ${transformPath}`);
+  }
+  console.log('');
+
+  const { action } = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'action',
+      message: 'How would you like to proceed?',
+      choices: [
+        {
+          name: 'Skip already-run transforms (recommended)',
+          value: 'skip',
+        },
+        {
+          name: 'Re-run all transforms (may cause issues)',
+          value: 'rerun',
+        },
+        {
+          name: 'Cancel migration',
+          value: 'cancel',
+        },
+      ],
+      default: 'skip',
+    },
+  ]);
+
+  if (action === 'cancel') {
+    console.log('\n❌ Migration cancelled.\n');
+    return undefined;
+  }
+
+  if (action === 'skip') {
+    return transformsToRun.filter((t) => !alreadyRun.includes(t.file));
+  }
+
+  // action === 'rerun': return all
+  return transformsToRun;
+}
+
+async function selectMigrationScope(presetDir: string): Promise<MigrationSelection> {
+  const config = loadMigrationManifest(presetDir);
+
+  // Build list of transform choices (no "All" option for checkbox)
+  const transformChoices = config.transforms.map((transform) => ({
+    name: `${transform.name} - ${transform.description}`,
+    value: transform.name,
+  }));
+
+  const { selectedTransforms } = await inquirer.prompt([
+    {
+      type: 'checkbox',
+      name: 'selectedTransforms',
+      message: 'Which transforms do you want to run? (use spacebar to select, enter to confirm)',
+      choices: transformChoices,
+    },
+  ]);
+
+  // Return the selected transforms
+  return { transforms: selectedTransforms };
+}
+
+async function setupMigration(args: CliArgs) {
+  // Step 1: Ask for target path (skip if already provided)
+  let targetPath: string;
+
+  if (args.path) {
+    targetPath = args.path;
+  } else {
+    const answer = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'path',
+        message: 'Enter the path to your codebase (relative or absolute):',
+        default: './src',
+        validate: (input: string) => {
+          if (!input || input.trim() === '') {
+            return 'Please provide a valid path';
+          }
+          return true;
+        },
+      },
+    ]);
+    targetPath = answer.path;
+  }
+
+  // Step 2: Handle --transform flag (direct transform execution, no preset needed)
+  let transformsToRun: Transform[];
+
+  if (args.transform && args.transform.length > 0) {
+    // Build Transform objects from transform names
+    transformsToRun = args.transform.map((name) => {
+      // Support both simple names and paths (e.g., "button-variant" or "components/button-variant")
+      const transformFile = name.replace(/\.(js|ts)$/, ''); // Remove extension if provided
+
+      return {
+        name: transformFile.split('/').pop() || transformFile, // Use basename as name
+        description: `Transform: ${name}`,
+        file: transformFile,
+      };
+    });
+
+    // Show what will be run
+    console.log('\nMigration Plan:');
+    console.log('================\n');
+    for (const transform of transformsToRun) {
+      console.log(`  • ${transform.name}`);
+    }
+    console.log(`\nTotal transforms: ${transformsToRun.length}\n`);
+
+    // Check history and handle duplicates
+    const filtered = await handleDuplicateTransforms(transformsToRun, targetPath, args);
+    if (!filtered) return; // User cancelled
+
+    // Return for transform mode (no preset needed)
+    console.log('\n📋 Migration Summary:');
+    console.log(`  Path: ${targetPath}`);
+    console.log(`  Mode: ${args.dryRun ? 'Dry Run' : 'Apply Changes'}`);
+    if (args.packageScope) {
+      console.log(`  Package scope: ${args.packageScope}`);
+    }
+    if (args.importMapping && args.importMapping.length > 0) {
+      console.log(`  Import mappings: ${args.importMapping.join(', ')}`);
+    }
+    console.log(`  Transforms: ${filtered.length}\n`);
+
+    return {
+      preset: 'direct-transform',
+      path: targetPath,
+      dryRun: args.dryRun || false,
+      transformsToRun: filtered,
+      packageScope: args.packageScope,
+      importMapping: args.importMapping,
+    };
+  }
+
+  // Preset-based workflow
+  let preset: string;
+  let selection: MigrationSelection;
+
+  if (args.preset) {
+    preset = args.preset;
+  } else {
+    if (AVAILABLE_PRESETS.length === 0) {
+      console.error('Error: No presets found in src/presets/');
+      process.exit(1);
+    }
+
+    const answer = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'preset',
+        message: 'Which migration preset do you need?',
+        choices: AVAILABLE_PRESETS.map((m) => ({
+          name: `${m.name} - ${m.description}`,
+          value: m.value,
+        })),
+      },
+    ]);
+    preset = answer.preset;
+  }
+
+  // Validate preset exists
+  const presetDir = path.join(__dirname, 'presets', preset);
+  if (!fs.existsSync(presetDir)) {
+    console.error(`Error: Invalid preset '${preset}'`);
+    if (AVAILABLE_PRESETS.length > 0) {
+      console.error(`Available presets: ${AVAILABLE_PRESETS.map((p) => p.value).join(', ')}`);
+    }
+    process.exit(1);
+  }
+
+  // Step 3: Check and display migration history
+  const history = loadMigrationHistory(targetPath);
+  if (history && history.entries.length > 0) {
+    const historySummary = buildHistorySummary(targetPath);
+    console.log(historySummary);
+  }
+
+  // Step 4: Load config and select transforms (presetDir already defined above)
+  const config = loadMigrationManifest(presetDir);
+
+  if (args.partial) {
+    // User wants to select specific transforms
+    selection = await selectMigrationScope(presetDir);
+  } else {
+    // Default: run all transforms
+    selection = { all: true };
+  }
+
+  // Step 5: Show what will be migrated
+  const summary = buildMigrationSummary(config, selection);
+  transformsToRun = getSelectedTransforms(config, selection);
+  console.log(summary);
+
+  // Check history and handle duplicates
+  const filtered = await handleDuplicateTransforms(transformsToRun, targetPath, args);
+  if (!filtered) return; // User cancelled
+
+  // Return for preset mode
+  console.log('\n📋 Migration Summary:');
+  console.log(`  Preset: ${preset}`);
+  console.log(`  Path: ${targetPath}`);
+  console.log(`  Mode: ${args.dryRun ? 'Dry Run' : 'Apply Changes'}`);
+  if (args.packageScope) {
+    console.log(`  Package scope: ${args.packageScope}`);
+  }
+  if (args.importMapping && args.importMapping.length > 0) {
+    console.log(`  Import mappings: ${args.importMapping.join(', ')}`);
+  }
+  console.log(`  Transforms: ${filtered.length}\n`);
+
+  return {
+    preset,
+    path: targetPath,
+    dryRun: args.dryRun || false,
+    transformsToRun: filtered,
+    packageScope: args.packageScope,
+    importMapping: args.importMapping,
+  };
+}
+
+async function main() {
+  console.log('\n🚀 CDS Migrator\n');
+
+  // Parse CLI arguments
+  const args = parseCliArgs();
+
+  // Handle clear-history command
+  if (args.clearHistory) {
+    if (!args.path) {
+      console.error('Error: path is required when using --clear-history');
+      process.exit(1);
+    }
+
+    const history = loadMigrationHistory(args.path);
+    if (!history) {
+      console.log(`No migration history found at: ${args.path}`);
+      return;
+    }
+
+    if (args.skipConfirmation) {
+      clearMigrationHistory(args.path);
+      console.log(`✅ Migration history cleared for: ${args.path}\n`);
+    } else {
+      const historySummary = buildHistorySummary(args.path);
+      console.log(historySummary);
+
+      const { confirm } = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'confirm',
+          message: `⚠️  Clear migration history for ${args.path}?`,
+          default: false,
+        },
+      ]);
+
+      if (confirm) {
+        clearMigrationHistory(args.path);
+        console.log(`✅ Migration history cleared for: ${args.path}\n`);
+      } else {
+        console.log('❌ Cancelled.\n');
+      }
+    }
+    return;
+  }
+
+  // Setup migration: prompts only for missing information
+  const migrationOptions = await setupMigration(args);
+
+  if (!migrationOptions) {
+    console.error('\n❌ Migration setup failed.\n');
+    process.exit(1);
+  }
+
+  try {
+    await runMigration(migrationOptions);
+    console.log('\n✅ Migration completed successfully!\n');
+  } catch (error) {
+    console.error('\n❌ Migration failed:', error);
+    process.exit(1);
+  }
+}
+
+main().catch((error) => {
+  console.error('Unexpected error:', error);
+  process.exit(1);
+});
diff --git a/packages/migrator/src/index.ts b/packages/migrator/src/index.ts
new file mode 100644
index 0000000000..8c17d353d4
--- /dev/null
+++ b/packages/migrator/src/index.ts
@@ -0,0 +1,9 @@
+/**
+ * @coinbase/cds-migrator
+ *
+ * Code migration tools for the Coinbase Design System
+ */
+
+export { runMigration } from './runner';
+export * from './types';
+export * from './utils/index';
diff --git a/packages/migrator/src/presets/v8-to-v9-mobile/manifest.json b/packages/migrator/src/presets/v8-to-v9-mobile/manifest.json
new file mode 100644
index 0000000000..34c1a2a968
--- /dev/null
+++ b/packages/migrator/src/presets/v8-to-v9-mobile/manifest.json
@@ -0,0 +1,26 @@
+{
+  "preset": "v8-to-v9-mobile",
+  "description": "Upgrade from CDS v8 to v9 (mobile)",
+  "transforms": [
+    {
+      "name": "button-variant-values",
+      "description": "Remap Button/IconButton variant values: tertiary -> inverse, foregroundMuted -> secondary",
+      "file": "v9/button-variant-values"
+    },
+    {
+      "name": "migrate-use-merge-refs-import",
+      "description": "Migrate useMergeRefs: @coinbase/cds-common/hooks/useMergeRefs → utils/mergeRefs, rename binding to mergeRefs, merge duplicate imports",
+      "file": "v9/migrate-use-merge-refs"
+    },
+    {
+      "name": "migrate-layout-types-mobile",
+      "description": "Migrate layout types from @coinbase/cds-common to @coinbase/cds-mobile",
+      "file": "v9/migrate-layout-types-mobile"
+    },
+    {
+      "name": "migrate-visualization-imports",
+      "description": "Migrate @coinbase/cds-mobile-visualization imports to @coinbase/cds-mobile/visualizations sub-paths",
+      "file": "v9/migrate-visualization-imports"
+    }
+  ]
+}
diff --git a/packages/migrator/src/presets/v8-to-v9-web/manifest.json b/packages/migrator/src/presets/v8-to-v9-web/manifest.json
new file mode 100644
index 0000000000..9cf5af9fb3
--- /dev/null
+++ b/packages/migrator/src/presets/v8-to-v9-web/manifest.json
@@ -0,0 +1,42 @@
+{
+  "preset": "v8-to-v9-web",
+  "description": "Upgrade from CDS v8 to v9 (web)",
+  "transforms": [
+    {
+      "name": "button-variant-values",
+      "description": "Remap Button/IconButton variant values: tertiary -> inverse, foregroundMuted -> secondary",
+      "file": "v9/button-variant-values"
+    },
+    {
+      "name": "migrate-use-merge-refs-import",
+      "description": "Migrate useMergeRefs: @coinbase/cds-common/hooks/useMergeRefs → utils/mergeRefs, rename binding to mergeRefs, merge duplicate imports",
+      "file": "v9/migrate-use-merge-refs"
+    },
+    {
+      "name": "migrate-layout-types-web",
+      "description": "Migrate layout types from @coinbase/cds-common to @coinbase/cds-web",
+      "file": "v9/migrate-layout-types-web"
+    },
+    {
+      "name": "migrate-visualization-imports",
+      "description": "Migrate @coinbase/cds-web-visualization imports to @coinbase/cds-web/visualizations sub-paths",
+      "file": "v9/migrate-visualization-imports"
+    },
+    {
+      "name": "migrate-interactable-css-vars",
+      "description": "Rename interactable CSS custom properties: --interactable-* → --inter-* (JS/TS files only)",
+      "file": "v9/migrate-interactable-css-vars"
+    },
+    {
+      "name": "migrate-interactable-css-vars-css",
+      "description": "Rename interactable CSS custom properties: --interactable-* → --inter-* (CSS/SCSS/HTML files)",
+      "file": "v9/migrate-interactable-css-vars-css",
+      "type": "script"
+    },
+    {
+      "name": "theme-provider-isolated",
+      "description": "Add isolated prop to all ThemeProvider usages to preserve v8 behavior of injecting the full theme CSS variables",
+      "file": "v9/theme-provider-isolated"
+    }
+  ]
+}
diff --git a/packages/migrator/src/runner.ts b/packages/migrator/src/runner.ts
new file mode 100644
index 0000000000..4c133e2ff1
--- /dev/null
+++ b/packages/migrator/src/runner.ts
@@ -0,0 +1,200 @@
+/**
+ * Migration runner
+ *
+ * Coordinates the execution of version-specific migrations
+ */
+
+import { execFileSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+
+import {
+  type ImportMapping,
+  mergeImportMappings,
+  parseImportMappings,
+} from './utils/import-mapping';
+import { createLogger, recordTransformRun } from './utils/index';
+import { normalizePackageScope } from './utils/package-scope';
+import { loadRepoConfig } from './utils/repo-config';
+import type { Transform } from './types';
+
+// In CommonJS, __dirname is automatically available
+declare const __dirname: string;
+
+/**
+ * Directories excluded from all transforms — both jscodeshift and script types.
+ * Script transforms receive these as `--ignore=<pattern>` CLI args so that a
+ * single source of truth governs what gets skipped.
+ */
+export const RUNNER_IGNORE_PATTERNS = [
+  '**/node_modules/**',
+  '**/.next/**',
+  '**/dist/**',
+  '**/build/**',
+];
+
+type RunMigrationOptions = {
+  preset?: string; // Optional - not needed for direct transform execution
+  path: string;
+  dryRun: boolean;
+  transformsToRun: Transform[];
+  /** Forwarded to jscodeshift as `--packageScope` for scope-targeted transforms. */
+  packageScope?: string;
+  /**
+   * Raw rewrite strings from the CLI (`'<from>=<to>'` format). Merged with any
+   * `cds-migrator.config.json` found at the target path; CLI wins on conflicts.
+   */
+  importMapping?: string[];
+};
+
+export async function runMigration(options: RunMigrationOptions): Promise<void> {
+  const {
+    preset,
+    path: targetPath,
+    dryRun,
+    transformsToRun,
+    packageScope: packageScopeRaw,
+    importMapping: importMappingCli,
+  } = options;
+  const packageScope = packageScopeRaw ? normalizePackageScope(packageScopeRaw) : undefined;
+
+  // Merge import rewrites: config file provides defaults, CLI flags override.
+  const repoConfig = loadRepoConfig(targetPath);
+  const configRewrites: ImportMapping[] = repoConfig?.importMappings ?? [];
+  const cliRewrites: ImportMapping[] = importMappingCli
+    ? parseImportMappings(importMappingCli)
+    : [];
+  const importMappings = mergeImportMappings(configRewrites, cliRewrites);
+
+  // Fall back to config-file packageScope when not set via CLI.
+  const resolvedPackageScope =
+    packageScope ??
+    (repoConfig?.packageScope ? normalizePackageScope(repoConfig.packageScope) : undefined);
+
+  console.log(`\n🔄 Running migration...\n`);
+
+  // Create logger for this migration run
+  const logger = createLogger(process.cwd());
+  logger.info(`Starting migration${preset ? ` (${preset})` : ''}`);
+  logger.info(`Target path: ${targetPath}`);
+  logger.info(`Mode: ${dryRun ? 'Dry Run' : 'Apply Changes'}`);
+  if (resolvedPackageScope) {
+    logger.info(`Package scope: ${resolvedPackageScope} (only matching imports are rewritten)`);
+  }
+  if (importMappings.length > 0) {
+    for (const { from, to } of importMappings) {
+      logger.info(`Import rewrite: ${from} → ${to}`);
+    }
+  }
+
+  if (transformsToRun.length === 0) {
+    console.log('ℹ️  No transforms to run.');
+    logger.warn('No transforms to run');
+    return;
+  }
+
+  logger.info(`Running ${transformsToRun.length} transforms`);
+
+  // Track successes and failures
+  const results = { success: 0, failure: 0 };
+
+  // Run each transform using jscodeshift
+  // CLI has already filtered the list, so just run everything
+  for (const transform of transformsToRun) {
+    const transformFilePath = transform.file;
+
+    console.log(`\n  → Running transform: ${transform.name}`);
+    console.log(`    ${transform.description}`);
+    logger.info(`Running transform: ${transform.name}`);
+
+    // Add .js extension if not present (transforms are compiled from .ts to .js)
+    const transformFile = transformFilePath.endsWith('.js')
+      ? transformFilePath
+      : `${transformFilePath}.js`;
+    // Transforms are in src/transforms/, built to cjs/transforms/
+    const transformsDir = path.join(__dirname, 'transforms');
+    const fullTransformPath = path.join(transformsDir, transformFile);
+
+    // Check if transform file exists before running
+    if (!fs.existsSync(fullTransformPath)) {
+      console.error(`\n  ✗ Transform failed: ${transform.name}`);
+      console.error(`     Transform file not found: ${fullTransformPath}\n`);
+      logger.error(
+        `Transform file not found: ${transform.name}`,
+        fullTransformPath,
+        undefined,
+        `File does not exist at: ${fullTransformPath}`,
+      );
+      results.failure++;
+      continue; // Skip this transform and continue with others
+    }
+
+    try {
+      if (transform.type === 'script') {
+        const scriptArgs = [
+          fullTransformPath,
+          targetPath,
+          ...(dryRun ? ['--dry'] : []),
+          ...RUNNER_IGNORE_PATTERNS.map((p) => `--ignore-pattern=${p}`),
+        ];
+        console.log(`    Command: node ${scriptArgs.join(' ')}\n`);
+        execFileSync('node', scriptArgs, { stdio: 'inherit', cwd: process.cwd() });
+      } else {
+        // Build jscodeshift arguments for npx
+        const extensions = transform.extensions || 'tsx,ts,jsx,js';
+        const jscodeshiftArgs = [
+          'jscodeshift',
+          ...(dryRun ? ['--dry'] : []),
+          '--parser=tsx',
+          `--extensions=${extensions}`,
+          ...RUNNER_IGNORE_PATTERNS.map((p) => `--ignore-pattern=${p}`),
+          `--transform=${fullTransformPath}`,
+          ...(resolvedPackageScope ? [`--packageScope=${resolvedPackageScope}`] : []),
+          // Serialize aliases as a JSON array so transforms can parse them with
+          // getImportMappingsFromOptions without any additional string splitting.
+          ...(importMappings.length > 0
+            ? [`--importMappings=${JSON.stringify(importMappings)}`]
+            : []),
+          targetPath,
+        ];
+
+        console.log(`    Command: npx ${jscodeshiftArgs.join(' ')}\n`);
+
+        // execFileSync: first arg is command, second arg is array of arguments
+        execFileSync('npx', jscodeshiftArgs, {
+          stdio: 'inherit',
+          cwd: process.cwd(),
+        });
+      }
+
+      console.log(`\n  ✓ Transform completed: ${transform.name}`);
+      logger.success(`Transform completed: ${transform.name}`);
+      results.success++;
+
+      // Record this transform run in history (file path is the ID)
+      recordTransformRun(targetPath, transformFilePath, dryRun);
+    } catch (error: any) {
+      console.error(`\n  ✗ Transform failed: ${transform.name}`);
+      console.error(`     Error: ${error.message || String(error)}\n`);
+      logger.error(
+        `Transform failed: ${transform.name}`,
+        undefined,
+        undefined,
+        error.message || String(error),
+      );
+      results.failure++;
+      // Continue with other transforms
+    }
+  }
+
+  // Write summary and close logger
+  logger.writeSummary();
+
+  // Report final status if any failures
+  if (results.failure > 0) {
+    console.log(`\n⚠️  Migration completed with errors:`);
+    console.log(`   ✓ ${results.success} succeeded`);
+    console.log(`   ✗ ${results.failure} failed\n`);
+    process.exit(1);
+  }
+}
diff --git a/packages/migrator/src/test-utils/codemodTestUtils.ts b/packages/migrator/src/test-utils/codemodTestUtils.ts
new file mode 100644
index 0000000000..99360401e2
--- /dev/null
+++ b/packages/migrator/src/test-utils/codemodTestUtils.ts
@@ -0,0 +1,2 @@
+/** Default parser options for CDS transforms that operate on TSX. */
+export const tsxTestOptions = { parser: 'tsx' as const };
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/button-variant-values/e2e-chat-toolbar-actions.input.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/button-variant-values/e2e-chat-toolbar-actions.input.tsx
new file mode 100644
index 0000000000..903405666c
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/button-variant-values/e2e-chat-toolbar-actions.input.tsx
@@ -0,0 +1,27 @@
+import { Button, IconButton } from '@coinbase/cds-web/buttons';
+import { Box, HStack, VStack } from '@coinbase/cds-web/layout';
+import { Text } from '@coinbase/cds-web/typography';
+
+/** Representative pattern: header IconButton + centered tertiary Button in a vertical stack. */
+export function ChatToolbarActions() {
+  const handleBack = () => {};
+  const handleLoadOlder = () => {};
+
+  return (
+    <VStack gap={0} alignItems="stretch">
+      <HStack justifyContent="space-between" alignItems="center" padding={2} paddingX={3}>
+        <HStack gap={1.5} alignItems="center">
+          <IconButton name="arrowLeft" onClick={handleBack} variant="tertiary" compact />
+          <Text font="headline" fontSize="title3">
+            Conversation
+          </Text>
+        </HStack>
+      </HStack>
+      <Box textAlign="center" paddingY={1}>
+        <Button variant="tertiary" compact onClick={handleLoadOlder} disabled={false}>
+          Load older messages
+        </Button>
+      </Box>
+    </VStack>
+  );
+}
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/button-variant-values/e2e-chat-toolbar-actions.output.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/button-variant-values/e2e-chat-toolbar-actions.output.tsx
new file mode 100644
index 0000000000..97863384be
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/button-variant-values/e2e-chat-toolbar-actions.output.tsx
@@ -0,0 +1,27 @@
+import { Button, IconButton } from '@coinbase/cds-web/buttons';
+import { Box, HStack, VStack } from '@coinbase/cds-web/layout';
+import { Text } from '@coinbase/cds-web/typography';
+
+/** Representative pattern: header IconButton + centered tertiary Button in a vertical stack. */
+export function ChatToolbarActions() {
+  const handleBack = () => {};
+  const handleLoadOlder = () => {};
+
+  return (
+    <VStack gap={0} alignItems="stretch">
+      <HStack justifyContent="space-between" alignItems="center" padding={2} paddingX={3}>
+        <HStack gap={1.5} alignItems="center">
+          <IconButton name="arrowLeft" onClick={handleBack} variant="inverse" compact />
+          <Text font="headline" fontSize="title3">
+            Conversation
+          </Text>
+        </HStack>
+      </HStack>
+      <Box textAlign="center" paddingY={1}>
+        <Button variant="inverse" compact onClick={handleLoadOlder} disabled={false}>
+          Load older messages
+        </Button>
+      </Box>
+    </VStack>
+  );
+}
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/button-variant-values/e2e-survey-confirmation-panel.input.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/button-variant-values/e2e-survey-confirmation-panel.input.tsx
new file mode 100644
index 0000000000..6f24878f50
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/button-variant-values/e2e-survey-confirmation-panel.input.tsx
@@ -0,0 +1,31 @@
+import { Button } from '@coinbase/cds-web/buttons';
+import { Box, VStack } from '@coinbase/cds-web/layout';
+import { SpotSquare } from '@coinbase/cds-web/illustrations/SpotSquare';
+import { TextBody, TextTitle3 } from '@coinbase/cds-web/typography';
+
+/** Representative pattern: stacked layout + illustration + tertiary action after a confirmation. */
+export function SurveyConfirmationPanel() {
+  const handleAction = () => {};
+
+  return (
+    <Box height="100%" width="100%" overflow="auto">
+      <VStack
+        height="100%"
+        width="100%"
+        alignItems="center"
+        justifyContent="center"
+        gap={2}
+        padding={4}
+      >
+        <SpotSquare name="baseCheckMedium" />
+        <TextTitle3 as="h2">Submitted</TextTitle3>
+        <TextBody as="p" color="fgMuted" textAlign="center">
+          Your response was recorded.
+        </TextBody>
+        <Button variant="tertiary" onClick={handleAction} compact>
+          Submit another response
+        </Button>
+      </VStack>
+    </Box>
+  );
+}
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/button-variant-values/e2e-survey-confirmation-panel.output.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/button-variant-values/e2e-survey-confirmation-panel.output.tsx
new file mode 100644
index 0000000000..7d40708783
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/button-variant-values/e2e-survey-confirmation-panel.output.tsx
@@ -0,0 +1,31 @@
+import { Button } from '@coinbase/cds-web/buttons';
+import { Box, VStack } from '@coinbase/cds-web/layout';
+import { SpotSquare } from '@coinbase/cds-web/illustrations/SpotSquare';
+import { TextBody, TextTitle3 } from '@coinbase/cds-web/typography';
+
+/** Representative pattern: stacked layout + illustration + tertiary action after a confirmation. */
+export function SurveyConfirmationPanel() {
+  const handleAction = () => {};
+
+  return (
+    <Box height="100%" width="100%" overflow="auto">
+      <VStack
+        height="100%"
+        width="100%"
+        alignItems="center"
+        justifyContent="center"
+        gap={2}
+        padding={4}
+      >
+        <SpotSquare name="baseCheckMedium" />
+        <TextTitle3 as="h2">Submitted</TextTitle3>
+        <TextBody as="p" color="fgMuted" textAlign="center">
+          Your response was recorded.
+        </TextBody>
+        <Button variant="inverse" onClick={handleAction} compact>
+          Submit another response
+        </Button>
+      </VStack>
+    </Box>
+  );
+}
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/migrate-interactable-css-vars/e2e-pressable-style-overrides.input.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-interactable-css-vars/e2e-pressable-style-overrides.input.tsx
new file mode 100644
index 0000000000..d1dab7c839
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-interactable-css-vars/e2e-pressable-style-overrides.input.tsx
@@ -0,0 +1,53 @@
+import type { CSSProperties } from 'react';
+
+import { Pressable } from '@coinbase/cds-web/pressable';
+import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
+
+/** Representative pattern: component applying multiple interactable CSS var overrides. */
+
+const baseOverrides: CSSProperties = {
+  '--interactable-background': 'transparent',
+  '--interactable-border-color': 'var(--color-lineMuted)',
+} as CSSProperties;
+
+function buildStateOverrides(primaryColor: string, pressedColor: string): CSSProperties {
+  return {
+    ['--interactable-hovered-background' as keyof CSSProperties]: primaryColor,
+    ['--interactable-pressed-background' as keyof CSSProperties]: pressedColor,
+    ['--interactable-hovered-opacity' as keyof CSSProperties]: '0.98',
+    ['--interactable-pressed-opacity' as keyof CSSProperties]: '0.92',
+  };
+}
+
+function buildDisabledOverrides(): CSSProperties {
+  return {
+    '--interactable-disabled-background': 'transparent',
+    '--interactable-disabled-border-color': 'var(--color-lineDisabled)',
+  } as CSSProperties;
+}
+
+export function ThemedPressableCard({ children }: { children: React.ReactNode }) {
+  const theme = useTheme();
+
+  const borderRadiusOverride = {
+    '--interactable-border-radius': theme.radii.medium,
+  } as CSSProperties;
+
+  const stateOverrides = buildStateOverrides(
+    'var(--color-bgSecondaryHovered)',
+    'var(--color-bgSecondaryPressed)',
+  );
+
+  return (
+    <Pressable
+      style={{
+        ...baseOverrides,
+        ...stateOverrides,
+        ...buildDisabledOverrides(),
+        ...borderRadiusOverride,
+      }}
+    >
+      {children}
+    </Pressable>
+  );
+}
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/migrate-interactable-css-vars/e2e-pressable-style-overrides.output.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-interactable-css-vars/e2e-pressable-style-overrides.output.tsx
new file mode 100644
index 0000000000..e34d5abd1c
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-interactable-css-vars/e2e-pressable-style-overrides.output.tsx
@@ -0,0 +1,53 @@
+import type { CSSProperties } from 'react';
+
+import { Pressable } from '@coinbase/cds-web/pressable';
+import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
+
+/** Representative pattern: component applying multiple interactable CSS var overrides. */
+
+const baseOverrides: CSSProperties = {
+  "--inter-bg": 'transparent',
+  "--inter-borderColor": 'var(--color-lineMuted)',
+} as CSSProperties;
+
+function buildStateOverrides(primaryColor: string, pressedColor: string): CSSProperties {
+  return {
+    ["--inter-hover-bg" as keyof CSSProperties]: primaryColor,
+    ["--inter-press-bg" as keyof CSSProperties]: pressedColor,
+    ["--inter-hover-opacity" as keyof CSSProperties]: '0.98',
+    ["--inter-press-opacity" as keyof CSSProperties]: '0.92',
+  };
+}
+
+function buildDisabledOverrides(): CSSProperties {
+  return {
+    "--inter-disable-bg": 'transparent',
+    "--inter-disable-borderColor": 'var(--color-lineDisabled)',
+  } as CSSProperties;
+}
+
+export function ThemedPressableCard({ children }: { children: React.ReactNode }) {
+  const theme = useTheme();
+
+  const borderRadiusOverride = {
+    "--inter-borderRadius": theme.radii.medium,
+  } as CSSProperties;
+
+  const stateOverrides = buildStateOverrides(
+    'var(--color-bgSecondaryHovered)',
+    'var(--color-bgSecondaryPressed)',
+  );
+
+  return (
+    <Pressable
+      style={{
+        ...baseOverrides,
+        ...stateOverrides,
+        ...buildDisabledOverrides(),
+        ...borderRadiusOverride,
+      }}
+    >
+      {children}
+    </Pressable>
+  );
+}
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/migrate-layout-types-mobile/sheet-layout-props-from-common.input.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-layout-types-mobile/sheet-layout-props-from-common.input.tsx
new file mode 100644
index 0000000000..39121536f8
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-layout-types-mobile/sheet-layout-props-from-common.input.tsx
@@ -0,0 +1,7 @@
+import type { DimensionValue, PositionStyles, SharedProps } from '@coinbase/cds-common/types';
+
+/** Composite sheet-style props mixing `SharedProps` with layout types from common (`@coinbase`). */
+export type BottomSheetLayoutProps = SharedProps & {
+  maxHeight?: DimensionValue;
+  contentInset?: PositionStyles;
+};
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/migrate-layout-types-mobile/sheet-layout-props-from-common.output.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-layout-types-mobile/sheet-layout-props-from-common.output.tsx
new file mode 100644
index 0000000000..782159f4c9
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-layout-types-mobile/sheet-layout-props-from-common.output.tsx
@@ -0,0 +1,9 @@
+import type { DimensionValue } from "react-native";
+import type { PositionStyles } from "@coinbase/cds-mobile/styles/styleProps";
+import type { SharedProps } from '@coinbase/cds-common/types';
+
+/** Composite sheet-style props mixing `SharedProps` with layout types from common (`@coinbase`). */
+export type BottomSheetLayoutProps = SharedProps & {
+  maxHeight?: DimensionValue;
+  contentInset?: PositionStyles;
+};
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/migrate-layout-types-web/modal-like-props-from-common.input.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-layout-types-web/modal-like-props-from-common.input.tsx
new file mode 100644
index 0000000000..9d8fc717b7
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-layout-types-web/modal-like-props-from-common.input.tsx
@@ -0,0 +1,10 @@
+import type { DimensionValue, PositionStyles, SharedProps } from '@coinbase/cds-common/types';
+
+/**
+ * Composite props: `SharedProps` stays on common; `PositionStyles` + `DimensionValue` migrate
+ * (overlay-style layout props).
+ */
+export type ModalLikeProps = SharedProps & {
+  position?: PositionStyles;
+  width?: DimensionValue;
+};
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/migrate-layout-types-web/modal-like-props-from-common.output.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-layout-types-web/modal-like-props-from-common.output.tsx
new file mode 100644
index 0000000000..62a32ca022
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-layout-types-web/modal-like-props-from-common.output.tsx
@@ -0,0 +1,13 @@
+import type { PositionStyles } from "@coinbase/cds-web/styles/styleProps";
+import type { SharedProps } from '@coinbase/cds-common/types';
+
+type DimensionValue = string | number | 'auto';
+
+/**
+ * Composite props: `SharedProps` stays on common; `PositionStyles` + `DimensionValue` migrate
+ * (overlay-style layout props).
+ */
+export type ModalLikeProps = SharedProps & {
+  position?: PositionStyles;
+  width?: DimensionValue;
+};
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/migrate-use-merge-refs/cds-mobile-scroll-to-hook.input.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-use-merge-refs/cds-mobile-scroll-to-hook.input.tsx
new file mode 100644
index 0000000000..848730c91e
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-use-merge-refs/cds-mobile-scroll-to-hook.input.tsx
@@ -0,0 +1,18 @@
+import { useCallback, useRef } from 'react';
+import type { ScrollView } from 'react-native';
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+
+/** Representative pattern: hook merges a caller ref with an internal ref for imperative APIs. */
+type AnyRef<T> =
+  | React.Ref<T | null | undefined>
+  | ((node: T | null | undefined) => void)
+  | React.MutableRefObject<T | null | undefined>;
+
+export const useScrollTo = (ref?: AnyRef<ScrollView>) => {
+  const internalRef = useRef<ScrollView>(undefined);
+  const scrollRef = useMergeRefs(ref, internalRef);
+  const scrollTo = useCallback(() => {
+    internalRef.current?.scrollTo({ x: 0, y: 0, animated: true });
+  }, []);
+  return [scrollRef, scrollTo] as const;
+};
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/migrate-use-merge-refs/cds-mobile-scroll-to-hook.output.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-use-merge-refs/cds-mobile-scroll-to-hook.output.tsx
new file mode 100644
index 0000000000..9a2d26c1fb
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-use-merge-refs/cds-mobile-scroll-to-hook.output.tsx
@@ -0,0 +1,18 @@
+import { useCallback, useRef } from 'react';
+import type { ScrollView } from 'react-native';
+import { mergeRefs } from "@coinbase/cds-common/utils/mergeRefs";
+
+/** Representative pattern: hook merges a caller ref with an internal ref for imperative APIs. */
+type AnyRef<T> =
+  | React.Ref<T | null | undefined>
+  | ((node: T | null | undefined) => void)
+  | React.MutableRefObject<T | null | undefined>;
+
+export const useScrollTo = (ref?: AnyRef<ScrollView>) => {
+  const internalRef = useRef<ScrollView>(undefined);
+  const scrollRef = mergeRefs(ref, internalRef);
+  const scrollTo = useCallback(() => {
+    internalRef.current?.scrollTo({ x: 0, y: 0, animated: true });
+  }, []);
+  return [scrollRef, scrollTo] as const;
+};
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/migrate-use-merge-refs/cds-web-link-forwardref.input.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-use-merge-refs/cds-web-link-forwardref.input.tsx
new file mode 100644
index 0000000000..d9f323b8ae
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-use-merge-refs/cds-web-link-forwardref.input.tsx
@@ -0,0 +1,18 @@
+import React, { forwardRef, memo, useRef } from 'react';
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+
+/** Representative pattern: `forwardRef` + `useMergeRefs` to combine external and internal refs. */
+type DivProps = React.ComponentPropsWithoutRef<'div'>;
+
+export const Linkish = memo(
+  forwardRef<HTMLDivElement, DivProps>((props, ref) => {
+    const { children, ...rest } = props;
+    const linkRef = useRef<HTMLDivElement>(null);
+    const mergedRef = useMergeRefs(ref, linkRef);
+    return (
+      <div ref={mergedRef} {...rest}>
+        {children}
+      </div>
+    );
+  }),
+);
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/migrate-use-merge-refs/cds-web-link-forwardref.output.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-use-merge-refs/cds-web-link-forwardref.output.tsx
new file mode 100644
index 0000000000..c805c73e99
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-use-merge-refs/cds-web-link-forwardref.output.tsx
@@ -0,0 +1,18 @@
+import React, { forwardRef, memo, useRef } from 'react';
+import { mergeRefs } from "@coinbase/cds-common/utils/mergeRefs";
+
+/** Representative pattern: `forwardRef` + `useMergeRefs` to combine external and internal refs. */
+type DivProps = React.ComponentPropsWithoutRef<'div'>;
+
+export const Linkish = memo(
+  forwardRef<HTMLDivElement, DivProps>((props, ref) => {
+    const { children, ...rest } = props;
+    const linkRef = useRef<HTMLDivElement>(null);
+    const mergedRef = mergeRefs(ref, linkRef);
+    return (
+      <div ref={mergedRef} {...rest}>
+        {children}
+      </div>
+    );
+  }),
+);
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/migrate-visualization-imports/e2e-chart-hook.input.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-visualization-imports/e2e-chart-hook.input.tsx
new file mode 100644
index 0000000000..0dabaa7ceb
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-visualization-imports/e2e-chart-hook.input.tsx
@@ -0,0 +1,57 @@
+import { useCallback, useRef, useState } from 'react';
+
+import { useToggler } from '@coinbase/cds-common/hooks/useToggler';
+import type { ChartData, ChartDataPoint, ChartScrubParams, SparklineInteractiveHeaderRef, SparklineInteractiveSubHead } from '@coinbase/cds-web-visualization';
+import { Sparkline, SparklineArea, SparklineGradient, SparklineInteractive, SparklineInteractiveHeader } from '@coinbase/cds-web-visualization';
+import { CartesianChart, PeriodSelector } from '@coinbase/cds-web-visualization/chart';
+import { SparklineInteractiveContent } from '@coinbase/cds-web-visualization/sparkline';
+import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
+
+/** Representative pattern: chart hook using root-barrel type imports + named sub-path imports. */
+type ChartPeriod = 'hour' | 'day' | 'week' | 'month' | 'year';
+
+type UseSparklineChartParams = {
+  defaultLabel: string;
+  defaultTitle: string;
+  defaultSubHead?: SparklineInteractiveSubHead;
+};
+
+export function useSparklineChart({
+  defaultLabel,
+  defaultTitle,
+  defaultSubHead,
+}: UseSparklineChartParams) {
+  const theme = useTheme();
+  const headerRef = useRef<SparklineInteractiveHeaderRef>(null);
+  const [activePeriod, setActivePeriod] = useState<ChartPeriod>('day');
+  const [isScrubbing, { toggleOn: handleScrubStart, toggleOff: handleScrubEnd }] = useToggler(false);
+
+  const handleScrub = useCallback(
+    ({ point }: ChartScrubParams<string>) => {
+      headerRef.current?.update({ title: String(point.value) });
+    },
+    [],
+  );
+
+  const handlePointSelect = useCallback(
+    ({ value }: ChartDataPoint) => {
+      setActivePeriod('day');
+      headerRef.current?.update({ title: String(value) });
+    },
+    [],
+  );
+
+  return {
+    theme,
+    headerRef,
+    activePeriod,
+    isScrubbing,
+    handleScrubStart,
+    handleScrubEnd,
+    handleScrub,
+    handlePointSelect,
+  };
+}
+
+export type { ChartData, ChartDataPoint };
+export { CartesianChart, PeriodSelector, Sparkline, SparklineArea, SparklineGradient, SparklineInteractive, SparklineInteractiveHeader, SparklineInteractiveContent };
diff --git a/packages/migrator/src/transforms/v9/__testfixtures__/migrate-visualization-imports/e2e-chart-hook.output.tsx b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-visualization-imports/e2e-chart-hook.output.tsx
new file mode 100644
index 0000000000..32dba30d81
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__testfixtures__/migrate-visualization-imports/e2e-chart-hook.output.tsx
@@ -0,0 +1,57 @@
+import { useCallback, useRef, useState } from 'react';
+
+import { useToggler } from '@coinbase/cds-common/hooks/useToggler';
+import type { ChartData, ChartDataPoint, ChartScrubParams, SparklineInteractiveHeaderRef, SparklineInteractiveSubHead } from "@coinbase/cds-web/visualizations";
+import { Sparkline, SparklineArea, SparklineGradient, SparklineInteractive, SparklineInteractiveHeader } from "@coinbase/cds-web/visualizations";
+import { CartesianChart, PeriodSelector } from "@coinbase/cds-web/visualizations/chart";
+import { SparklineInteractiveContent } from "@coinbase/cds-web/visualizations/sparkline";
+import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
+
+/** Representative pattern: chart hook using root-barrel type imports + named sub-path imports. */
+type ChartPeriod = 'hour' | 'day' | 'week' | 'month' | 'year';
+
+type UseSparklineChartParams = {
+  defaultLabel: string;
+  defaultTitle: string;
+  defaultSubHead?: SparklineInteractiveSubHead;
+};
+
+export function useSparklineChart({
+  defaultLabel,
+  defaultTitle,
+  defaultSubHead,
+}: UseSparklineChartParams) {
+  const theme = useTheme();
+  const headerRef = useRef<SparklineInteractiveHeaderRef>(null);
+  const [activePeriod, setActivePeriod] = useState<ChartPeriod>('day');
+  const [isScrubbing, { toggleOn: handleScrubStart, toggleOff: handleScrubEnd }] = useToggler(false);
+
+  const handleScrub = useCallback(
+    ({ point }: ChartScrubParams<string>) => {
+      headerRef.current?.update({ title: String(point.value) });
+    },
+    [],
+  );
+
+  const handlePointSelect = useCallback(
+    ({ value }: ChartDataPoint) => {
+      setActivePeriod('day');
+      headerRef.current?.update({ title: String(value) });
+    },
+    [],
+  );
+
+  return {
+    theme,
+    headerRef,
+    activePeriod,
+    isScrubbing,
+    handleScrubStart,
+    handleScrubEnd,
+    handleScrub,
+    handlePointSelect,
+  };
+}
+
+export type { ChartData, ChartDataPoint };
+export { CartesianChart, PeriodSelector, Sparkline, SparklineArea, SparklineGradient, SparklineInteractive, SparklineInteractiveHeader, SparklineInteractiveContent };
diff --git a/packages/migrator/src/transforms/v9/__tests__/button-variant-values.test.ts b/packages/migrator/src/transforms/v9/__tests__/button-variant-values.test.ts
new file mode 100644
index 0000000000..221b5b349c
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__tests__/button-variant-values.test.ts
@@ -0,0 +1,349 @@
+import { runInlineTest, runTest } from 'jscodeshift/src/testUtils';
+
+import { tsxTestOptions } from '../../../test-utils/codemodTestUtils';
+import transform from '../button-variant-values';
+
+const FIXTURE_SUITE = 'button-variant-values';
+
+/** Only consumer-style E2E goldens (all other cases are inline below). */
+const E2E_PAIRED_PREFIXES = [
+  `${FIXTURE_SUITE}/e2e-survey-confirmation-panel`,
+  `${FIXTURE_SUITE}/e2e-chat-toolbar-actions`,
+] as const;
+
+describe('button-variant-values', () => {
+  it('rewrites variant="tertiary" to variant="inverse" on Button from @coinbase/cds-web/buttons', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'web-buttons.tsx',
+        source: `
+import { Button } from '@coinbase/cds-web/buttons';
+const App = () => <Button variant="tertiary">Click</Button>;
+`,
+      },
+      `
+import { Button } from '@coinbase/cds-web/buttons';
+const App = () => <Button variant="inverse">Click</Button>;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('does not rewrite Button imported from package root @coinbase/cds-web (not a v8 export)', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'root-web.tsx',
+        source: `
+import { Button } from '@coinbase/cds-web';
+const App = () => <Button variant="tertiary">Click</Button>;
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('does not rewrite IconButton imported from package root @coinbase/cds-mobile (not a v8 export)', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'root-mobile.tsx',
+        source: `
+import { IconButton } from '@coinbase/cds-mobile';
+const App = () => <IconButton variant="tertiary" name="plus" />;
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('rewrites variant="foregroundMuted" to variant="secondary" on Button from @coinbase/cds-web/buttons', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'fg-muted.tsx',
+        source: `
+import { Button } from '@coinbase/cds-web/buttons';
+const App = () => <Button variant="foregroundMuted">Click</Button>;
+`,
+      },
+      `
+import { Button } from '@coinbase/cds-web/buttons';
+const App = () => <Button variant="secondary">Click</Button>;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('rewrites variant="tertiary" to variant="inverse" on Button from a non-@coinbase scope', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'example-scope.tsx',
+        source: `
+import { Button } from '@example/cds-web/buttons';
+const App = () => <Button variant="tertiary">Click</Button>;
+`,
+      },
+      `
+import { Button } from '@example/cds-web/buttons';
+const App = () => <Button variant="inverse">Click</Button>;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('skips non-matching scope when --package-scope is set', () => {
+    runInlineTest(
+      transform,
+      { packageScope: '@coinbase' },
+      {
+        path: 'scope.tsx',
+        source: `
+import { Button } from '@example/cds-web/buttons';
+const App = () => <Button variant="tertiary">Click</Button>;
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('rewrites variant="tertiary" to variant="inverse" on IconButton from @coinbase/cds-mobile', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'icon-tertiary.tsx',
+        source: `
+import { IconButton } from '@coinbase/cds-mobile/buttons';
+const App = () => <IconButton variant="tertiary" name="plus" />;
+`,
+      },
+      `
+import { IconButton } from '@coinbase/cds-mobile/buttons';
+const App = () => <IconButton variant="inverse" name="plus" />;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('rewrites variant="foregroundMuted" to variant="secondary" on IconButton from @coinbase/cds-mobile', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'icon-fg-muted.tsx',
+        source: `
+import { IconButton } from '@coinbase/cds-mobile/buttons';
+const App = () => <IconButton variant="foregroundMuted" name="plus" />;
+`,
+      },
+      `
+import { IconButton } from '@coinbase/cds-mobile/buttons';
+const App = () => <IconButton variant="secondary" name="plus" />;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('adds a TODO comment for dynamic variant expressions', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'dynamic.tsx',
+        source: `
+import { Button } from '@coinbase/cds-web/buttons';
+const App = ({ v }) => <Button variant={v}>Click</Button>;
+`,
+      },
+      `
+import { Button } from '@coinbase/cds-web/buttons';
+const App = ({ v }) => // TODO [cds-migrator:button-variant-values]: Button variant values changed in v9: "tertiary" is now "inverse", "foregroundMuted" is now "secondary". Check if this dynamic value needs updating.
+<Button variant={v}>Click</Button>;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('does not add duplicate TODO if already present', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'dup-todo.tsx',
+        source: `
+import { Button } from '@coinbase/cds-web/buttons';
+const App = ({ v }) =>
+  // TODO [cds-migrator:button-variant-values]: Button variant values changed in v9: "tertiary" is now "inverse", "foregroundMuted" is now "secondary". Check if this dynamic value needs updating.
+  <Button variant={v}>Click</Button>;
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('returns empty string when there are no CDS button imports (local relative path)', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'local-button.tsx',
+        source: `
+import { Button } from './MyButton';
+const App = () => <Button variant="tertiary">Click</Button>;
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('returns empty string when there are no CDS button imports (non-CDS path)', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'local-components.tsx',
+        source: `import React from 'react';
+import { Button } from './components/Button';
+
+export function CustomToolbar() {
+  return (
+    <div>
+      <Button variant="tertiary">Cancel</Button>
+      <Button variant="foregroundMuted">Dismiss</Button>
+    </div>
+  );
+}
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('does not modify non-CDS Button components', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'third-party.tsx',
+        source: `
+import { Button } from '@coinbase/cds-web/buttons';
+import { Button as ThirdPartyButton } from 'third-party-lib';
+const App = () => (
+  <>
+    <Button variant="tertiary">CDS</Button>
+    <ThirdPartyButton variant="tertiary">Other</ThirdPartyButton>
+  </>
+);
+`,
+      },
+      `
+import { Button } from '@coinbase/cds-web/buttons';
+import { Button as ThirdPartyButton } from 'third-party-lib';
+const App = () => (
+  <>
+    <Button variant="inverse">CDS</Button>
+    <ThirdPartyButton variant="tertiary">Other</ThirdPartyButton>
+  </>
+);
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('does not modify already-correct variant values', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'already-correct.tsx',
+        source: `
+import { Button } from '@coinbase/cds-web/buttons';
+const App = () => (
+  <>
+    <Button variant="primary">A</Button>
+    <Button variant="inverse">B</Button>
+    <Button variant="secondary">C</Button>
+  </>
+);
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('transforms aliased CDS Button imports', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'alias.tsx',
+        source: `
+import { Button as CdsButton } from '@coinbase/cds-web/buttons';
+const App = () => <CdsButton variant="tertiary">Click</CdsButton>;
+`,
+      },
+      `
+import { Button as CdsButton } from '@coinbase/cds-web/buttons';
+const App = () => <CdsButton variant="inverse">Click</CdsButton>;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('produces the same result when run twice', () => {
+    /** Output after one pass on the idempotent test input (second pass must no-op). */
+    const BUTTON_ICONBUTTON_FIRST_PASS = `
+import { Button, IconButton } from '@coinbase/cds-web/buttons';
+const App = () => (
+  <>
+    <Button variant="inverse">A</Button>
+    <IconButton variant="secondary" name="plus" />
+  </>
+);
+`;
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'idempotent.tsx',
+        source: `
+import { Button, IconButton } from '@coinbase/cds-web/buttons';
+const App = () => (
+  <>
+    <Button variant="tertiary">A</Button>
+    <IconButton variant="foregroundMuted" name="plus" />
+  </>
+);
+`,
+      },
+      BUTTON_ICONBUTTON_FIRST_PASS,
+      tsxTestOptions,
+    );
+    runInlineTest(
+      transform,
+      {},
+      { path: 'idempotent-pass2.tsx', source: BUTTON_ICONBUTTON_FIRST_PASS },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it.each(E2E_PAIRED_PREFIXES)('%s', (prefix) => {
+    runTest(__dirname, 'button-variant-values', {}, prefix, tsxTestOptions);
+  });
+});
diff --git a/packages/migrator/src/transforms/v9/__tests__/migrate-interactable-css-vars-css.test.ts b/packages/migrator/src/transforms/v9/__tests__/migrate-interactable-css-vars-css.test.ts
new file mode 100644
index 0000000000..ef581cc847
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__tests__/migrate-interactable-css-vars-css.test.ts
@@ -0,0 +1,266 @@
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+
+import {
+  applyRenames,
+  DEFAULT_IGNORE_PATTERNS,
+  parseIgnorePatterns,
+  processDirectory,
+  VAR_RENAMES,
+} from '../migrate-interactable-css-vars-css';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeTmpDir(): string {
+  return fs.mkdtempSync(path.join(os.tmpdir(), 'cds-migrator-css-test-'));
+}
+
+function writeFile(dir: string, relativePath: string, content: string): string {
+  const fullPath = path.join(dir, relativePath);
+  fs.mkdirSync(path.dirname(fullPath), { recursive: true });
+  fs.writeFileSync(fullPath, content, 'utf8');
+  return fullPath;
+}
+
+function readFile(dir: string, relativePath: string): string {
+  return fs.readFileSync(path.join(dir, relativePath), 'utf8');
+}
+
+// ---------------------------------------------------------------------------
+// applyRenames — pure unit tests
+// ---------------------------------------------------------------------------
+
+describe('applyRenames', () => {
+  it('renames all 11 CSS vars', () => {
+    const input = VAR_RENAMES.map(([oldVar]) => `--custom: var(${oldVar});`).join('\n');
+    const output = VAR_RENAMES.map(([, newVar]) => `--custom: var(${newVar});`).join('\n');
+    expect(applyRenames(input)).toBe(output);
+  });
+
+  it('renames CSS var declarations', () => {
+    expect(applyRenames('--interactable-background: transparent;')).toBe(
+      '--inter-bg: transparent;',
+    );
+  });
+
+  it('renames CSS var references inside var()', () => {
+    expect(applyRenames('background: var(--interactable-background);')).toBe(
+      'background: var(--inter-bg);',
+    );
+  });
+
+  it('renames multiple vars in a single line', () => {
+    expect(
+      applyRenames('--interactable-background: blue; --interactable-pressed-background: darkblue;'),
+    ).toBe('--inter-bg: blue; --inter-press-bg: darkblue;');
+  });
+
+  it('renames vars across multiple lines', () => {
+    const input = `
+.button {
+  --interactable-background: transparent;
+  --interactable-hovered-background: rgb(250, 250, 250);
+  --interactable-pressed-background: rgb(235, 235, 236);
+}`;
+    const output = `
+.button {
+  --inter-bg: transparent;
+  --inter-hover-bg: rgb(250, 250, 250);
+  --inter-press-bg: rgb(235, 235, 236);
+}`;
+    expect(applyRenames(input)).toBe(output);
+  });
+
+  it('does not match partial names that are not CSS vars', () => {
+    expect(applyRenames('interactable-background')).toBe('interactable-background');
+    expect(applyRenames('--not-interactable-background')).toBe('--not-interactable-background');
+  });
+
+  it('is idempotent', () => {
+    const input = '--inter-bg: transparent; --inter-press-bg: blue;';
+    expect(applyRenames(input)).toBe(input);
+  });
+
+  it('returns the original string unchanged when there are no matches', () => {
+    const input = '.btn { background: red; border-radius: 8px; }';
+    expect(applyRenames(input)).toBe(input);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// parseIgnorePatterns
+// ---------------------------------------------------------------------------
+
+describe('parseIgnorePatterns', () => {
+  it('returns DEFAULT_IGNORE_PATTERNS when no --ignore-pattern= args are present', () => {
+    expect(parseIgnorePatterns([])).toEqual(DEFAULT_IGNORE_PATTERNS);
+    expect(parseIgnorePatterns(['--dry'])).toEqual(DEFAULT_IGNORE_PATTERNS);
+  });
+
+  it('parses a single --ignore-pattern= arg', () => {
+    expect(parseIgnorePatterns(['--ignore-pattern=**/dist/**'])).toEqual(['**/dist/**']);
+  });
+
+  it('parses multiple --ignore-pattern= args', () => {
+    expect(
+      parseIgnorePatterns([
+        '--ignore-pattern=**/node_modules/**',
+        '--ignore-pattern=**/.next/**',
+        '--dry',
+      ]),
+    ).toEqual(['**/node_modules/**', '**/.next/**']);
+  });
+
+  it('ignores args that do not start with --ignore-pattern=', () => {
+    expect(parseIgnorePatterns(['--dry', '--ignore-pattern=**/dist/**', '--unknown=foo'])).toEqual([
+      '**/dist/**',
+    ]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// processDirectory — integration tests using a real temp directory
+// ---------------------------------------------------------------------------
+
+describe('processDirectory', () => {
+  let tmpDir: string;
+
+  beforeEach(() => {
+    tmpDir = makeTmpDir();
+    jest.spyOn(console, 'log').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    fs.rmSync(tmpDir, { recursive: true, force: true });
+  });
+
+  it('rewrites CSS files in place', async () => {
+    writeFile(
+      tmpDir,
+      'styles.css',
+      '--interactable-background: transparent;\n--interactable-hovered-background: rgb(250,250,250);\n',
+    );
+
+    const result = await processDirectory(tmpDir, false);
+
+    expect(readFile(tmpDir, 'styles.css')).toBe(
+      '--inter-bg: transparent;\n--inter-hover-bg: rgb(250,250,250);\n',
+    );
+    expect(result).toEqual({ processed: 1, changed: 1 });
+  });
+
+  it('rewrites SCSS files in place', async () => {
+    writeFile(tmpDir, 'theme.scss', '.btn { --interactable-pressed-background: blue; }\n');
+
+    await processDirectory(tmpDir, false);
+
+    expect(readFile(tmpDir, 'theme.scss')).toBe('.btn { --inter-press-bg: blue; }\n');
+  });
+
+  it('rewrites HTML inline style attributes', async () => {
+    writeFile(
+      tmpDir,
+      'index.html',
+      '<div style="--interactable-background: var(--primary);"></div>\n',
+    );
+
+    await processDirectory(tmpDir, false);
+
+    expect(readFile(tmpDir, 'index.html')).toBe(
+      '<div style="--inter-bg: var(--primary);"></div>\n',
+    );
+  });
+
+  it('processes files in nested directories', async () => {
+    writeFile(tmpDir, 'a/b/deep.css', '--interactable-border-color: red;\n');
+
+    const result = await processDirectory(tmpDir, false);
+
+    expect(readFile(tmpDir, 'a/b/deep.css')).toBe('--inter-borderColor: red;\n');
+    expect(result.changed).toBe(1);
+  });
+
+  it('does not modify files with no matching vars', async () => {
+    const original = '.btn { background: blue; border-radius: 8px; }\n';
+    writeFile(tmpDir, 'unchanged.css', original);
+
+    const result = await processDirectory(tmpDir, false);
+
+    expect(readFile(tmpDir, 'unchanged.css')).toBe(original);
+    expect(result).toEqual({ processed: 1, changed: 0 });
+  });
+
+  it('does not modify JS/TS files', async () => {
+    const jsContent = "const bg = '--interactable-background';\n";
+    writeFile(tmpDir, 'styles.ts', jsContent);
+
+    const result = await processDirectory(tmpDir, false);
+
+    expect(readFile(tmpDir, 'styles.ts')).toBe(jsContent);
+    expect(result.processed).toBe(0);
+  });
+
+  it('does not write files when dryRun is true', async () => {
+    const original = '--interactable-background: transparent;\n';
+    writeFile(tmpDir, 'styles.css', original);
+
+    const result = await processDirectory(tmpDir, true);
+
+    expect(readFile(tmpDir, 'styles.css')).toBe(original);
+    expect(result).toEqual({ processed: 1, changed: 1 });
+  });
+
+  it('is idempotent: second run is a no-op', async () => {
+    writeFile(tmpDir, 'styles.css', '--interactable-background: transparent;\n');
+
+    await processDirectory(tmpDir, false);
+    const afterFirstPass = readFile(tmpDir, 'styles.css');
+
+    const secondResult = await processDirectory(tmpDir, false);
+
+    expect(readFile(tmpDir, 'styles.css')).toBe(afterFirstPass);
+    expect(secondResult).toEqual({ processed: 1, changed: 0 });
+  });
+
+  it('skips node_modules by default', async () => {
+    writeFile(
+      tmpDir,
+      'node_modules/some-lib/styles.css',
+      '--interactable-background: transparent;\n',
+    );
+
+    const result = await processDirectory(tmpDir, false);
+
+    expect(result.processed).toBe(0);
+  });
+
+  it('respects custom ignore patterns forwarded by the runner', async () => {
+    writeFile(tmpDir, 'generated/styles.css', '--interactable-background: transparent;\n');
+    writeFile(tmpDir, 'src/styles.css', '--interactable-background: transparent;\n');
+
+    const result = await processDirectory(tmpDir, false, ['**/generated/**']);
+
+    expect(result.processed).toBe(1);
+    expect(result.changed).toBe(1);
+    // generated/ was ignored — file is unchanged
+    expect(readFile(tmpDir, 'generated/styles.css')).toBe(
+      '--interactable-background: transparent;\n',
+    );
+    // src/ was processed
+    expect(readFile(tmpDir, 'src/styles.css')).toBe('--inter-bg: transparent;\n');
+  });
+
+  it('reports correct counts for mixed files', async () => {
+    writeFile(tmpDir, 'a.css', '--interactable-background: blue;\n');
+    writeFile(tmpDir, 'b.css', '.btn { color: red; }\n');
+    writeFile(tmpDir, 'c.scss', '--interactable-hovered-background: green;\n');
+
+    const result = await processDirectory(tmpDir, false);
+
+    expect(result).toEqual({ processed: 3, changed: 2 });
+  });
+});
diff --git a/packages/migrator/src/transforms/v9/__tests__/migrate-interactable-css-vars.test.ts b/packages/migrator/src/transforms/v9/__tests__/migrate-interactable-css-vars.test.ts
new file mode 100644
index 0000000000..966689a45e
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__tests__/migrate-interactable-css-vars.test.ts
@@ -0,0 +1,224 @@
+import { runInlineTest, runTest } from 'jscodeshift/src/testUtils';
+
+import { tsxTestOptions } from '../../../test-utils/codemodTestUtils';
+import transform from '../migrate-interactable-css-vars';
+
+const FIXTURE_SUITE = 'migrate-interactable-css-vars';
+
+const E2E_PAIRED_PREFIXES = [`${FIXTURE_SUITE}/e2e-pressable-style-overrides`] as const;
+
+describe('migrate-interactable-css-vars', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'log').mockImplementation(() => {});
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renames all 11 CSS vars as standalone string literal keys', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'all-vars.tsx',
+        source: `
+const styles = {
+  '--interactable-border-radius': '8px',
+  '--interactable-background': 'transparent',
+  '--interactable-border-color': 'red',
+  '--interactable-pressed-background': 'blue',
+  '--interactable-pressed-border-color': 'green',
+  '--interactable-pressed-opacity': '0.9',
+  '--interactable-hovered-background': 'yellow',
+  '--interactable-hovered-border-color': 'purple',
+  '--interactable-hovered-opacity': '0.8',
+  '--interactable-disabled-background': 'gray',
+  '--interactable-disabled-border-color': 'lightgray',
+};
+`,
+      },
+      `
+const styles = {
+  "--inter-borderRadius": '8px',
+  "--inter-bg": 'transparent',
+  "--inter-borderColor": 'red',
+  "--inter-press-bg": 'blue',
+  "--inter-press-borderColor": 'green',
+  "--inter-press-opacity": '0.9',
+  "--inter-hover-bg": 'yellow',
+  "--inter-hover-borderColor": 'purple',
+  "--inter-hover-opacity": '0.8',
+  "--inter-disable-bg": 'gray',
+  "--inter-disable-borderColor": 'lightgray',
+};
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('renames CSS var used as a JSX inline style prop key', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'style-prop.tsx',
+        source: `
+const Panel = () => (
+  <div style={{ '--interactable-background': 'transparent' } as React.CSSProperties} />
+);
+`,
+      },
+      `
+const Panel = () => (
+  <div style={{ "--inter-bg": 'transparent' } as React.CSSProperties} />
+);
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('renames CSS var used as a computed key with type cast', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'computed-key.tsx',
+        source: `
+import type { CSSProperties } from 'react';
+const overrides: CSSProperties = {
+  ['--interactable-hovered-background' as keyof CSSProperties]: 'var(--color-secondaryHovered)',
+  ['--interactable-pressed-background' as keyof CSSProperties]: 'var(--color-secondaryPressed)',
+};
+`,
+      },
+      `
+import type { CSSProperties } from 'react';
+const overrides: CSSProperties = {
+  ["--inter-hover-bg" as keyof CSSProperties]: 'var(--color-secondaryHovered)',
+  ["--inter-press-bg" as keyof CSSProperties]: 'var(--color-secondaryPressed)',
+};
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('renames CSS vars inside var() references in string literal values', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'var-ref.tsx',
+        source: `
+const styles = {
+  background: 'var(--interactable-background)',
+  border: '1px solid var(--interactable-border-color)',
+};
+`,
+      },
+      `
+const styles = {
+  background: "var(--inter-bg)",
+  border: "1px solid var(--inter-borderColor)",
+};
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('renames CSS vars inside template literal quasis', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'template-literal.ts',
+        source: `
+const getButtonStyle = (color: string) => \`
+  --interactable-background: \${color};
+  --interactable-border-color: var(--color-accentBoldRed) !important;
+\`;
+`,
+      },
+      `
+const getButtonStyle = (color: string) => \`
+  --inter-bg: \${color};
+  --inter-borderColor: var(--color-accentBoldRed) !important;
+\`;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('handles multiple old CSS vars in a single string literal', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'multi-var-string.tsx',
+        source: `
+const style = '--interactable-background: blue; --interactable-pressed-background: darkblue;';
+`,
+      },
+      `
+const style = "--inter-bg: blue; --inter-press-bg: darkblue;";
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('is idempotent: second run is a no-op', () => {
+    const afterFirstPass = `
+const styles = {
+  '--inter-bg': 'transparent',
+  '--inter-press-bg': 'blue',
+  '--inter-hover-bg': 'yellow',
+};
+`;
+    runInlineTest(
+      transform,
+      {},
+      { path: 'idempotent.tsx', source: afterFirstPass },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('is a no-op when no old CSS var names are present', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'no-match.tsx',
+        source: `
+const styles = {
+  background: 'var(--color-bgPrimary)',
+  borderRadius: '8px',
+};
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('does not rename partial matches that are not a CSS var name', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'no-partial-match.tsx',
+        source: `
+const label = 'interactable-background';
+const desc = 'see interactable for more info';
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it.each(E2E_PAIRED_PREFIXES)('%s', (prefix) => {
+    runTest(__dirname, 'migrate-interactable-css-vars', {}, prefix, tsxTestOptions);
+  });
+});
diff --git a/packages/migrator/src/transforms/v9/__tests__/migrate-layout-types-mobile.test.ts b/packages/migrator/src/transforms/v9/__tests__/migrate-layout-types-mobile.test.ts
new file mode 100644
index 0000000000..da0c389da1
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__tests__/migrate-layout-types-mobile.test.ts
@@ -0,0 +1,87 @@
+import { runInlineTest, runTest } from 'jscodeshift/src/testUtils';
+
+import { tsxTestOptions } from '../../../test-utils/codemodTestUtils';
+import transform from '../migrate-layout-types-mobile';
+
+const FIXTURE_SUITE = 'migrate-layout-types-mobile';
+const TRANSFORM_NAME = 'migrate-layout-types-mobile';
+
+/**
+ * Behavioral tests are **inline**. One paired golden covers composite sheet-style props mixing
+ * `SharedProps` with layout types from common (`@coinbase`).
+ */
+
+const E2E_PAIRED_PREFIXES = [`${FIXTURE_SUITE}/sheet-layout-props-from-common`] as const;
+
+describe('migrate-layout-types-mobile', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'log').mockImplementation(() => {});
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('migrates DimensionValue, PositionStyles, and remaining common type imports', () => {
+    const input = `
+import type { DimensionValue, LottieStatusAnimationType, PositionStyles } from '@coinbase/cds-common/types';
+
+export const w: DimensionValue = 10;
+export const x: DimensionValue = 1;
+export type P = PositionStyles;
+`;
+
+    const output = `
+import type { DimensionValue } from "react-native";
+import type { PositionStyles } from "@coinbase/cds-mobile/styles/styleProps";
+import type { LottieStatusAnimationType } from '@coinbase/cds-common/types';
+
+export const w: DimensionValue = 10;
+export const x: DimensionValue = 1;
+export type P = PositionStyles;
+`;
+
+    runInlineTest(
+      transform,
+      {},
+      { path: 'layout-types.tsx', source: input },
+      output,
+      tsxTestOptions,
+    );
+  });
+
+  it('makes no changes when a local DimensionValue exists and common DimensionValue is imported under an alias', () => {
+    const input = `
+type DimensionValue = number;
+
+import type { DimensionValue as CdsDimensionValue } from '@coinbase/cds-common';
+
+export const w: DimensionValue = 1;
+export const x: CdsDimensionValue = 2;
+`;
+    runInlineTest(transform, {}, { path: 'local.tsx', source: input }, '', tsxTestOptions);
+  });
+
+  it('makes no changes when there are no cds-common layout type imports', () => {
+    const input = `
+import React from 'react';
+
+export const App = () => <span>Hi</span>;
+`;
+    runInlineTest(transform, {}, { path: 'no-cds-common.tsx', source: input }, '', tsxTestOptions);
+  });
+
+  it('is idempotent on DimensionValue migration output', () => {
+    const transformed = `
+import type { DimensionValue } from "react-native";
+
+export const w: DimensionValue = 10;
+`;
+    runInlineTest(transform, {}, { path: 'idem.tsx', source: transformed }, '', tsxTestOptions);
+  });
+
+  it.each(E2E_PAIRED_PREFIXES)('%s', (prefix) => {
+    runTest(__dirname, TRANSFORM_NAME, {}, prefix, tsxTestOptions);
+  });
+});
diff --git a/packages/migrator/src/transforms/v9/__tests__/migrate-layout-types-web.test.ts b/packages/migrator/src/transforms/v9/__tests__/migrate-layout-types-web.test.ts
new file mode 100644
index 0000000000..88119293a4
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__tests__/migrate-layout-types-web.test.ts
@@ -0,0 +1,88 @@
+import { runInlineTest, runTest } from 'jscodeshift/src/testUtils';
+
+import { tsxTestOptions } from '../../../test-utils/codemodTestUtils';
+import transform from '../migrate-layout-types-web';
+
+const FIXTURE_SUITE = 'migrate-layout-types-web';
+const TRANSFORM_NAME = 'migrate-layout-types-web';
+
+/**
+ * Behavioral tests are **inline**. One paired golden covers composite overlay-style props
+ * (`SharedProps` + `PositionStyles` + `DimensionValue` from common).
+ */
+
+const LAYOUT_TYPES_INPUT = `
+import type { DimensionValue, LottieStatusAnimationType, PositionStyles } from '@coinbase/cds-common/types';
+
+export const w: DimensionValue = 10;
+export const x: DimensionValue = 1;
+export type P = PositionStyles;
+`;
+
+const LAYOUT_TYPES_OUTPUT = `
+import type { PositionStyles } from "@coinbase/cds-web/styles/styleProps";
+import type { LottieStatusAnimationType } from '@coinbase/cds-common/types';
+
+type DimensionValue = string | number | 'auto';
+
+export const w: DimensionValue = 10;
+export const x: DimensionValue = 1;
+export type P = PositionStyles;
+`;
+
+const E2E_PAIRED_PREFIXES = [`${FIXTURE_SUITE}/modal-like-props-from-common`] as const;
+
+describe('migrate-layout-types-web', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'log').mockImplementation(() => {});
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('migrates DimensionValue, PositionStyles, and remaining common type imports', () => {
+    runInlineTest(
+      transform,
+      {},
+      { path: 'layout-types.tsx', source: LAYOUT_TYPES_INPUT },
+      LAYOUT_TYPES_OUTPUT,
+      tsxTestOptions,
+    );
+  });
+
+  it('makes no changes when a local DimensionValue exists and common DimensionValue is imported under an alias', () => {
+    const input = `
+type DimensionValue = string;
+
+import type { DimensionValue as CdsDimensionValue } from '@coinbase/cds-common';
+
+export const w: DimensionValue = 'x';
+export const x: CdsDimensionValue = 'y';
+`;
+    runInlineTest(transform, {}, { path: 'local.tsx', source: input }, '', tsxTestOptions);
+  });
+
+  it('makes no changes when there are no cds-common layout type imports', () => {
+    const input = `
+import React from 'react';
+
+export const App = () => <span>Hi</span>;
+`;
+    runInlineTest(transform, {}, { path: 'no-cds-common.tsx', source: input }, '', tsxTestOptions);
+  });
+
+  it('is idempotent on DimensionValue migration output', () => {
+    const transformed = `
+type DimensionValue = string | number | 'auto';
+
+export const w: DimensionValue = 10;
+`;
+    runInlineTest(transform, {}, { path: 'idem.tsx', source: transformed }, '', tsxTestOptions);
+  });
+
+  it.each(E2E_PAIRED_PREFIXES)('%s', (prefix) => {
+    runTest(__dirname, TRANSFORM_NAME, {}, prefix, tsxTestOptions);
+  });
+});
diff --git a/packages/migrator/src/transforms/v9/__tests__/migrate-use-merge-refs.test.ts b/packages/migrator/src/transforms/v9/__tests__/migrate-use-merge-refs.test.ts
new file mode 100644
index 0000000000..233cad3858
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__tests__/migrate-use-merge-refs.test.ts
@@ -0,0 +1,233 @@
+import { runInlineTest, runTest } from 'jscodeshift/src/testUtils';
+
+import { tsxTestOptions } from '../../../test-utils/codemodTestUtils';
+import transform from '../migrate-use-merge-refs';
+
+const FIXTURE_SUITE = 'migrate-use-merge-refs';
+const TRANSFORM_NAME = 'migrate-use-merge-refs';
+
+/**
+ * Behavioral cases are **inline** below. Two larger paired examples: forwardRef + merged refs, and a
+ * hook that merges caller + internal refs (fictional names; structure only).
+ */
+
+/** Non-@coinbase scope (used only for --package-scope inline tests). */
+const ALTERNATE_SCOPE_SOURCE = `
+import { useMergeRefs } from '@example/cds-common/hooks/useMergeRefs';
+
+export const X = () => {
+  const ref = useMergeRefs(a, b);
+  return ref;
+};
+`;
+
+const ALTERNATE_SCOPE_EXPECTED = `
+import { mergeRefs } from "@example/cds-common/utils/mergeRefs";
+
+export const X = () => {
+  const ref = mergeRefs(a, b);
+  return ref;
+};
+`;
+
+const BASIC_TRANSFORMED_OUTPUT = `
+import { mergeRefs } from "@coinbase/cds-common/utils/mergeRefs";
+
+export const X = () => {
+  const ref = mergeRefs(a, b);
+  return ref;
+};
+`;
+
+const E2E_PAIRED_PREFIXES = [
+  `${FIXTURE_SUITE}/cds-web-link-forwardref`,
+  `${FIXTURE_SUITE}/cds-mobile-scroll-to-hook`,
+] as const;
+
+describe('migrate-use-merge-refs', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'log').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('migrates default import from hooks/useMergeRefs to utils/mergeRefs', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'basic.tsx',
+        source: `
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+
+export const X = () => {
+  const ref = useMergeRefs(a, b);
+  return ref;
+};
+`,
+      },
+      BASIC_TRANSFORMED_OUTPUT,
+      tsxTestOptions,
+    );
+  });
+
+  it('preserves import aliases when migrating', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'alias.tsx',
+        source: `
+import { useMergeRefs as combineRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+combineRefs(r1, r2);
+`,
+      },
+      `
+import { mergeRefs as combineRefs } from "@coinbase/cds-common/utils/mergeRefs";
+combineRefs(r1, r2);
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('dedupes when mergeRefs and useMergeRefs were both imported', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'dup.tsx',
+        source: `
+import { mergeRefs } from '@coinbase/cds-common/utils/mergeRefs';
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+
+const cb = mergeRefs(useMergeRefs(a));
+`,
+      },
+      `
+import { mergeRefs } from '@coinbase/cds-common/utils/mergeRefs';
+
+const cb = mergeRefs(mergeRefs(a));
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('migrates re-exports and call sites but skips object literal shorthand keys', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'reexport.tsx',
+        source: `
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+
+export { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+
+const o = { useMergeRefs: 1 };
+useMergeRefs(r);
+`,
+      },
+      `
+import { mergeRefs } from "@coinbase/cds-common/utils/mergeRefs";
+
+export { mergeRefs } from "@coinbase/cds-common/utils/mergeRefs";
+
+const o = { useMergeRefs: 1 };
+mergeRefs(r);
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('rewrites jest.mock path and import when targeting the hooks entry', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'jest.tsx',
+        source: `
+jest.mock('@coinbase/cds-common/hooks/useMergeRefs');
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+useMergeRefs(x);
+`,
+      },
+      `
+jest.mock("@coinbase/cds-common/utils/mergeRefs");
+import { mergeRefs } from "@coinbase/cds-common/utils/mergeRefs";
+mergeRefs(x);
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('does not modify third-party useMergeRefs import', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'third-party.tsx',
+        source: `
+import { useMergeRefs } from 'some-other-library';
+
+export function f() {
+  return useMergeRefs(a, b);
+}
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('does not migrate alternate scope when --package-scope is @coinbase', () => {
+    runInlineTest(
+      transform,
+      { packageScope: '@coinbase' },
+      { path: 'scope.tsx', source: ALTERNATE_SCOPE_SOURCE },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('migrates alternate scope when --package-scope matches', () => {
+    runInlineTest(
+      transform,
+      { packageScope: '@example' },
+      { path: 'scope.tsx', source: ALTERNATE_SCOPE_SOURCE },
+      ALTERNATE_SCOPE_EXPECTED,
+      tsxTestOptions,
+    );
+  });
+
+  it('makes no changes when there is nothing to migrate', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'noop.tsx',
+        source: `
+import React from 'react';
+export const x = 1;
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('is idempotent: second run on transformed output makes no changes', () => {
+    runInlineTest(
+      transform,
+      {},
+      { path: 'idempotent.tsx', source: BASIC_TRANSFORMED_OUTPUT },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it.each(E2E_PAIRED_PREFIXES)('%s', (prefix) => {
+    runTest(__dirname, TRANSFORM_NAME, {}, prefix, tsxTestOptions);
+  });
+});
diff --git a/packages/migrator/src/transforms/v9/__tests__/migrate-visualization-imports.test.ts b/packages/migrator/src/transforms/v9/__tests__/migrate-visualization-imports.test.ts
new file mode 100644
index 0000000000..f9c83285bd
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__tests__/migrate-visualization-imports.test.ts
@@ -0,0 +1,305 @@
+import { runInlineTest, runTest } from 'jscodeshift/src/testUtils';
+
+import { tsxTestOptions } from '../../../test-utils/codemodTestUtils';
+import transform from '../migrate-visualization-imports';
+
+const FIXTURE_SUITE = 'migrate-visualization-imports';
+
+/**
+ * E2E paired fixtures — composite real-world patterns (OSS-safe).
+ * Covers: root-barrel value + type imports, chart/sparkline sub-path imports,
+ * and non-visualization imports left unchanged.
+ */
+const E2E_PAIRED_PREFIXES = [`${FIXTURE_SUITE}/e2e-chart-hook`] as const;
+
+describe('migrate-visualization-imports', () => {
+  let consoleSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    consoleSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleSpy.mockRestore();
+  });
+
+  // ─── Web: root barrel ────────────────────────────────────────────────────────
+
+  it('rewrites @coinbase/cds-web-visualization root barrel import', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'web-root.tsx',
+        source: `import { Sparkline } from '@coinbase/cds-web-visualization';`,
+      },
+      `import { Sparkline } from "@coinbase/cds-web/visualizations";`,
+      tsxTestOptions,
+    );
+  });
+
+  // ─── Web: named sub-paths ────────────────────────────────────────────────────
+
+  it('rewrites @coinbase/cds-web-visualization/chart', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'web-chart.tsx',
+        source: `import { CartesianChart, LineChart } from '@coinbase/cds-web-visualization/chart';`,
+      },
+      `import { CartesianChart, LineChart } from "@coinbase/cds-web/visualizations/chart";`,
+      tsxTestOptions,
+    );
+  });
+
+  it('rewrites @coinbase/cds-web-visualization/sparkline', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'web-sparkline.tsx',
+        source: `import { Sparkline, SparklineArea } from '@coinbase/cds-web-visualization/sparkline';`,
+      },
+      `import { Sparkline, SparklineArea } from "@coinbase/cds-web/visualizations/sparkline";`,
+      tsxTestOptions,
+    );
+  });
+
+  it('rewrites deep sub-path @coinbase/cds-web-visualization/chart/area', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'web-deep.tsx',
+        source: `import { AreaChart } from '@coinbase/cds-web-visualization/chart/area';`,
+      },
+      `import { AreaChart } from "@coinbase/cds-web/visualizations/chart/area";`,
+      tsxTestOptions,
+    );
+  });
+
+  // ─── Mobile: root barrel ─────────────────────────────────────────────────────
+
+  it('rewrites @coinbase/cds-mobile-visualization root barrel import', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'mobile-root.tsx',
+        source: `import { Sparkline } from '@coinbase/cds-mobile-visualization';`,
+      },
+      `import { Sparkline } from "@coinbase/cds-mobile/visualizations";`,
+      tsxTestOptions,
+    );
+  });
+
+  // ─── Mobile: named sub-paths ─────────────────────────────────────────────────
+
+  it('rewrites @coinbase/cds-mobile-visualization/chart', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'mobile-chart.tsx',
+        source: `import { CartesianChart, BarChart } from '@coinbase/cds-mobile-visualization/chart';`,
+      },
+      `import { CartesianChart, BarChart } from "@coinbase/cds-mobile/visualizations/chart";`,
+      tsxTestOptions,
+    );
+  });
+
+  it('rewrites @coinbase/cds-mobile-visualization/sparkline', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'mobile-sparkline.tsx',
+        source: `import { SparklineInteractive } from '@coinbase/cds-mobile-visualization/sparkline';`,
+      },
+      `import { SparklineInteractive } from "@coinbase/cds-mobile/visualizations/sparkline";`,
+      tsxTestOptions,
+    );
+  });
+
+  it('rewrites deep sub-path @coinbase/cds-mobile-visualization/chart/bar', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'mobile-deep.tsx',
+        source: `import { BarChart } from '@coinbase/cds-mobile-visualization/chart/bar';`,
+      },
+      `import { BarChart } from "@coinbase/cds-mobile/visualizations/chart/bar";`,
+      tsxTestOptions,
+    );
+  });
+
+  // ─── Re-exports ──────────────────────────────────────────────────────────────
+
+  it('rewrites export * from visualization package', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 're-export-all.ts',
+        source: `export * from '@coinbase/cds-web-visualization/chart';`,
+      },
+      `export * from "@coinbase/cds-web/visualizations/chart";`,
+      tsxTestOptions,
+    );
+  });
+
+  it('rewrites named re-export from visualization package', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 're-export-named.ts',
+        source: `export { Sparkline, SparklineArea } from '@coinbase/cds-web-visualization/sparkline';`,
+      },
+      `export { Sparkline, SparklineArea } from "@coinbase/cds-web/visualizations/sparkline";`,
+      tsxTestOptions,
+    );
+  });
+
+  // ─── Mixed web + mobile in one file ─────────────────────────────────────────
+
+  it('rewrites both web and mobile visualization imports in the same file', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'mixed.tsx',
+        source: `
+import { CartesianChart } from '@coinbase/cds-web-visualization/chart';
+import { Sparkline } from '@coinbase/cds-mobile-visualization/sparkline';
+`,
+      },
+      `
+import { CartesianChart } from "@coinbase/cds-web/visualizations/chart";
+import { Sparkline } from "@coinbase/cds-mobile/visualizations/sparkline";
+`,
+      tsxTestOptions,
+    );
+  });
+
+  // ─── Scope filtering ─────────────────────────────────────────────────────────
+
+  it('rewrites matching scope when --packageScope is set', () => {
+    runInlineTest(
+      transform,
+      { packageScope: '@coinbase' },
+      {
+        path: 'scope-match.tsx',
+        source: `import { LineChart } from '@coinbase/cds-web-visualization/chart';`,
+      },
+      `import { LineChart } from "@coinbase/cds-web/visualizations/chart";`,
+      tsxTestOptions,
+    );
+  });
+
+  it('skips non-matching scope when --packageScope is set', () => {
+    runInlineTest(
+      transform,
+      { packageScope: '@coinbase' },
+      {
+        path: 'scope-mismatch.tsx',
+        source: `import { LineChart } from '@example/cds-web-visualization/chart';`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('rewrites any scope when --packageScope is omitted', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'any-scope.tsx',
+        source: `import { AreaChart } from '@example/cds-web-visualization/chart';`,
+      },
+      `import { AreaChart } from "@example/cds-web/visualizations/chart";`,
+      tsxTestOptions,
+    );
+  });
+
+  // ─── No-op cases ─────────────────────────────────────────────────────────────
+
+  it('is a no-op when import is already migrated to cds-web/visualizations', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'already-migrated.tsx',
+        source: `import { CartesianChart } from '@coinbase/cds-web/visualizations/chart';`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('is a no-op for unrelated imports', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'unrelated.tsx',
+        source: `import { Button } from '@coinbase/cds-web/buttons';`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('is a no-op for imports from cds-web (root, non-visualization)', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'cds-web-root.tsx',
+        source: `import { ThemeProvider } from '@coinbase/cds-web';`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  // ─── E2E paired fixtures ──────────────────────────────────────────────────────
+
+  it.each(E2E_PAIRED_PREFIXES)('%s', (prefix) => {
+    runTest(__dirname, 'migrate-visualization-imports', {}, prefix, tsxTestOptions);
+  });
+
+  // ─── Idempotency ─────────────────────────────────────────────────────────────
+
+  it('is idempotent — second run on already-migrated output is a no-op', () => {
+    const AFTER_FIRST_PASS = `
+import { CartesianChart } from "@coinbase/cds-web/visualizations/chart";
+import { Sparkline } from "@coinbase/cds-mobile/visualizations/sparkline";
+`;
+
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'idempotent-pass1.tsx',
+        source: `
+import { CartesianChart } from '@coinbase/cds-web-visualization/chart';
+import { Sparkline } from '@coinbase/cds-mobile-visualization/sparkline';
+`,
+      },
+      AFTER_FIRST_PASS,
+      tsxTestOptions,
+    );
+
+    runInlineTest(
+      transform,
+      {},
+      { path: 'idempotent-pass2.tsx', source: AFTER_FIRST_PASS },
+      '',
+      tsxTestOptions,
+    );
+  });
+});
diff --git a/packages/migrator/src/transforms/v9/__tests__/theme-provider-isolated.test.ts b/packages/migrator/src/transforms/v9/__tests__/theme-provider-isolated.test.ts
new file mode 100644
index 0000000000..e80784039e
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/__tests__/theme-provider-isolated.test.ts
@@ -0,0 +1,305 @@
+import { runInlineTest } from 'jscodeshift/src/testUtils';
+
+import { tsxTestOptions } from '../../../test-utils/codemodTestUtils';
+import transform from '../theme-provider-isolated';
+
+describe('theme-provider-isolated', () => {
+  let consoleSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    consoleSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleSpy.mockRestore();
+  });
+
+  it('adds isolated to ThemeProvider imported from @coinbase/cds-web root barrel', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'root-barrel.tsx',
+        source: `
+import { ThemeProvider } from '@coinbase/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light">{children}</ThemeProvider>;
+`,
+      },
+      `
+import { ThemeProvider } from '@coinbase/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light" isolated>{children}</ThemeProvider>;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('adds isolated to ThemeProvider imported from @coinbase/cds-web/system sub-path', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'system-sub-path.tsx',
+        source: `
+import { ThemeProvider } from '@coinbase/cds-web/system';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light">{children}</ThemeProvider>;
+`,
+      },
+      `
+import { ThemeProvider } from '@coinbase/cds-web/system';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light" isolated>{children}</ThemeProvider>;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('adds isolated to ThemeProvider imported from a deep sub-path', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'deep-path.tsx',
+        source: `
+import { ThemeProvider } from '@coinbase/cds-web/system/ThemeProvider';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light">{children}</ThemeProvider>;
+`,
+      },
+      `
+import { ThemeProvider } from '@coinbase/cds-web/system/ThemeProvider';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light" isolated>{children}</ThemeProvider>;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('adds isolated to ThemeProvider from a non-@coinbase scope', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'other-scope.tsx',
+        source: `
+import { ThemeProvider } from '@example/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light">{children}</ThemeProvider>;
+`,
+      },
+      `
+import { ThemeProvider } from '@example/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light" isolated>{children}</ThemeProvider>;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('uses local alias name when ThemeProvider is aliased', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'aliased.tsx',
+        source: `
+import { ThemeProvider as CdsThemeProvider } from '@coinbase/cds-web';
+const App = () => <CdsThemeProvider theme={t} activeColorScheme="light">{children}</CdsThemeProvider>;
+`,
+      },
+      `
+import { ThemeProvider as CdsThemeProvider } from '@coinbase/cds-web';
+const App = () => <CdsThemeProvider theme={t} activeColorScheme="light" isolated>{children}</CdsThemeProvider>;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('adds isolated to self-closing ThemeProvider', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'self-closing.tsx',
+        source: `
+import { ThemeProvider } from '@coinbase/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light" />;
+`,
+      },
+      `
+import { ThemeProvider } from '@coinbase/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light" isolated />;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('does not add isolated when ThemeProvider already has isolated prop (boolean shorthand)', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'already-isolated.tsx',
+        source: `
+import { ThemeProvider } from '@coinbase/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light" isolated>{children}</ThemeProvider>;
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('does not add isolated when ThemeProvider already has isolated={true}', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'already-isolated-explicit.tsx',
+        source: `
+import { ThemeProvider } from '@coinbase/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light" isolated={true}>{children}</ThemeProvider>;
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('does not add isolated when ThemeProvider already has isolated={false}', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'already-isolated-false.tsx',
+        source: `
+import { ThemeProvider } from '@coinbase/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light" isolated={false}>{children}</ThemeProvider>;
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('is a no-op when ThemeProvider comes from a relative import', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'relative-import.tsx',
+        source: `
+import { ThemeProvider } from './ThemeProvider';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light">{children}</ThemeProvider>;
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('is a no-op when ThemeProvider comes from a non-CDS package', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'third-party.tsx',
+        source: `
+import { ThemeProvider } from 'some-other-lib';
+const App = () => <ThemeProvider theme={t}>{children}</ThemeProvider>;
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('skips non-matching scope when --packageScope is set', () => {
+    runInlineTest(
+      transform,
+      { packageScope: '@coinbase' },
+      {
+        path: 'scope-mismatch.tsx',
+        source: `
+import { ThemeProvider } from '@example/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light">{children}</ThemeProvider>;
+`,
+      },
+      '',
+      tsxTestOptions,
+    );
+  });
+
+  it('applies when --packageScope matches', () => {
+    runInlineTest(
+      transform,
+      { packageScope: '@coinbase' },
+      {
+        path: 'scope-match.tsx',
+        source: `
+import { ThemeProvider } from '@coinbase/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light">{children}</ThemeProvider>;
+`,
+      },
+      `
+import { ThemeProvider } from '@coinbase/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light" isolated>{children}</ThemeProvider>;
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('does not modify a ThemeProvider element that is not from a CDS import', () => {
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'mixed-imports.tsx',
+        source: `
+import { ThemeProvider } from '@coinbase/cds-web';
+import { ThemeProvider as OtherTP } from 'other-lib';
+const App = () => (
+  <>
+    <ThemeProvider theme={t} activeColorScheme="light">{children}</ThemeProvider>
+    <OtherTP theme={t}>{children}</OtherTP>
+  </>
+);
+`,
+      },
+      `
+import { ThemeProvider } from '@coinbase/cds-web';
+import { ThemeProvider as OtherTP } from 'other-lib';
+const App = () => (
+  <>
+    <ThemeProvider theme={t} activeColorScheme="light" isolated>{children}</ThemeProvider>
+    <OtherTP theme={t}>{children}</OtherTP>
+  </>
+);
+`,
+      tsxTestOptions,
+    );
+  });
+
+  it('produces the same result when run twice (idempotent)', () => {
+    const AFTER_FIRST_PASS = `
+import { ThemeProvider } from '@coinbase/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light" isolated>{children}</ThemeProvider>;
+`;
+
+    runInlineTest(
+      transform,
+      {},
+      {
+        path: 'idempotent-pass1.tsx',
+        source: `
+import { ThemeProvider } from '@coinbase/cds-web';
+const App = () => <ThemeProvider theme={t} activeColorScheme="light">{children}</ThemeProvider>;
+`,
+      },
+      AFTER_FIRST_PASS,
+      tsxTestOptions,
+    );
+
+    runInlineTest(
+      transform,
+      {},
+      { path: 'idempotent-pass2.tsx', source: AFTER_FIRST_PASS },
+      '',
+      tsxTestOptions,
+    );
+  });
+});
diff --git a/packages/migrator/src/transforms/v9/button-variant-values.ts b/packages/migrator/src/transforms/v9/button-variant-values.ts
new file mode 100644
index 0000000000..b8ad36a333
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/button-variant-values.ts
@@ -0,0 +1,125 @@
+/**
+ * Button Variant Values Transform (v8 → v9)
+ *
+ * Remaps Button/IconButton `variant` prop values to reflect v9 naming:
+ *   - "tertiary"        → "inverse"   (old tertiary used bgInverse; v9 gives tertiary new semantics)
+ *   - "foregroundMuted"  → "secondary" (foregroundMuted deprecated per design)
+ *
+ * Only targets components imported from `@<scope>/cds-web/buttons`, deeper paths under
+ * `cds-web/buttons/…` (e.g. `buttons/Button`), and the same for `cds-mobile`. v8 does not
+ * export Button/IconButton from the package root (`@<scope>/cds-web` / `@<scope>/cds-mobile`),
+ * so those imports are ignored.
+ * Use CLI `-ps` / `--package-scope` to limit to one scope, or omit to match every scope.
+ * Adds TODO comments for dynamic variant expressions that need manual review.
+ */
+import type { API, FileInfo, Options } from 'jscodeshift';
+
+import { applyImportMappings, getImportMappingsFromOptions } from '../../utils/import-mapping';
+import { getPackageScopeFromOptions, scopedModulePathRegexPrefix } from '../../utils/package-scope';
+import { addTodoComment, hasMigrationTodo, transformLogger } from '../../utils/transform-utils';
+
+const VARIANT_MAP: Record<string, string> = {
+  tertiary: 'inverse',
+  foregroundMuted: 'secondary',
+};
+const TRANSFORM_NAME = 'button-variant-values';
+
+/** v8 buttons live under `…/buttons` (barrel or deep imports); package root has no Button API. */
+function buildCdsWebOrMobileButtonsImportRe(packageScope: string | undefined): RegExp {
+  const prefix = scopedModulePathRegexPrefix(packageScope);
+  return new RegExp(`${prefix}/(cds-web|cds-mobile)/buttons(?:/[^/]+)*$`);
+}
+
+const TARGET_COMPONENTS = ['Button', 'IconButton'];
+
+export default function transformer(file: FileInfo, api: API, options: Options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const packageScope = getPackageScopeFromOptions(options);
+  const rewrites = getImportMappingsFromOptions(options);
+  const cdsPackageRe = buildCdsWebOrMobileButtonsImportRe(packageScope);
+
+  const cdsComponentLocalNames = new Set<string>();
+
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => {
+      const src = path.value.source;
+      if (!j.StringLiteral.check(src)) return false;
+      return cdsPackageRe.test(applyImportMappings(src.value, rewrites));
+    })
+    .forEach((path) => {
+      path.value.specifiers?.forEach((specifier) => {
+        if (
+          j.ImportSpecifier.check(specifier) &&
+          TARGET_COMPONENTS.includes(specifier.imported.name)
+        ) {
+          cdsComponentLocalNames.add(specifier.local?.name ?? specifier.imported.name);
+        }
+      });
+    });
+
+  if (cdsComponentLocalNames.size === 0) {
+    return null;
+  }
+
+  let hasChanges = false;
+
+  root
+    .find(j.JSXElement)
+    .filter((path) => {
+      const name = path.value.openingElement.name;
+      return j.JSXIdentifier.check(name) && cdsComponentLocalNames.has(name.name);
+    })
+    .forEach((path) => {
+      const variantAttr = path.value.openingElement.attributes?.find(
+        (attr) =>
+          j.JSXAttribute.check(attr) &&
+          j.JSXIdentifier.check(attr.name) &&
+          attr.name.name === 'variant',
+      );
+
+      if (!variantAttr || !j.JSXAttribute.check(variantAttr)) return;
+
+      const value = variantAttr.value;
+
+      if (j.StringLiteral.check(value)) {
+        const oldVariant = value.value;
+        const newVariant = VARIANT_MAP[oldVariant];
+        if (newVariant) {
+          value.value = newVariant;
+          hasChanges = true;
+
+          transformLogger.success(
+            `Updated variant: ${oldVariant} → ${newVariant}`,
+            file.path,
+            path.value.loc?.start.line,
+          );
+        }
+      } else if (j.JSXExpressionContainer.check(value)) {
+        if (!hasMigrationTodo(path)) {
+          addTodoComment(
+            j,
+            path,
+            TRANSFORM_NAME,
+            'Button variant values changed in v9: "tertiary" is now "inverse", "foregroundMuted" is now "secondary". Check if this dynamic value needs updating.',
+          );
+
+          transformLogger.warn(
+            'Dynamic variant expression requires manual review',
+            file.path,
+            path.value.loc?.start.line,
+          );
+
+          hasChanges = true;
+        }
+      }
+    });
+
+  if (!hasChanges) {
+    return null;
+  }
+
+  return root.toSource();
+}
diff --git a/packages/migrator/src/transforms/v9/migrate-interactable-css-vars-css.ts b/packages/migrator/src/transforms/v9/migrate-interactable-css-vars-css.ts
new file mode 100644
index 0000000000..64185ff76f
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/migrate-interactable-css-vars-css.ts
@@ -0,0 +1,148 @@
+/**
+ * Interactable CSS variable rename — CSS/SCSS/HTML edition (v8 → v9, web only)
+ *
+ * Companion to `migrate-interactable-css-vars.ts` which handles JS/TS files.
+ * This script renames the same 11 CSS custom properties in stylesheet and HTML
+ * files that jscodeshift cannot parse:
+ *
+ *   --interactable-border-radius         → --inter-borderRadius
+ *   --interactable-background            → --inter-bg
+ *   --interactable-border-color          → --inter-borderColor
+ *   --interactable-pressed-background    → --inter-press-bg
+ *   --interactable-pressed-border-color  → --inter-press-borderColor
+ *   --interactable-pressed-opacity       → --inter-press-opacity
+ *   --interactable-hovered-background    → --inter-hover-bg
+ *   --interactable-hovered-border-color  → --inter-hover-borderColor
+ *   --interactable-hovered-opacity       → --inter-hover-opacity
+ *   --interactable-disabled-background   → --inter-disable-bg
+ *   --interactable-disabled-border-color → --inter-disable-borderColor
+ *
+ * Handles: .css  .scss  .html
+ * Not handled: JS/TS files — use the jscodeshift companion transform instead.
+ *
+ * Usage (via cds-migrate CLI):
+ *   cds-migrate --preset v8-to-v9-web <target-path>
+ *
+ * Usage (direct):
+ *   node migrate-interactable-css-vars-css.js <target-path> [--dry]
+ *
+ * Idempotent: a second run is a no-op once all names have been updated.
+ */
+import fg from 'fast-glob';
+import fs from 'fs';
+import path from 'path';
+
+export const VAR_RENAMES: ReadonlyArray<readonly [string, string]> = [
+  ['--interactable-border-radius', '--inter-borderRadius'],
+  ['--interactable-background', '--inter-bg'],
+  ['--interactable-border-color', '--inter-borderColor'],
+  ['--interactable-pressed-background', '--inter-press-bg'],
+  ['--interactable-pressed-border-color', '--inter-press-borderColor'],
+  ['--interactable-pressed-opacity', '--inter-press-opacity'],
+  ['--interactable-hovered-background', '--inter-hover-bg'],
+  ['--interactable-hovered-border-color', '--inter-hover-borderColor'],
+  ['--interactable-hovered-opacity', '--inter-hover-opacity'],
+  ['--interactable-disabled-background', '--inter-disable-bg'],
+  ['--interactable-disabled-border-color', '--inter-disable-borderColor'],
+];
+
+export const FILE_PATTERNS = ['**/*.css', '**/*.scss', '**/*.html'];
+
+/**
+ * Fallback ignore patterns used when the script is invoked directly (not via
+ * the cds-migrate CLI). When invoked through the CLI runner, ignore patterns
+ * are forwarded as `--ignore-pattern=<pattern>` args and take precedence over this list.
+ */
+export const DEFAULT_IGNORE_PATTERNS = [
+  '**/node_modules/**',
+  '**/.next/**',
+  '**/dist/**',
+  '**/build/**',
+];
+
+/**
+ * Parses `--ignore-pattern=<pattern>` entries from a CLI args array.
+ * Uses the same flag name as jscodeshift for consistency.
+ * Falls back to `DEFAULT_IGNORE_PATTERNS` when none are provided, so the
+ * script behaves sensibly when run directly without the CLI runner.
+ */
+export function parseIgnorePatterns(args: string[]): string[] {
+  const fromArgs = args
+    .filter((a) => a.startsWith('--ignore-pattern='))
+    .map((a) => a.slice('--ignore-pattern='.length));
+  return fromArgs.length > 0 ? fromArgs : DEFAULT_IGNORE_PATTERNS;
+}
+
+/** Returns the content with all old CSS var names replaced, or the original string if nothing changed. */
+export function applyRenames(content: string): string {
+  let result = content;
+  for (const [oldVar, newVar] of VAR_RENAMES) {
+    result = result.replaceAll(oldVar, newVar);
+  }
+  return result;
+}
+
+export type ProcessResult = { processed: number; changed: number };
+
+/**
+ * Finds all CSS/SCSS/HTML files under `targetPath`, applies renames, and
+ * writes changes back to disk (unless `dryRun` is true).
+ *
+ * `ignorePatterns` defaults to `DEFAULT_IGNORE_PATTERNS` but is overridden
+ * by the CLI runner, which forwards its own canonical ignore list so both
+ * jscodeshift and script transforms exclude the same directories.
+ */
+export async function processDirectory(
+  targetPath: string,
+  dryRun: boolean,
+  ignorePatterns: string[] = DEFAULT_IGNORE_PATTERNS,
+): Promise<ProcessResult> {
+  const files = await fg(FILE_PATTERNS, {
+    cwd: targetPath,
+    absolute: true,
+    ignore: ignorePatterns,
+  });
+
+  let processed = 0;
+  let changed = 0;
+
+  for (const filePath of files) {
+    const original = fs.readFileSync(filePath, 'utf8');
+    const updated = applyRenames(original);
+
+    if (updated !== original) {
+      if (!dryRun) {
+        fs.writeFileSync(filePath, updated, 'utf8');
+      }
+      changed++;
+      console.log(`✓ ${dryRun ? '[dry] ' : ''}${path.relative(targetPath, filePath)}`);
+    }
+
+    processed++;
+  }
+
+  return { processed, changed };
+}
+
+// CLI entry point — only executes when this file is run directly via `node`.
+if (require.main === module) {
+  const [, , targetPath, ...rest] = process.argv;
+  const dryRun = rest.includes('--dry');
+  const ignorePatterns = parseIgnorePatterns(rest);
+
+  if (!targetPath) {
+    console.error(
+      'Usage: migrate-interactable-css-vars-css <target-path> [--dry] [--ignore-pattern=<pattern>...]',
+    );
+    process.exit(1);
+  }
+
+  processDirectory(targetPath, dryRun, ignorePatterns)
+    .then(({ processed, changed }) => {
+      console.log(`\nProcessed ${processed} files, updated ${changed}`);
+    })
+    .catch((err) => {
+      console.error(err);
+      process.exit(1);
+    });
+}
diff --git a/packages/migrator/src/transforms/v9/migrate-interactable-css-vars.ts b/packages/migrator/src/transforms/v9/migrate-interactable-css-vars.ts
new file mode 100644
index 0000000000..9dfcc528bb
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/migrate-interactable-css-vars.ts
@@ -0,0 +1,93 @@
+/**
+ * Interactable CSS variable rename migration (v8 → v9, web only)
+ *
+ * In v9, the CSS custom properties exposed by the Pressable / interactable
+ * system were shortened and switched from all-kebab-case to a camelCase
+ * property suffix:
+ *
+ *   --interactable-border-radius         → --inter-borderRadius
+ *   --interactable-background            → --inter-bg
+ *   --interactable-border-color          → --inter-borderColor
+ *   --interactable-pressed-background    → --inter-press-bg
+ *   --interactable-pressed-border-color  → --inter-press-borderColor
+ *   --interactable-pressed-opacity       → --inter-press-opacity
+ *   --interactable-hovered-background    → --inter-hover-bg
+ *   --interactable-hovered-border-color  → --inter-hover-borderColor
+ *   --interactable-hovered-opacity       → --inter-hover-opacity
+ *   --interactable-disabled-background   → --inter-disable-bg
+ *   --interactable-disabled-border-color → --inter-disable-borderColor
+ *
+ * Handles JS/TS files only:
+ *   - String literals used as style object keys or values (e.g. `var(--interactable-background)`)
+ *   - Template literal quasis (static string segments)
+ *
+ * Not handled (require a CSS/text-based migration tool):
+ *   - CSS / SCSS / Less files
+ *   - HTML inline style attributes
+ *
+ * Idempotent: a second run is a no-op once all names have been updated.
+ */
+import type { API, FileInfo } from 'jscodeshift';
+
+import { transformLogger } from '../../utils/transform-utils';
+
+const VAR_RENAMES: ReadonlyArray<readonly [string, string]> = [
+  ['--interactable-border-radius', '--inter-borderRadius'],
+  ['--interactable-background', '--inter-bg'],
+  ['--interactable-border-color', '--inter-borderColor'],
+  ['--interactable-pressed-background', '--inter-press-bg'],
+  ['--interactable-pressed-border-color', '--inter-press-borderColor'],
+  ['--interactable-pressed-opacity', '--inter-press-opacity'],
+  ['--interactable-hovered-background', '--inter-hover-bg'],
+  ['--interactable-hovered-border-color', '--inter-hover-borderColor'],
+  ['--interactable-hovered-opacity', '--inter-hover-opacity'],
+  ['--interactable-disabled-background', '--inter-disable-bg'],
+  ['--interactable-disabled-border-color', '--inter-disable-borderColor'],
+];
+
+/** Returns the string with all old CSS var names replaced, or null if nothing changed. */
+function applyRenames(value: string): string | null {
+  let result = value;
+  for (const [oldVar, newVar] of VAR_RENAMES) {
+    result = result.replaceAll(oldVar, newVar);
+  }
+  return result !== value ? result : null;
+}
+
+export default function transformer(file: FileInfo, api: API) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  let hasChanges = false;
+
+  root.find(j.StringLiteral).forEach((path) => {
+    const next = applyRenames(path.value.value);
+    if (next === null) return;
+    transformLogger.success(
+      `Renamed CSS var in string literal: ${path.value.value} → ${next}`,
+      file.path,
+      path.value.loc?.start.line,
+    );
+    path.value.value = next;
+    hasChanges = true;
+  });
+
+  root.find(j.TemplateElement).forEach((path) => {
+    const raw = applyRenames(path.value.value.raw);
+    if (raw === null) return;
+    const cooked =
+      path.value.value.cooked !== null && path.value.value.cooked !== undefined
+        ? (applyRenames(path.value.value.cooked) ?? path.value.value.cooked)
+        : path.value.value.cooked;
+    transformLogger.success(
+      `Renamed CSS var in template literal: ${path.value.value.raw} → ${raw}`,
+      file.path,
+      path.value.loc?.start.line,
+    );
+    path.value.value = { raw, cooked };
+    hasChanges = true;
+  });
+
+  if (!hasChanges) return null;
+  return root.toSource();
+}
diff --git a/packages/migrator/src/transforms/v9/migrate-layout-types-mobile.ts b/packages/migrator/src/transforms/v9/migrate-layout-types-mobile.ts
new file mode 100644
index 0000000000..c97e304ce3
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/migrate-layout-types-mobile.ts
@@ -0,0 +1,188 @@
+/**
+ * Mobile: migrate deprecated layout types from `@<scope>/cds-common` to CDS Mobile (same scope) + React Native.
+ *
+ * - `PositionStyles` → `import type { PositionStyles } from '@<scope>/cds-mobile/styles/styleProps'`.
+ * - `DimensionValue` → `import type { DimensionValue } from 'react-native'` (RN’s `DimensionValue`;
+ *   review usages that relied on CDS-common’s distinct union).
+ *
+ * Matches any npm scope on `cds-common`. Use CLI `-ps` / `--package-scope` to limit to one scope,
+ * like `migrate-use-merge-refs`.
+ *
+ * Idempotent: second run is a no-op when common no longer supplies these imports.
+ *
+ * Not handled: `export { ... } from 'cds-common'`, `require()`, dynamic imports, versioned entrypoints
+ * (e.g. `@scope/cds-common/v7`) — migrate by hand or extend the path matcher below.
+ */
+
+import type { API, FileInfo, Options } from 'jscodeshift';
+
+import { ensureImportSpecifiers } from '../../utils/ensure-import-specifiers';
+import { getPackageScopeFromOptions, scopedModulePathRegexPrefix } from '../../utils/package-scope';
+import { transformLogger } from '../../utils/transform-utils';
+
+const REACT_NATIVE_MODULE = 'react-native';
+
+const MIGRATED_TYPE_NAMES = new Set(['PositionStyles', 'DimensionValue']);
+
+function buildCdsCommonLayoutSourceRe(packageScope: string | undefined): RegExp {
+  const prefix = scopedModulePathRegexPrefix(packageScope);
+  return new RegExp(
+    `${prefix}/(?:cds-common|cds-common/types|cds-common/types/BoxBaseProps|cds-common/types/DimensionStyles)$`,
+  );
+}
+
+function isCommonLayoutTypeSource(
+  source: string | undefined | null,
+  packageScope?: string | undefined,
+): boolean {
+  if (typeof source !== 'string') {
+    return false;
+  }
+  return buildCdsCommonLayoutSourceRe(packageScope).test(source);
+}
+
+function cdsPackageScopeFromCommonImport(fromImportSource: string): string | null {
+  const m = fromImportSource.match(/^(@[^/]+)\/cds-common(?:\/|$)/);
+  return m ? m[1] : null;
+}
+
+function mobileStylePropsModule(fromImportSource: string): string {
+  const scope = cdsPackageScopeFromCommonImport(fromImportSource);
+  return scope ? `${scope}/cds-mobile/styles/styleProps` : '@coinbase/cds-mobile/styles/styleProps';
+}
+
+export default function transformer(file: FileInfo, api: API, options: Options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const packageScope = getPackageScopeFromOptions(options);
+
+  const alreadyImportsRnDimensionValue =
+    root
+      .find(j.ImportDeclaration, { source: { value: REACT_NATIVE_MODULE } })
+      .filter((path) =>
+        (path.value.specifiers ?? []).some(
+          (spec) =>
+            j.ImportSpecifier.check(spec) &&
+            j.Identifier.check(spec.imported) &&
+            spec.imported.name === 'DimensionValue',
+        ),
+      ).length > 0;
+
+  const hasLocalDimensionValueType =
+    root.find(j.TSTypeAliasDeclaration, { id: { name: 'DimensionValue' } }).length > 0;
+
+  let sampleCdsCommonSource: string | null = null;
+
+  let needsMigration = false;
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const src = path.value.source;
+    if (!j.StringLiteral.check(src) || !isCommonLayoutTypeSource(src.value, packageScope)) {
+      return;
+    }
+    for (const spec of path.value.specifiers ?? []) {
+      if (
+        j.ImportSpecifier.check(spec) &&
+        j.Identifier.check(spec.imported) &&
+        MIGRATED_TYPE_NAMES.has(spec.imported.name)
+      ) {
+        needsMigration = true;
+      }
+    }
+  });
+
+  if (!needsMigration) {
+    return null;
+  }
+
+  let stripPositionStyles = false;
+  let stripDimensionValue = false;
+  let mobileTarget: string | null = null;
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const src = path.value.source;
+    if (!j.StringLiteral.check(src) || !isCommonLayoutTypeSource(src.value, packageScope)) {
+      return;
+    }
+
+    if (!sampleCdsCommonSource) {
+      sampleCdsCommonSource = src.value;
+    }
+
+    const specs = path.value.specifiers ?? [];
+    const next: typeof specs = [];
+    for (const spec of specs) {
+      if (!j.ImportSpecifier.check(spec) || !j.Identifier.check(spec.imported)) {
+        next.push(spec);
+        continue;
+      }
+      const name = spec.imported.name;
+      if (name === 'PositionStyles') {
+        stripPositionStyles = true;
+        if (!mobileTarget) {
+          mobileTarget = mobileStylePropsModule(src.value);
+        }
+        continue;
+      }
+      if (name === 'DimensionValue') {
+        if (hasLocalDimensionValueType) {
+          next.push(spec);
+          transformLogger.warn(
+            'Skipped removing DimensionValue import: a local type DimensionValue already exists',
+            file.path,
+          );
+        } else {
+          stripDimensionValue = true;
+        }
+        continue;
+      }
+      next.push(spec);
+    }
+    path.value.specifiers = next;
+  });
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    if (path.value.specifiers?.length === 0) {
+      j(path).remove();
+    }
+  });
+
+  if (!stripPositionStyles && !stripDimensionValue) {
+    return null;
+  }
+
+  let fileChanged = false;
+
+  if (stripPositionStyles) {
+    const target =
+      mobileTarget ?? mobileStylePropsModule(sampleCdsCommonSource ?? '@coinbase/cds-common');
+    if (ensureImportSpecifiers(j, root, target, ['PositionStyles'])) {
+      fileChanged = true;
+      transformLogger.success(`Ensured type import PositionStyles from ${target}`, file.path);
+    }
+  }
+
+  if (stripDimensionValue && !hasLocalDimensionValueType && !alreadyImportsRnDimensionValue) {
+    if (ensureImportSpecifiers(j, root, REACT_NATIVE_MODULE, ['DimensionValue'])) {
+      fileChanged = true;
+      transformLogger.success('Ensured type import DimensionValue from react-native', file.path);
+    }
+  } else if (stripDimensionValue && alreadyImportsRnDimensionValue) {
+    fileChanged = true;
+    transformLogger.success('DimensionValue already imported from react-native', file.path);
+  }
+
+  if (stripPositionStyles || stripDimensionValue) {
+    fileChanged = true;
+    transformLogger.success(
+      'Removed PositionStyles and/or DimensionValue from cds-common import(s)',
+      file.path,
+    );
+  }
+
+  if (!fileChanged) {
+    return null;
+  }
+
+  return root.toSource();
+}
diff --git a/packages/migrator/src/transforms/v9/migrate-layout-types-web.ts b/packages/migrator/src/transforms/v9/migrate-layout-types-web.ts
new file mode 100644
index 0000000000..e9878d3139
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/migrate-layout-types-web.ts
@@ -0,0 +1,199 @@
+/**
+ * Web: migrate deprecated layout types from `@<scope>/cds-common` to CDS Web (same scope).
+ *
+ * - `PositionStyles` → `import type { PositionStyles } from '@<scope>/cds-web/styles/styleProps'`.
+ * - `DimensionValue` → remove from common import; add local
+ *   `type DimensionValue = string | number | 'auto'` (matches former common `DimensionValue` union).
+ *
+ * Matches any npm scope on `cds-common`. Use CLI `-ps` / `--package-scope` to limit to one scope,
+ * like `migrate-use-merge-refs`.
+ *
+ * Idempotent: second run is a no-op when common no longer exports these imports.
+ *
+ * Not handled: `export { ... } from 'cds-common'`, `require()`, dynamic imports, versioned entrypoints
+ * (e.g. `@scope/cds-common/v7`) — migrate by hand or extend the path matcher below.
+ */
+
+import type { API, FileInfo, Options } from 'jscodeshift';
+
+import { ensureImportSpecifiers } from '../../utils/ensure-import-specifiers';
+import { applyImportMappings, getImportMappingsFromOptions } from '../../utils/import-mapping';
+import { getPackageScopeFromOptions, scopedModulePathRegexPrefix } from '../../utils/package-scope';
+import { transformLogger } from '../../utils/transform-utils';
+
+const MIGRATED_TYPE_NAMES = new Set(['PositionStyles', 'DimensionValue']);
+
+function buildCdsCommonLayoutSourceRe(packageScope: string | undefined): RegExp {
+  const prefix = scopedModulePathRegexPrefix(packageScope);
+  return new RegExp(
+    `${prefix}/(?:cds-common|cds-common/types|cds-common/types/BoxBaseProps|cds-common/types/DimensionStyles)$`,
+  );
+}
+
+function isCommonLayoutTypeSource(
+  source: string | undefined | null,
+  packageScope?: string | undefined,
+): boolean {
+  if (typeof source !== 'string') {
+    return false;
+  }
+  return buildCdsCommonLayoutSourceRe(packageScope).test(source);
+}
+
+function cdsPackageScopeFromCommonImport(fromImportSource: string): string | null {
+  const m = fromImportSource.match(/^(@[^/]+)\/cds-common(?:\/|$)/);
+  return m ? m[1] : null;
+}
+
+function webStylePropsModule(fromImportSource: string): string {
+  const scope = cdsPackageScopeFromCommonImport(fromImportSource);
+  return scope ? `${scope}/cds-web/styles/styleProps` : '@coinbase/cds-web/styles/styleProps';
+}
+
+function parseDimensionValueAlias(j: API['jscodeshift']) {
+  const parsed = j(`type DimensionValue = string | number | 'auto';`);
+  return parsed.paths()[0].value.program.body[0];
+}
+
+function lastImportIndex(j: API['jscodeshift'], body: unknown[]): number {
+  let idx = -1;
+  for (let i = 0; i < body.length; i++) {
+    if (j.ImportDeclaration.check(body[i])) {
+      idx = i;
+    }
+  }
+  return idx;
+}
+
+export default function transformer(file: FileInfo, api: API, options: Options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const packageScope = getPackageScopeFromOptions(options);
+  const rewrites = getImportMappingsFromOptions(options);
+
+  const hasLocalDimensionValueType =
+    root.find(j.TSTypeAliasDeclaration, { id: { name: 'DimensionValue' } }).length > 0;
+
+  let needsMigration = false;
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const src = path.value.source;
+    if (
+      !j.StringLiteral.check(src) ||
+      !isCommonLayoutTypeSource(applyImportMappings(src.value, rewrites), packageScope)
+    ) {
+      return;
+    }
+    for (const spec of path.value.specifiers ?? []) {
+      if (
+        j.ImportSpecifier.check(spec) &&
+        j.Identifier.check(spec.imported) &&
+        MIGRATED_TYPE_NAMES.has(spec.imported.name)
+      ) {
+        needsMigration = true;
+      }
+    }
+  });
+
+  if (!needsMigration) {
+    return null;
+  }
+
+  let stripPositionStyles = false;
+  let stripDimensionValue = false;
+  let stylePropsTarget: string | null = null;
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const src = path.value.source;
+    if (
+      !j.StringLiteral.check(src) ||
+      !isCommonLayoutTypeSource(applyImportMappings(src.value, rewrites), packageScope)
+    ) {
+      return;
+    }
+
+    const specs = path.value.specifiers ?? [];
+    const next: typeof specs = [];
+    for (const spec of specs) {
+      if (!j.ImportSpecifier.check(spec) || !j.Identifier.check(spec.imported)) {
+        next.push(spec);
+        continue;
+      }
+      const name = spec.imported.name;
+      if (name === 'PositionStyles') {
+        stripPositionStyles = true;
+        if (!stylePropsTarget) {
+          stylePropsTarget = webStylePropsModule(src.value);
+        }
+        continue;
+      }
+      if (name === 'DimensionValue') {
+        if (hasLocalDimensionValueType) {
+          next.push(spec);
+          transformLogger.warn(
+            'Skipped removing DimensionValue import: a local type DimensionValue already exists',
+            file.path,
+          );
+        } else {
+          stripDimensionValue = true;
+        }
+        continue;
+      }
+      next.push(spec);
+    }
+    path.value.specifiers = next;
+  });
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    if (path.value.specifiers?.length === 0) {
+      j(path).remove();
+    }
+  });
+
+  if (!stripPositionStyles && !stripDimensionValue) {
+    return null;
+  }
+
+  let fileChanged = false;
+
+  const typeNamesToImport: string[] = [];
+  if (stripPositionStyles) {
+    typeNamesToImport.push('PositionStyles');
+  }
+
+  if (typeNamesToImport.length > 0 && stylePropsTarget) {
+    if (ensureImportSpecifiers(j, root, stylePropsTarget, typeNamesToImport)) {
+      fileChanged = true;
+      transformLogger.success(
+        `Ensured type import(s) from ${stylePropsTarget}: ${typeNamesToImport.join(', ')}`,
+        file.path,
+      );
+    }
+  }
+
+  if (stripDimensionValue && !hasLocalDimensionValueType) {
+    const body = root.get().value.program.body as object[];
+    const insertAt = lastImportIndex(j, body) + 1;
+    const aliasNode = parseDimensionValueAlias(j);
+    body.splice(insertAt, 0, aliasNode);
+    fileChanged = true;
+    transformLogger.success(
+      "Added local type alias DimensionValue (= string | number | 'auto')",
+      file.path,
+    );
+  }
+
+  if (stripPositionStyles || stripDimensionValue) {
+    fileChanged = true;
+    transformLogger.success(
+      'Removed PositionStyles and/or DimensionValue from cds-common import(s)',
+      file.path,
+    );
+  }
+
+  if (!fileChanged) {
+    return null;
+  }
+
+  return root.toSource();
+}
diff --git a/packages/migrator/src/transforms/v9/migrate-use-merge-refs.ts b/packages/migrator/src/transforms/v9/migrate-use-merge-refs.ts
new file mode 100644
index 0000000000..a77d681dfe
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/migrate-use-merge-refs.ts
@@ -0,0 +1,413 @@
+/**
+ * Migrate `useMergeRefs` from the deprecated hooks entry to `mergeRefs` on `utils/mergeRefs`.
+ *
+ * Goal: use `…/utils/mergeRefs` and the `mergeRefs` binding (the deprecated `useMergeRefs` export is
+ * identical at runtime to `mergeRefs`). Matches `@<scope>/cds-common/…`; use CLI `-ps` / `--package-scope`
+ * to limit to one scope, or omit to match every scope.
+ *
+ * Cases handled:
+ * - A: `import { useMergeRefs } from '…hooks/useMergeRefs'` → `import { mergeRefs } from '…utils/mergeRefs'`.
+ * - B: `import { useMergeRefs as x } from '…'` → `import { mergeRefs as x } from '…utils/mergeRefs'`.
+ * - C: `export { useMergeRefs } from '…hooks/useMergeRefs'` → path + `export { mergeRefs } from '…utils/mergeRefs'`.
+ * - D: Any string literal exactly equal to the deprecated module path → new path.
+ * - E: Call sites and other references `useMergeRefs` → `mergeRefs` when they refer to CDS (see below).
+ * - F: After rewrites, multiple `import … from '…utils/mergeRefs'` → merged; named specifiers deduped.
+ *
+ * Reference rename safety:
+ * - Global `useMergeRefs` → `mergeRefs` renames run only if this file touched a CDS mergeRefs
+ *   module (deprecated path, mock string, or `useMergeRefs` in a CDS import/re-export). Files that
+ *   only import `useMergeRefs` from other packages are left unchanged.
+ * - Skips non-computed object literal keys (`{ useMergeRefs: 1 }`), TS property keys, class method
+ *   names, and non-computed member expression properties (`obj.useMergeRefs`).
+ * - Renames object shorthand `{ useMergeRefs }` (value/key are the same binding).
+ *
+ * Not handled:
+ * - Relative paths (e.g. `../hooks/useMergeRefs`).
+ * - Dynamic `import()` / `require()` for this module.
+ *
+ * Idempotency: second run leaves the file unchanged.
+ *
+ * @see packages/common/src/hooks/useMergeRefs.ts — re-exports from ../utils/mergeRefs
+ */
+
+import type { API, ASTPath, FileInfo, Identifier, Options } from 'jscodeshift';
+
+import { applyImportMappings, getImportMappingsFromOptions } from '../../utils/import-mapping';
+import {
+  escapeRegExp,
+  getPackageScopeFromOptions,
+  scopedModulePathRegexPrefix,
+} from '../../utils/package-scope';
+import { transformLogger } from '../../utils/transform-utils';
+
+/** Regex source for `@scope/cds-common` (capture) — merge-refs module paths only. */
+function cdsCommonPackageRootRegexSource(packageScope: string | undefined): string {
+  if (packageScope) {
+    return `${escapeRegExp(packageScope)}/cds-common`;
+  }
+  return '@[^/]+/cds-common';
+}
+
+/** `…/hooks/useMergeRefs` → `…/utils/mergeRefs` under the same `@scope/cds-common`. */
+function rewriteCdsCommonHooksUseMergeRefsToUtils(
+  modulePath: string,
+  packageScope: string | undefined,
+): string | null {
+  const base = cdsCommonPackageRootRegexSource(packageScope);
+  const m = modulePath.match(new RegExp(`^(${base})/hooks/useMergeRefs$`));
+  return m ? `${m[1]}/utils/mergeRefs` : null;
+}
+
+function isCdsMergeRefsModuleSource(
+  j: API['jscodeshift'],
+  source: unknown,
+  moduleRe: RegExp,
+): source is { value: string } {
+  return j.StringLiteral.check(source) && moduleRe.test(source.value);
+}
+
+/**
+ * Unique `import … from '@<scope>/cds-common/utils/mergeRefs'` sources in the file (for consolidation).
+ */
+function collectCdsCommonMergeRefsUtilsModulePaths(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  utilsModuleRe: RegExp,
+): string[] {
+  const seen = new Set<string>();
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const src = path.value.source;
+    if (j.StringLiteral.check(src) && utilsModuleRe.test(src.value)) {
+      seen.add(src.value);
+    }
+  });
+  return [...seen];
+}
+
+/**
+ * `import { useMergeRefs }` / `as x` → `mergeRefs` / `as x` when from CDS mergeRefs modules.
+ */
+function renameUseMergeRefsInImportSpecifiers(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  moduleRe: RegExp,
+): boolean {
+  let changed = false;
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const src = path.value.source;
+    if (!isCdsMergeRefsModuleSource(j, src, moduleRe)) {
+      return;
+    }
+    path.value.specifiers?.forEach((spec) => {
+      if (!j.ImportSpecifier.check(spec)) {
+        return;
+      }
+      if (j.Identifier.check(spec.imported) && spec.imported.name === 'useMergeRefs') {
+        spec.imported.name = 'mergeRefs';
+        changed = true;
+      }
+      if (spec.local && j.Identifier.check(spec.local) && spec.local.name === 'useMergeRefs') {
+        spec.local.name = 'mergeRefs';
+        changed = true;
+      }
+    });
+  });
+  return changed;
+}
+
+/**
+ * `export { useMergeRefs … } from '@coinbase/…/mergeRefs'`
+ */
+function renameUseMergeRefsInExportSpecifiersFromCds(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  moduleRe: RegExp,
+): boolean {
+  let changed = false;
+  root.find(j.ExportNamedDeclaration).forEach((path) => {
+    const src = path.value.source;
+    if (!src || !isCdsMergeRefsModuleSource(j, src, moduleRe)) {
+      return;
+    }
+    path.value.specifiers?.forEach((spec) => {
+      if (!j.ExportSpecifier.check(spec)) {
+        return;
+      }
+      if (j.Identifier.check(spec.local) && spec.local.name === 'useMergeRefs') {
+        spec.local.name = 'mergeRefs';
+        changed = true;
+      }
+      if (j.Identifier.check(spec.exported) && spec.exported.name === 'useMergeRefs') {
+        spec.exported.name = 'mergeRefs';
+        changed = true;
+      }
+    });
+  });
+  return changed;
+}
+
+function isObjectLiteralKey(
+  j: API['jscodeshift'],
+  parent: unknown,
+  idPath: ASTPath<Identifier>,
+): boolean {
+  if (!parent || typeof parent !== 'object') {
+    return false;
+  }
+
+  const node = parent as { type?: string; key?: unknown; computed?: boolean; shorthand?: boolean };
+  if (node.type !== 'ObjectProperty' && node.type !== 'Property') {
+    return false;
+  }
+  if (node.key !== idPath.value || node.computed) {
+    return false;
+  }
+  if (node.shorthand) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Remaining `useMergeRefs` identifiers → `mergeRefs` (call sites, `export { useMergeRefs }` without from, etc.).
+ * Only runs when this file participated in a CDS mergeRefs module migration (avoids renaming unrelated bindings).
+ */
+function renameRemainingUseMergeRefsIdentifiers(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  enabled: boolean,
+): boolean {
+  if (!enabled) {
+    return false;
+  }
+
+  let changed = false;
+
+  root.find(j.Identifier, { name: 'useMergeRefs' }).forEach((path: ASTPath<Identifier>) => {
+    const parent = path.parent?.node;
+
+    if (j.ImportSpecifier.check(parent)) {
+      return;
+    }
+
+    if (j.ExportSpecifier.check(parent)) {
+      const spec = parent;
+      let touched = false;
+      if (j.Identifier.check(spec.local) && spec.local.name === 'useMergeRefs') {
+        spec.local.name = 'mergeRefs';
+        touched = true;
+      }
+      if (j.Identifier.check(spec.exported) && spec.exported.name === 'useMergeRefs') {
+        spec.exported.name = 'mergeRefs';
+        touched = true;
+      }
+      if (touched) {
+        changed = true;
+      }
+      return;
+    }
+
+    if (isObjectLiteralKey(j, parent, path)) {
+      return;
+    }
+
+    if (j.TSPropertySignature?.check(parent) && parent.key === path.value) {
+      return;
+    }
+
+    if (j.MemberExpression.check(parent) && parent.property === path.value && !parent.computed) {
+      return;
+    }
+
+    if (j.MethodDefinition.check(parent) && parent.key === path.value) {
+      return;
+    }
+
+    path.value.name = 'mergeRefs';
+    changed = true;
+  });
+
+  root.find(j.JSXIdentifier, { name: 'useMergeRefs' }).forEach((path) => {
+    path.value.name = 'mergeRefs';
+    changed = true;
+  });
+
+  return changed;
+}
+
+/**
+ * Merge multiple `import … from targetModule` into a single declaration; dedupe named imports.
+ */
+function consolidateImportsFromMergeRefsModule(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  targetModule: string,
+) {
+  const declarations = root
+    .find(j.ImportDeclaration, { source: { value: targetModule } })
+    .filter((path) => (path.value.specifiers?.length ?? 0) > 0);
+
+  if (declarations.length <= 1) {
+    return;
+  }
+
+  const paths = declarations.paths();
+  const first = paths[0];
+  const mergedNamed = new Map<string, { imported: string; local: string }>();
+  let defaultImport: string | null = null;
+  let namespaceImport: string | null = null;
+
+  for (const path of paths) {
+    const specifiers = path.value.specifiers ?? [];
+    for (const spec of specifiers) {
+      if (j.ImportDefaultSpecifier.check(spec)) {
+        const local = spec.local?.name;
+        if (local) {
+          defaultImport = local;
+        }
+      } else if (j.ImportNamespaceSpecifier.check(spec)) {
+        const local = spec.local?.name;
+        if (local) {
+          namespaceImport = local;
+        }
+      } else if (j.ImportSpecifier.check(spec)) {
+        const imported = j.Identifier.check(spec.imported)
+          ? spec.imported.name
+          : String((spec.imported as { value?: string }).value);
+        const local = spec.local?.name ?? imported;
+        if (!mergedNamed.has(imported)) {
+          mergedNamed.set(imported, { imported, local });
+        }
+      }
+    }
+  }
+
+  const newSpecifiers: typeof first.value.specifiers = [];
+
+  if (namespaceImport) {
+    newSpecifiers.push(j.importNamespaceSpecifier(j.identifier(namespaceImport)));
+  } else if (defaultImport) {
+    newSpecifiers.push(j.importDefaultSpecifier(j.identifier(defaultImport)));
+  }
+
+  const sortedNamed = [...mergedNamed.values()].sort((a, b) =>
+    a.imported.localeCompare(b.imported),
+  );
+  for (const { imported, local } of sortedNamed) {
+    newSpecifiers.push(
+      j.importSpecifier(j.identifier(imported), local === imported ? null : j.identifier(local)),
+    );
+  }
+
+  first.value.specifiers = newSpecifiers;
+
+  for (let i = 1; i < paths.length; i++) {
+    j(paths[i]).remove();
+  }
+}
+
+export default function transformer(file: FileInfo, api: API, options: Options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const packageScope = getPackageScopeFromOptions(options);
+  const rewrites = getImportMappingsFromOptions(options);
+  const scopePrefix = scopedModulePathRegexPrefix(packageScope);
+  const mergeRefsModuleRe = new RegExp(
+    `${scopePrefix}/cds-common/(hooks\\/useMergeRefs|utils\\/mergeRefs)$`,
+  );
+  const mergeRefsUtilsModuleRe = new RegExp(`${scopePrefix}/cds-common/utils/mergeRefs$`);
+
+  let hasChanges = false;
+  let cdsMergeRefsMigration = false;
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    if (path.value.source && j.StringLiteral.check(path.value.source)) {
+      const resolvedSource = applyImportMappings(path.value.source.value, rewrites);
+      const next = rewriteCdsCommonHooksUseMergeRefsToUtils(resolvedSource, packageScope);
+      if (next) {
+        const prev = path.value.source.value;
+        path.value.source = j.stringLiteral(next);
+        hasChanges = true;
+        cdsMergeRefsMigration = true;
+        transformLogger.success(
+          `Updated import: ${prev} → ${next}`,
+          file.path,
+          path.value.loc?.start.line,
+        );
+      }
+    }
+  });
+
+  root.find(j.ExportNamedDeclaration).forEach((path) => {
+    const src = path.value.source;
+    if (src && j.StringLiteral.check(src)) {
+      const next = rewriteCdsCommonHooksUseMergeRefsToUtils(
+        applyImportMappings(src.value, rewrites),
+        packageScope,
+      );
+      if (next) {
+        const prev = src.value;
+        path.value.source = j.stringLiteral(next);
+        hasChanges = true;
+        cdsMergeRefsMigration = true;
+        transformLogger.success(
+          `Updated export from: ${prev} → ${next}`,
+          file.path,
+          path.value.loc?.start.line,
+        );
+      }
+    }
+  });
+
+  root.find(j.StringLiteral).forEach((path) => {
+    const next = rewriteCdsCommonHooksUseMergeRefsToUtils(
+      applyImportMappings(path.value.value, rewrites),
+      packageScope,
+    );
+    if (next) {
+      const prev = path.value.value;
+      path.value.value = next;
+      hasChanges = true;
+      cdsMergeRefsMigration = true;
+      transformLogger.success(
+        `Updated module path string: ${prev} → ${next}`,
+        file.path,
+        path.value.loc?.start.line,
+      );
+    }
+  });
+
+  if (renameUseMergeRefsInImportSpecifiers(j, root, mergeRefsModuleRe)) {
+    hasChanges = true;
+    cdsMergeRefsMigration = true;
+    transformLogger.success(`Renamed import useMergeRefs → mergeRefs`, file.path);
+  }
+
+  if (renameUseMergeRefsInExportSpecifiersFromCds(j, root, mergeRefsModuleRe)) {
+    hasChanges = true;
+    cdsMergeRefsMigration = true;
+    transformLogger.success(`Renamed re-export useMergeRefs → mergeRefs`, file.path);
+  }
+
+  if (renameRemainingUseMergeRefsIdentifiers(j, root, cdsMergeRefsMigration)) {
+    hasChanges = true;
+    transformLogger.success(`Renamed remaining useMergeRefs → mergeRefs`, file.path);
+  }
+
+  if (hasChanges) {
+    for (const targetModule of collectCdsCommonMergeRefsUtilsModulePaths(
+      j,
+      root,
+      mergeRefsUtilsModuleRe,
+    )) {
+      consolidateImportsFromMergeRefsModule(j, root, targetModule);
+    }
+  }
+
+  if (!hasChanges) {
+    return null;
+  }
+
+  return root.toSource();
+}
diff --git a/packages/migrator/src/transforms/v9/migrate-visualization-imports.ts b/packages/migrator/src/transforms/v9/migrate-visualization-imports.ts
new file mode 100644
index 0000000000..8bcde8a248
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/migrate-visualization-imports.ts
@@ -0,0 +1,138 @@
+/**
+ * Visualization package import migration (v8 → v9, web + mobile)
+ *
+ * Rewrites import (and re-export) paths from the deprecated standalone visualization
+ * packages to the sub-paths now shipped directly inside `cds-web` and `cds-mobile`:
+ *
+ *   @<scope>/cds-web-visualization             → @<scope>/cds-web/visualizations
+ *   @<scope>/cds-web-visualization/chart        → @<scope>/cds-web/visualizations/chart
+ *   @<scope>/cds-web-visualization/sparkline    → @<scope>/cds-web/visualizations/sparkline
+ *   @<scope>/cds-web-visualization/<deep/path>  → @<scope>/cds-web/visualizations/<deep/path>
+ *
+ *   @<scope>/cds-mobile-visualization           → @<scope>/cds-mobile/visualizations
+ *   @<scope>/cds-mobile-visualization/chart     → @<scope>/cds-mobile/visualizations/chart
+ *   @<scope>/cds-mobile-visualization/sparkline → @<scope>/cds-mobile/visualizations/sparkline
+ *   @<scope>/cds-mobile-visualization/<deep>    → @<scope>/cds-mobile/visualizations/<deep>
+ *
+ * Handles:
+ *   - `import { … } from '…'`          (ImportDeclaration)
+ *   - `export { … } from '…'`          (ExportNamedDeclaration with source)
+ *   - `export * from '…'`              (ExportAllDeclaration)
+ *
+ * Not handled:
+ *   - `require('…')` calls
+ *   - Dynamic `import('…')` expressions
+ *
+ * Use CLI `-ps` / `--packageScope` to restrict rewrites to a single npm scope (e.g. `@coinbase`).
+ * Idempotent: second run is a no-op once paths have been updated.
+ */
+import type { API, FileInfo, Options } from 'jscodeshift';
+
+import { applyImportMappings, getImportMappingsFromOptions } from '../../utils/import-mapping';
+import { escapeRegExp, getPackageScopeFromOptions } from '../../utils/package-scope';
+import { transformLogger } from '../../utils/transform-utils';
+
+/**
+ * Builds a regex that both enforces the scope filter (when set) and captures the
+ * three parts needed for reconstruction: scope, platform (web|mobile), sub-path.
+ *
+ * Group 1 — npm scope  (e.g. `@coinbase`)
+ * Group 2 — platform   (`web` or `mobile`)
+ * Group 3 — sub-path   (e.g. `/chart`, or undefined when importing the root barrel)
+ */
+function buildVisualizationRe(packageScope: string | undefined): RegExp {
+  const scopeCapture = packageScope ? escapeRegExp(packageScope) : '@[^/]+';
+  return new RegExp(`^(${scopeCapture})/cds-(web|mobile)-visualization(/.+)?$`);
+}
+
+/**
+ * Returns the rewritten module path, or `null` if the path does not match (or is
+ * filtered out by the scope option).
+ */
+function rewritePath(modulePath: string, vizRe: RegExp): string | null {
+  const m = modulePath.match(vizRe);
+  if (!m) return null;
+  const [, scope, platform, rest] = m;
+  return `${scope}/cds-${platform}/visualizations${rest ?? ''}`;
+}
+
+function rewriteStringLiteralSource(
+  j: API['jscodeshift'],
+  node: { source?: unknown },
+  vizRe: RegExp,
+  filePath: string,
+  line: number | undefined,
+  rewrites: ReturnType<typeof getImportMappingsFromOptions>,
+): boolean {
+  const src = node.source;
+  if (!j.StringLiteral.check(src)) return false;
+  const srcLiteral = src as { value: string };
+  const next = rewritePath(applyImportMappings(srcLiteral.value, rewrites), vizRe);
+  if (!next) return false;
+  transformLogger.success(`Updated import path: ${srcLiteral.value} → ${next}`, filePath, line);
+  srcLiteral.value = next;
+  return true;
+}
+
+export default function transformer(file: FileInfo, api: API, options: Options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const packageScope = getPackageScopeFromOptions(options);
+  const rewrites = getImportMappingsFromOptions(options);
+  const vizRe = buildVisualizationRe(packageScope);
+
+  let hasChanges = false;
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    if (
+      rewriteStringLiteralSource(
+        j,
+        path.value,
+        vizRe,
+        file.path,
+        path.value.loc?.start.line,
+        rewrites,
+      )
+    ) {
+      hasChanges = true;
+    }
+  });
+
+  root.find(j.ExportNamedDeclaration).forEach((path) => {
+    if (
+      path.value.source &&
+      rewriteStringLiteralSource(
+        j,
+        path.value,
+        vizRe,
+        file.path,
+        path.value.loc?.start.line,
+        rewrites,
+      )
+    ) {
+      hasChanges = true;
+    }
+  });
+
+  root.find(j.ExportAllDeclaration).forEach((path) => {
+    if (
+      rewriteStringLiteralSource(
+        j,
+        path.value,
+        vizRe,
+        file.path,
+        path.value.loc?.start.line,
+        rewrites,
+      )
+    ) {
+      hasChanges = true;
+    }
+  });
+
+  if (!hasChanges) {
+    return null;
+  }
+
+  return root.toSource();
+}
diff --git a/packages/migrator/src/transforms/v9/theme-provider-isolated.ts b/packages/migrator/src/transforms/v9/theme-provider-isolated.ts
new file mode 100644
index 0000000000..13ff7c4170
--- /dev/null
+++ b/packages/migrator/src/transforms/v9/theme-provider-isolated.ts
@@ -0,0 +1,103 @@
+/**
+ * ThemeProvider isolated prop transform (v8 → v9, web only)
+ *
+ * In v9, `ThemeProvider` gained an `isolated` prop. When `isolated` is omitted (default `false`),
+ * the provider calls `diffThemes()` and only injects CSS variable **diffs** relative to the nearest
+ * parent `ThemeProvider` in the React tree. This optimization breaks any usage where the
+ * `ThemeProvider` DOM subtree is detached from its React parent (e.g. `createPortal`), because CSS
+ * variable inheritance stops at the portal boundary.
+ *
+ * Setting `isolated={true}` restores the v8 behavior of always injecting the full set of theme CSS
+ * variables. After running this codemod, teams can selectively remove `isolated` from
+ * `ThemeProvider` instances that are NOT inside portals to opt into the new diffing optimization.
+ *
+ * Matches any import of `ThemeProvider` from `@<scope>/cds-web` (root barrel) or any sub-path
+ * (e.g. `@<scope>/cds-web/system`, `@<scope>/cds-web/system/ThemeProvider`). Use CLI `-ps` /
+ * `--packageScope` to restrict to a specific npm scope.
+ *
+ * Not handled:
+ * - `export { ThemeProvider } from '…'` re-exports.
+ * - `require(…)` imports.
+ * - Dynamic `import(…)`.
+ * - `InvertedThemeProvider` (not requested; add a separate codemod if needed).
+ */
+import type { API, FileInfo, Options } from 'jscodeshift';
+
+import { applyImportMappings, getImportMappingsFromOptions } from '../../utils/import-mapping';
+import { getPackageScopeFromOptions, scopedModulePathRegexPrefix } from '../../utils/package-scope';
+import { transformLogger } from '../../utils/transform-utils';
+
+const TARGET_COMPONENT = 'ThemeProvider';
+
+function buildCdsWebImportRe(packageScope: string | undefined): RegExp {
+  const prefix = scopedModulePathRegexPrefix(packageScope);
+  return new RegExp(`${prefix}/cds-web(/.+)?$`);
+}
+
+export default function transformer(file: FileInfo, api: API, options: Options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const packageScope = getPackageScopeFromOptions(options);
+  const rewrites = getImportMappingsFromOptions(options);
+  const cdsWebRe = buildCdsWebImportRe(packageScope);
+
+  const localNames = new Set<string>();
+
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => {
+      const src = path.value.source;
+      if (!j.StringLiteral.check(src)) return false;
+      return cdsWebRe.test(applyImportMappings(src.value, rewrites));
+    })
+    .forEach((path) => {
+      path.value.specifiers?.forEach((specifier) => {
+        if (j.ImportSpecifier.check(specifier) && specifier.imported.name === TARGET_COMPONENT) {
+          localNames.add(specifier.local?.name ?? specifier.imported.name);
+        }
+      });
+    });
+
+  if (localNames.size === 0) {
+    return null;
+  }
+
+  let hasChanges = false;
+
+  root
+    .find(j.JSXOpeningElement)
+    .filter((path) => {
+      const name = path.value.name;
+      return j.JSXIdentifier.check(name) && localNames.has(name.name);
+    })
+    .forEach((path) => {
+      const attrs = path.value.attributes ?? [];
+
+      const alreadyHasIsolated = attrs.some(
+        (attr) =>
+          j.JSXAttribute.check(attr) &&
+          j.JSXIdentifier.check(attr.name) &&
+          attr.name.name === 'isolated',
+      );
+
+      if (alreadyHasIsolated) return;
+
+      // JSX boolean shorthand: `isolated` is equivalent to `isolated={true}`.
+      const isolatedAttr = j.jsxAttribute(j.jsxIdentifier('isolated'));
+      path.value.attributes = [...attrs, isolatedAttr];
+      hasChanges = true;
+
+      transformLogger.success(
+        `Added isolated prop to ThemeProvider`,
+        file.path,
+        path.value.loc?.start.line,
+      );
+    });
+
+  if (!hasChanges) {
+    return null;
+  }
+
+  return root.toSource();
+}
diff --git a/packages/migrator/src/types.ts b/packages/migrator/src/types.ts
new file mode 100644
index 0000000000..395fb6918a
--- /dev/null
+++ b/packages/migrator/src/types.ts
@@ -0,0 +1,68 @@
+/**
+ * Types for CDS migration tools
+ */
+
+/**
+ * A jscodeshift transform — the default. Runs via `npx jscodeshift` against
+ * JS/TS source files.
+ */
+export type JscodeshiftTransform = {
+  type?: 'jscodeshift';
+  name: string;
+  description: string;
+  /** Path to the transform file relative to the transforms directory (no extension). */
+  file: string;
+  /**
+   * File extensions to process (comma-separated).
+   * @default "tsx,ts,jsx,js"
+   */
+  extensions?: string;
+};
+
+/**
+ * A Node.js script transform. Runs via `node <script> <targetPath> [--dry]`.
+ * The script is responsible for finding and processing its own file types
+ * (e.g. CSS, SCSS, HTML) and must export nothing at the module level that
+ * would conflict with being run as a script.
+ */
+export type ScriptTransform = {
+  type: 'script';
+  name: string;
+  description: string;
+  /** Path to the compiled script relative to the transforms directory (no extension). */
+  file: string;
+};
+
+export type Transform = JscodeshiftTransform | ScriptTransform;
+
+/**
+ * Preset manifest structure
+ */
+export type PresetManifest = {
+  /**
+   * Preset identifier (e.g., "v8-to-v9")
+   */
+  preset: string;
+  /**
+   * Overall description of the migration
+   */
+  description: string;
+  /**
+   * List of transforms in this preset
+   */
+  transforms: Transform[];
+};
+
+/**
+ * Selection for what to migrate
+ */
+export type MigrationSelection = {
+  /**
+   * If true, migrate everything
+   */
+  all?: boolean;
+  /**
+   * Specific transforms to migrate (by name)
+   */
+  transforms?: string[];
+};
diff --git a/packages/migrator/src/utils/config-loader.ts b/packages/migrator/src/utils/config-loader.ts
new file mode 100644
index 0000000000..9510c627f4
--- /dev/null
+++ b/packages/migrator/src/utils/config-loader.ts
@@ -0,0 +1,74 @@
+/**
+ * Configuration loader utilities
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+import type { MigrationSelection, PresetManifest, Transform } from '../types';
+
+/**
+ * Load preset manifest from manifest.json
+ */
+export function loadMigrationManifest(presetDir: string): PresetManifest {
+  const manifestPath = path.join(presetDir, 'manifest.json');
+
+  if (!fs.existsSync(manifestPath)) {
+    throw new Error(`Preset manifest not found: ${manifestPath}`);
+  }
+
+  const manifestContent = fs.readFileSync(manifestPath, 'utf-8');
+  return JSON.parse(manifestContent) as PresetManifest;
+}
+
+/**
+ * Get all transforms from manifest based on selection
+ */
+export function getSelectedTransforms(
+  manifest: PresetManifest,
+  selection: MigrationSelection,
+): Transform[] {
+  // If migrate all, return all transforms
+  if (selection.all) {
+    return manifest.transforms;
+  }
+
+  // Collect specific transforms by name
+  if (selection.transforms && selection.transforms.length > 0) {
+    const selectedTransforms: Transform[] = [];
+    for (const transformName of selection.transforms) {
+      const transform = manifest.transforms.find((t) => t.name === transformName);
+      if (transform) {
+        selectedTransforms.push(transform);
+      }
+    }
+    return selectedTransforms;
+  }
+
+  return [];
+}
+
+/**
+ * Build a summary of what will be migrated
+ */
+export function buildMigrationSummary(
+  manifest: PresetManifest,
+  selection: MigrationSelection,
+): string {
+  const transforms = getSelectedTransforms(manifest, selection);
+
+  let summary = '\nMigration Plan:\n';
+  summary += '================\n\n';
+
+  if (transforms.length === 0) {
+    summary += 'No transforms selected.\n';
+  } else {
+    for (const transform of transforms) {
+      summary += `  • ${transform.name} - ${transform.description}\n`;
+    }
+  }
+
+  summary += `\nTotal transforms: ${transforms.length}\n`;
+
+  return summary;
+}
diff --git a/packages/migrator/src/utils/constants.ts b/packages/migrator/src/utils/constants.ts
new file mode 100644
index 0000000000..efe11242ba
--- /dev/null
+++ b/packages/migrator/src/utils/constants.ts
@@ -0,0 +1,6 @@
+/**
+ * Constants used across migration utilities
+ */
+
+export const TODO_PREFIX = 'TODO [cds-migrator';
+export const LOG_FILE_NAME = 'migration.log';
diff --git a/packages/migrator/src/utils/ensure-import-specifiers.ts b/packages/migrator/src/utils/ensure-import-specifiers.ts
new file mode 100644
index 0000000000..c08f0950ea
--- /dev/null
+++ b/packages/migrator/src/utils/ensure-import-specifiers.ts
@@ -0,0 +1,63 @@
+import type { API, ImportDeclaration } from 'jscodeshift';
+
+export type EnsureImportSpecifiersOptions = {
+  /**
+   * `type` → TypeScript `import type { … } from '…'`.
+   * `value` → `import { … } from '…'` (no `importKind` on the declaration).
+   */
+  importKind: 'type' | 'value';
+};
+
+/**
+ * Ensures named imports from `modulePath` exist, merging into an existing import from that path or
+ * prepending a new declaration. Returns whether the AST changed.
+ *
+ * Does not handle default/namespace specifiers or mixed type+value semantics on one declaration;
+ * callers must avoid conflicting merges (e.g. adding value bindings to a `import type` line).
+ */
+export function ensureImportSpecifiers(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  modulePath: string,
+  names: string[],
+  options: EnsureImportSpecifiersOptions = { importKind: 'type' },
+): boolean {
+  const wantsTypeOnly = options.importKind === 'type';
+
+  const existing = root.find(j.ImportDeclaration, { source: { value: modulePath } });
+
+  if (existing.length === 0) {
+    const specifiers = names.map((n) => j.importSpecifier(j.identifier(n), j.identifier(n)));
+    const decl: ImportDeclaration = j.importDeclaration(specifiers, j.stringLiteral(modulePath));
+    if (wantsTypeOnly) {
+      decl.importKind = 'type';
+    }
+    root.get().value.program.body.unshift(decl);
+    return true;
+  }
+
+  let anyMerged = false;
+  existing.forEach((path) => {
+    let pathMerged = false;
+    const had = new Set<string>();
+    for (const spec of path.value.specifiers ?? []) {
+      if (j.ImportSpecifier.check(spec) && j.Identifier.check(spec.imported)) {
+        had.add(spec.imported.name);
+      }
+    }
+    for (const n of names) {
+      if (!had.has(n)) {
+        path.value.specifiers = path.value.specifiers ?? [];
+        path.value.specifiers.push(j.importSpecifier(j.identifier(n), j.identifier(n)));
+        had.add(n);
+        pathMerged = true;
+        anyMerged = true;
+      }
+    }
+    if (pathMerged && wantsTypeOnly && path.value.importKind !== 'type') {
+      path.value.importKind = 'type';
+    }
+  });
+
+  return anyMerged;
+}
diff --git a/packages/migrator/src/utils/import-mapping.ts b/packages/migrator/src/utils/import-mapping.ts
new file mode 100644
index 0000000000..fbfa351eaa
--- /dev/null
+++ b/packages/migrator/src/utils/import-mapping.ts
@@ -0,0 +1,95 @@
+/**
+ * Import source rewrite utilities
+ *
+ * Allows consumers to declare that imports from one path prefix should be
+ * treated as equivalent to another path prefix for migration purposes.
+ * Transforms apply rewrites before running their import-path regexes, so
+ * call sites that import from a wrapper or re-exporting package are processed
+ * the same way as direct CDS imports.
+ *
+ * Mapping is prefix-based with `/` boundary enforcement:
+ *   rewrite { from: '@cbhq/shared/cds', to: '@cbhq/cds-web' }
+ *   input    '@cbhq/shared/cds/buttons/Button'
+ *   output   '@cbhq/cds-web/buttons/Button'
+ */
+
+import type { Options } from 'jscodeshift';
+
+export type ImportMapping = {
+  /** The import source prefix to match (e.g. `@cbhq/shared/cds`). */
+  from: string;
+  /** The import source prefix to replace it with (e.g. `@cbhq/cds-web`). */
+  to: string;
+};
+
+/**
+ * Parse a raw `'<from>=<to>'` rewrite string into an `ImportMapping`.
+ * Returns `null` when the format is invalid (no `=` separator, or empty side).
+ */
+export function parseImportMapping(raw: string): ImportMapping | null {
+  const eqIdx = raw.indexOf('=');
+  if (eqIdx <= 0) return null;
+  const from = raw.slice(0, eqIdx).trim();
+  const to = raw.slice(eqIdx + 1).trim();
+  if (!from || !to) return null;
+  return { from, to };
+}
+
+/**
+ * Parse an array of raw rewrite strings, silently dropping malformed entries.
+ */
+export function parseImportMappings(raws: string[]): ImportMapping[] {
+  const result: ImportMapping[] = [];
+  for (const raw of raws) {
+    const rewrite = parseImportMapping(raw);
+    if (rewrite) result.push(rewrite);
+  }
+  return result;
+}
+
+/**
+ * Merge rewrite lists: `cli` takes precedence over `config` when both define
+ * a rewrite for the same `from` path (last-wins within each list; CLI list
+ * applied after config list so CLI always wins).
+ */
+export function mergeImportMappings(
+  config: ImportMapping[],
+  cli: ImportMapping[],
+): ImportMapping[] {
+  const map = new Map<string, ImportMapping>();
+  for (const rewrite of [...config, ...cli]) {
+    map.set(rewrite.from, rewrite);
+  }
+  return [...map.values()];
+}
+
+/**
+ * If `source` starts with any rewrite `from` prefix, rewrite it to use `to`.
+ * Returns the rewritten string, or `source` unchanged when no rewrite matches.
+ *
+ * Matching respects `/` boundaries to avoid false prefix matches:
+ *   - `@cbhq/shared/cds/buttons` → `@cbhq/cds-web/buttons`  ✓ (slash boundary)
+ *   - `@cbhq/shared/cds`         → `@cbhq/cds-web`           ✓ (exact match)
+ *   - `@cbhq/shared/cds-extra`   → no match                  ✗ (no boundary)
+ */
+export function applyImportMappings(source: string, rewrites: ImportMapping[]): string {
+  for (const { from, to } of rewrites) {
+    if (source === from) {
+      return to;
+    }
+    if (source.startsWith(`${from}/`)) {
+      return to + source.slice(from.length);
+    }
+  }
+  return source;
+}
+
+/**
+ * Reads import rewrites forwarded by the runner as a JSON-encoded array on
+ * the jscodeshift `options` object.
+ */
+export function getImportMappingsFromOptions(options: Options): ImportMapping[] {
+  const raw = (options as Record<string, unknown>).importMappings;
+  if (!Array.isArray(raw)) return [];
+  return raw as ImportMapping[];
+}
diff --git a/packages/migrator/src/utils/index.ts b/packages/migrator/src/utils/index.ts
new file mode 100644
index 0000000000..fc9c4cc510
--- /dev/null
+++ b/packages/migrator/src/utils/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Shared utility functions for CDS migrations
+ */
+
+export * from './config-loader';
+export * from './constants';
+export * from './import-mapping';
+export * from './logger';
+export * from './migration-history';
+export * from './repo-config';
diff --git a/packages/migrator/src/utils/logger.ts b/packages/migrator/src/utils/logger.ts
new file mode 100644
index 0000000000..15dc5d0746
--- /dev/null
+++ b/packages/migrator/src/utils/logger.ts
@@ -0,0 +1,201 @@
+/**
+ * Logging utilities for tracking migration progress and issues
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+import { LOG_FILE_NAME } from './constants';
+
+export const LogLevel = {
+  INFO: 'INFO',
+  WARN: 'WARN',
+  ERROR: 'ERROR',
+  SUCCESS: 'SUCCESS',
+  TODO: 'TODO',
+} as const;
+
+export type LogLevel = (typeof LogLevel)[keyof typeof LogLevel];
+
+export type LogEntry = {
+  timestamp: string;
+  level: LogLevel;
+  file?: string;
+  line?: number;
+  message: string;
+  details?: string;
+};
+
+/**
+ * Migration logger for tracking changes and issues
+ */
+export class MigrationLogger {
+  private logPath: string;
+  private entries: LogEntry[] = [];
+
+  constructor(outputDir: string = process.cwd()) {
+    this.logPath = path.join(outputDir, LOG_FILE_NAME);
+    this.initializeLog();
+  }
+
+  private initializeLog(): void {
+    const header = `CDS Migration Log
+Generated: ${new Date().toISOString()}
+========================================\n\n`;
+
+    fs.writeFileSync(this.logPath, header, 'utf-8');
+  }
+
+  /**
+   * Add a log entry
+   */
+  private addEntry(entry: LogEntry): void {
+    this.entries.push(entry);
+    this.writeEntry(entry);
+  }
+
+  private writeEntry(entry: LogEntry): void {
+    const location = entry.file ? ` [${entry.file}${entry.line ? `:${entry.line}` : ''}]` : '';
+    const details = entry.details ? `\n  ${entry.details}` : '';
+
+    const line = `[${entry.timestamp}] ${entry.level}${location}: ${entry.message}${details}\n`;
+    fs.appendFileSync(this.logPath, line, 'utf-8');
+  }
+
+  /**
+   * Log an informational message
+   */
+  info(message: string, file?: string, line?: number): void {
+    this.addEntry({
+      timestamp: new Date().toISOString(),
+      level: LogLevel.INFO,
+      file,
+      line,
+      message,
+    });
+  }
+
+  /**
+   * Log a warning
+   */
+  warn(message: string, file?: string, line?: number, details?: string): void {
+    this.addEntry({
+      timestamp: new Date().toISOString(),
+      level: LogLevel.WARN,
+      file,
+      line,
+      message,
+      details,
+    });
+  }
+
+  /**
+   * Log an error
+   */
+  error(message: string, file?: string, line?: number, details?: string): void {
+    this.addEntry({
+      timestamp: new Date().toISOString(),
+      level: LogLevel.ERROR,
+      file,
+      line,
+      message,
+      details,
+    });
+  }
+
+  /**
+   * Log a successful transformation
+   */
+  success(message: string, file?: string, line?: number): void {
+    this.addEntry({
+      timestamp: new Date().toISOString(),
+      level: LogLevel.SUCCESS,
+      file,
+      line,
+      message,
+    });
+  }
+
+  /**
+   * Log a TODO item (manual migration required)
+   */
+  todo(message: string, file?: string, line?: number, details?: string): void {
+    this.addEntry({
+      timestamp: new Date().toISOString(),
+      level: LogLevel.TODO,
+      file,
+      line,
+      message,
+      details,
+    });
+  }
+
+  /**
+   * Generate a summary of the migration
+   */
+  writeSummary(): void {
+    const summary = `
+========================================
+Migration Summary
+========================================
+
+Total Entries: ${this.entries.length}
+- INFO: ${this.entries.filter((e) => e.level === LogLevel.INFO).length}
+- SUCCESS: ${this.entries.filter((e) => e.level === LogLevel.SUCCESS).length}
+- WARN: ${this.entries.filter((e) => e.level === LogLevel.WARN).length}
+- ERROR: ${this.entries.filter((e) => e.level === LogLevel.ERROR).length}
+- TODO: ${this.entries.filter((e) => e.level === LogLevel.TODO).length}
+
+`;
+
+    fs.appendFileSync(this.logPath, summary, 'utf-8');
+
+    // List all TODO items
+    const todos = this.entries.filter((e) => e.level === LogLevel.TODO);
+    if (todos.length > 0) {
+      const todoList = `
+Manual Migration Required (${todos.length} items):
+${todos.map((t) => `  - ${t.file || 'Unknown file'}: ${t.message}`).join('\n')}
+
+`;
+      fs.appendFileSync(this.logPath, todoList, 'utf-8');
+    }
+
+    console.log(`\n📝 Migration log written to: ${this.logPath}`);
+  }
+
+  /**
+   * Get the log file path
+   */
+  getLogPath(): string {
+    return this.logPath;
+  }
+
+  /**
+   * Get all log entries
+   */
+  getEntries(): LogEntry[] {
+    return [...this.entries];
+  }
+
+  /**
+   * Get entries by level
+   */
+  getEntriesByLevel(level: LogLevel): LogEntry[] {
+    return this.entries.filter((e) => e.level === level);
+  }
+}
+
+/**
+ * Create a global logger instance
+ */
+let globalLogger: MigrationLogger | null = null;
+
+export function createLogger(outputDir?: string): MigrationLogger {
+  globalLogger = new MigrationLogger(outputDir);
+  return globalLogger;
+}
+
+export function getLogger(): MigrationLogger | null {
+  return globalLogger;
+}
diff --git a/packages/migrator/src/utils/migration-history.ts b/packages/migrator/src/utils/migration-history.ts
new file mode 100644
index 0000000000..67c9c2be98
--- /dev/null
+++ b/packages/migrator/src/utils/migration-history.ts
@@ -0,0 +1,171 @@
+/**
+ * Migration history tracking
+ *
+ * Keeps track of which transforms have been run on a given path
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+import type { Transform } from '../types';
+
+const HISTORY_FILE_NAME = '.cds-migration-history.json';
+
+export type MigrationHistoryEntry = {
+  /**
+   * Transform file path (e.g., "button-variant" or "components/button-variant")
+   */
+  transform: string;
+  /**
+   * When the transform was run
+   */
+  timestamp: string;
+};
+
+export type MigrationHistory = {
+  /**
+   * List of all transform runs
+   */
+  entries: MigrationHistoryEntry[];
+  /**
+   * Last update timestamp
+   */
+  lastUpdated: string;
+};
+
+/**
+ * Get the history file path for a target directory
+ */
+function getHistoryFilePath(targetPath: string): string {
+  // If targetPath is a file, use its directory
+  const stats = fs.existsSync(targetPath) ? fs.statSync(targetPath) : null;
+  const dir = stats?.isDirectory() ? targetPath : path.dirname(targetPath);
+
+  return path.join(dir, HISTORY_FILE_NAME);
+}
+
+/**
+ * Load migration history for a target path
+ */
+export function loadMigrationHistory(targetPath: string): MigrationHistory | null {
+  const historyPath = getHistoryFilePath(targetPath);
+
+  if (!fs.existsSync(historyPath)) {
+    return null;
+  }
+
+  try {
+    const content = fs.readFileSync(historyPath, 'utf-8');
+    return JSON.parse(content) as MigrationHistory;
+  } catch (error) {
+    console.warn(`Warning: Could not load migration history from ${historyPath}`);
+    return null;
+  }
+}
+
+/**
+ * Save migration history for a target path
+ */
+export function saveMigrationHistory(targetPath: string, history: MigrationHistory): void {
+  const historyPath = getHistoryFilePath(targetPath);
+
+  try {
+    fs.writeFileSync(historyPath, JSON.stringify(history, null, 2), 'utf-8');
+  } catch (error) {
+    console.warn(`Warning: Could not save migration history to ${historyPath}`);
+  }
+}
+
+/**
+ * Record a transform run in the history
+ */
+export function recordTransformRun(
+  targetPath: string,
+  transformPath: string,
+  dryRun: boolean,
+): void {
+  // Don't record history for dry runs (they don't modify files)
+  if (dryRun) {
+    return;
+  }
+
+  let history = loadMigrationHistory(targetPath);
+
+  if (!history) {
+    history = {
+      entries: [],
+      lastUpdated: new Date().toISOString(),
+    };
+  }
+
+  // Add new entry
+  history.entries.push({
+    transform: transformPath,
+    timestamp: new Date().toISOString(),
+  });
+
+  history.lastUpdated = new Date().toISOString();
+  saveMigrationHistory(targetPath, history);
+}
+
+/**
+ * Check if a transform has already been run
+ */
+export function hasTransformBeenRun(targetPath: string, transformPath: string): boolean {
+  const history = loadMigrationHistory(targetPath);
+
+  if (!history) {
+    return false;
+  }
+
+  return history.entries.some((entry) => entry.transform === transformPath);
+}
+
+/**
+ * Get list of transforms that have already been run
+ */
+export function getAlreadyRunTransforms(targetPath: string, transformPaths: string[]): string[] {
+  const history = loadMigrationHistory(targetPath);
+
+  if (!history) {
+    return [];
+  }
+
+  const runTransforms = new Set(history.entries.map((entry) => entry.transform));
+
+  return transformPaths.filter((path) => runTransforms.has(path));
+}
+
+/**
+ * Build a summary of migration history
+ */
+export function buildHistorySummary(targetPath: string): string {
+  const history = loadMigrationHistory(targetPath);
+
+  if (!history || history.entries.length === 0) {
+    return 'No migration history found for this path.';
+  }
+
+  let summary = '\n📜 Migration History\n';
+  summary += '==================\n\n';
+
+  for (const entry of history.entries) {
+    const date = new Date(entry.timestamp).toLocaleDateString();
+    summary += `  • ${entry.transform} (${date})\n`;
+  }
+
+  summary += `\nLast updated: ${new Date(history.lastUpdated).toLocaleString()}\n`;
+
+  return summary;
+}
+
+/**
+ * Clear migration history for a target path
+ */
+export function clearMigrationHistory(targetPath: string): void {
+  const historyPath = getHistoryFilePath(targetPath);
+
+  if (fs.existsSync(historyPath)) {
+    fs.unlinkSync(historyPath);
+  }
+}
diff --git a/packages/migrator/src/utils/package-scope.ts b/packages/migrator/src/utils/package-scope.ts
new file mode 100644
index 0000000000..ef24690674
--- /dev/null
+++ b/packages/migrator/src/utils/package-scope.ts
@@ -0,0 +1,45 @@
+import type { Options } from 'jscodeshift';
+
+export function escapeRegExp(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Normalize user input: `coinbase` or `@coinbase` → `@coinbase`
+ */
+export function normalizePackageScope(scope: string): string {
+  const t = scope.trim();
+  if (!t) {
+    return '';
+  }
+  return t.startsWith('@') ? t : `@${t}`;
+}
+
+/**
+ * Reads `--packageScope` from jscodeshift options (forwarded by cds-migrate CLI).
+ * When set, scope-targeted transforms only rewrite that npm scope.
+ */
+export function getPackageScopeFromOptions(options: Options): string | undefined {
+  const raw = (options as Record<string, unknown>).packageScope;
+  if (typeof raw !== 'string' || raw.trim() === '') {
+    return undefined;
+  }
+  const n = normalizePackageScope(raw);
+  return n || undefined;
+}
+
+/**
+ * Regex **source** for the start of an npm import path when matching `@scope/pkg/…`.
+ *
+ * - With CLI `--packageScope`: only that scope, e.g. `^@coinbase`
+ * - Without: any single npm scope, `^@[^/]+`
+ *
+ * Append further path segments with a leading `/`, e.g.
+ * `` `${scopedModulePathRegexPrefix(scope)}/cds-common/types$` ``.
+ */
+export function scopedModulePathRegexPrefix(packageScope: string | undefined): string {
+  if (packageScope) {
+    return `^${escapeRegExp(packageScope)}`;
+  }
+  return '^@[^/]+';
+}
diff --git a/packages/migrator/src/utils/repo-config.ts b/packages/migrator/src/utils/repo-config.ts
new file mode 100644
index 0000000000..6bfa684959
--- /dev/null
+++ b/packages/migrator/src/utils/repo-config.ts
@@ -0,0 +1,60 @@
+/**
+ * Repo-level config file loader (`cds-migrator.config.json`)
+ *
+ * When present at the root of the target path (or cwd), this file provides
+ * standing defaults that are merged with CLI flags on every run. CLI flags
+ * always win over config file values.
+ *
+ * Schema:
+ * ```json
+ * {
+ *   "packageScope": "cbhq",
+ *   "importMappings": [
+ *     { "from": "@cbhq/shared/cds", "to": "@cbhq/cds-web" }
+ *   ]
+ * }
+ * ```
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+import type { ImportMapping } from './import-mapping';
+
+export const REPO_CONFIG_FILENAME = 'cds-migrator.config.json';
+
+export type RepoConfig = {
+  /** Default package scope filter (same as CLI `-ps`). */
+  packageScope?: string;
+  /**
+   * Import source prefix rewrites (same as CLI `--import-mapping`).
+   * Declare these when a wrapper or re-exporting package stands between call
+   * sites and CDS, so transforms process those call sites as if they imported
+   * from CDS directly.
+   * Each entry uses `from`/`to` keys (not the `<from>=<to>` string syntax).
+   */
+  importMappings?: ImportMapping[];
+};
+
+/**
+ * Attempt to load `cds-migrator.config.json` from `targetPath` (the migration
+ * target directory) or from `process.cwd()` as a fallback.
+ *
+ * Returns `null` when no config file is found (not an error).
+ * Throws when a config file exists but is malformed JSON.
+ */
+export function loadRepoConfig(targetPath: string): RepoConfig | null {
+  const candidates = [
+    path.resolve(targetPath, REPO_CONFIG_FILENAME),
+    path.resolve(process.cwd(), REPO_CONFIG_FILENAME),
+  ];
+
+  for (const candidate of candidates) {
+    if (fs.existsSync(candidate)) {
+      const content = fs.readFileSync(candidate, 'utf-8');
+      return JSON.parse(content) as RepoConfig;
+    }
+  }
+
+  return null;
+}
diff --git a/packages/migrator/src/utils/transform-utils.ts b/packages/migrator/src/utils/transform-utils.ts
new file mode 100644
index 0000000000..d7d48f9e06
--- /dev/null
+++ b/packages/migrator/src/utils/transform-utils.ts
@@ -0,0 +1,110 @@
+/**
+ * Utilities for transforms (CommonJS-compatible)
+ *
+ * This module re-exports utilities in a way that jscodeshift transforms can use.
+ * It avoids complex dependencies and ES module issues.
+ */
+
+import { TODO_PREFIX } from './constants';
+
+// Re-export just the essential constants transforms need
+export { TODO_PREFIX };
+
+/**
+ * Simple logger for transforms
+ * Note: This is a simplified version that just console.logs since
+ * the full logger isn't available in jscodeshift workers
+ */
+export const transformLogger = {
+  success: (message: string, file?: string, line?: number) => {
+    const location = file ? ` [${file}${line ? `:${line}` : ''}]` : '';
+    console.log(`✓ ${message}${location}`);
+  },
+  warn: (message: string, file?: string, line?: number) => {
+    const location = file ? ` [${file}${line ? `:${line}` : ''}]` : '';
+    console.warn(`⚠ ${message}${location}`);
+  },
+  info: (message: string, file?: string, line?: number) => {
+    const location = file ? ` [${file}${line ? `:${line}` : ''}]` : '';
+    console.log(`ℹ ${message}${location}`);
+  },
+};
+
+/**
+ * Add a TODO comment to a node.
+ *
+ * - **Non-JSX context**: attaches a `// line comment` as a leading comment on
+ *   the node, which is the standard jscodeshift approach.
+ * - **JSX context** (JSXElement / JSXFragment / JSXExpressionContainer child):
+ *   inserts a `{/* … *\/}` sibling node immediately before the target element.
+ *   Plain line or block comments placed directly inside JSX markup are either
+ *   invalid (line comments) or render as text (bare block comments), so the
+ *   only correct form is a JSXExpressionContainer wrapping a JSXEmptyExpression
+ *   whose `innerComments` carry the block comment text.
+ */
+export function addTodoComment(
+  j: any,
+  path: any,
+  transformName: string,
+  message: string,
+  context?: string,
+): void {
+  const isJsxNode =
+    j.JSXElement.check(path.value) ||
+    j.JSXExpressionContainer.check(path.value) ||
+    j.JSXFragment.check(path.value);
+
+  const parentIsJsxElement = path.parent != null && j.JSXElement.check(path.parent.value);
+
+  if (isJsxNode && parentIsJsxElement) {
+    // Recast does not print innerComments on synthetic JSXEmptyExpression nodes,
+    // so we parse the {/* */} string from source to get a node recast will print.
+    const makeJsxComment = (text: string) => {
+      const parsed = j(`<>{/* ${text} */}</>`);
+      return parsed.find(j.JSXExpressionContainer).paths()[0].value;
+    };
+
+    const children: any[] = path.parent.value.children;
+    const index = children.indexOf(path.value);
+    if (index !== -1) {
+      const insertions = [makeJsxComment(`${TODO_PREFIX}:${transformName}]: ${message}`)];
+      if (context) insertions.push(makeJsxComment(context));
+      children.splice(index, 0, ...insertions);
+    }
+    return;
+  }
+
+  // Non-JSX: attach leading line comments to the node itself
+  const comments = [j.commentLine(` ${TODO_PREFIX}:${transformName}]: ${message}`, true, false)];
+  if (context) {
+    comments.push(j.commentLine(` ${context}`, true, false));
+  }
+  path.value.comments = [...comments, ...(path.value.comments || [])];
+}
+
+/**
+ * Check if a node already has a migration TODO comment, in either form:
+ * - a leading `// TODO(cds-migration)…` line comment on the node itself, or
+ * - a `{/* TODO(cds-migration)… *\/}` JSXExpressionContainer sibling that
+ *   immediately precedes the node inside a JSX parent.
+ */
+export function hasMigrationTodo(path: any): boolean {
+  // Non-JSX: check leading comments on the node
+  const nodeComments: any[] = path.value.comments || [];
+  if (nodeComments.some((c: any) => c.value?.includes(TODO_PREFIX))) return true;
+
+  // JSX: check for a preceding {/* TODO … */} sibling
+  const parentNode = path.parent?.value;
+  if (parentNode?.type === 'JSXElement') {
+    const children: any[] = parentNode.children ?? [];
+    const index = children.indexOf(path.value);
+    if (index > 0) {
+      const prev = children[index - 1];
+      const innerComments: any[] =
+        (prev?.type === 'JSXExpressionContainer' && prev.expression?.innerComments) || [];
+      if (innerComments.some((c: any) => c.value?.includes(TODO_PREFIX))) return true;
+    }
+  }
+
+  return false;
+}
diff --git a/packages/ui-mobile-playground/tsconfig.build.json b/packages/migrator/tsconfig.build.json
similarity index 61%
rename from packages/ui-mobile-playground/tsconfig.build.json
rename to packages/migrator/tsconfig.build.json
index 38a8f20ddd..4b40f3322d 100644
--- a/packages/ui-mobile-playground/tsconfig.build.json
+++ b/packages/migrator/tsconfig.build.json
@@ -11,19 +11,10 @@
     "**/__tests__/**",
     "**/__mocks__/**",
     "**/__fixtures__/**",
+    "**/__testfixtures__/**",
     "**/*.stories.*",
     "**/*.test.*",
     "**/*.spec.*"
   ],
-  "references": [
-    {
-      "path": "../../packages/common"
-    },
-    {
-      "path": "../../packages/mobile"
-    },
-    {
-      "path": "../../packages/mobile-visualization"
-    }
-  ]
+  "references": []
 }
diff --git a/packages/migrator/tsconfig.json b/packages/migrator/tsconfig.json
new file mode 100644
index 0000000000..7580dc0b85
--- /dev/null
+++ b/packages/migrator/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.project.json",
+  "compilerOptions": {
+    "declarationDir": "dts",
+    "rootDir": "src"
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "**/*/__testfixtures__/**"
+  ],
+  "references": []
+}
diff --git a/packages/mobile-visreg/README.md b/packages/mobile-visreg/README.md
index 1c26475990..54bb43d07d 100644
--- a/packages/mobile-visreg/README.md
+++ b/packages/mobile-visreg/README.md
@@ -42,12 +42,12 @@ packages/mobile-visreg/
 
 All targets are run from the repo root via `yarn nx run mobile-visreg:<target>`.
 
-| Target    | Command                             | Description                                            |
-| --------- | ----------------------------------- | ------------------------------------------------------ |
-| `setup`   | `yarn nx run mobile-visreg:setup`   | Install Maestro CLI (one-time)                         |
-| `ios`     | `yarn nx run mobile-visreg:ios`     | Capture screenshots from the CDS mobile app on iOS     |
-| `android` | `yarn nx run mobile-visreg:android` | Capture screenshots from the CDS mobile app on Android |
-| `upload`  | `yarn nx run mobile-visreg:upload`  | Upload screenshots to BrowserStack App Percy           |
+| Target    | Command                             | Description                                              |
+| --------- | ----------------------------------- | -------------------------------------------------------- |
+| `setup`   | `yarn nx run mobile-visreg:setup`   | Install Maestro CLI (one-time)                           |
+| `ios`     | `yarn nx run mobile-visreg:ios`     | Capture screenshots from the CDS expo-app app on iOS     |
+| `android` | `yarn nx run mobile-visreg:android` | Capture screenshots from the CDS expo-app app on Android |
+| `upload`  | `yarn nx run mobile-visreg:upload`  | Upload screenshots to BrowserStack App Percy             |
 
 ## Prerequisites
 
@@ -83,8 +83,8 @@ yarn nx run mobile-visreg:setup
 > **Important**: Use the **release** build, not debug. Debug builds use the Expo Dev Client shell which intercepts deep links before React Navigation can handle them, preventing navigation to component routes.
 
 ```bash
-yarn nx run mobile-app:build:ios-release
-yarn nx run mobile-app:launch:ios-release
+yarn nx run expo-app:patch-bundle-ios
+xcrun simctl install booted apps/expo-app/prebuilds/ios-release/expoapp.app
 ```
 
 ### 4. Capture screenshots
diff --git a/packages/mobile-visreg/project.json b/packages/mobile-visreg/project.json
index 5deab1d16b..d3f1374600 100644
--- a/packages/mobile-visreg/project.json
+++ b/packages/mobile-visreg/project.json
@@ -11,13 +11,13 @@
       }
     },
     "ios": {
-      "command": "node ./src/run.mjs --appId com.ui-systems.ios-release-hermes --scheme cds --platform ios --platform-suffix _ios",
+      "command": "node ./src/run.mjs --appId com.anonymous.expo-app --scheme expoapp --platform ios --platform-suffix _ios",
       "options": {
         "cwd": "packages/mobile-visreg"
       }
     },
     "android": {
-      "command": "node ./src/run.mjs --appId com.ui_systems.android_release_hermes --scheme cds --platform android --platform-suffix _android",
+      "command": "node ./src/run.mjs --appId com.anonymous.expoapp --scheme expoapp --platform android --platform-suffix _android",
       "options": {
         "cwd": "packages/mobile-visreg"
       }
diff --git a/packages/mobile-visualization/CHANGELOG.md b/packages/mobile-visualization/CHANGELOG.md
index 3b75a1a454..9c0b89ba52 100644
--- a/packages/mobile-visualization/CHANGELOG.md
+++ b/packages/mobile-visualization/CHANGELOG.md
@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 4.0.0 (5/20/2026 PST)
+
+- **DEPRECATED** This package has been deprecated. Please import all visualization/chat components from the cds-mobile package.
+
+#### 💥 Breaking
+
+- Visualization/chart components have been migrated to cds-mobile and re-exported for backwards compatibility. As a result, deep import paths will not resolve correctly on this version. Please import from the barrel file modules instead or migrate to the same components in cds-mobile.
+
 ## 3.8.1 (5/18/2026 PST)
 
 #### 🐞 Fixes
diff --git a/packages/mobile-visualization/babel.config.cjs b/packages/mobile-visualization/babel.config.cjs
index 4d232b0f21..e5ed3b61d4 100644
--- a/packages/mobile-visualization/babel.config.cjs
+++ b/packages/mobile-visualization/babel.config.cjs
@@ -8,13 +8,16 @@ module.exports = {
     ['@babel/preset-env', { modules: isTestEnv ? 'commonjs' : false, loose: true }],
     ['@babel/preset-react', { runtime: 'automatic' }],
     '@babel/preset-typescript',
-    ...(isTestEnv || isDetoxEnv ? ['module:metro-react-native-babel-preset'] : []),
+    // Use babel-preset-expo for test/detox environments. This preset wraps @react-native/babel-preset
+    // which includes babel-plugin-syntax-hermes-parser for parsing Flow files with 'as' syntax.
+    // See: https://docs.expo.dev/versions/latest/config/babel/
+    ...(isTestEnv || isDetoxEnv ? ['babel-preset-expo'] : []),
   ],
-  plugins: isTestEnv || isDetoxEnv ? ['react-native-reanimated/plugin'] : [],
+  plugins: isTestEnv || isDetoxEnv ? ['react-native-worklets/plugin'] : [],
   ignore:
     isTestEnv || isDetoxEnv
       ? []
-      : // TO DO: The mobile-app release builds break if we ignore stories
+      : // TO DO: The expo-app release builds break if we ignore stories
         [
           // '**/__stories__/**',
           '**/__tests__/**',
diff --git a/packages/mobile-visualization/jest.config.js b/packages/mobile-visualization/jest.config.js
index 3840f7f31f..f27d596dff 100644
--- a/packages/mobile-visualization/jest.config.js
+++ b/packages/mobile-visualization/jest.config.js
@@ -10,13 +10,19 @@ const native = [
 
 const esModules = ['@coinbase', ...native, ...d3];
 
+/** @type {import('jest').Config} */
 export default {
   coveragePathIgnorePatterns: ['<rootDir>/src/illustrations/images', '.stories.tsx', '__stories__'],
   coverageReporters: ['json', 'text-summary', 'text', 'json-summary'],
   displayName: 'mobile-visualization',
+  passWithNoTests: true,
   preset: '../../jest.preset-mobile.js',
   // https://docs.swmansion.com/react-native-gesture-handler/docs/guides/testing
-  setupFiles: ['<rootDir>/../../node_modules/react-native-gesture-handler/jestSetup.js'],
+  // https://docs.swmansion.com/react-native-worklets/docs/guides/testing/
+  setupFiles: [
+    '<rootDir>/../../node_modules/react-native-gesture-handler/jestSetup.js',
+    '<rootDir>/jest/setupWorkletsMock.js',
+  ],
   testMatch: ['**//**/*.test.(ts|tsx)'],
   setupFilesAfterEnv: ['<rootDir>/jest/setup.js'],
   // https://github.com/facebook/jest/blob/main/docs/Configuration.md#faketimers-object
diff --git a/packages/mobile-visualization/jest/setup.js b/packages/mobile-visualization/jest/setup.js
index e46ec43c3e..c3855fd8f2 100644
--- a/packages/mobile-visualization/jest/setup.js
+++ b/packages/mobile-visualization/jest/setup.js
@@ -1,6 +1,20 @@
-jest.mock('react-native-reanimated', () => {
-  const Reanimated = require('react-native-reanimated/mock');
-  Reanimated.makeMutable = Reanimated.useSharedValue;
+// https://docs.swmansion.com/react-native-reanimated/docs/guides/testing/
+const {
+  setUpTests,
+  configureReanimatedLogger,
+  ReanimatedLogLevel,
+} = require('react-native-reanimated');
 
-  return Reanimated;
+/*
+  React Reanimated 4.x setup: 
+*/
+
+// Disable strict mode to prevent warnings about writing to shared values during render
+// This is needed because some components (e.g., TabsActiveIndicator) use patterns that
+// trigger warnings in reanimated 4.x strict mode but still work correctly
+configureReanimatedLogger({
+  level: ReanimatedLogLevel.warn,
+  strict: false,
 });
+
+setUpTests();
diff --git a/packages/mobile-visualization/jest/setupWorkletsMock.js b/packages/mobile-visualization/jest/setupWorkletsMock.js
new file mode 100644
index 0000000000..681bc6223c
--- /dev/null
+++ b/packages/mobile-visualization/jest/setupWorkletsMock.js
@@ -0,0 +1,3 @@
+// Mock react-native-worklets before any reanimated imports
+// The built-in mock at lib/module/mock is not available until later versions: 0.7.X
+jest.mock('react-native-worklets', () => require('./workletsMock'));
diff --git a/packages/mobile-visualization/jest/workletsMock.js b/packages/mobile-visualization/jest/workletsMock.js
new file mode 100644
index 0000000000..791d413330
--- /dev/null
+++ b/packages/mobile-visualization/jest/workletsMock.js
@@ -0,0 +1,111 @@
+/**
+ * Mock for react-native-worklets 0.5.2
+ * The built-in mock at lib/module/mock is not available until later versions: 0.7.X,
+ * Following CMR's version recommendation on versions we are staying with 0.5.2 and reanimated 4.1.1 for now
+ * This mock is based on the official mock from:
+ * https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-worklets/src/mock.ts
+ */
+
+'use strict';
+
+const NOOP = () => {};
+const NOOP_FACTORY = () => NOOP;
+const IDENTITY = (value) => value;
+const IMMEDIATE_CALLBACK_INVOCATION = (callback) => callback();
+
+const RuntimeKind = {
+  ReactNative: 'RN',
+  UI: 'UI',
+  Worklet: 'Worklet',
+};
+
+// Mocked requestAnimationFrame that uses setTimeout and passes timestamp
+// This fixes Jest's React Native setup which doesn't pass timestamps to callbacks
+// See: https://github.com/facebook/react-native/blob/main/packages/react-native/jest/setup.js#L28
+const mockedRequestAnimationFrame = (callback) => {
+  return setTimeout(() => callback(performance.now()), 0);
+};
+
+// Set up global properties that reanimated expects from the native runtime
+global._WORKLET = false;
+global.__RUNTIME_KIND = RuntimeKind.ReactNative;
+global._log = console.log;
+global._getAnimationTimestamp = () => performance.now();
+global.__flushAnimationFrame = NOOP;
+global.requestAnimationFrame = mockedRequestAnimationFrame;
+
+const WorkletAPI = {
+  isShareableRef: () => true,
+  makeShareable: IDENTITY,
+  makeShareableCloneOnUIRecursive: IDENTITY,
+  makeShareableCloneRecursive: IDENTITY,
+  shareableMappingCache: new Map(),
+
+  getStaticFeatureFlag: () => false,
+  setDynamicFeatureFlag: NOOP,
+
+  isSynchronizable: () => false,
+
+  getRuntimeKind: () => RuntimeKind.ReactNative,
+  RuntimeKind,
+
+  createWorkletRuntime: NOOP_FACTORY,
+  runOnRuntime: IDENTITY,
+  runOnRuntimeAsync(workletRuntime, worklet, ...args) {
+    return WorkletAPI.runOnUIAsync(worklet, ...args);
+  },
+  scheduleOnRuntime: IMMEDIATE_CALLBACK_INVOCATION,
+
+  createSerializable: IDENTITY,
+  isSerializableRef: IDENTITY,
+  serializableMappingCache: new Map(),
+
+  createSynchronizable: IDENTITY,
+
+  callMicrotasks: NOOP,
+  executeOnUIRuntimeSync: IDENTITY,
+
+  runOnJS(fun) {
+    return (...args) => queueMicrotask(args.length ? () => fun(...args) : fun);
+  },
+
+  runOnUI(worklet) {
+    return (...args) => {
+      // In Jest environment we schedule work via mockedRequestAnimationFrame
+      // to ensure it runs when timers are advanced
+      mockedRequestAnimationFrame(() => {
+        worklet(...args);
+      });
+    };
+  },
+
+  runOnUIAsync(worklet, ...args) {
+    return new Promise((resolve) => {
+      mockedRequestAnimationFrame(() => {
+        const result = worklet(...args);
+        resolve(result);
+      });
+    });
+  },
+
+  runOnUISync: IMMEDIATE_CALLBACK_INVOCATION,
+
+  scheduleOnRN(fun, ...args) {
+    WorkletAPI.runOnJS(fun)(...args);
+  },
+
+  scheduleOnUI(worklet, ...args) {
+    WorkletAPI.runOnUI(worklet)(...args);
+  },
+
+  unstable_eventLoopTask: NOOP_FACTORY,
+
+  isWorkletFunction: () => false,
+
+  WorkletsModule: {},
+};
+
+module.exports = {
+  __esModule: true,
+  ...WorkletAPI,
+};
diff --git a/packages/mobile-visualization/package.json b/packages/mobile-visualization/package.json
index 993775df40..f6e42e9c21 100644
--- a/packages/mobile-visualization/package.json
+++ b/packages/mobile-visualization/package.json
@@ -1,7 +1,8 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.8.1",
+  "version": "4.0.0",
   "description": "Coinbase Design System - Mobile Visualization Native",
+  "deprecated": "Use @coinbase/cds-mobile/visualizations/chart and @coinbase/cds-mobile/visualizations/sparkline instead.",
   "repository": {
     "type": "git",
     "url": "git@github.com:coinbase/cds.git",
@@ -40,13 +41,14 @@
     "@coinbase/cds-lottie-files": "workspace:^",
     "@coinbase/cds-mobile": "workspace:^",
     "@coinbase/cds-utils": "workspace:^",
-    "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
-    "react": "^18.3.1",
-    "react-native": "^0.74.5",
-    "react-native-gesture-handler": "^2.16.2",
-    "react-native-reanimated": "^3.14.0",
-    "react-native-safe-area-context": "^4.10.5",
-    "react-native-svg": "^14.1.0"
+    "@shopify/react-native-skia": "2.2.12",
+    "react": "~19.1.2",
+    "react-native": "~0.81.5",
+    "react-native-gesture-handler": "2.28.0",
+    "react-native-reanimated": "4.1.1",
+    "react-native-safe-area-context": "5.6.0",
+    "react-native-svg": "15.12.1",
+    "react-native-worklets": "0.5.2"
   },
   "dependencies": {
     "d3-interpolate-path": "^2.3.0",
@@ -55,18 +57,22 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1",
     "@coinbase/cds-common": "workspace:^",
     "@coinbase/cds-lottie-files": "workspace:^",
     "@coinbase/cds-mobile": "workspace:^",
     "@coinbase/cds-utils": "workspace:^",
-    "@shopify/react-native-skia": "1.12.4",
-    "@types/react": "^18.3.12",
-    "react-native-gesture-handler": "2.16.2",
-    "react-native-reanimated": "3.14.0",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-svg": "14.1.0",
-    "react-test-renderer": "^18.3.1"
+    "@shopify/react-native-skia": "2.2.12",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/react": "19.1.2",
+    "react": "19.1.2",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "2.28.0",
+    "react-native-reanimated": "4.1.1",
+    "react-native-safe-area-context": "5.6.0",
+    "react-native-svg": "15.12.1",
+    "react-native-worklets": "0.5.2",
+    "react-test-renderer": "19.1.2"
   }
 }
diff --git a/packages/mobile-visualization/project.json b/packages/mobile-visualization/project.json
index e2f9c11d8f..86a69bb526 100644
--- a/packages/mobile-visualization/project.json
+++ b/packages/mobile-visualization/project.json
@@ -23,9 +23,10 @@
       "executor": "@nx/eslint:lint"
     },
     "test": {
-      "executor": "@nx/jest:jest",
+      "executor": "nx:run-commands",
       "options": {
-        "jestConfig": "{projectRoot}/jest.config.js"
+        "command": "jest --runInBand",
+        "cwd": "{projectRoot}"
       }
     },
     "typecheck": {
diff --git a/packages/mobile-visualization/src/chart/index.ts b/packages/mobile-visualization/src/chart/index.ts
index 40620f86c0..4c38f98e44 100644
--- a/packages/mobile-visualization/src/chart/index.ts
+++ b/packages/mobile-visualization/src/chart/index.ts
@@ -1,17 +1 @@
-// codegen:start {preset: barrel, include: [./*.tsx, ./*/index.ts]}
-export * from './area';
-export * from './axis';
-export * from './bar';
-export * from './CartesianChart';
-export * from './ChartContextBridge';
-export * from './ChartProvider';
-export * from './gradient';
-export * from './legend';
-export * from './line';
-export * from './Path';
-export * from './PeriodSelector';
-export * from './point';
-export * from './scrubber';
-export * from './text';
-export * from './utils';
-// codegen:end
+export * from '@coinbase/cds-mobile/visualizations/chart';
diff --git a/packages/mobile-visualization/src/index.ts b/packages/mobile-visualization/src/index.ts
index 21bfe928b2..c8fa7f668d 100644
--- a/packages/mobile-visualization/src/index.ts
+++ b/packages/mobile-visualization/src/index.ts
@@ -1,4 +1,2 @@
-// codegen:start {preset: barrel, include: ./*/index.ts}
 export * from './chart';
 export * from './sparkline';
-// codegen:end
diff --git a/packages/mobile-visualization/src/sparkline/index.ts b/packages/mobile-visualization/src/sparkline/index.ts
index 5eab72d409..9f926803e3 100644
--- a/packages/mobile-visualization/src/sparkline/index.ts
+++ b/packages/mobile-visualization/src/sparkline/index.ts
@@ -1,5 +1 @@
-export * from './Sparkline';
-export * from './sparkline-interactive/SparklineInteractive';
-export * from './sparkline-interactive-header/SparklineInteractiveHeader';
-export * from './SparklineArea';
-export * from './SparklineGradient';
+export * from '@coinbase/cds-mobile/visualizations/sparkline';
diff --git a/packages/mobile-visualization/tsconfig.json b/packages/mobile-visualization/tsconfig.json
index 29d2213199..7b8baf9f20 100644
--- a/packages/mobile-visualization/tsconfig.json
+++ b/packages/mobile-visualization/tsconfig.json
@@ -5,7 +5,8 @@
     "rootDir": "src"
   },
   "include": [
-    "src/**/*"
+    "src/**/*",
+    "../mobile/src/visualizations/__tests__/Gradient.test.tsx"
   ],
   "exclude": [],
   "references": [
diff --git a/packages/mobile/CHANGELOG.md b/packages/mobile/CHANGELOG.md
index 07ee01ac80..a1377a4777 100644
--- a/packages/mobile/CHANGELOG.md
+++ b/packages/mobile/CHANGELOG.md
@@ -8,6 +8,24 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.0.0 (5/20/2026 PST)
+
+CDS 9 is here!!
+
+For more details and to help upgrading from CDS 8 using our automated migration tool, see our official [upgrade guide](https://cds.coinbase.com/guides/v9-upgrade-guide)!
+
+#### 💥 Breaking
+
+- Peer dependency range updated: React 19 & React Native 0.81.5 (Expo SDK 54)
+- Removed remaining instances of fixed height/width values across all components which may cause subtle layout shifts in your app.
+- Some component props’ types have narrowed in response to React 19 upgrade.
+- Read our upgrade guilde for more details!
+
+#### 🚀 Updates
+
+- Migrated full set of components from mobile-visualization package to new `visualizations/chart` and `visualizations/sparkline` sub-paths.
+- Read our upgrade guilde for more details!
+
 ## 8.75.2 ((5/19/2026, 01:13 PM PST))
 
 This is an artificial version bump with no new change.
diff --git a/packages/mobile/README.md b/packages/mobile/README.md
index db91730b29..8d49cbda8c 100644
--- a/packages/mobile/README.md
+++ b/packages/mobile/README.md
@@ -6,10 +6,9 @@ Components for React Native.
 
 Add the relative path to the CDS icon font to your react-native.config.js. If your project lives in the monorepo this lives in the root `react-native.config.js` file. There is an example for CDS playground in there.
 
-In this monorepo, run the `mobile-app` targets from the repo root:
+In this monorepo, run the `expo-app` targets from the repo root:
 
-- `yarn nx run mobile-app:go` for Expo Go development
-- `yarn nx run mobile-app:launch:ios-debug` or `yarn nx run mobile-app:launch:android-debug` for local debug launch
+- `yarn nx run expo-app:launch:ios-debug` or `yarn nx run expo-app:launch:android-debug` for local debug launch
 
 ### Outside monorepo
 
diff --git a/packages/mobile/babel.config.cjs b/packages/mobile/babel.config.cjs
index 4d232b0f21..e5ed3b61d4 100644
--- a/packages/mobile/babel.config.cjs
+++ b/packages/mobile/babel.config.cjs
@@ -8,13 +8,16 @@ module.exports = {
     ['@babel/preset-env', { modules: isTestEnv ? 'commonjs' : false, loose: true }],
     ['@babel/preset-react', { runtime: 'automatic' }],
     '@babel/preset-typescript',
-    ...(isTestEnv || isDetoxEnv ? ['module:metro-react-native-babel-preset'] : []),
+    // Use babel-preset-expo for test/detox environments. This preset wraps @react-native/babel-preset
+    // which includes babel-plugin-syntax-hermes-parser for parsing Flow files with 'as' syntax.
+    // See: https://docs.expo.dev/versions/latest/config/babel/
+    ...(isTestEnv || isDetoxEnv ? ['babel-preset-expo'] : []),
   ],
-  plugins: isTestEnv || isDetoxEnv ? ['react-native-reanimated/plugin'] : [],
+  plugins: isTestEnv || isDetoxEnv ? ['react-native-worklets/plugin'] : [],
   ignore:
     isTestEnv || isDetoxEnv
       ? []
-      : // TO DO: The mobile-app release builds break if we ignore stories
+      : // TO DO: The expo-app release builds break if we ignore stories
         [
           // '**/__stories__/**',
           '**/__tests__/**',
diff --git a/packages/mobile/jest.config.js b/packages/mobile/jest.config.js
index e33b8fe9ff..deb42cbae2 100644
--- a/packages/mobile/jest.config.js
+++ b/packages/mobile/jest.config.js
@@ -27,8 +27,10 @@ const config = {
   ],
   coverageReporters: ['json', 'text-summary', 'text', 'json-summary'],
   // https://docs.swmansion.com/react-native-gesture-handler/docs/guides/testing
+  // https://docs.swmansion.com/react-native-worklets/docs/guides/testing/
   setupFiles: [
     '<rootDir>/../../node_modules/react-native-gesture-handler/jestSetup.js',
+    '<rootDir>/jest/setupWorkletsMock.js',
     '<rootDir>/jest/jestThrowOnErrorAndWarning.js',
   ],
   setupFilesAfterEnv: ['<rootDir>/jest/setup.js'],
diff --git a/packages/mobile/jest/accessibility/README.md b/packages/mobile/jest/accessibility/README.md
new file mode 100644
index 0000000000..61b39a05c1
--- /dev/null
+++ b/packages/mobile/jest/accessibility/README.md
@@ -0,0 +1,102 @@
+# Custom Accessibility Engine
+
+This folder contains a custom accessibility testing engine for React Native components, replacing the unmaintained [`react-native-accessibility-engine`](https://github.com/aryella-lacerda/react-native-accessibility-engine) library.
+
+## Background
+
+The original `react-native-accessibility-engine` library provided a `toBeAccessible()` Jest matcher for testing React Native component accessibility. However, the library became incompatible with React 19 due to:
+
+1. **Deprecated dependency**: The library depends on `react-test-renderer`, which is deprecated in React 19
+2. **Initialization issue**: The library calls `react-test-renderer.create()` at module load time without wrapping it in `act()`, causing test failures in React 19's stricter environment
+3. **Unmaintained**: The library has not been updated to address these compatibility issues
+
+Rather than waiting for an upstream fix, we implemented our own accessibility engine that:
+
+- Works directly with `@testing-library/react-native` test instances
+- Derives types from RNTL exports instead of importing from `react-test-renderer`
+- Maintains the same API (`toBeAccessible()` matcher)
+- Implements all 10 original accessibility rules
+
+## Implementation
+
+The engine checks components against these accessibility rules:
+
+| Rule ID                         | Description                                                  |
+| ------------------------------- | ------------------------------------------------------------ |
+| `pressable-role-required`       | Pressable components must have an accessibility role         |
+| `pressable-accessible-required` | Pressable components must not have `accessible={false}`      |
+| `pressable-label-required`      | Pressable components must have a label or text content       |
+| `disabled-state-required`       | Disableable components must expose disabled state            |
+| `checked-state-required`        | Checkbox components must have a checked state                |
+| `adjustable-role-required`      | Slider components must have `accessibilityRole="adjustable"` |
+| `adjustable-value-required`     | Slider components must have min/max/now values               |
+| `link-role-required`            | Clickable text must have `accessibilityRole="link"`          |
+| `link-role-misused`             | Non-clickable text should not have link role                 |
+| `no-empty-text`                 | Text components must have content                            |
+
+## Intentional Difference from Original Library
+
+Our implementation includes one intentional improvement over the original library:
+
+**Extended allowed roles for pressable components**
+
+The original library's `pressable-role-required` rule only allowed these roles:
+
+```
+['button', 'link', 'imagebutton', 'radio', 'tab']
+```
+
+Our implementation adds `checkbox` and `switch`:
+
+```
+['button', 'link', 'imagebutton', 'radio', 'tab', 'checkbox', 'switch']
+```
+
+**Why this change?**
+
+The original library's exclusion of `checkbox` appears to be an oversight. The library includes a separate `checked-state-required` rule that specifically targets components with `accessibilityRole="checkbox"`, implying that checkbox is a valid role for pressables. Without `checkbox` in the allowed roles list, a properly implemented checkbox would fail the `pressable-role-required` rule before the `checked-state-required` rule could validate its checked state.
+
+Similarly, `switch` is a valid React Native accessibility role that semantically represents a toggle control and should be allowed on pressable components.
+
+## File Structure
+
+```
+accessibility/
+├── README.md          # This file
+├── types.ts           # Type definitions derived from RNTL
+├── helpers.ts         # Component type checking utilities
+├── rules.ts           # Accessibility rule definitions
+├── engine.ts          # Core accessibility checking logic
+├── matchers.ts        # Jest matcher implementation
+├── index.ts           # Module exports and Jest setup
+└── __tests__/
+    └── rules.test.tsx # Rule validation tests
+```
+
+## Usage
+
+The matcher is automatically registered when Jest loads. Use it in tests like:
+
+```tsx
+import { render, screen } from '@testing-library/react-native';
+
+it('is accessible', () => {
+  render(<MyComponent testID="test" />);
+  expect(screen.getByTestId('test')).toBeAccessible();
+});
+```
+
+### Options
+
+```tsx
+// Check only specific rules
+expect(element).toBeAccessible({
+  rules: ['pressable-role-required', 'pressable-label-required'],
+});
+
+// Filter violations before assertion
+expect(element).toBeAccessible({
+  customViolationHandler: (violations) =>
+    violations.filter((v) => !v.problem.includes('some expected issue')),
+});
+```
diff --git a/packages/mobile/jest/accessibility/__tests__/rules.test.tsx b/packages/mobile/jest/accessibility/__tests__/rules.test.tsx
new file mode 100644
index 0000000000..896aa33e73
--- /dev/null
+++ b/packages/mobile/jest/accessibility/__tests__/rules.test.tsx
@@ -0,0 +1,318 @@
+// we need to access the custom type definitions for the accessibility matcher
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../../src/jest.d.ts" />
+import React from 'react';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+import { render, screen } from '@testing-library/react-native';
+
+import { checkAccessibility } from '../engine';
+
+// Note: When using checkAccessibility, we need to pass a component from the React tree,
+// not just the host component. RNTL's screen.getByTestId returns the host component,
+// so for violation checking we often need to use a container wrapper.
+
+describe('Accessibility Rules', () => {
+  describe('pressable-role-required', () => {
+    it('fails when pressable has no role', () => {
+      render(
+        <View testID="container">
+          <TouchableOpacity testID="button">
+            <Text>Click me</Text>
+          </TouchableOpacity>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations.length).toBeGreaterThan(0);
+      expect(violations.some((v) => v.problem.includes("user hasn't been informed"))).toBe(true);
+    });
+
+    it('passes when pressable has button role', () => {
+      render(
+        <View testID="container">
+          <TouchableOpacity accessibilityLabel="Click me" accessibilityRole="button">
+            <Text>Click me</Text>
+          </TouchableOpacity>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations).toHaveLength(0);
+    });
+
+    it('passes with link role', () => {
+      render(
+        <View testID="container">
+          <TouchableOpacity accessibilityLabel="Go to page" accessibilityRole="link">
+            <Text>Link</Text>
+          </TouchableOpacity>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations).toHaveLength(0);
+    });
+  });
+
+  describe('pressable-accessible-required', () => {
+    it('fails when pressable has accessible=false', () => {
+      render(
+        <View testID="container">
+          <Pressable accessibilityRole="button" accessible={false}>
+            <Text>Click me</Text>
+          </Pressable>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations.some((v) => v.problem.includes('not accessible'))).toBe(true);
+    });
+
+    it('passes when accessible is not set (defaults to true)', () => {
+      render(
+        <View testID="container">
+          <Pressable accessibilityLabel="Click me" accessibilityRole="button">
+            <Text>Click me</Text>
+          </Pressable>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations).toHaveLength(0);
+    });
+  });
+
+  describe('pressable-label-required', () => {
+    it('fails when pressable has no label and no text', () => {
+      render(
+        <View testID="container">
+          <TouchableOpacity accessibilityRole="button">
+            <View />
+          </TouchableOpacity>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations.some((v) => v.problem.includes('no text content'))).toBe(true);
+    });
+
+    it('passes when pressable has accessibilityLabel', () => {
+      render(
+        <View testID="container">
+          <TouchableOpacity accessibilityLabel="Submit" accessibilityRole="button">
+            <View />
+          </TouchableOpacity>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations).toHaveLength(0);
+    });
+
+    it('passes when pressable has text content', () => {
+      render(
+        <View testID="container">
+          <TouchableOpacity accessibilityRole="button">
+            <Text>Submit</Text>
+          </TouchableOpacity>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations).toHaveLength(0);
+    });
+  });
+
+  describe('checked-state-required', () => {
+    it('fails when checkbox has no checked state', () => {
+      render(
+        <View testID="container">
+          <Pressable accessibilityLabel="Accept terms" accessibilityRole="checkbox">
+            <Text>Accept</Text>
+          </Pressable>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations.some((v) => v.problem.includes('checked state'))).toBe(true);
+    });
+
+    it('passes when checkbox has checked state', () => {
+      render(
+        <View testID="container">
+          <Pressable
+            accessibilityLabel="Accept terms"
+            accessibilityRole="checkbox"
+            accessibilityState={{ checked: false }}
+          >
+            <Text>Accept</Text>
+          </Pressable>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations).toHaveLength(0);
+    });
+
+    it('passes with mixed checked state', () => {
+      render(
+        <View testID="container">
+          <Pressable
+            accessibilityLabel="Select all"
+            accessibilityRole="checkbox"
+            accessibilityState={{ checked: 'mixed' }}
+          >
+            <Text>Select All</Text>
+          </Pressable>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations).toHaveLength(0);
+    });
+  });
+
+  describe('link-role-required', () => {
+    it('fails when clickable text has no link role', () => {
+      render(
+        <View testID="container">
+          <Text onPress={() => {}}>Click me</Text>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations.some((v) => v.problem.includes('clickable'))).toBe(true);
+    });
+
+    it('passes when clickable text has link role', () => {
+      render(
+        <View testID="container">
+          <Text accessibilityRole="link" onPress={() => {}}>
+            Click me
+          </Text>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations).toHaveLength(0);
+    });
+
+    it('passes when text is not clickable', () => {
+      render(
+        <View testID="container">
+          <Text>Just text</Text>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations).toHaveLength(0);
+    });
+  });
+
+  describe('link-role-misused', () => {
+    it('fails when non-clickable text has link role', () => {
+      render(
+        <View testID="container">
+          <Text accessibilityRole="link">Not a link</Text>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations.some((v) => v.problem.includes("'link' role"))).toBe(true);
+    });
+
+    it('passes when text with link role is clickable', () => {
+      render(
+        <View testID="container">
+          <Text accessibilityRole="link" onPress={() => {}}>
+            A link
+          </Text>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations).toHaveLength(0);
+    });
+  });
+
+  describe('no-empty-text', () => {
+    it('fails when text has no content', () => {
+      render(
+        <View testID="container">
+          <Text>{''}</Text>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations.some((v) => v.problem.includes("doesn't contain text"))).toBe(true);
+    });
+
+    it('passes when text has content', () => {
+      render(
+        <View testID="container">
+          <Text>Hello</Text>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations).toHaveLength(0);
+    });
+  });
+
+  describe('hidden components', () => {
+    it('skips hidden components with accessibilityElementsHidden', () => {
+      render(
+        <View testID="container">
+          <TouchableOpacity accessibilityElementsHidden>
+            <View />
+          </TouchableOpacity>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      // The button has accessibility issues (no role, no label) but should be skipped because hidden
+      expect(
+        violations.filter((v) => v.problem.includes("user hasn't been informed")),
+      ).toHaveLength(0);
+    });
+
+    it('skips components with importantForAccessibility=no-hide-descendants', () => {
+      render(
+        <View testID="container">
+          <TouchableOpacity importantForAccessibility="no-hide-descendants">
+            <View />
+          </TouchableOpacity>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(
+        violations.filter((v) => v.problem.includes("user hasn't been informed")),
+      ).toHaveLength(0);
+    });
+  });
+
+  describe('nested components', () => {
+    it('checks nested pressables', () => {
+      render(
+        <View testID="container">
+          <TouchableOpacity accessibilityLabel="Button 1" accessibilityRole="button">
+            <Text>Button 1</Text>
+          </TouchableOpacity>
+          <TouchableOpacity>
+            <Text>Button 2</Text>
+          </TouchableOpacity>
+        </View>,
+      );
+      const violations = checkAccessibility(screen.getByTestId('container'));
+      expect(violations.length).toBeGreaterThan(0);
+      expect(violations.some((v) => v.problem.includes("user hasn't been informed"))).toBe(true);
+    });
+  });
+
+  describe('toBeAccessible matcher', () => {
+    it('passes for accessible component', () => {
+      render(
+        <View testID="container">
+          <TouchableOpacity accessibilityLabel="Submit" accessibilityRole="button">
+            <Text>Submit</Text>
+          </TouchableOpacity>
+        </View>,
+      );
+      expect(screen.getByTestId('container')).toBeAccessible();
+    });
+
+    it('fails for inaccessible component', () => {
+      render(
+        <View testID="container">
+          <TouchableOpacity>
+            <View />
+          </TouchableOpacity>
+        </View>,
+      );
+      expect(() => {
+        expect(screen.getByTestId('container')).toBeAccessible();
+      }).toThrow();
+    });
+  });
+});
diff --git a/packages/mobile/jest/accessibility/engine.ts b/packages/mobile/jest/accessibility/engine.ts
new file mode 100644
index 0000000000..2043bc4b7b
--- /dev/null
+++ b/packages/mobile/jest/accessibility/engine.ts
@@ -0,0 +1,72 @@
+/* eslint-disable no-restricted-syntax */
+/**
+ * Accessibility engine that checks React Native components for accessibility violations.
+ * Works directly with test instances from @testing-library/react-native.
+ */
+import { getPathToComponent, isHidden } from './helpers';
+import { type Rule, type RuleHelp, rules } from './rules';
+import type { TestInstance } from './types';
+
+export interface Violation extends RuleHelp {
+  pathToComponent: string[];
+}
+
+export interface EngineOptions {
+  /** Specific rule IDs to check. If not provided, all rules are checked. */
+  rules?: string[];
+  /** Custom handler to filter or modify violations before the assertion. */
+  customViolationHandler?: (violations: Violation[]) => Violation[];
+}
+
+/**
+ * Check a React test instance for accessibility violations.
+ *
+ * @param testInstance - The TestInstance to check (from RNTL's screen queries)
+ * @param options - Optional configuration for which rules to run
+ * @returns Array of violations found
+ */
+export function checkAccessibility(
+  testInstance: TestInstance,
+  options?: EngineOptions,
+): Violation[] {
+  // Filter rules if specific rule IDs are provided
+  const rulesToCheck: Rule[] = options?.rules
+    ? rules.filter((rule) => options.rules?.includes(rule.id))
+    : rules;
+
+  const violations: Violation[] = [];
+
+  // For every rule
+  for (const rule of rulesToCheck) {
+    // Traverse the component tree below the root to find components that should be tested
+    const matchedComponents = testInstance.findAll(rule.matcher, { deep: true });
+
+    // Check if the root of the tree should be tested as well
+    if (rule.matcher(testInstance)) {
+      matchedComponents.push(testInstance);
+    }
+
+    // For all the components that were found
+    for (const component of matchedComponents) {
+      let didPassAssertion = false;
+
+      if (isHidden(component)) {
+        // Skip checks on hidden components
+        didPassAssertion = true;
+      } else {
+        // Check if the component meets the rule's assertion
+        didPassAssertion = rule.assertion(component);
+      }
+
+      // If not, add component to violation array
+      if (!didPassAssertion) {
+        violations.push({
+          pathToComponent: getPathToComponent(component),
+          ...rule.help,
+        });
+      }
+    }
+  }
+
+  return violations;
+}
diff --git a/packages/mobile/jest/accessibility/helpers.ts b/packages/mobile/jest/accessibility/helpers.ts
new file mode 100644
index 0000000000..235d41e4d4
--- /dev/null
+++ b/packages/mobile/jest/accessibility/helpers.ts
@@ -0,0 +1,198 @@
+/**
+ * Helper functions for accessibility rules.
+ * These functions check component types and properties to determine which accessibility rules apply.
+ */
+import {
+  Pressable,
+  Text,
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from 'react-native';
+
+import type { ComponentType, TestInstance } from './types';
+
+// Components to exclude from component name extraction
+const COMPONENT_NAME_BLACKLIST = ['String', 'Component', 'Object'];
+
+// Pressable component type names for string matching
+const PRESSABLE_TYPE_NAMES = [
+  'TouchableHighlight',
+  'TouchableOpacity',
+  'TouchableNativeFeedback',
+  'TouchableWithoutFeedback',
+  'Pressable',
+];
+
+/**
+ * Get the type name from a component type.
+ * Handles both string types (host components) and function/class types (React components).
+ */
+function getTypeName(type: ComponentType): string {
+  if (typeof type === 'string') {
+    return type;
+  }
+  if (typeof type === 'function') {
+    return (type as { displayName?: string; name?: string }).displayName || type.name || '';
+  }
+  if (typeof type === 'object' && type !== null) {
+    const objType = type as { displayName?: string; name?: string };
+    return objType.displayName || objType.name || '';
+  }
+  return '';
+}
+
+/**
+ * Check if a component type is a pressable element.
+ * Includes TouchableHighlight, TouchableOpacity, TouchableNativeFeedback,
+ * TouchableWithoutFeedback, and Pressable.
+ */
+export function isPressable(type: ComponentType): boolean {
+  // Direct reference comparison for React component instances
+  if (
+    type === TouchableHighlight ||
+    type === TouchableOpacity ||
+    type === TouchableNativeFeedback ||
+    type === TouchableWithoutFeedback ||
+    type === Pressable
+  ) {
+    return true;
+  }
+
+  // String name comparison for host components or named types
+  const typeName = getTypeName(type);
+  return PRESSABLE_TYPE_NAMES.some((name) => typeName.includes(name));
+}
+
+/**
+ * Check if a component type is a Text element.
+ */
+export function isText(type: ComponentType): boolean {
+  // Direct reference comparison
+  if (type === Text) {
+    return true;
+  }
+
+  // String name comparison
+  const typeName = getTypeName(type);
+  return typeName === 'Text';
+}
+
+/**
+ * Check if a node is an adjustable component (Slider).
+ * Returns false for wrapper components that contain a Slider.
+ */
+export function isAdjustable(node: TestInstance): boolean {
+  const slidersInTree = node.findAll((n) => n.type.toString().includes('Slider'));
+  // If this node is a Slider BUT more than one slider is found in the tree
+  // that has this node as root, it means that this node must be a SliderWrapper
+  // for the actual Slider and should therefore be discarded.
+  return node.type.toString().includes('Slider') && slidersInTree.length === 1;
+}
+
+/**
+ * Check if a node is a checkbox (pressable with role="checkbox").
+ */
+export function isCheckbox(node: TestInstance): boolean {
+  return isPressable(node.type) && node.props.accessibilityRole === 'checkbox';
+}
+
+/**
+ * Check if a node is hidden from accessibility.
+ */
+export function isHidden(node: TestInstance): boolean {
+  return (
+    node.props.accessibilityElementsHidden === true ||
+    node.props.importantForAccessibility === 'no-hide-descendants'
+  );
+}
+
+/**
+ * Check if a node can be disabled.
+ * Returns false for wrapper components that contain disable-able components.
+ */
+export function canBeDisabled(node: TestInstance): boolean {
+  const inTree = node.findAll(
+    (n) => n.props.disabled !== undefined || n.props.enabled !== undefined,
+  );
+  // If this node can be disabled BUT more than one disable-able component
+  // is found in the tree that has this node as root, it means that this node
+  // must be a Wrapper for the actual disable-able component and should be discarded.
+  return (
+    (node.props.disabled !== undefined || node.props.enabled !== undefined) && inTree.length === 1
+  );
+}
+
+/**
+ * Extract the component name from a node's type.
+ */
+function extractNameFromType(component: TestInstance): string | undefined {
+  const type = component.type as { displayName?: string; name?: string };
+
+  if (type.displayName && !COMPONENT_NAME_BLACKLIST.includes(type.displayName)) {
+    return type.displayName;
+  }
+
+  if (type.name && !COMPONENT_NAME_BLACKLIST.includes(type.name)) {
+    return type.name;
+  }
+
+  return undefined;
+}
+
+/**
+ * Get the display name of a component.
+ * Handles wrapped components (Animated, Virtualized) by inspecting children.
+ */
+export function getComponentName(component: TestInstance): string {
+  let name = extractNameFromType(component);
+
+  if (!name && component.children.length > 0 && typeof component.children[0] !== 'string') {
+    // Some components are wrapped in Animated or Virtualized nodes,
+    // and the main component is the child, not the wrapper,
+    // so we inspect the child component for name, not the parent.
+    name = extractNameFromType(component.children[0] as TestInstance);
+  }
+
+  return name || 'Unknown';
+}
+
+/**
+ * Get the path from root to the given component as an array of component names.
+ */
+export function getPathToComponent(node: TestInstance): string[] {
+  const path: string[] = [];
+  let current: TestInstance | null = node;
+
+  while (current) {
+    const type = current.type;
+
+    // Skip string types and forward refs
+    const shouldSkip =
+      typeof type === 'string' ||
+      (typeof type === 'object' &&
+        type !== null &&
+        (type as { $$typeof?: symbol }).$$typeof === Symbol.for('react.forward_ref'));
+
+    if (!shouldSkip) {
+      path.push(getComponentName(current));
+    }
+
+    current = current.parent;
+  }
+
+  return path.reverse();
+}
+
+/**
+ * Find a Text node within a component tree.
+ * Returns null if no Text node is found.
+ */
+export function findTextNode(node: TestInstance): TestInstance | null {
+  try {
+    return node.findByType(Text);
+  } catch {
+    return null;
+  }
+}
diff --git a/packages/mobile/jest/accessibility/index.ts b/packages/mobile/jest/accessibility/index.ts
new file mode 100644
index 0000000000..ffcf7f7c75
--- /dev/null
+++ b/packages/mobile/jest/accessibility/index.ts
@@ -0,0 +1,25 @@
+/**
+ * Custom accessibility testing module for React Native.
+ * Replaces react-native-accessibility-engine with a React 19-compatible implementation.
+ *
+ * Usage:
+ * Import this module in your Jest setup file to add the toBeAccessible() matcher.
+ *
+ * @example
+ * // In jest/setup.js
+ * import './accessibility';
+ *
+ * // In tests
+ * expect(screen.getByTestId('my-button')).toBeAccessible();
+ */
+import { toBeAccessible } from './matchers';
+
+// Extend Jest's expect with the toBeAccessible matcher
+expect.extend({ toBeAccessible });
+
+// Export for direct use if needed
+export { toBeAccessible };
+export type { EngineOptions, Violation } from './engine';
+export { checkAccessibility } from './engine';
+export type { Rule, RuleHelp } from './rules';
+export { rules } from './rules';
diff --git a/packages/mobile/jest/accessibility/matchers.ts b/packages/mobile/jest/accessibility/matchers.ts
new file mode 100644
index 0000000000..293dd900bc
--- /dev/null
+++ b/packages/mobile/jest/accessibility/matchers.ts
@@ -0,0 +1,89 @@
+/**
+ * Custom Jest matchers for accessibility testing.
+ */
+import { getLabelPrinter, matcherHint, printExpected, printReceived } from 'jest-matcher-utils';
+
+import { checkAccessibility, type EngineOptions, type Violation } from './engine';
+import type { TestInstance } from './types';
+
+const LABEL_PROBLEM = 'Problem';
+const LABEL_SOLUTION = 'Solution';
+
+/**
+ * Group violations by their path to component.
+ */
+function groupViolationsByPath(violations: Violation[]): Record<string, Violation[]> {
+  const grouped: Record<string, Violation[]> = {};
+  for (const violation of violations) {
+    const key = violation.pathToComponent.join(',');
+    if (!grouped[key]) {
+      grouped[key] = [];
+    }
+    grouped[key].push(violation);
+  }
+  return grouped;
+}
+
+/**
+ * Generate a formatted error message for accessibility violations.
+ */
+function generateErrorMessage(violations: Violation[], isNot: boolean): string {
+  let errorString = '';
+  const matcherName = (isNot ? '.not' : '') + '.toBeAccessible';
+  const hint = matcherHint(matcherName, 'component', '') + '\n\n';
+  errorString += hint;
+
+  const printLabel = getLabelPrinter(LABEL_PROBLEM, LABEL_SOLUTION);
+  const violationsGroupedByPath = groupViolationsByPath(violations);
+
+  for (const path in violationsGroupedByPath) {
+    // Prettify path to component
+    errorString += path.split(',').join(' > ') + '\n\n';
+
+    for (const violation of violationsGroupedByPath[path]) {
+      const violationString =
+        printLabel(LABEL_PROBLEM) +
+        printReceived(violation.problem) +
+        '\n' +
+        printLabel(LABEL_SOLUTION) +
+        printExpected(violation.solution) +
+        '\n\n';
+      errorString += violationString;
+    }
+  }
+
+  return errorString;
+}
+
+/**
+ * Jest matcher to check if a component is accessible.
+ *
+ * @example
+ * expect(screen.getByTestId('my-button')).toBeAccessible();
+ */
+export function toBeAccessible(
+  this: jest.MatcherContext,
+  received: TestInstance,
+  options?: EngineOptions,
+): jest.CustomMatcherResult {
+  let violations = checkAccessibility(received, options);
+
+  // Apply custom violation handler if provided
+  if (options?.customViolationHandler) {
+    violations = options.customViolationHandler(violations);
+  }
+
+  if (violations.length) {
+    const message = generateErrorMessage(violations, this.isNot);
+    return {
+      pass: false,
+      message: () => message,
+    };
+  }
+
+  return {
+    pass: true,
+    message: () =>
+      'Component is accessible.\nDoes it make sense to test a component for NOT being accessible?',
+  };
+}
diff --git a/packages/mobile/jest/accessibility/rules.ts b/packages/mobile/jest/accessibility/rules.ts
new file mode 100644
index 0000000000..bf5e372c89
--- /dev/null
+++ b/packages/mobile/jest/accessibility/rules.ts
@@ -0,0 +1,229 @@
+/**
+ * Accessibility rules for React Native components.
+ * Each rule has:
+ * - id: Unique identifier for the rule
+ * - matcher: Function that determines if a component should be checked
+ * - assertion: Function that returns true if the component passes the rule
+ * - help: Object with problem description and solution
+ */
+import {
+  canBeDisabled,
+  findTextNode,
+  isAdjustable,
+  isCheckbox,
+  isPressable,
+  isText,
+} from './helpers';
+import type { TestInstance } from './types';
+
+export type RuleHelp = {
+  problem: string;
+  solution: string;
+  link: string;
+};
+
+export type Rule = {
+  id: string;
+  matcher: (node: TestInstance) => boolean;
+  assertion: (node: TestInstance) => boolean;
+  help: RuleHelp;
+};
+
+const ALLOWED_PRESSABLE_ROLES = [
+  'button',
+  'link',
+  'imagebutton',
+  'radio',
+  'tab',
+  'checkbox',
+  'switch',
+];
+const ALLOWED_PRESSABLE_ROLES_MESSAGE = ALLOWED_PRESSABLE_ROLES.join(' or ');
+
+const ALLOWED_CHECKED_VALUES = [true, false, 'mixed'];
+const ALLOWED_CHECKED_VALUES_MESSAGE = ALLOWED_CHECKED_VALUES.join(' or ');
+
+/**
+ * Pressable components must have an accessibility role.
+ */
+const pressableRoleRequired: Rule = {
+  id: 'pressable-role-required',
+  matcher: (node) => isPressable(node.type),
+  assertion: (node) => ALLOWED_PRESSABLE_ROLES.includes(node.props.accessibilityRole),
+  help: {
+    problem:
+      "This component is pressable but the user hasn't been informed that it behaves like a button/link/radio",
+    solution: `Set the 'accessibilityRole' prop to ${ALLOWED_PRESSABLE_ROLES_MESSAGE}`,
+    link: '',
+  },
+};
+
+/**
+ * Pressable components must be accessible (not have accessible=false).
+ */
+const pressableAccessibleRequired: Rule = {
+  id: 'pressable-accessible-required',
+  matcher: (node) => isPressable(node.type),
+  assertion: (node) => node.props.accessible !== false,
+  help: {
+    problem: 'This button is not accessible (selectable) to the user',
+    solution:
+      "Set the 'accessible' prop to 'true' or remove it (pressables are accessible by default)",
+    link: '',
+  },
+};
+
+/**
+ * Pressable components must have a label (either from text content or accessibilityLabel).
+ */
+const pressableLabelRequired: Rule = {
+  id: 'pressable-label-required',
+  matcher: (node) => isPressable(node.type),
+  assertion: (node) => {
+    const textNode = findTextNode(node);
+    const textContent = textNode?.props?.children;
+    const accessibilityLabel = node.props.accessibilityLabel;
+
+    if (!accessibilityLabel && !textContent) {
+      return false;
+    }
+    return true;
+  },
+  help: {
+    problem:
+      "This pressable has no text content, so an accessibility label can't be automatically inferred",
+    solution: "Place a text component in the button or define an 'accessibilityLabel' prop",
+    link: '',
+  },
+};
+
+/**
+ * Components with disabled/enabled props must expose disabled state.
+ */
+const disabledStateRequired: Rule = {
+  id: 'disabled-state-required',
+  matcher: (node) => canBeDisabled(node),
+  assertion: (node) => node.props.accessibilityState?.disabled !== undefined,
+  help: {
+    problem: "This component has a disabled state but it isn't exposed to the user",
+    solution: "Set the 'accessibilityState' prop to an object containing a boolean 'disabled' key",
+    link: '',
+  },
+};
+
+/**
+ * Checkbox components must have a checked state.
+ */
+const checkedStateRequired: Rule = {
+  id: 'checked-state-required',
+  matcher: (node) => isCheckbox(node),
+  assertion: (node) => ALLOWED_CHECKED_VALUES.includes(node.props.accessibilityState?.checked),
+  help: {
+    problem:
+      "This component has an accessibility role of 'checkbox' but doesn't have a checked state",
+    solution: `Set the 'accessibilityState' prop to an object like this: { checked: ${ALLOWED_CHECKED_VALUES_MESSAGE} }`,
+    link: 'https://www.w3.org/WAI/ARIA/apg/example-index/checkbox/checkbox.html',
+  },
+};
+
+/**
+ * Adjustable components (Slider) must have accessibilityRole="adjustable".
+ */
+const adjustableRoleRequired: Rule = {
+  id: 'adjustable-role-required',
+  matcher: (node) => isAdjustable(node),
+  assertion: (node) => node.props.accessibilityRole === 'adjustable',
+  help: {
+    problem: "This component has an adjustable value but the user wasn't informed of this",
+    solution: "Set the 'accessibilityRole' prop to 'adjustable'",
+    link: '',
+  },
+};
+
+/**
+ * Adjustable components must have accessibilityValue with min, max, and now.
+ */
+const adjustableValueRequired: Rule = {
+  id: 'adjustable-value-required',
+  matcher: (node) => isAdjustable(node),
+  assertion: (node) => {
+    const value = node.props.accessibilityValue;
+    return value?.now !== undefined && value?.min !== undefined && value?.max !== undefined;
+  },
+  help: {
+    problem:
+      "This component has an adjustable value but the user wasn't informed of its min, max, and current value",
+    solution: "Set the 'accessibilityValue' prop to an object: { min: ?, max: ?, now: ?}",
+    link: '',
+  },
+};
+
+/**
+ * Clickable text must have accessibilityRole="link".
+ */
+const linkRoleRequired: Rule = {
+  id: 'link-role-required',
+  matcher: (node) => isText(node.type),
+  assertion: (node) => {
+    const { onPress, accessibilityRole } = node.props;
+    if (onPress) {
+      return accessibilityRole === 'link';
+    }
+    return true;
+  },
+  help: {
+    problem: "The text is clickable, but the user wasn't informed that it behaves like a link",
+    solution: "Set the 'accessibilityRole' prop to 'link' or remove the 'onPress' prop",
+    link: '',
+  },
+};
+
+/**
+ * Non-clickable text should not have accessibilityRole="link".
+ */
+const linkRoleMisused: Rule = {
+  id: 'link-role-misused',
+  matcher: (node) => isText(node.type),
+  assertion: (node) => {
+    const { onPress, accessibilityRole } = node.props;
+    if (!onPress) {
+      return accessibilityRole !== 'link';
+    }
+    return true;
+  },
+  help: {
+    problem: "The 'link' role has been used but the text isn't clickable",
+    solution: "Set the 'accessibilityRole' prop to 'text' or add an 'onPress' prop",
+    link: '',
+  },
+};
+
+/**
+ * Text components must have text content.
+ */
+const noEmptyText: Rule = {
+  id: 'no-empty-text',
+  matcher: (node) => isText(node.type),
+  assertion: (node) => !!node.props?.children,
+  help: {
+    problem: "This text node doesn't contain text and so no accessibility label can be inferred",
+    solution: 'Add text content or prevent this component from rendering if it has no content',
+    link: '',
+  },
+};
+
+/**
+ * All accessibility rules in the order they should be applied.
+ */
+export const rules: Rule[] = [
+  pressableRoleRequired,
+  pressableAccessibleRequired,
+  disabledStateRequired,
+  checkedStateRequired,
+  pressableLabelRequired,
+  adjustableRoleRequired,
+  adjustableValueRequired,
+  linkRoleRequired,
+  linkRoleMisused,
+  noEmptyText,
+];
diff --git a/packages/mobile/jest/accessibility/types.ts b/packages/mobile/jest/accessibility/types.ts
new file mode 100644
index 0000000000..b75690fceb
--- /dev/null
+++ b/packages/mobile/jest/accessibility/types.ts
@@ -0,0 +1,18 @@
+/**
+ * Type definitions for the accessibility engine.
+ *
+ * These types are derived from @testing-library/react-native's exports
+ * to avoid importing from the deprecated react-test-renderer package.
+ */
+import type { RenderResult } from '@testing-library/react-native';
+
+/**
+ * A node in the React test instance tree.
+ * Derived from RNTL's RenderResult['root'] type.
+ */
+export type TestInstance = RenderResult['root'];
+
+/**
+ * The type of a React component in the test tree.
+ */
+export type ComponentType = TestInstance['type'];
diff --git a/packages/mobile/jest/setup.js b/packages/mobile/jest/setup.js
index c6c68fdb74..c6719766f8 100644
--- a/packages/mobile/jest/setup.js
+++ b/packages/mobile/jest/setup.js
@@ -2,18 +2,28 @@
  * NOTE: If you add imports here that extend Jest, such as extending `expect` with new
  * functions like `.toBeAccessible()`, you must also update `packages/mobile/src/jest.d.ts`
  */
-import 'react-native-gesture-handler/jestSetup';
-import 'react-native-accessibility-engine';
-import '@testing-library/jest-native/extend-expect';
+import './accessibility';
 
-import { setUpTests } from 'react-native-reanimated/src/jestUtils';
+// https://docs.swmansion.com/react-native-reanimated/docs/guides/testing/
+const {
+  setUpTests,
+  configureReanimatedLogger,
+  ReanimatedLogLevel,
+} = require('react-native-reanimated');
 
-import { mockStatusBarHeight } from '../src/hooks/__tests__/constants';
-
-jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter');
+// Must mock NativeEventEmitter at the internal module path not in main RN mock below
+jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter', () => {
+  const MockNativeEventEmitter = class MockNativeEventEmitter {
+    addListener = jest.fn(() => ({ remove: jest.fn() }));
+    removeListener = jest.fn();
+    removeAllListeners = jest.fn();
+  };
+  // Export as both default and the class itself for different import styles
+  MockNativeEventEmitter.default = MockNativeEventEmitter;
+  return MockNativeEventEmitter;
+});
 
-// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
-jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+jest.mock('react-native/src/private/animated/NativeAnimatedHelper');
 
 jest.mock('react-native', () => {
   const RN = jest.requireActual('react-native');
@@ -27,10 +37,6 @@ jest.mock('react-native', () => {
   RN.PixelRatio.getPixelSizeForLayoutSize = jest.fn((layoutSize) => Math.round(layoutSize * 1));
   RN.PixelRatio.startDetecting = jest.fn();
 
-  RN.NativeModules.StatusBarManager = {
-    getHeight: jest.fn((cb) => cb({ height: mockStatusBarHeight })),
-  };
-
   RN.Animated.loop = jest.fn(() => {
     return {
       start: jest.fn(),
@@ -66,4 +72,16 @@ jest.mock('react-native', () => {
   return RN;
 });
 
+/*
+  React Reanimated 4.x setup: 
+*/
+
+// Disable strict mode to prevent warnings about writing to shared values during render
+// This is needed because some components (e.g., TabsActiveIndicator) use patterns that
+// trigger warnings in reanimated 4.x strict mode but still work correctly
+configureReanimatedLogger({
+  level: ReanimatedLogLevel.warn,
+  strict: false,
+});
+
 setUpTests();
diff --git a/packages/mobile/jest/setupWorkletsMock.js b/packages/mobile/jest/setupWorkletsMock.js
new file mode 100644
index 0000000000..681bc6223c
--- /dev/null
+++ b/packages/mobile/jest/setupWorkletsMock.js
@@ -0,0 +1,3 @@
+// Mock react-native-worklets before any reanimated imports
+// The built-in mock at lib/module/mock is not available until later versions: 0.7.X
+jest.mock('react-native-worklets', () => require('./workletsMock'));
diff --git a/packages/mobile/jest/workletsMock.js b/packages/mobile/jest/workletsMock.js
new file mode 100644
index 0000000000..791d413330
--- /dev/null
+++ b/packages/mobile/jest/workletsMock.js
@@ -0,0 +1,111 @@
+/**
+ * Mock for react-native-worklets 0.5.2
+ * The built-in mock at lib/module/mock is not available until later versions: 0.7.X,
+ * Following CMR's version recommendation on versions we are staying with 0.5.2 and reanimated 4.1.1 for now
+ * This mock is based on the official mock from:
+ * https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-worklets/src/mock.ts
+ */
+
+'use strict';
+
+const NOOP = () => {};
+const NOOP_FACTORY = () => NOOP;
+const IDENTITY = (value) => value;
+const IMMEDIATE_CALLBACK_INVOCATION = (callback) => callback();
+
+const RuntimeKind = {
+  ReactNative: 'RN',
+  UI: 'UI',
+  Worklet: 'Worklet',
+};
+
+// Mocked requestAnimationFrame that uses setTimeout and passes timestamp
+// This fixes Jest's React Native setup which doesn't pass timestamps to callbacks
+// See: https://github.com/facebook/react-native/blob/main/packages/react-native/jest/setup.js#L28
+const mockedRequestAnimationFrame = (callback) => {
+  return setTimeout(() => callback(performance.now()), 0);
+};
+
+// Set up global properties that reanimated expects from the native runtime
+global._WORKLET = false;
+global.__RUNTIME_KIND = RuntimeKind.ReactNative;
+global._log = console.log;
+global._getAnimationTimestamp = () => performance.now();
+global.__flushAnimationFrame = NOOP;
+global.requestAnimationFrame = mockedRequestAnimationFrame;
+
+const WorkletAPI = {
+  isShareableRef: () => true,
+  makeShareable: IDENTITY,
+  makeShareableCloneOnUIRecursive: IDENTITY,
+  makeShareableCloneRecursive: IDENTITY,
+  shareableMappingCache: new Map(),
+
+  getStaticFeatureFlag: () => false,
+  setDynamicFeatureFlag: NOOP,
+
+  isSynchronizable: () => false,
+
+  getRuntimeKind: () => RuntimeKind.ReactNative,
+  RuntimeKind,
+
+  createWorkletRuntime: NOOP_FACTORY,
+  runOnRuntime: IDENTITY,
+  runOnRuntimeAsync(workletRuntime, worklet, ...args) {
+    return WorkletAPI.runOnUIAsync(worklet, ...args);
+  },
+  scheduleOnRuntime: IMMEDIATE_CALLBACK_INVOCATION,
+
+  createSerializable: IDENTITY,
+  isSerializableRef: IDENTITY,
+  serializableMappingCache: new Map(),
+
+  createSynchronizable: IDENTITY,
+
+  callMicrotasks: NOOP,
+  executeOnUIRuntimeSync: IDENTITY,
+
+  runOnJS(fun) {
+    return (...args) => queueMicrotask(args.length ? () => fun(...args) : fun);
+  },
+
+  runOnUI(worklet) {
+    return (...args) => {
+      // In Jest environment we schedule work via mockedRequestAnimationFrame
+      // to ensure it runs when timers are advanced
+      mockedRequestAnimationFrame(() => {
+        worklet(...args);
+      });
+    };
+  },
+
+  runOnUIAsync(worklet, ...args) {
+    return new Promise((resolve) => {
+      mockedRequestAnimationFrame(() => {
+        const result = worklet(...args);
+        resolve(result);
+      });
+    });
+  },
+
+  runOnUISync: IMMEDIATE_CALLBACK_INVOCATION,
+
+  scheduleOnRN(fun, ...args) {
+    WorkletAPI.runOnJS(fun)(...args);
+  },
+
+  scheduleOnUI(worklet, ...args) {
+    WorkletAPI.runOnUI(worklet)(...args);
+  },
+
+  unstable_eventLoopTask: NOOP_FACTORY,
+
+  isWorkletFunction: () => false,
+
+  WorkletsModule: {},
+};
+
+module.exports = {
+  __esModule: true,
+  ...WorkletAPI,
+};
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
index b7cc296e58..a569c3d1f1 100644
--- a/packages/mobile/package.json
+++ b/packages/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.75.2",
+  "version": "9.0.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -165,6 +165,14 @@
       "types": "./dts/typography/index.d.ts",
       "default": "./esm/typography/index.js"
     },
+    "./visualizations/chart": {
+      "types": "./dts/visualizations/chart/index.d.ts",
+      "default": "./esm/visualizations/chart/index.js"
+    },
+    "./visualizations/sparkline": {
+      "types": "./dts/visualizations/sparkline/index.d.ts",
+      "default": "./esm/visualizations/sparkline/index.js"
+    },
     "./visualizations": {
       "types": "./dts/visualizations/index.d.ts",
       "default": "./esm/visualizations/index.js"
@@ -181,19 +189,17 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@react-navigation/native": "^6.1.6",
-    "@react-navigation/native-stack": "^6.9.26",
-    "@react-navigation/stack": "^6.3.16",
-    "lottie-react-native": "^6.7.0",
-    "react": "^18.3.1",
-    "react-native": "^0.74.5",
-    "react-native-gesture-handler": "^2.16.2",
+    "@shopify/react-native-skia": "2.2.12",
+    "lottie-react-native": "7.3.1",
+    "react": "~19.1.2",
+    "react-native": "~0.81.5",
+    "react-native-gesture-handler": "2.28.0",
     "react-native-inappbrowser-reborn": "^3.7.0",
     "react-native-navigation-bar-color": "^2.0.2",
-    "react-native-reanimated": "^3.14.0",
-    "react-native-safe-area-context": "^4.10.5",
-    "react-native-screens": "^3.32.0",
-    "react-native-svg": "^14.1.0"
+    "react-native-reanimated": "4.1.1",
+    "react-native-safe-area-context": "5.6.0",
+    "react-native-svg": "15.12.1",
+    "react-native-worklets": "0.5.2"
   },
   "dependencies": {
     "@coinbase/cds-common": "workspace:^",
@@ -202,7 +208,8 @@
     "@coinbase/cds-lottie-files": "workspace:^",
     "@coinbase/cds-utils": "workspace:^",
     "@floating-ui/react-native": "^0.10.5",
-    "@react-spring/native": "^9.7.4",
+    "@react-spring/native": "^10.0.3",
+    "d3-interpolate-path": "^2.3.0",
     "fuse.js": "^7.1.0",
     "lodash": "^4.17.21",
     "type-fest": "^2.19.0",
@@ -211,24 +218,23 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1",
     "@react-native-community/netinfo": "^7.1.7",
-    "@react-navigation/native-stack": "^6.9.26",
-    "@testing-library/react-native": "^11.3.0",
+    "@shopify/react-native-skia": "2.2.12",
+    "@testing-library/react-native": "^13.3.3",
     "@types/d3-color": "^3.1.3",
-    "@types/react": "^18.3.12",
-    "@types/react-test-renderer": "^18.3.0",
-    "eslint-plugin-reanimated": "^2.0.1",
-    "lottie-react-native": "6.7.0",
-    "react-native-accessibility-engine": "^3.2.0",
-    "react-native-gesture-handler": "2.16.2",
+    "@types/react": "19.1.2",
+    "lottie-react-native": "7.3.1",
+    "react": "19.1.2",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "2.28.0",
     "react-native-inappbrowser-reborn": "3.7.0",
     "react-native-navigation-bar-color": "2.0.2",
-    "react-native-reanimated": "3.14.0",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.32.0",
-    "react-native-svg": "14.1.0",
-    "react-test-renderer": "^18.3.1"
+    "react-native-reanimated": "4.1.1",
+    "react-native-safe-area-context": "5.6.0",
+    "react-native-svg": "15.12.1",
+    "react-native-worklets": "0.5.2",
+    "react-test-renderer": "19.1.2"
   }
 }
diff --git a/packages/mobile/src/accordion/AccordionItem.tsx b/packages/mobile/src/accordion/AccordionItem.tsx
index 482b0f0def..8af8b90df5 100644
--- a/packages/mobile/src/accordion/AccordionItem.tsx
+++ b/packages/mobile/src/accordion/AccordionItem.tsx
@@ -11,8 +11,8 @@ import { AccordionPanel, type AccordionPanelBaseProps } from './AccordionPanel';
 export type AccordionItemBaseProps = Pick<ViewProps, 'style'> &
   Omit<AccordionHeaderBaseProps, 'collapsed'> &
   Omit<AccordionPanelBaseProps, 'collapsed'> & {
-    headerRef?: React.RefObject<View>;
-    panelRef?: React.RefObject<View>;
+    headerRef?: React.RefObject<View | null>;
+    panelRef?: React.RefObject<View | null>;
   };
 
 export type AccordionItemProps = AccordionItemBaseProps;
diff --git a/packages/mobile/src/alpha/combobox/Combobox.tsx b/packages/mobile/src/alpha/combobox/Combobox.tsx
index b7b301ddec..bed6a2b307 100644
--- a/packages/mobile/src/alpha/combobox/Combobox.tsx
+++ b/packages/mobile/src/alpha/combobox/Combobox.tsx
@@ -14,6 +14,7 @@ import Fuse from 'fuse.js';
 
 import { Button } from '../../buttons/Button';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
+import { useSafeBottomPadding } from '../../hooks/useSafeBottomPadding';
 import { Box } from '../../layout';
 import { StickyFooter } from '../../sticky-footer/StickyFooter';
 import { DefaultSelectControl } from '../select/DefaultSelectControl';
@@ -73,7 +74,7 @@ export type ComboboxControlProps<
     /** Search text change handler */
     onSearch: (searchText: string) => void;
     /** Reference to the search input */
-    searchInputRef: React.RefObject<TextInput>;
+    searchInputRef: React.RefObject<TextInput | null>;
     /** Reference to the combobox control for positioning */
     controlRef: React.RefObject<ComboboxRef | null>;
     /** Custom SelectControlComponent to wrap */
@@ -251,6 +252,7 @@ const ComboboxBase = memo(
       );
 
       const searchInputRef = useRef<TextInput | null>(null);
+      const safeBottomPadding = useSafeBottomPadding();
       const handleTrayVisibilityChange = useCallback((visibility: 'visible' | 'hidden') => {
         if (visibility === 'visible') {
           searchInputRef.current?.focus();
@@ -282,7 +284,7 @@ const ComboboxBase = memo(
             footer={({ handleClose }) => (
               <KeyboardAvoidingView
                 behavior="padding"
-                keyboardVerticalOffset={Platform.OS === 'ios' ? 86 : 0}
+                keyboardVerticalOffset={Platform.OS === 'ios' ? 106 : 0}
               >
                 <View
                   style={
@@ -292,7 +294,9 @@ const ComboboxBase = memo(
                   <StickyFooter
                     background="bgElevation2"
                     elevation={2}
-                    style={{ shadowOffset: { width: 0, height: -32 }, shadowOpacity: 0.05 }}
+                    style={{
+                      paddingBottom: safeBottomPadding,
+                    }}
                   >
                     <Button compact onPress={handleClose}>
                       {closeButtonLabel}
@@ -331,6 +335,7 @@ const ComboboxBase = memo(
           handleTrayVisibilityChange,
           label,
           placeholder,
+          safeBottomPadding,
           startNode,
           variant,
         ],
diff --git a/packages/mobile/src/alpha/combobox/DefaultComboboxControl.tsx b/packages/mobile/src/alpha/combobox/DefaultComboboxControl.tsx
index 9adfd729d3..002def22ca 100644
--- a/packages/mobile/src/alpha/combobox/DefaultComboboxControl.tsx
+++ b/packages/mobile/src/alpha/combobox/DefaultComboboxControl.tsx
@@ -34,6 +34,7 @@ export const DefaultComboboxControl = <
   searchInputRef,
   hideSearchInput,
   accessibilityLabel,
+  styles,
   ...props
 }: ComboboxControlProps<Type, SelectOptionValue>) => {
   const theme = useTheme();
@@ -57,16 +58,10 @@ export const DefaultComboboxControl = <
     <SelectControlComponent
       accessibilityLabel={computedAccessibilityLabel}
       align={align}
-      disabled={disabled}
-      font={font}
-      open={open}
-      options={options}
-      setOpen={setOpen}
-      value={value}
-      {...props}
       contentNode={
         shouldRenderSearchInput ? (
-          <HStack flexWrap="wrap">
+          // set gap between input and values with top padding
+          <HStack flexWrap="wrap" paddingTop={hasValue ? 1 : 0}>
             <NativeInput
               ref={searchInputRef}
               disabled={disabled || !open}
@@ -75,15 +70,14 @@ export const DefaultComboboxControl = <
               onPress={() => !disabled && setOpen(true)}
               placeholder={typeof placeholder === 'string' ? placeholder : undefined}
               style={{
-                flex: 0,
                 flexGrow: 1,
                 flexShrink: 1,
                 minWidth: 0,
-                padding: 0,
-                height: !hasValue ? 48 : undefined,
-                marginTop: hasValue ? 0 : -24,
-                marginBottom: hasValue ? -12 : -24,
-                paddingTop: hasValue ? 8 : 0,
+                // Zero out padding - let DefaultSelectControl handle spacing via InputStack
+                paddingTop: 0,
+                paddingBottom: 0,
+                paddingLeft: 0,
+                paddingRight: 0,
                 // This is constrained by the parent container's width. The width is 100%
                 // to ensure it grows to fill the control
                 width: open ? '100%' : undefined,
@@ -102,17 +96,23 @@ export const DefaultComboboxControl = <
           </>
         )
       }
+      disabled={disabled}
+      font={font}
+      open={open}
+      options={options}
+      setOpen={setOpen}
       styles={{
-        ...props.styles,
+        ...styles,
         controlEndNode: {
-          ...StyleSheet.flatten(props.styles?.controlEndNode),
+          ...StyleSheet.flatten(styles?.controlEndNode),
           alignItems: hasValue && shouldRenderSearchInput ? 'flex-end' : 'center',
         },
         controlValueNode: {
-          ...StyleSheet.flatten(props.styles?.controlValueNode),
-          paddingBottom: hasValue && shouldRenderSearchInput ? theme.space[1.5] : 0,
+          ...StyleSheet.flatten(styles?.controlValueNode),
         },
       }}
+      value={value}
+      {...props}
     />
   );
 };
diff --git a/packages/mobile/src/alpha/combobox/__tests__/Combobox.test.tsx b/packages/mobile/src/alpha/combobox/__tests__/Combobox.test.tsx
index e68173492b..e7c0a4b805 100644
--- a/packages/mobile/src/alpha/combobox/__tests__/Combobox.test.tsx
+++ b/packages/mobile/src/alpha/combobox/__tests__/Combobox.test.tsx
@@ -87,7 +87,7 @@ describe('Combobox', () => {
       );
 
       const button = screen.getByRole('button');
-      expect(button.props.accessibilityState?.disabled).toBe(true);
+      expect(button).toBeDisabled();
     });
   });
 
@@ -406,7 +406,7 @@ describe('Combobox', () => {
       );
 
       const button = screen.getByRole('button');
-      expect(button.props.accessibilityState?.disabled).toBe(false);
+      expect(button).toBeEnabled();
     });
 
     it('uses custom SelectControlComponent when provided', () => {
diff --git a/packages/mobile/src/alpha/data-card/__stories__/DataCard.stories.tsx b/packages/mobile/src/alpha/data-card/__stories__/DataCard.stories.tsx
index d9844f4efa..f526aa489c 100644
--- a/packages/mobile/src/alpha/data-card/__stories__/DataCard.stories.tsx
+++ b/packages/mobile/src/alpha/data-card/__stories__/DataCard.stories.tsx
@@ -45,7 +45,7 @@ const DataCardScreen = () => {
             thumbnail={exampleThumbnail}
             title="Progress Bar Card"
             titleAccessory={
-              <Text dangerouslySetColor={`rgb(${spectrum.green70})`} font="label1">
+              <Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
                 ↗ 25.25%
               </Text>
             }
@@ -111,7 +111,7 @@ const DataCardScreen = () => {
             thumbnail={exampleThumbnail}
             title="High Progress"
             titleAccessory={
-              <Text dangerouslySetColor={`rgb(${spectrum.green70})`} font="label1">
+              <Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
                 ↗ 25.25%
               </Text>
             }
@@ -182,7 +182,7 @@ const DataCardScreen = () => {
             thumbnail={exampleThumbnail}
             title="Progress Bar with Button"
             titleAccessory={
-              <Text dangerouslySetColor={`rgb(${spectrum.green70})`} font="label1">
+              <Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
                 ↗ 8.5%
               </Text>
             }
@@ -310,7 +310,7 @@ const DataCardScreen = () => {
             thumbnail={exampleThumbnail}
             title="Card 2"
             titleAccessory={
-              <Text dangerouslySetColor={`rgb(${spectrum.green70})`} font="label1">
+              <Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
                 ↗ 25.25%
               </Text>
             }
diff --git a/packages/mobile/src/alpha/select-chip/__tests__/SelectChip.test.tsx b/packages/mobile/src/alpha/select-chip/__tests__/SelectChip.test.tsx
index 329cbd8d9b..57beed2fc0 100644
--- a/packages/mobile/src/alpha/select-chip/__tests__/SelectChip.test.tsx
+++ b/packages/mobile/src/alpha/select-chip/__tests__/SelectChip.test.tsx
@@ -171,7 +171,7 @@ describe('SelectChip', () => {
       );
 
       const button = screen.getByRole('button');
-      expect(button.props.accessibilityState?.disabled).toBe(true);
+      expect(button).toBeDisabled();
     });
 
     it('uses displayValue when provided', () => {
diff --git a/packages/mobile/src/alpha/select/DefaultSelectControl.tsx b/packages/mobile/src/alpha/select/DefaultSelectControl.tsx
index 5f8f4bc4ba..658a82231c 100644
--- a/packages/mobile/src/alpha/select/DefaultSelectControl.tsx
+++ b/packages/mobile/src/alpha/select/DefaultSelectControl.tsx
@@ -8,6 +8,7 @@ import { HelperText } from '../../controls/HelperText';
 import { InputLabel } from '../../controls/InputLabel';
 import { InputStack } from '../../controls/InputStack';
 import { useInputBorderStyle } from '../../hooks/useInputBorderStyle';
+import { useTheme } from '../../hooks/useTheme';
 import { HStack } from '../../layout/HStack';
 import { VStack } from '../../layout/VStack';
 import { AnimatedCaret } from '../../motion/AnimatedCaret';
@@ -16,12 +17,6 @@ import { Text } from '../../typography/Text';
 import type { SelectControlProps, SelectOption, SelectType } from './Select';
 import { isSelectOptionGroup } from './Select';
 
-// The height is smaller for the inside label variant since the label takes
-// up space above the input.
-const LABEL_VARIANT_INSIDE_HEIGHT = 24;
-const COMPACT_HEIGHT = 40;
-const DEFAULT_HEIGHT = 56;
-
 const variantColor: Record<string, ThemeVars.Color> = {
   foreground: 'fg',
   positive: 'fgPositive',
@@ -35,7 +30,9 @@ type DefaultSelectControlComponent = <
   Type extends SelectType,
   SelectOptionValue extends string = string,
 >(
-  props: SelectControlProps<Type, SelectOptionValue> & { ref?: React.Ref<TouchableOpacity> },
+  props: SelectControlProps<Type, SelectOptionValue> & {
+    ref?: React.Ref<React.ComponentRef<typeof TouchableOpacity>>;
+  },
 ) => React.ReactElement;
 
 export const DefaultSelectControlComponent = memo(
@@ -69,13 +66,17 @@ export const DefaultSelectControlComponent = memo(
         removeSelectedOptionAccessibilityLabel = 'Remove',
         style,
         styles,
+        onBlur,
+        onFocus,
         ...props
       }: SelectControlProps<Type, SelectOptionValue>,
-      ref: React.Ref<TouchableOpacity>,
+      ref: React.ForwardedRef<React.ComponentRef<typeof TouchableOpacity>>,
     ) => {
       type ValueType = Type extends 'multi'
         ? SelectOptionValue | SelectOptionValue[] | null
         : SelectOptionValue | null;
+
+      const theme = useTheme();
       const isMultiSelect = type === 'multi';
       const shouldShowCompactLabel = compact && label && !isMultiSelect;
       const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
@@ -194,9 +195,8 @@ export const DefaultSelectControlComponent = memo(
             >
               <InputLabel
                 color="fg"
-                paddingEnd={0}
-                paddingStart={labelVariant === 'inside' ? 2 : 0}
-                paddingY={labelVariant === 'inside' || compact ? 0 : 0.5}
+                // remove default vertical padding when label is the compact/inline version
+                paddingY={shouldShowCompactLabel ? 0 : 0.5}
               >
                 {label}
               </InputLabel>
@@ -204,7 +204,7 @@ export const DefaultSelectControlComponent = memo(
           ) : (
             label
           ),
-        [compact, disabled, label, labelVariant, setOpen, styles?.controlLabelNode],
+        [disabled, label, setOpen, shouldShowCompactLabel, styles?.controlLabelNode],
       );
 
       const valueAlignment = useMemo(
@@ -287,6 +287,8 @@ export const DefaultSelectControlComponent = memo(
         onChange,
       ]);
 
+      // onBlur/onFocus on ViewProps allow null returns but TouchableOpacity's onBlur/onFocus props do not.
+      // This appears like a type inconsistency in react-native's type definitions.
       const inputNode = useMemo(
         () => (
           <TouchableOpacity
@@ -294,6 +296,8 @@ export const DefaultSelectControlComponent = memo(
             accessibilityLabel={computedControlAccessibilityLabel}
             accessibilityRole="button"
             disabled={disabled}
+            onBlur={onBlur ?? undefined}
+            onFocus={onFocus ?? undefined}
             onPress={() => setOpen((s) => !s)}
             style={[{ flexGrow: 1 }, styles?.controlInputNode]}
             {...props}
@@ -303,15 +307,6 @@ export const DefaultSelectControlComponent = memo(
               flexShrink={1}
               justifyContent="space-between"
               maxWidth="100%"
-              minHeight={
-                labelVariant === 'inside'
-                  ? LABEL_VARIANT_INSIDE_HEIGHT
-                  : compact
-                    ? COMPACT_HEIGHT
-                    : DEFAULT_HEIGHT
-              }
-              paddingStart={startNode ? 0 : 2}
-              paddingY={labelVariant === 'inside' ? 0 : compact ? 1 : 1.5}
             >
               <HStack
                 alignItems="center"
@@ -322,7 +317,7 @@ export const DefaultSelectControlComponent = memo(
                 minWidth={0}
               >
                 {!!startNode && (
-                  <HStack alignItems="center" paddingX={2} style={styles?.controlStartNode}>
+                  <HStack alignItems="center" paddingEnd={2} style={styles?.controlStartNode}>
                     {startNode}
                   </HStack>
                 )}
@@ -349,12 +344,12 @@ export const DefaultSelectControlComponent = memo(
           ref,
           computedControlAccessibilityLabel,
           disabled,
+          onBlur,
+          onFocus,
           styles?.controlInputNode,
           styles?.controlStartNode,
           styles?.controlValueNode,
           props,
-          labelVariant,
-          compact,
           startNode,
           shouldShowCompactLabel,
           labelNode,
@@ -375,8 +370,7 @@ export const DefaultSelectControlComponent = memo(
             <HStack
               alignItems="center"
               flexGrow={1}
-              paddingX={2}
-              paddingY={compact ? 1 : 1.5}
+              paddingStart={2}
               style={styles?.controlEndNode}
             >
               {customEndNode ? (
@@ -390,7 +384,19 @@ export const DefaultSelectControlComponent = memo(
             </HStack>
           </Pressable>
         ),
-        [compact, styles?.controlEndNode, disabled, customEndNode, open, variant, setOpen],
+        [styles?.controlEndNode, disabled, customEndNode, open, variant, setOpen],
+      );
+
+      const inputStackStyles: Record<string, React.CSSProperties> = useMemo(
+        () => ({
+          input: {
+            paddingTop: compact || labelVariant === 'inside' ? theme.space[1] : theme.space[2],
+            paddingBottom: compact ? theme.space[1] : theme.space[2],
+            paddingLeft: theme.space[2],
+            paddingRight: theme.space[2],
+          },
+        }),
+        [compact, theme, labelVariant],
       );
 
       return (
@@ -406,6 +412,9 @@ export const DefaultSelectControlComponent = memo(
           inputNode={inputNode}
           labelNode={shouldShowCompactLabel ? null : labelNode}
           labelVariant={labelVariant}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          styles={inputStackStyles}
           variant={variant}
           {...props}
         />
diff --git a/packages/mobile/src/alpha/select/DefaultSelectDropdown.tsx b/packages/mobile/src/alpha/select/DefaultSelectDropdown.tsx
index 7799de624a..82bd238569 100644
--- a/packages/mobile/src/alpha/select/DefaultSelectDropdown.tsx
+++ b/packages/mobile/src/alpha/select/DefaultSelectDropdown.tsx
@@ -250,6 +250,7 @@ const DefaultSelectDropdownComponent = memo(
           ref={ref}
           disableCapturePanGestureToDismiss={true}
           footer={footer}
+          handleBarVariant="inside"
           header={header}
           onCloseComplete={() => setOpen(false)}
           onDismiss={() => setOpen(false)}
diff --git a/packages/mobile/src/alpha/select/DefaultSelectOption.tsx b/packages/mobile/src/alpha/select/DefaultSelectOption.tsx
index 1779b464cc..8d46ab2f0a 100644
--- a/packages/mobile/src/alpha/select/DefaultSelectOption.tsx
+++ b/packages/mobile/src/alpha/select/DefaultSelectOption.tsx
@@ -83,7 +83,6 @@ const DefaultSelectOptionComponent = <
       background={background}
       borderRadius={0}
       disabled={disabled}
-      minHeight={compact ? 40 : 56}
       onPress={handlePress}
       priority="end"
       selected={selected}
diff --git a/packages/mobile/src/alpha/select/__stories__/AlphaSelect.stories.tsx b/packages/mobile/src/alpha/select/__stories__/AlphaSelect.stories.tsx
index 5fc43f11cd..100075bd16 100644
--- a/packages/mobile/src/alpha/select/__stories__/AlphaSelect.stories.tsx
+++ b/packages/mobile/src/alpha/select/__stories__/AlphaSelect.stories.tsx
@@ -1325,7 +1325,7 @@ const SelectV3Screen = () => {
       <Example title="Compact">
         <CompactExample />
       </Example>
-      <Example title="Compact with inside label variant">
+      <Example title="Inside label variant">
         <InsideLabelVariantExample />
       </Example>
       <Example title="With Helper Text">
diff --git a/packages/mobile/src/alpha/select/__tests__/DefaultSelectControl.test.tsx b/packages/mobile/src/alpha/select/__tests__/DefaultSelectControl.test.tsx
index eec7208129..199fb3b804 100644
--- a/packages/mobile/src/alpha/select/__tests__/DefaultSelectControl.test.tsx
+++ b/packages/mobile/src/alpha/select/__tests__/DefaultSelectControl.test.tsx
@@ -199,7 +199,7 @@ describe('DefaultSelectControl', () => {
       );
 
       const button = screen.getByRole('button');
-      expect(button).toHaveAccessibilityState({ disabled: true });
+      expect(button).toBeDisabled();
     });
 
     it('renders with helper text', () => {
diff --git a/packages/mobile/src/alpha/select/__tests__/DefaultSelectOption.test.tsx b/packages/mobile/src/alpha/select/__tests__/DefaultSelectOption.test.tsx
index 9a67cfa810..2672ebcb08 100644
--- a/packages/mobile/src/alpha/select/__tests__/DefaultSelectOption.test.tsx
+++ b/packages/mobile/src/alpha/select/__tests__/DefaultSelectOption.test.tsx
@@ -28,7 +28,7 @@ describe('DefaultSelectOption', () => {
         </DefaultThemeProvider>,
       );
       const option = screen.getByRole('menuitem');
-      expect(option).toHaveAccessibilityState({ disabled: true });
+      expect(option).toBeDisabled();
     });
 
     it('has correct accessibility attributes for single select', () => {
@@ -39,7 +39,7 @@ describe('DefaultSelectOption', () => {
       );
 
       const option = screen.getByRole('menuitem');
-      expect(option).toHaveAccessibilityState({ selected: true });
+      expect(option).toBeSelected();
     });
 
     it('has correct accessibility attributes for multi select', () => {
@@ -50,7 +50,7 @@ describe('DefaultSelectOption', () => {
       );
 
       const option = screen.getByRole('checkbox');
-      expect(option).toHaveAccessibilityState({ checked: true });
+      expect(option).toBeChecked();
     });
 
     it('has correct accessibility attributes for indeterminate state', () => {
@@ -61,7 +61,7 @@ describe('DefaultSelectOption', () => {
       );
 
       const option = screen.getByRole('checkbox');
-      expect(option).toHaveAccessibilityState({ checked: 'mixed' });
+      expect(option).toBePartiallyChecked();
     });
 
     it('sets custom accessibility role', () => {
@@ -166,7 +166,7 @@ describe('DefaultSelectOption', () => {
       );
 
       const option = screen.getByRole('menuitem');
-      expect(option).toHaveAccessibilityState({ selected: true });
+      expect(option).toBeSelected();
     });
 
     it('renders unselected state', () => {
@@ -177,7 +177,7 @@ describe('DefaultSelectOption', () => {
       );
 
       const option = screen.getByRole('menuitem');
-      expect(option).toHaveAccessibilityState({ selected: false });
+      expect(option).not.toBeSelected();
     });
 
     it('renders disabled state', () => {
@@ -188,7 +188,7 @@ describe('DefaultSelectOption', () => {
       );
 
       const option = screen.getByRole('menuitem');
-      expect(option).toHaveAccessibilityState({ disabled: true });
+      expect(option).toBeDisabled();
     });
 
     it('renders enabled state', () => {
@@ -199,7 +199,7 @@ describe('DefaultSelectOption', () => {
       );
 
       const option = screen.getByRole('menuitem');
-      expect(option).not.toHaveAccessibilityState({ disabled: true });
+      expect(option).toBeEnabled();
     });
   });
 
diff --git a/packages/mobile/src/alpha/select/__tests__/Select.test.tsx b/packages/mobile/src/alpha/select/__tests__/Select.test.tsx
index 4b2df96a49..842103d934 100644
--- a/packages/mobile/src/alpha/select/__tests__/Select.test.tsx
+++ b/packages/mobile/src/alpha/select/__tests__/Select.test.tsx
@@ -502,7 +502,7 @@ describe('Select', () => {
       );
 
       const button = screen.getByRole('button');
-      expect(button).toHaveAccessibilityState({ disabled: true });
+      expect(button).toBeDisabled();
     });
 
     it('does not open when disabled', () => {
diff --git a/packages/mobile/src/alpha/select/types.ts b/packages/mobile/src/alpha/select/types.ts
index ffc65bb827..eb2dac878d 100644
--- a/packages/mobile/src/alpha/select/types.ts
+++ b/packages/mobile/src/alpha/select/types.ts
@@ -3,6 +3,7 @@ import type { AccessibilityRole, StyleProp, TouchableOpacity, View, ViewStyle }
 import type { SharedAccessibilityProps } from '@coinbase/cds-common/types';
 
 import type { CellBaseProps } from '../../cells/Cell';
+import type { CellAccessoryProps } from '../../cells/CellAccessory';
 import type { InputStackBaseProps } from '../../controls/InputStack';
 import type { TextInputBaseProps } from '../../controls/TextInput';
 import type { BoxProps } from '../../layout';
@@ -130,7 +131,7 @@ export type SelectOptionGroupProps<
   /** Accessibility role for options */
   accessibilityRole?: AccessibilityRole;
   /** Accessory element to display with options */
-  accessory?: React.ReactElement;
+  accessory?: React.ReactElement<CellAccessoryProps>;
   /** Media element to display with options */
   media?: React.ReactElement;
   /** End element to display with options */
@@ -308,7 +309,7 @@ export type SelectControlComponent<
   SelectOptionValue extends string = string,
 > = React.FC<
   SelectControlProps<Type, SelectOptionValue> & {
-    ref?: React.Ref<TouchableOpacity>;
+    ref?: React.Ref<React.ComponentRef<typeof TouchableOpacity>>;
   }
 >;
 
@@ -517,8 +518,8 @@ export type SelectProps<
 export type SelectRef = View &
   Pick<SelectProps, 'open' | 'setOpen'> & {
     refs: {
-      reference: React.RefObject<View>;
-      floating: React.RefObject<View> | null;
+      reference: React.RefObject<View | null>;
+      floating: React.RefObject<View | null> | null;
     };
   };
 
diff --git a/packages/mobile/src/alpha/tabbed-chips/__tests__/TabbedChips.test.tsx b/packages/mobile/src/alpha/tabbed-chips/__tests__/TabbedChips.test.tsx
index fed62cc311..2086dc4244 100644
--- a/packages/mobile/src/alpha/tabbed-chips/__tests__/TabbedChips.test.tsx
+++ b/packages/mobile/src/alpha/tabbed-chips/__tests__/TabbedChips.test.tsx
@@ -35,15 +35,11 @@ describe('TabbedChips(Alpha)', () => {
     const firstTestId = tabs[0].testID ?? tabs[0].id;
     const secondTestId = tabs[1].testID ?? tabs[1].id;
 
-    expect(screen.getByTestId(firstTestId)).toHaveAccessibilityState({ selected: true });
+    expect(screen.getByTestId(firstTestId)).toBeSelected();
 
     fireEvent.press(screen.getByTestId(secondTestId));
 
-    await waitFor(() =>
-      expect(screen.getByTestId(secondTestId)).toHaveAccessibilityState({ selected: true }),
-    );
-    await waitFor(() =>
-      expect(screen.getByTestId(firstTestId)).toHaveAccessibilityState({ selected: false }),
-    );
+    await waitFor(() => expect(screen.getByTestId(secondTestId)).toBeSelected());
+    await waitFor(() => expect(screen.getByTestId(firstTestId)).not.toBeSelected());
   });
 });
diff --git a/packages/mobile/src/animation/Lottie.tsx b/packages/mobile/src/animation/Lottie.tsx
index a186806485..1495e64f8d 100644
--- a/packages/mobile/src/animation/Lottie.tsx
+++ b/packages/mobile/src/animation/Lottie.tsx
@@ -58,10 +58,15 @@ const LottieContent = memo(
 );
 
 export const Lottie = memo(
-  forwardRef((props: LottieProps, forwardedRef: React.ForwardedRef<LottieView>) => {
-    const colorFilters = useLottieColorFilters(props.source, props.colorFilters);
-    return <LottieContent ref={forwardedRef} {...props} colorFilters={colorFilters} />;
-  }),
+  forwardRef(
+    (
+      { colorFilters: colorFiltersProp, ...props }: LottieProps,
+      forwardedRef: React.ForwardedRef<LottieView>,
+    ) => {
+      const colorFilters = useLottieColorFilters(props.source, colorFiltersProp);
+      return <LottieContent ref={forwardedRef} colorFilters={colorFilters} {...props} />;
+    },
+  ),
 );
 
 LottieContent.displayName = 'LottieContent';
diff --git a/packages/mobile/src/animation/LottieStatusAnimation.tsx b/packages/mobile/src/animation/LottieStatusAnimation.tsx
index c52ec501e1..b3fd52b247 100644
--- a/packages/mobile/src/animation/LottieStatusAnimation.tsx
+++ b/packages/mobile/src/animation/LottieStatusAnimation.tsx
@@ -1,7 +1,7 @@
 import { memo, useMemo } from 'react';
+import type { DimensionValue } from 'react-native';
 import { lottieStatusToAccessibilityLabel } from '@coinbase/cds-common/lottie/statusToAccessibilityLabel';
 import { useStatusAnimationPoller } from '@coinbase/cds-common/lottie/useStatusAnimationPoller';
-import type { DimensionValue } from '@coinbase/cds-common/types/DimensionStyles';
 import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
 import { tradeStatus } from '@coinbase/cds-lottie-files/tradeStatus';
@@ -47,12 +47,12 @@ export const LottieStatusAnimation = memo(
 
     return (
       <Lottie
-        {...otherProps}
         accessible
         accessibilityLabel={label}
         accessibilityLiveRegion="polite"
         onAnimationFinish={handlePolling}
         testID={testID}
+        {...otherProps}
       />
     );
   },
diff --git a/packages/mobile/src/animation/__tests__/LottieStatusAnimation.test.tsx b/packages/mobile/src/animation/__tests__/LottieStatusAnimation.test.tsx
index 01ecb69725..7d347043b6 100644
--- a/packages/mobile/src/animation/__tests__/LottieStatusAnimation.test.tsx
+++ b/packages/mobile/src/animation/__tests__/LottieStatusAnimation.test.tsx
@@ -27,7 +27,7 @@ describe('LottieStatusAnimation', () => {
   it('renders a LottieStatusAnimation', () => {
     render(
       <DefaultThemeProvider>
-        <LottieStatusAnimation height="100" testID="lottie-status-animation-test" />
+        <LottieStatusAnimation height={100} testID="lottie-status-animation-test" />
       </DefaultThemeProvider>,
     );
 
@@ -41,7 +41,7 @@ describe('LottieStatusAnimation', () => {
     render(
       <DefaultThemeProvider>
         <LottieStatusAnimation
-          height="100"
+          height={100}
           onFinish={mockOnFinish}
           testID="lottie-status-animation-test"
         />
@@ -59,7 +59,7 @@ describe('LottieStatusAnimation', () => {
       const props: LottieStatusAnimationProps = {
         status,
         testID: `lottie-status-animation-${status}`,
-        height: '100',
+        height: 100,
       };
 
       render(
@@ -75,7 +75,7 @@ describe('LottieStatusAnimation', () => {
     it('renders with cardSuccess status', () => {
       render(
         <DefaultThemeProvider>
-          <LottieStatusAnimation height="100" status="cardSuccess" testID="lottie-card-success" />
+          <LottieStatusAnimation height={100} status="cardSuccess" testID="lottie-card-success" />
         </DefaultThemeProvider>,
       );
       expect(screen.getByTestId('lottie-card-success')).toBeTruthy();
@@ -86,7 +86,7 @@ describe('LottieStatusAnimation', () => {
       render(
         <DefaultThemeProvider>
           <LottieStatusAnimation
-            height="100"
+            height={100}
             onFinish={mockOnFinish}
             status="cardSuccess"
             testID="lottie-card-success-finish"
@@ -103,14 +103,14 @@ describe('LottieStatusAnimation', () => {
     it('transitions from pending to success', async () => {
       const { rerender } = render(
         <DefaultThemeProvider>
-          <LottieStatusAnimation height="100" status="pending" testID="lottie-transition" />
+          <LottieStatusAnimation height={100} status="pending" testID="lottie-transition" />
         </DefaultThemeProvider>,
       );
       expect(screen.getByTestId('lottie-transition')).toBeTruthy();
 
       rerender(
         <DefaultThemeProvider>
-          <LottieStatusAnimation height="100" status="success" testID="lottie-transition" />
+          <LottieStatusAnimation height={100} status="success" testID="lottie-transition" />
         </DefaultThemeProvider>,
       );
       expect(screen.getByTestId('lottie-transition')).toBeTruthy();
@@ -119,14 +119,14 @@ describe('LottieStatusAnimation', () => {
     it('transitions from pending to failure', async () => {
       const { rerender } = render(
         <DefaultThemeProvider>
-          <LottieStatusAnimation height="100" status="pending" testID="lottie-transition-fail" />
+          <LottieStatusAnimation height={100} status="pending" testID="lottie-transition-fail" />
         </DefaultThemeProvider>,
       );
       expect(screen.getByTestId('lottie-transition-fail')).toBeTruthy();
 
       rerender(
         <DefaultThemeProvider>
-          <LottieStatusAnimation height="100" status="failure" testID="lottie-transition-fail" />
+          <LottieStatusAnimation height={100} status="failure" testID="lottie-transition-fail" />
         </DefaultThemeProvider>,
       );
       expect(screen.getByTestId('lottie-transition-fail')).toBeTruthy();
@@ -137,7 +137,7 @@ describe('LottieStatusAnimation', () => {
       const { rerender } = render(
         <DefaultThemeProvider>
           <LottieStatusAnimation
-            height="100"
+            height={100}
             onFinish={mockOnFinish}
             status="loading"
             testID="lottie-loading-success"
@@ -149,7 +149,7 @@ describe('LottieStatusAnimation', () => {
       rerender(
         <DefaultThemeProvider>
           <LottieStatusAnimation
-            height="100"
+            height={100}
             onFinish={mockOnFinish}
             status="success"
             testID="lottie-loading-success"
diff --git a/packages/mobile/src/animation/__tests__/createLottie.test.tsx b/packages/mobile/src/animation/__tests__/createLottie.test.tsx
index 5a58e95660..239e24c970 100644
--- a/packages/mobile/src/animation/__tests__/createLottie.test.tsx
+++ b/packages/mobile/src/animation/__tests__/createLottie.test.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import type { Animated } from 'react-native';
 import { nux } from '@coinbase/cds-lottie-files/nux';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 import uniqBy from 'lodash/uniqBy';
 
 import { createLottie } from '../createLottie';
diff --git a/packages/mobile/src/animation/createLottie.tsx b/packages/mobile/src/animation/createLottie.tsx
index 440befe210..596e03cb82 100644
--- a/packages/mobile/src/animation/createLottie.tsx
+++ b/packages/mobile/src/animation/createLottie.tsx
@@ -1,4 +1,4 @@
-import React, { createRef } from 'react';
+import React, { createRef, type JSX } from 'react';
 import { Animated } from 'react-native';
 import type { LottiePlayer, LottieSource } from '@coinbase/cds-common';
 import { getLottieDuration, getLottieMarkers } from '@coinbase/cds-common';
diff --git a/packages/mobile/src/banner/Banner.tsx b/packages/mobile/src/banner/Banner.tsx
index 692ab894af..003cd56cd5 100644
--- a/packages/mobile/src/banner/Banner.tsx
+++ b/packages/mobile/src/banner/Banner.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, isValidElement, memo, useCallback, useMemo, useState } from 'react';
-import type { View } from 'react-native';
+import type { StyleProp, TextStyle, View, ViewStyle } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { variants } from '@coinbase/cds-common/tokens/banner';
 import type {
@@ -16,7 +16,7 @@ import { Icon } from '../icons';
 import type { HStackProps } from '../layout';
 import { Box, HStack, VStack } from '../layout';
 import { Pressable } from '../system/Pressable';
-import { Link } from '../typography';
+import { Link, type LinkProps } from '../typography';
 import { Text } from '../typography/Text';
 
 export type BannerBaseProps = SharedProps & {
@@ -69,10 +69,52 @@ export type BannerBaseProps = SharedProps & {
   borderRadius?: ThemeVars.BorderRadius;
 };
 
-export type MobileBannerProps = BannerBaseProps & Omit<HStackProps, 'children'>;
+/**
+ * Canonical props type for Banner.
+ *
+ * Note: docs docgen expects a `${ComponentName}Props` export (for Banner -> BannerProps)
+ * to generate styles selector metadata used by the docs Styles tab.
+ */
+export type BannerProps = BannerBaseProps &
+  Omit<HStackProps, 'children'> & {
+    /** Slot-level styles for Banner. */
+    styles?: {
+      /** Persistent outer wrapper around both dismissible and non-dismissible variants. */
+      root?: StyleProp<ViewStyle>;
+      /** Main content container (`HStack`) for banner body. */
+      content?: StyleProp<ViewStyle>;
+      /** Start icon wrapper. */
+      start?: StyleProp<ViewStyle>;
+      /** Right-side body wrapper containing middle content and actions. */
+      body?: StyleProp<ViewStyle>;
+      /** Middle content wrapper containing title/message/label region. */
+      middle?: StyleProp<ViewStyle>;
+      /**
+       * Label text style.
+       * Applies only when `label` is a string rendered by Banner.
+       * If `label` is a custom node, style that node directly.
+       */
+      label?: StyleProp<TextStyle>;
+      /**
+       * Actions row style.
+       * Applies only when at least one action (`primaryAction` or `secondaryAction`) is rendered.
+       */
+      actions?: StyleProp<ViewStyle>;
+      /**
+       * Dismiss button wrapper style.
+       * Applies only when `showDismiss` is true.
+       */
+      dismiss?: StyleProp<ViewStyle>;
+    };
+  };
+/**
+ * @deprecated Use `BannerProps` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+export type MobileBannerProps = BannerProps;
 
 export const Banner = memo(
-  forwardRef(function Banner(_props: MobileBannerProps, forwardedRef: React.ForwardedRef<View>) {
+  forwardRef(function Banner(_props: BannerProps, forwardedRef: React.ForwardedRef<View>) {
     const mergedProps = useComponentConfig('Banner', _props);
     const {
       variant,
@@ -99,6 +141,7 @@ export const Banner = memo(
       marginEnd,
       marginBottom,
       marginStart,
+      styles,
       ...props
     } = mergedProps;
     const [isCollapsed, setIsCollapsed] = useState(false);
@@ -129,12 +172,12 @@ export const Banner = memo(
           font: 'label1',
           color: primaryActionColor,
           testID: `${testID}-action--primary`,
-          ...primaryAction.props,
+          ...(primaryAction.props as LinkProps),
         });
       } else {
         return React.cloneElement(primaryAction, {
           testID: `${testID}-action--primary`,
-          ...primaryAction.props,
+          ...(primaryAction.props as any), // we don't know the type of element this ReactNode is
         });
       }
     }, [primaryAction, primaryActionColor, testID]);
@@ -147,12 +190,12 @@ export const Banner = memo(
           font: 'label1',
           color: secondaryActionColor,
           testID: `${testID}-action--secondary`,
-          ...secondaryAction.props,
+          ...(secondaryAction.props as LinkProps),
         });
       } else {
         return React.cloneElement(secondaryAction, {
           testID: `${testID}-action--secondary`,
-          ...secondaryAction.props,
+          ...(secondaryAction.props as any), // we don't know the type of element this ReactNode is
         });
       }
     }, [secondaryAction, secondaryActionColor, testID]);
@@ -171,109 +214,110 @@ export const Banner = memo(
     );
 
     const borderBox = (
-      <Box dangerouslySetBackground={theme.color[borderColor]} pin="left" width={4} />
+      <Box pin="left" style={{ backgroundColor: theme.color[borderColor] }} width={4} />
     );
 
     const content = (
-      <Box {...(showDismiss ? {} : marginStyles)}>
-        <HStack
-          ref={forwardedRef}
-          background={background}
-          borderRadius={borderRadius}
-          gap={1}
-          paddingX={styleVariant === 'contextual' ? 2 : 3}
-          paddingY={2}
-          style={style}
-          testID={testID}
-          {...props}
+      <HStack
+        ref={forwardedRef}
+        background={background}
+        borderRadius={borderRadius}
+        gap={1}
+        paddingX={styleVariant === 'contextual' ? 2 : 3}
+        paddingY={2}
+        style={[style, styles?.content]}
+        testID={testID}
+        {...props}
+      >
+        {/** Start */}
+        <Box
+          accessibilityLabel={startIconAccessibilityLabel}
+          accessibilityRole="image"
+          accessible={!!startIconAccessibilityLabel}
+          style={styles?.start}
         >
-          {/** Start */}
-          <Box
-            accessibilityLabel={startIconAccessibilityLabel}
-            accessibilityRole="image"
-            accessible={!!startIconAccessibilityLabel}
-          >
-            <Icon
-              active={startIconActive}
-              color={iconColor}
-              name={startIcon}
-              paddingX={0.5}
-              paddingY={0.25}
-              size="s"
-              testID={`${testID}-icon`}
-            />
-          </Box>
-          <VStack
-            flexGrow={1}
-            flexShrink={1}
-            gap={2}
-            justifyContent="space-between"
-            testID={`${testID}-inner-end-box`}
-          >
-            {/** Middle */}
-            <VStack gap={2} testID={`${testID}-content-box`}>
-              <VStack gap={0.5}>
-                {typeof title === 'string' ? (
-                  <Text color={textColor} font="label1" numberOfLines={2}>
-                    {title}
-                  </Text>
-                ) : (
-                  title
-                )}
-                {typeof children === 'string' ? (
-                  <Text color={textColor} font="label2" numberOfLines={numberOfLines}>
-                    {children}
-                  </Text>
-                ) : (
-                  children
-                )}
-              </VStack>
-              {typeof label === 'string' ? (
-                <Text color="fgMuted" font="legal" numberOfLines={1}>
-                  {label}
+          <Icon
+            active={startIconActive}
+            color={iconColor}
+            name={startIcon}
+            paddingX={0.5}
+            paddingY={0.25}
+            size="s"
+            testID={`${testID}-icon`}
+          />
+        </Box>
+        <VStack
+          flexGrow={1}
+          flexShrink={1}
+          gap={2}
+          justifyContent="space-between"
+          style={styles?.body}
+          testID={`${testID}-inner-end-box`}
+        >
+          {/** Middle */}
+          <VStack gap={2} style={styles?.middle} testID={`${testID}-content-box`}>
+            <VStack gap={0.5}>
+              {typeof title === 'string' ? (
+                <Text color={textColor} font="label1" numberOfLines={2}>
+                  {title}
                 </Text>
               ) : (
-                label
+                title
+              )}
+              {typeof children === 'string' ? (
+                <Text color={textColor} font="label2" numberOfLines={numberOfLines}>
+                  {children}
+                </Text>
+              ) : (
+                children
               )}
             </VStack>
-            {/** Actions */}
-            {(!!clonedPrimaryAction || !!clonedSecondaryAction) && (
-              <HStack alignItems="center" gap={2} testID={`${testID}-action`}>
-                {clonedPrimaryAction}
-                {clonedSecondaryAction}
-              </HStack>
+            {typeof label === 'string' ? (
+              <Text color="fgMuted" font="legal" numberOfLines={1} style={styles?.label}>
+                {label}
+              </Text>
+            ) : (
+              label
             )}
           </VStack>
-          {/** Dismissable action */}
-          {showDismiss && (
-            <Box alignItems="flex-start" padding={0.5}>
-              <Pressable
-                accessibilityLabel={closeAccessibilityLabel}
-                accessibilityRole="button"
-                background="transparent"
-                borderRadius={1000}
-                hitSlop={{ top: 15, left: 15, bottom: 15, right: 15 }}
-                onPress={handleOnDismiss}
-                testID={`${testID}-dismiss-btn`}
-              >
-                <Icon color={iconButtonColor} name="close" size="s" />
-              </Pressable>
-            </Box>
+          {/** Actions */}
+          {(!!clonedPrimaryAction || !!clonedSecondaryAction) && (
+            <HStack alignItems="center" gap={2} style={styles?.actions} testID={`${testID}-action`}>
+              {clonedPrimaryAction}
+              {clonedSecondaryAction}
+            </HStack>
           )}
-        </HStack>
-        {styleVariant === 'global' && !showDismiss && borderBox}
-      </Box>
+        </VStack>
+        {/** Dismissable action */}
+        {showDismiss && (
+          <Box alignItems="flex-start" padding={0.5} style={styles?.dismiss}>
+            <Pressable
+              accessibilityLabel={closeAccessibilityLabel}
+              accessibilityRole="button"
+              background="transparent"
+              borderRadius={1000}
+              hitSlop={{ top: 15, left: 15, bottom: 15, right: 15 }}
+              onPress={handleOnDismiss}
+              testID={`${testID}-dismiss-btn`}
+            >
+              <Icon color={iconButtonColor} name="close" size="s" />
+            </Pressable>
+          </Box>
+        )}
+      </HStack>
     );
 
-    return showDismiss ? (
-      <Box {...marginStyles}>
-        <Collapsible collapsed={isCollapsed} testID={`${testID}-collapsible`}>
-          {content}
-        </Collapsible>
+    return (
+      <Box {...marginStyles} style={styles?.root}>
+        {showDismiss ? (
+          <Collapsible collapsed={isCollapsed} testID={`${testID}-collapsible`}>
+            {content}
+          </Collapsible>
+        ) : (
+          content
+        )}
         {styleVariant === 'global' && borderBox}
       </Box>
-    ) : (
-      content
     );
   }),
 );
diff --git a/packages/mobile/src/banner/__tests__/Banner.test.tsx b/packages/mobile/src/banner/__tests__/Banner.test.tsx
index 96c94173bf..c92bd692db 100644
--- a/packages/mobile/src/banner/__tests__/Banner.test.tsx
+++ b/packages/mobile/src/banner/__tests__/Banner.test.tsx
@@ -3,7 +3,7 @@ import type { View } from 'react-native';
 import { fireEvent, render, screen } from '@testing-library/react-native';
 
 import { Text } from '../../typography/Text';
-import { DefaultThemeProvider } from '../../utils/testHelpers';
+import { DefaultThemeProvider, treeHasStyleProp } from '../../utils/testHelpers';
 import type { MobileBannerProps } from '../Banner';
 import { Banner } from '../Banner';
 
@@ -39,6 +39,37 @@ describe('Banner', () => {
       flexDirection: 'column',
     });
   });
+
+  it('keeps a stable root wrapper regardless of dismiss state', () => {
+    const { rerender, toJSON } = render(<MockBanner />);
+
+    const visibleTree = toJSON();
+    expect(visibleTree).toBeTruthy();
+    expect(Array.isArray(visibleTree)).toBe(false);
+    expect(visibleTree).toHaveProperty('type', 'View');
+
+    rerender(<MockBanner showDismiss />);
+
+    const dismissibleTree = toJSON();
+    expect(dismissibleTree).toBeTruthy();
+    expect(Array.isArray(dismissibleTree)).toBe(false);
+    expect(dismissibleTree).toHaveProperty('type', 'View');
+  });
+
+  it('applies styles.root and styles.content', () => {
+    const { toJSON } = render(
+      <MockBanner
+        styles={{
+          content: { borderBottomWidth: 2 },
+          root: { borderTopWidth: 1 },
+        }}
+      />,
+    );
+
+    const tree = toJSON();
+    expect(treeHasStyleProp(tree, (s) => s.borderTopWidth === 1)).toBe(true);
+    expect(treeHasStyleProp(tree, (s) => s.borderBottomWidth === 2)).toBe(true);
+  });
 });
 
 describe('Banner actions', () => {
diff --git a/packages/mobile/src/buttons/AvatarButton.tsx b/packages/mobile/src/buttons/AvatarButton.tsx
index e5b188fe47..ec7b9053df 100644
--- a/packages/mobile/src/buttons/AvatarButton.tsx
+++ b/packages/mobile/src/buttons/AvatarButton.tsx
@@ -1,6 +1,4 @@
 import React, { memo } from 'react';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
-import type { SharedProps } from '@coinbase/cds-common/types';
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Avatar, type AvatarBaseProps } from '../media';
@@ -8,9 +6,97 @@ import { Pressable, type PressableBaseProps, type PressableProps } from '../syst
 
 import type { ButtonBaseProps } from './Button';
 
+type DeprecatedAvatarButtonBorderProps = {
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderBottomLeftRadius?: PressableBaseProps['borderBottomLeftRadius'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderBottomRightRadius?: PressableBaseProps['borderBottomRightRadius'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderTopLeftRadius?: PressableBaseProps['borderTopLeftRadius'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderTopRightRadius?: PressableBaseProps['borderTopRightRadius'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderRadius?: PressableBaseProps['borderRadius'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderWidth?: PressableBaseProps['borderWidth'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect and will be removed in a future major release. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderTopWidth?: PressableBaseProps['borderTopWidth'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect and will be removed in a future major release. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderEndWidth?: PressableBaseProps['borderEndWidth'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderBottomWidth?: PressableBaseProps['borderBottomWidth'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderStartWidth?: PressableBaseProps['borderStartWidth'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  bordered?: PressableBaseProps['bordered'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderedBottom?: PressableBaseProps['borderedBottom'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderedEnd?: PressableBaseProps['borderedEnd'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderedHorizontal?: PressableBaseProps['borderedHorizontal'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderedStart?: PressableBaseProps['borderedStart'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderedTop?: PressableBaseProps['borderedTop'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderedVertical?: PressableBaseProps['borderedVertical'];
+};
+
 export type AvatarButtonBaseProps = PressableBaseProps &
-  SharedProps &
-  Pick<ButtonBaseProps, 'accessibilityLabel' | 'compact'> &
+  DeprecatedAvatarButtonBorderProps &
+  Pick<ButtonBaseProps, 'compact'> &
   Pick<AvatarBaseProps, 'src' | 'shape' | 'colorScheme' | 'borderColor' | 'name'>;
 
 export type AvatarButtonProps = AvatarButtonBaseProps & PressableProps;
@@ -28,22 +114,22 @@ export const AvatarButton = memo((_props: AvatarButtonProps) => {
     name,
     ...props
   } = mergedProps;
-  const height = compact ? interactableHeight.compact : interactableHeight.regular;
 
   return (
     <Pressable
       accessibilityHint={accessibilityLabel}
       accessibilityLabel={accessibilityLabel}
       background="transparent"
+      borderWidth={0} // remove Pressable's default transparent border
       feedback={feedback}
       {...props}
     >
       <Avatar
         borderColor={borderColor}
         colorScheme={colorScheme}
-        dangerouslySetSize={height}
         name={name}
         shape={shape}
+        size={compact ? 'xl' : 'xxxl'}
         src={src}
       />
     </Pressable>
diff --git a/packages/mobile/src/buttons/Button.tsx b/packages/mobile/src/buttons/Button.tsx
index 566e473fb0..2a2612ec14 100644
--- a/packages/mobile/src/buttons/Button.tsx
+++ b/packages/mobile/src/buttons/Button.tsx
@@ -1,19 +1,13 @@
 import React, { forwardRef, isValidElement, memo, useCallback, useMemo } from 'react';
-import {
-  ActivityIndicator,
-  type PressableStateCallbackType,
-  StyleSheet,
-  type View,
-} from 'react-native';
+import { type PressableStateCallbackType, StyleSheet, type View } from 'react-native';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
 import type {
   ButtonVariant,
   IconName,
+  NegativeSpace,
   SharedAccessibilityProps,
   SharedProps,
 } from '@coinbase/cds-common/types';
-import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
@@ -28,7 +22,6 @@ const defaultProgressCircleSize = 24;
 export const styles = StyleSheet.create({
   inline: {
     width: 'auto',
-    minWidth: 64,
   },
   block: {
     width: '100%',
@@ -127,9 +120,8 @@ export const Button = memo(
       wrapperStyles,
       feedback = compact ? 'light' : 'normal',
       borderColor,
-      borderWidth = 100,
+      borderWidth = 0, // remove Pressable's default transparent border
       borderRadius = compact ? 700 : 900,
-      height = interactableHeight[compact ? 'compact' : 'regular'],
       accessibilityLabel,
       accessibilityHint,
       padding,
@@ -137,8 +129,8 @@ export const Button = memo(
       paddingEnd,
       paddingTop,
       paddingBottom,
-      paddingX: paddingXProp,
-      paddingY: paddingYProp,
+      paddingX = compact ? 2 : 4,
+      paddingY = compact ? 1 : 2,
       ...props
     } = mergedProps;
     const theme = useTheme();
@@ -156,10 +148,7 @@ export const Button = memo(
     const sizingStyle = block ? styles.block : styles.inline;
     const justifyContent = flush ? 'flex-start' : hasIcon ? 'space-between' : 'center';
 
-    const { paddingX, paddingY, marginStart, marginEnd } = getButtonSpacingProps({
-      compact,
-      flush,
-    });
+    const flushMargin = flush ? (-paddingX as NegativeSpace) : undefined;
 
     const pressableStyle = useCallback(
       (state: PressableStateCallbackType) => [
@@ -171,8 +160,8 @@ export const Button = memo(
 
     const childrenNode = useMemo(
       () =>
-        isValidElement<{ children?: React.ReactNode }>(children) &&
-        Boolean(children.props.children) ? (
+        isValidElement(children) &&
+        Boolean((children.props as Record<string, unknown>).children) ? (
           children
         ) : (
           <Text
@@ -205,10 +194,9 @@ export const Button = memo(
         borderRadius={borderRadius}
         borderWidth={borderWidth}
         feedback={feedback}
-        height={height}
         loading={loading}
-        marginEnd={marginEnd}
-        marginStart={marginStart}
+        marginEnd={flush === 'end' ? flushMargin : undefined}
+        marginStart={flush === 'start' ? flushMargin : undefined}
         noScaleOnPress={noScaleOnPress}
         style={pressableStyle}
         transparentWhileInactive={transparent}
@@ -219,14 +207,13 @@ export const Button = memo(
           alignItems="center"
           flexWrap="nowrap"
           justifyContent={justifyContent}
-          minHeight={height}
           padding={padding}
           paddingBottom={paddingBottom}
           paddingEnd={paddingEnd}
           paddingStart={paddingStart}
           paddingTop={paddingTop}
-          paddingX={paddingXProp ?? paddingX}
-          paddingY={paddingYProp ?? paddingY}
+          paddingX={paddingX}
+          paddingY={paddingY}
           style={sizingStyle}
         >
           {loading ? (
diff --git a/packages/mobile/src/buttons/DefaultSlideButtonBackground.tsx b/packages/mobile/src/buttons/DefaultSlideButtonBackground.tsx
index 694477bbfa..8c9fcf6da7 100644
--- a/packages/mobile/src/buttons/DefaultSlideButtonBackground.tsx
+++ b/packages/mobile/src/buttons/DefaultSlideButtonBackground.tsx
@@ -1,9 +1,9 @@
-import React, { forwardRef, memo, useMemo } from 'react';
+import React, { forwardRef, memo } from 'react';
 import type { View } from 'react-native';
-import { animated, to } from '@react-spring/native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { Box } from '../layout/Box';
-import { TextHeadline } from '../typography/TextHeadline';
+import { Text } from '../typography/Text';
 
 import type { SlideButtonBackgroundProps } from './SlideButton';
 
@@ -26,8 +26,8 @@ export const DefaultSlideButtonBackground = memo(
     ) => {
       const horizontalPadding = compact ? 7 : 9;
 
-      const animatedStyle = useMemo(
-        () => ({ opacity: disabled ? 0.5 : to(progress, (value) => 1 - value) }),
+      const animatedStyle = useAnimatedStyle(
+        () => ({ opacity: disabled ? 0.5 : 1 - progress.value }),
         [progress, disabled],
       );
 
@@ -47,19 +47,20 @@ export const DefaultSlideButtonBackground = memo(
           style={style}
           width="100%"
         >
-          <animated.View style={animatedStyle}>
+          <Animated.View style={animatedStyle}>
             {typeof uncheckedLabel !== 'string' ? (
               uncheckedLabel
             ) : (
-              <TextHeadline
+              <Text
+                font="headline"
                 numberOfLines={1}
                 paddingEnd={horizontalPadding}
                 paddingStart={horizontalPadding}
               >
                 {uncheckedLabel}
-              </TextHeadline>
+              </Text>
             )}
-          </animated.View>
+          </Animated.View>
         </Box>
       );
     },
diff --git a/packages/mobile/src/buttons/DefaultSlideButtonHandle.tsx b/packages/mobile/src/buttons/DefaultSlideButtonHandle.tsx
index 5c52eb0b2e..399a669e41 100644
--- a/packages/mobile/src/buttons/DefaultSlideButtonHandle.tsx
+++ b/packages/mobile/src/buttons/DefaultSlideButtonHandle.tsx
@@ -1,27 +1,38 @@
-import React, { forwardRef, memo, useMemo } from 'react';
+import React, { forwardRef, memo, useEffect, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import type { View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withSpring,
+  type WithSpringConfig,
+} from 'react-native-reanimated';
 import { variants } from '@coinbase/cds-common/tokens/button';
-import {
-  animated,
-  type SpringConfig,
-  useChain,
-  useSpring,
-  useSpringRef,
-} from '@react-spring/native';
+import type { SpringConfig } from '@react-spring/core';
 
+import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Box } from '../layout/Box';
 import { Pressable } from '../system/Pressable';
-import { TextHeadline } from '../typography/TextHeadline';
+import { Text } from '../typography/Text';
 import { ProgressCircle } from '../visualizations/ProgressCircle';
 
 import type { SlideButtonBaseProps, SlideButtonHandleProps } from './SlideButton';
 
+export const slideButtonSpringConfig = {
+  stiffness: 300,
+  damping: 26,
+  mass: 1,
+  overshootClamping: true,
+} as const satisfies WithSpringConfig;
+
+/**
+ * @deprecated SlideButton no longer uses react-spring; this value no longer used by {@link DefaultSlideButtonHandle} but retained for migration only. Use {@link slideButtonSpringConfig} with Reanimated `withSpring` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const animationConfig = { tension: 300, clamp: true } as const satisfies SpringConfig;
 
-const progressCircleSize = 24;
-
 export type SlideButtonHandleCheckedProps = Pick<SlideButtonBaseProps, 'variant' | 'compact'> & {
   label?: React.ReactNode;
   end?: React.ReactNode;
@@ -61,25 +72,28 @@ export const styles = StyleSheet.create({
 
 export const SlideButtonHandleChecked = memo(
   ({ label, end, compact }: SlideButtonHandleCheckedProps) => {
-    const handleWidth = compact ? 40 : 56;
+    const theme = useTheme();
+    const iconSize = compact ? 's' : 'm';
+    const iconSizeValue = theme.iconSize[iconSize];
 
     return (
       <Box alignItems="center" height="100%" justifyContent="center" width="100%">
-        {typeof label !== 'string' ? label : <TextHeadline color="fgInverse">{label}</TextHeadline>}
+        {typeof label !== 'string' ? (
+          label
+        ) : (
+          <Text color="fgInverse" font="headline">
+            {label}
+          </Text>
+        )}
         <Box
           alignItems="center"
           height="100%"
           justifyContent="center"
+          padding={compact ? 1.5 : 2}
           pin="right"
-          width={handleWidth}
         >
           {end ?? (
-            <ProgressCircle
-              indeterminate
-              color="fgInverse"
-              size={progressCircleSize}
-              weight="thin"
-            />
+            <ProgressCircle indeterminate color="fgInverse" size={iconSizeValue} weight="thin" />
           )}
         </Box>
       </Box>
@@ -90,15 +104,14 @@ export const SlideButtonHandleChecked = memo(
 export const SlideButtonHandleUnchecked = memo(
   ({ start, compact }: SlideButtonHandleUncheckedProps) => {
     const iconSize = compact ? 's' : 'm';
-    const handleWidth = compact ? 40 : 56;
 
     return (
       <Box
         alignItems="center"
         height="100%"
         justifyContent="center"
+        padding={compact ? 1.5 : 2}
         pin="right"
-        width={handleWidth}
       >
         {start ?? <Icon color="fgInverse" name="forwardArrow" size={iconSize} />}
       </Box>
@@ -129,32 +142,27 @@ export const DefaultSlideButtonHandle = memo(
     ) => {
       const backgroundColor = variants[variant].background;
 
-      const checkedSpringRef = useSpringRef();
-      const uncheckedSpringRef = useSpringRef();
-      const checkedSpring = useSpring({
-        opacity: checked ? 1 : 0,
-        ref: checkedSpringRef,
-        config: animationConfig,
-        immediate: !checked,
-      });
-      const uncheckedSpring = useSpring({
-        opacity: checked ? 0 : 1,
-        ref: uncheckedSpringRef,
-        config: animationConfig,
-      });
-      useChain(
-        checked ? [uncheckedSpringRef, checkedSpringRef] : [checkedSpringRef, uncheckedSpringRef],
-        [0, 0.1],
-      );
+      const checkedOpacity = useSharedValue(checked ? 1 : 0);
+      const uncheckedOpacity = useSharedValue(checked ? 0 : 1);
+
+      useEffect(() => {
+        if (checked) {
+          uncheckedOpacity.value = withSpring(0, slideButtonSpringConfig);
+          checkedOpacity.value = withDelay(100, withSpring(1, slideButtonSpringConfig));
+        } else {
+          checkedOpacity.value = 0;
+          uncheckedOpacity.value = withDelay(100, withSpring(1, slideButtonSpringConfig));
+        }
+      }, [checked, checkedOpacity, uncheckedOpacity]);
 
       const containerStyle = useMemo(() => [styles.base, style], [style]);
-      const animatedCheckedStyle = useMemo(
-        () => [styles.absoluteContainer, { opacity: checkedSpring.opacity }],
-        [checkedSpring],
+      const animatedCheckedStyle = useAnimatedStyle(
+        () => ({ opacity: checkedOpacity.value }),
+        [checkedOpacity],
       );
-      const animatedUncheckedStyle = useMemo(
-        () => [styles.absoluteContainer, { opacity: uncheckedSpring.opacity }],
-        [uncheckedSpring],
+      const animatedUncheckedStyle = useAnimatedStyle(
+        () => ({ opacity: uncheckedOpacity.value }),
+        [uncheckedOpacity],
       );
 
       return (
@@ -172,7 +180,7 @@ export const DefaultSlideButtonHandle = memo(
           loading={checked}
           {...props}
         >
-          <animated.View style={animatedCheckedStyle}>
+          <Animated.View style={[styles.absoluteContainer, animatedCheckedStyle]}>
             <SlideButtonHandleChecked
               compact={compact}
               disabled={disabled}
@@ -180,15 +188,15 @@ export const DefaultSlideButtonHandle = memo(
               label={checkedLabel}
               variant={variant}
             />
-          </animated.View>
-          <animated.View style={animatedUncheckedStyle}>
+          </Animated.View>
+          <Animated.View style={[styles.absoluteContainer, animatedUncheckedStyle]}>
             <SlideButtonHandleUnchecked
               compact={compact}
               disabled={disabled}
               start={startUncheckedNode}
               variant={variant}
             />
-          </animated.View>
+          </Animated.View>
         </Pressable>
       );
     },
diff --git a/packages/mobile/src/buttons/IconButton.tsx b/packages/mobile/src/buttons/IconButton.tsx
index 93c486abff..1c93a30545 100644
--- a/packages/mobile/src/buttons/IconButton.tsx
+++ b/packages/mobile/src/buttons/IconButton.tsx
@@ -1,20 +1,13 @@
-import { forwardRef, memo, useCallback, useMemo } from 'react';
-import {
-  type PressableStateCallbackType,
-  type StyleProp,
-  type TextStyle,
-  type View,
-  type ViewStyle,
-} from 'react-native';
+import { forwardRef, memo } from 'react';
+import { type StyleProp, type TextStyle, type View, type ViewStyle } from 'react-native';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
 import type {
   IconButtonVariant,
   IconName,
   IconSize,
+  NegativeSpace,
   SharedProps,
 } from '@coinbase/cds-common/types';
-import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
@@ -65,18 +58,18 @@ export const IconButton = memo(
       name,
       active,
       variant = 'secondary',
+      alignSelf = 'flex-start', // prevents stretching when placed in a flex container
       transparent,
       compact = true,
       background,
       color,
       borderColor,
       iconSize = compact ? 's' : 'm',
-      borderWidth = 100,
+      borderWidth = 0, // remove Pressable's default transparent border
       borderRadius = 1000,
-      height = interactableHeight[compact ? 'compact' : 'regular'],
-      width = interactableHeight[compact ? 'compact' : 'regular'],
       feedback = compact ? 'light' : 'normal',
       flush,
+      padding = compact ? 1.5 : 2,
       loading,
       progressCircleSize,
       style,
@@ -94,56 +87,39 @@ export const IconButton = memo(
     const backgroundValue = background ?? variantStyle.background;
     const borderColorValue = borderColor ?? variantStyle.borderColor;
 
-    const { marginStart, marginEnd } = getButtonSpacingProps({ compact, flush });
-
-    const sizingStyle = useMemo<ViewStyle>(
-      () => ({
-        height: height as ViewStyle['height'],
-        width: width as ViewStyle['width'],
-        alignItems: 'center',
-        flexDirection: 'column',
-        justifyContent: 'center',
-      }),
-      [height, width],
-    );
-
-    const pressableStyle = useCallback(
-      (state: PressableStateCallbackType) => [
-        sizingStyle,
-        typeof style === 'function' ? style(state) : style,
-        styles?.root,
-      ],
-      [sizingStyle, style, styles?.root],
-    );
+    const flushMargin = flush ? (-padding as NegativeSpace) : undefined;
 
     return (
       <Pressable
         ref={ref}
         accessibilityHint={accessibilityHint}
         accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}
+        alignItems="center"
+        alignSelf={alignSelf}
         background={backgroundValue}
         borderColor={borderColorValue}
         borderRadius={borderRadius}
         borderWidth={borderWidth}
         feedback={feedback}
+        flexDirection="column"
+        justifyContent="center"
         loading={loading}
-        marginEnd={marginEnd}
-        marginStart={marginStart}
-        style={pressableStyle}
+        marginEnd={flush === 'end' ? flushMargin : undefined}
+        marginStart={flush === 'start' ? flushMargin : undefined}
+        padding={padding}
+        style={styles?.root}
         transparentWhileInactive={transparent}
         {...props}
       >
         {loading ? (
-          <Box alignItems="center" height={height} justifyContent="center" width={width}>
-            <ProgressCircle
-              indeterminate
-              color={colorValue}
-              size={progressCircleSize ?? iconSizeValue}
-              style={styles?.progressCircle}
-              testID={props.testID ? `${props.testID}-progress-circle` : undefined}
-              weight="thin"
-            />
-          </Box>
+          <ProgressCircle
+            indeterminate
+            color={colorValue}
+            size={progressCircleSize ?? iconSizeValue}
+            style={styles?.progressCircle}
+            testID={props.testID ? `${props.testID}-progress-circle` : undefined}
+            weight="thin"
+          />
         ) : (
           /* TO DO: test using currentColor like web does on Icon here */
           <Icon
@@ -151,7 +127,6 @@ export const IconButton = memo(
             color={colorValue}
             name={name}
             size={iconSize}
-            style={sizingStyle}
             styles={{ icon: styles?.icon }}
           />
         )}
diff --git a/packages/mobile/src/buttons/IconCounterButton.tsx b/packages/mobile/src/buttons/IconCounterButton.tsx
index 5c97ae664d..2d7108e4ae 100644
--- a/packages/mobile/src/buttons/IconCounterButton.tsx
+++ b/packages/mobile/src/buttons/IconCounterButton.tsx
@@ -1,5 +1,5 @@
-import React, { forwardRef, memo } from 'react';
-import type { View } from 'react-native';
+import React, { forwardRef, memo, useMemo } from 'react';
+import type { PressableStateCallbackType, StyleProp, TextStyle, View } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { IconSize, ValidateProps } from '@coinbase/cds-common/types';
 import { formatCount } from '@coinbase/cds-common/utils/formatCount';
@@ -15,11 +15,6 @@ import { Text } from '../typography/Text';
 export type IconCounterButtonBaseProps = {
   /** Name of the icon or a ReactNode */
   icon: Exclude<React.ReactNode, 'string'> | IconName;
-  /**
-   * @deprecated Use `size` instead. This will be removed in a future major release.
-   * @deprecationExpectedRemoval v8
-   */
-  iconSize?: IconSize;
   /** Size for given icon. */
   size?: IconSize;
   /** Whether the icon is active */
@@ -28,11 +23,23 @@ export type IconCounterButtonBaseProps = {
   count?: number;
   /** Color of the icon */
   color?: ThemeVars.Color;
-  /** @danger This is a migration escape hatch. It is not intended to be used normally. */
+  /**
+   * @deprecated Use `styles.icon` or `color` to customize icon color. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
   dangerouslySetColor?: string;
 };
 
-export type IconCounterButtonProps = IconCounterButtonBaseProps & PressableProps;
+export type IconCounterButtonProps = IconCounterButtonBaseProps &
+  PressableProps & {
+    /** Custom styles for individual elements of the IconCounterButton component */
+    styles?: {
+      /** Root Pressable element */
+      root?: PressableProps['style'];
+      /** Icon element rendered when `icon` is an icon name */
+      icon?: StyleProp<TextStyle>;
+    };
+  };
 
 export const IconCounterButton = memo(
   forwardRef(function IconCounterButton(
@@ -42,18 +49,35 @@ export const IconCounterButton = memo(
     const mergedProps = useComponentConfig('IconCounterButton', _props);
     const {
       icon,
-      iconSize = 's',
-      size = iconSize,
+      size = 's',
       active,
       count = 0,
       color = 'fg',
       dangerouslySetColor,
+      styles,
+      style,
       ...props
     } = mergedProps;
+
+    const rootStyleOverride = styles?.root;
+
+    const rootStyle = useMemo<PressableProps['style']>(() => {
+      if (typeof style === 'function' || typeof rootStyleOverride === 'function') {
+        return (state: PressableStateCallbackType) => {
+          const baseStyle = typeof style === 'function' ? style(state) : style;
+          const rootOverride =
+            typeof rootStyleOverride === 'function' ? rootStyleOverride(state) : rootStyleOverride;
+          return [baseStyle, rootOverride];
+        };
+      }
+      return [style, rootStyleOverride];
+    }, [rootStyleOverride, style]);
+
     return (
       <Pressable
         ref={ref}
         background="transparent"
+        style={rootStyle}
         {...(props satisfies ValidateProps<
           typeof props,
           Omit<IconCounterButtonProps, keyof PressableProps>
@@ -67,6 +91,7 @@ export const IconCounterButton = memo(
               dangerouslySetColor={dangerouslySetColor}
               name={icon as IconName}
               size={size}
+              style={styles?.icon}
             />
           ) : (
             icon
diff --git a/packages/mobile/src/buttons/SlideButton.tsx b/packages/mobile/src/buttons/SlideButton.tsx
index 65d438e27d..b8f9b52cc5 100644
--- a/packages/mobile/src/buttons/SlideButton.tsx
+++ b/packages/mobile/src/buttons/SlideButton.tsx
@@ -1,21 +1,27 @@
-import React, { forwardRef, memo, useCallback, useId, useMemo } from 'react';
+import React, { forwardRef, memo, useCallback, useEffect, useId, useMemo } from 'react';
 import { type AccessibilityActionEvent, type StyleProp, View, type ViewStyle } from 'react-native';
 import type { ForwardedRef } from 'react';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
+import Animated, {
+  type SharedValue,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
 import type { ButtonVariant } from '@coinbase/cds-common/types';
-import type { SpringValue } from '@react-spring/native';
-import { animated, to, useSpring } from '@react-spring/native';
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
 import type { PressableProps } from '../system/Pressable';
 
 import { DefaultSlideButtonBackground } from './DefaultSlideButtonBackground';
-import { animationConfig, DefaultSlideButtonHandle } from './DefaultSlideButtonHandle';
+import { DefaultSlideButtonHandle, slideButtonSpringConfig } from './DefaultSlideButtonHandle';
 
 export const slideButtonTestID = 'slide-button';
 
+export const DEFAULT_COMPACT_HEIGHT = 40;
+export const DEFAULT_REGULAR_HEIGHT = 56;
+
 export type SlideButtonBackgroundProps = Pick<
   SlideButtonBaseProps,
   | 'borderBottomLeftRadius'
@@ -29,7 +35,7 @@ export type SlideButtonBackgroundProps = Pick<
   | 'uncheckedLabel'
   | 'variant'
 > & {
-  progress: SpringValue<number>;
+  progress: SharedValue<number>;
   style?: StyleProp<ViewStyle>;
 };
 
@@ -44,7 +50,7 @@ export type SlideButtonHandleProps = PressableProps &
     | 'endCheckedNode'
     | 'variant'
   > & {
-    progress: SpringValue<number>;
+    progress: SharedValue<number>;
     style?: StyleProp<ViewStyle>;
   };
 
@@ -103,6 +109,8 @@ export type SlideButtonBaseProps = Omit<PressableProps, 'loading'> & {
    * Height of the entire button component (background and handle).
    * If you pass a custom SlideButtonBackgroundComponent or SlideButtonHandleComponent,
    * this property will be applied to both.
+   *
+   * @default 40px for compact variant, 56px for regular variant
    */
   height?: number;
   /**
@@ -173,7 +181,7 @@ export const SlideButton = memo(
       onSlideComplete,
       onChange,
       disabled,
-      height,
+      height = compact ? DEFAULT_COMPACT_HEIGHT : DEFAULT_REGULAR_HEIGHT,
       checkThreshold = 0.7,
       SlideButtonHandleComponent = DefaultSlideButtonHandle,
       SlideButtonBackgroundComponent = DefaultSlideButtonBackground,
@@ -188,13 +196,16 @@ export const SlideButton = memo(
     const labelId = useId();
     const [containerSize, onLayout] = useLayout();
 
-    const { progress } = useSpring({ progress: checked ? 1 : 0, config: animationConfig });
+    const progress = useSharedValue(checked ? 1 : 0);
+
+    useEffect(() => {
+      progress.value = withSpring(checked ? 1 : 0, slideButtonSpringConfig);
+    }, [checked, progress]);
 
-    const buttonMinHeight = interactableHeight[compact ? 'compact' : 'regular'];
-    const buttonMinWidth = buttonMinHeight;
+    const buttonMinWidth = height;
 
     const handleComplete = useCallback(() => {
-      void progress.start(1);
+      progress.value = withSpring(1, slideButtonSpringConfig);
       onChange?.(true);
       onSlideComplete?.();
       onSlideEnd?.();
@@ -240,7 +251,7 @@ export const SlideButton = memo(
             const progressValue = autoCompleteSlideOnThresholdMet
               ? newWidth
               : Math.min(1, newWidth);
-            void progress.set(progressValue);
+            progress.value = progressValue;
           })
           .onEnd(({ translationX }) => {
             if (checked || disabled) return;
@@ -252,7 +263,7 @@ export const SlideButton = memo(
               return;
             }
 
-            void progress.start(0);
+            progress.value = withSpring(0, slideButtonSpringConfig);
             onSlideCancel?.();
             onSlideEnd?.();
           })
@@ -275,22 +286,24 @@ export const SlideButton = memo(
     );
 
     const containerStyle = useMemo(
-      () => [
-        { height: height ?? buttonMinHeight, width: '100%', position: 'relative' } as const,
-        styles?.container,
-      ],
-      [height, buttonMinHeight, styles?.container],
+      () => [{ height, width: '100%', position: 'relative' } as const, styles?.container],
+      [height, styles?.container],
     );
 
-    const animatedStyle = useMemo(
-      () =>
-        ({
-          position: 'absolute',
-          height: height ?? buttonMinHeight,
-          minWidth: buttonMinWidth,
-          width: to(progress, (value) => `${value * 100}%`),
-        }) as const,
-      [height, buttonMinHeight, buttonMinWidth, progress],
+    const animatedWidthStyle = useAnimatedStyle(
+      () => ({
+        width: `${progress.value * 100}%`,
+      }),
+      [progress],
+    );
+
+    const staticHandleStyle = useMemo(
+      () => ({
+        position: 'absolute' as const,
+        height,
+        minWidth: buttonMinWidth,
+      }),
+      [height, buttonMinWidth],
     );
 
     return (
@@ -310,7 +323,7 @@ export const SlideButton = memo(
           variant={variant}
         />
         <GestureDetector gesture={panGesture}>
-          <animated.View style={animatedStyle}>
+          <Animated.View style={[staticHandleStyle, animatedWidthStyle]}>
             <SlideButtonHandleComponent
               accessible
               accessibilityActions={accessibilityActions}
@@ -335,7 +348,7 @@ export const SlideButton = memo(
               variant={variant}
               {...props}
             />
-          </animated.View>
+          </Animated.View>
         </GestureDetector>
       </View>
     );
diff --git a/packages/mobile/src/buttons/__stories__/AvatarButton.stories.tsx b/packages/mobile/src/buttons/__stories__/AvatarButton.stories.tsx
index d435b6121d..2466c6d92f 100644
--- a/packages/mobile/src/buttons/__stories__/AvatarButton.stories.tsx
+++ b/packages/mobile/src/buttons/__stories__/AvatarButton.stories.tsx
@@ -1,10 +1,11 @@
 import React, { useCallback, useState } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import { getAvatarFallbackColor } from '@coinbase/cds-common/media/getAvatarFallbackColor';
 
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { HStack } from '../../layout/HStack';
 import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
 import type { AvatarButtonProps } from '../AvatarButton';
 import { AvatarButton } from '../AvatarButton';
 
diff --git a/packages/mobile/src/buttons/__stories__/Button.stories.tsx b/packages/mobile/src/buttons/__stories__/Button.stories.tsx
index e159892d22..88bee6806c 100644
--- a/packages/mobile/src/buttons/__stories__/Button.stories.tsx
+++ b/packages/mobile/src/buttons/__stories__/Button.stories.tsx
@@ -10,14 +10,15 @@ import { Button, type ButtonProps } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
 
 const buttonStories: Omit<ButtonProps, 'children'>[] = [
-  { variant: 'foregroundMuted' },
   { variant: 'secondary' },
   { variant: 'tertiary' },
   { variant: 'positive' },
   { variant: 'negative' },
+  { variant: 'inverse' },
   { variant: 'secondary', transparent: true },
   { variant: 'positive', transparent: true },
   { variant: 'negative', transparent: true },
+  { variant: 'inverse', transparent: true },
   { block: true },
   { compact: true },
   { compact: true, block: true },
diff --git a/packages/mobile/src/buttons/__stories__/IconButton.stories.tsx b/packages/mobile/src/buttons/__stories__/IconButton.stories.tsx
index 458b86810c..4eedf82a9a 100644
--- a/packages/mobile/src/buttons/__stories__/IconButton.stories.tsx
+++ b/packages/mobile/src/buttons/__stories__/IconButton.stories.tsx
@@ -40,12 +40,6 @@ const variants = [
     ),
     title: <Text font="body">Secondary transparent</Text>,
   },
-  {
-    component: (props?: Partial<IconButtonProps>) => (
-      <IconButton name={iconName} variant="foregroundMuted" {...props} />
-    ),
-    title: <Text font="body">ForegroundMuted</Text>,
-  },
   {
     component: (props?: Partial<IconButtonProps>) => (
       <IconButton
@@ -58,9 +52,15 @@ const variants = [
   },
   {
     component: (props?: Partial<IconButtonProps>) => (
-      <IconButton transparent name={iconName} variant="foregroundMuted" {...props} />
+      <IconButton flush="start" name={iconName} variant="primary" {...props} />
     ),
-    title: <Text font="body">ForegroundMuted transparent</Text>,
+    title: 'Primary flush start',
+  },
+  {
+    component: (props?: Partial<IconButtonProps>) => (
+      <IconButton flush="end" name={iconName} variant="primary" {...props} />
+    ),
+    title: 'Primary flush end',
   },
 ];
 
@@ -234,11 +234,6 @@ const IconButtonScreen = () => {
             <HStack key={`icon-wrapper-${name}`} flexWrap="wrap" gap={2}>
               <IconButton accessibilityLabel={accessibilityLabel} name={name} variant="primary" />
               <IconButton accessibilityLabel={accessibilityLabel} name={name} variant="secondary" />
-              <IconButton
-                accessibilityLabel={accessibilityLabel}
-                name={name}
-                variant="foregroundMuted"
-              />
               <IconButton accessibilityLabel={accessibilityLabel} name={name} />
             </HStack>
           );
diff --git a/packages/mobile/src/buttons/__stories__/IconCounterButton.stories.tsx b/packages/mobile/src/buttons/__stories__/IconCounterButton.stories.tsx
index d1380fd754..fda52b85ab 100644
--- a/packages/mobile/src/buttons/__stories__/IconCounterButton.stories.tsx
+++ b/packages/mobile/src/buttons/__stories__/IconCounterButton.stories.tsx
@@ -42,8 +42,8 @@ const IconCounterButtonScreen = () => {
           <IconCounterButton
             accessibilityLabel="6.9 million shares, share"
             count={69000000}
-            dangerouslySetColor="orange"
             icon="arrowsHorizontal"
+            styles={{ icon: { color: 'orange' } }}
           />
         </HStack>
       </Example>
diff --git a/packages/mobile/src/buttons/__tests__/AvatarButton.test.tsx b/packages/mobile/src/buttons/__tests__/AvatarButton.test.tsx
index 9da44f1741..3452857c9c 100644
--- a/packages/mobile/src/buttons/__tests__/AvatarButton.test.tsx
+++ b/packages/mobile/src/buttons/__tests__/AvatarButton.test.tsx
@@ -1,5 +1,4 @@
-import { Animated, Pressable } from 'react-native';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
+import { Animated } from 'react-native';
 import { fireEvent, render, screen } from '@testing-library/react-native';
 
 import type { ComponentConfig } from '../../core/componentConfig';
@@ -31,14 +30,16 @@ describe('AvatarButton', () => {
     expect(screen.UNSAFE_queryAllByType(Animated.View)).toHaveLength(1);
   });
 
-  it('renders a pressable', () => {
+  it('renders and responds to press', () => {
+    const onPress = jest.fn();
     render(
       <DefaultThemeProvider>
-        <AvatarButton accessibilityLabel="Sneezy" />
+        <AvatarButton accessibilityLabel="Sneezy" onPress={onPress} testID="avatar-button" />
       </DefaultThemeProvider>,
     );
 
-    expect(screen.UNSAFE_queryAllByType(Pressable)).toHaveLength(1);
+    fireEvent.press(screen.getByTestId('avatar-button'));
+    expect(onPress).toHaveBeenCalled();
   });
 
   it('renders children Avatar', () => {
@@ -73,45 +74,19 @@ describe('AvatarButton', () => {
     expect(spy).toHaveBeenCalled();
   });
 
-  it('applies provider config defaults', () => {
-    const config: ComponentConfig = {
-      AvatarButton: {
-        compact: true,
-      },
-    };
+  it('accepts deprecated border props without changing rendering', () => {
     render(
       <DefaultThemeProvider>
-        <ComponentConfigProvider value={config}>
-          <AvatarButton accessibilityLabel="Sneezy" testID="avatar-button" />
-        </ComponentConfigProvider>
-      </DefaultThemeProvider>,
-    );
-
-    expect(
-      screen.getByTestId('avatar-button').findByProps({
-        dangerouslySetSize: interactableHeight.compact,
-      }),
-    ).toBeTruthy();
-  });
-
-  it('allows local props to override provider defaults', () => {
-    const config: ComponentConfig = {
-      AvatarButton: {
-        compact: true,
-      },
-    };
-    render(
-      <DefaultThemeProvider>
-        <ComponentConfigProvider value={config}>
-          <AvatarButton accessibilityLabel="Sneezy" compact={false} testID="avatar-button" />
-        </ComponentConfigProvider>
+        <AvatarButton
+          bordered
+          accessibilityLabel="Sneezy"
+          borderRadius={900}
+          borderWidth={300}
+          testID="avatar-button"
+        />
       </DefaultThemeProvider>,
     );
 
-    expect(
-      screen.getByTestId('avatar-button').findByProps({
-        dangerouslySetSize: interactableHeight.regular,
-      }),
-    ).toBeTruthy();
+    expect(screen.getByTestId('avatar-button')).toBeTruthy();
   });
 });
diff --git a/packages/mobile/src/buttons/__tests__/Button.perf-test.tsx b/packages/mobile/src/buttons/__tests__/Button.perf-test.tsx
index 5f440a7c2c..815022cc52 100644
--- a/packages/mobile/src/buttons/__tests__/Button.perf-test.tsx
+++ b/packages/mobile/src/buttons/__tests__/Button.perf-test.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jest/expect-expect */
 import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react-native';
 import { measurePerformance } from 'reassure';
 
 import { Button } from '../Button';
@@ -8,7 +8,7 @@ import { Button } from '../Button';
 describe('Button performance tests', () => {
   it('fires `onPress` when clicked', async () => {
     const scenario = async () => {
-      fireEvent.click(screen.getByRole('button'));
+      fireEvent.press(screen.getByRole('button'));
     };
     await measurePerformance(<Button onPress={NoopFn}>Child</Button>, { scenario });
   });
diff --git a/packages/mobile/src/buttons/__tests__/Button.test.tsx b/packages/mobile/src/buttons/__tests__/Button.test.tsx
index a45021136b..73bebbdceb 100644
--- a/packages/mobile/src/buttons/__tests__/Button.test.tsx
+++ b/packages/mobile/src/buttons/__tests__/Button.test.tsx
@@ -1,4 +1,4 @@
-import { Animated, Pressable } from 'react-native';
+import { Animated } from 'react-native';
 import { useEventHandler } from '@coinbase/cds-common/hooks/useEventHandler';
 import { fireEvent, render, screen } from '@testing-library/react-native';
 
@@ -31,16 +31,6 @@ describe('Button', () => {
     expect(screen.UNSAFE_queryAllByType(Animated.View)).toHaveLength(1);
   });
 
-  it('renders a pressable', () => {
-    render(
-      <DefaultThemeProvider>
-        <Button>Child</Button>
-      </DefaultThemeProvider>,
-    );
-
-    expect(screen.UNSAFE_queryAllByType(Pressable)).toHaveLength(1);
-  });
-
   it('renders children text', () => {
     render(
       <DefaultThemeProvider>
diff --git a/packages/mobile/src/buttons/__tests__/SlideButton.test.tsx b/packages/mobile/src/buttons/__tests__/SlideButton.test.tsx
index 455e4d31a9..da82defa6d 100644
--- a/packages/mobile/src/buttons/__tests__/SlideButton.test.tsx
+++ b/packages/mobile/src/buttons/__tests__/SlideButton.test.tsx
@@ -52,7 +52,7 @@ describe('SlideButton', () => {
 
   it('renders correctly', () => {
     render(<SlideButtonExample />);
-    expect(screen.getByText(uncheckedLabel)).toBeTruthy();
+    expect(screen.getByText(uncheckedLabel, { includeHiddenElements: true })).toBeTruthy();
   });
 
   it('is accessible', () => {
@@ -177,7 +177,7 @@ describe('SlideButton', () => {
   describe('compact variant', () => {
     it('renders correctly with compact prop', () => {
       render(<SlideButtonExample compact />);
-      expect(screen.getByText(uncheckedLabel)).toBeTruthy();
+      expect(screen.getByText(uncheckedLabel, { includeHiddenElements: true })).toBeTruthy();
     });
 
     it('applies compact height of 40px', () => {
diff --git a/packages/mobile/src/cards/AnnouncementCard.tsx b/packages/mobile/src/cards/AnnouncementCard.tsx
index 718eb5ad41..24bfc0f679 100644
--- a/packages/mobile/src/cards/AnnouncementCard.tsx
+++ b/packages/mobile/src/cards/AnnouncementCard.tsx
@@ -1,14 +1,10 @@
 import React, { memo } from 'react';
 
 import { Card, type CardBaseProps } from './Card';
-import { CardBody, type CardBodyBaseProps, type CardBodyProps } from './CardBody';
+import { CardBody, type CardBodyBaseProps } from './CardBody';
 
-export type AnnouncementCardBaseProps = CardBaseProps & CardBodyBaseProps;
-/**
- * @deprecated Use MessagingCard instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v6
- */
-export type AnnouncementCardProps = AnnouncementCardBaseProps;
+type AnnouncementCardBaseProps = CardBaseProps & CardBodyBaseProps;
+type AnnouncementCardProps = AnnouncementCardBaseProps;
 
 /**
  * @deprecated Use MessagingCard instead. This will be removed in a future major release.
diff --git a/packages/mobile/src/cards/Card.tsx b/packages/mobile/src/cards/Card.tsx
index a3acd00297..10d7ba5d0a 100644
--- a/packages/mobile/src/cards/Card.tsx
+++ b/packages/mobile/src/cards/Card.tsx
@@ -24,6 +24,10 @@ export type CardBaseProps = Pick<
     pressableProps?: Omit<PressableProps, 'onPress'>;
   };
 
+/**
+ * @deprecated Use `ContentCard`, `MediaCard`, `MessagingCard`, or `DataCard` based on your use case. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type CardProps = CardBaseProps & BoxProps;
 
 const getBorderRadiusPinStyle = (borderRadius: number) => ({
diff --git a/packages/mobile/src/cards/CardMedia.tsx b/packages/mobile/src/cards/CardMedia.tsx
index ab726cec0a..a6c7f5b3f7 100644
--- a/packages/mobile/src/cards/CardMedia.tsx
+++ b/packages/mobile/src/cards/CardMedia.tsx
@@ -38,23 +38,9 @@ const imageProps: Record<CardMediaPlacement, CardMediaImageSizeObject> = {
 export const CardMedia = memo(function CardMedia({ placement = 'end', ...props }: CardMediaProps) {
   switch (props.type) {
     case 'spotSquare':
-      return (
-        <SpotSquare
-          {...props}
-          dimension={defaultMediaDimension}
-          name={props.name}
-          testID={props.testID}
-        />
-      );
+      return <SpotSquare dimension={defaultMediaDimension} {...props} />;
     case 'pictogram':
-      return (
-        <Pictogram
-          {...props}
-          dimension={defaultPictogramMediaDimension}
-          name={props.name}
-          testID={props.testID}
-        />
-      );
+      return <Pictogram dimension={defaultPictogramMediaDimension} {...props} />;
     case 'image':
       return (
         <RemoteImage
diff --git a/packages/mobile/src/cards/DataCard.tsx b/packages/mobile/src/cards/DataCard.tsx
index 6175969c1a..c0b283a802 100644
--- a/packages/mobile/src/cards/DataCard.tsx
+++ b/packages/mobile/src/cards/DataCard.tsx
@@ -40,9 +40,7 @@ import { gutter } from '@coinbase/cds-common/tokens/sizing';
 import type { SharedProps } from '@coinbase/cds-common/types';
 
 import { HStack } from '../layout/HStack';
-import { TextBody } from '../typography/TextBody';
-import { TextHeadline } from '../typography/TextHeadline';
-import { TextLabel2 } from '../typography/TextLabel2';
+import { Text } from '../typography/Text';
 import { ProgressBar } from '../visualizations/ProgressBar';
 import { ProgressCircle } from '../visualizations/ProgressCircle';
 
@@ -80,16 +78,18 @@ export const DataCard = memo(function DataCard({
   ...cardProps
 }: DataCardProps) {
   const content = useMemo(() => {
-    const TextEndLabel = progressVariant === 'bar' ? TextLabel2 : TextBody;
+    const endLabelFont = progressVariant === 'bar' ? 'label2' : 'body';
     return (
       <HStack justifyContent="space-between">
         {!!startLabelProp && (
-          <TextHeadline testID={`${testID}-start-label`}>{startLabelProp}</TextHeadline>
+          <Text font="headline" testID={`${testID}-start-label`}>
+            {startLabelProp}
+          </Text>
         )}
         {!!endLabelProp && (
-          <TextEndLabel color="fgMuted" testID={`${testID}-end-label`}>
+          <Text color="fgMuted" font={endLabelFont} testID={`${testID}-end-label`}>
             {endLabelProp}
-          </TextEndLabel>
+          </Text>
         )}
       </HStack>
     );
diff --git a/packages/mobile/src/cards/FeatureEntryCard.tsx b/packages/mobile/src/cards/FeatureEntryCard.tsx
index 52842a75da..b7944146fd 100644
--- a/packages/mobile/src/cards/FeatureEntryCard.tsx
+++ b/packages/mobile/src/cards/FeatureEntryCard.tsx
@@ -3,13 +3,8 @@ import React, { memo } from 'react';
 import { Card, type CardBaseProps } from './Card';
 import { CardBody, type CardBodyBaseProps } from './CardBody';
 
-export type FeatureEntryCardBaseProps = CardBaseProps & CardBodyBaseProps;
-
-/**
- * @deprecated Use MessagingCard instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v6
- */
-export type FeatureEntryCardProps = FeatureEntryCardBaseProps;
+type FeatureEntryCardBaseProps = CardBaseProps & CardBodyBaseProps;
+type FeatureEntryCardProps = FeatureEntryCardBaseProps;
 
 /**
  * @deprecated Use MessagingCard instead. This will be removed in a future major release.
diff --git a/packages/mobile/src/cards/FeedCard.tsx b/packages/mobile/src/cards/FeedCard.tsx
index 9f1bdd3378..0eec33a077 100644
--- a/packages/mobile/src/cards/FeedCard.tsx
+++ b/packages/mobile/src/cards/FeedCard.tsx
@@ -11,11 +11,7 @@ import { CardFooter } from './CardFooter';
 import { CardHeader } from './CardHeader';
 import { LikeButton, type LikeButtonBaseProps } from './LikeButton';
 
-/**
- * @deprecated Use the ContentCard component instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v9
- */
-export type FeedCardBaseProps = CardBaseProps &
+type FeedCardBaseProps = CardBaseProps &
   SharedProps &
   Pick<CardBodyBaseProps, 'image' | 'pictogram' | 'spotSquare'> & {
     /** Image url for Avatar */
@@ -40,11 +36,7 @@ export type FeedCardBaseProps = CardBaseProps &
     cta?: ButtonBaseProps;
   };
 
-/**
- * @deprecated Use the ContentCard component instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
-export type FeedCardProps = FeedCardBaseProps;
+type FeedCardProps = FeedCardBaseProps;
 
 /**
  * @deprecated Use the ContentCard component instead. This will be removed in a future major release.
diff --git a/packages/mobile/src/cards/LikeButton.tsx b/packages/mobile/src/cards/LikeButton.tsx
index 9f615ae460..e7cd70b72f 100644
--- a/packages/mobile/src/cards/LikeButton.tsx
+++ b/packages/mobile/src/cards/LikeButton.tsx
@@ -7,12 +7,12 @@ import {
   scaleInConfig,
   scaleOutConfig,
 } from '@coinbase/cds-common/animation/likeButton';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
 import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
 import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
 
 import { convertMotionConfig } from '../animation/convertMotionConfig';
 import { useComponentConfig } from '../hooks/useComponentConfig';
+import { useTheme } from '../hooks/useTheme';
 import { TextIcon } from '../icons/TextIcon';
 import { HStack } from '../layout/HStack';
 import type { PressableProps } from '../system/Pressable';
@@ -26,7 +26,7 @@ export type LikeButtonBaseProps = Pick<
   SharedProps & {
     liked?: boolean;
     count?: number;
-    /** Reduce the inner padding within the button itself. */
+    /** Use the compact variant. */
     compact?: boolean;
     /** Ensure the button aligns flush on the left or right.
      * This prop will translate the entire button left/right,
@@ -45,6 +45,7 @@ export const LikeButton = memo(function LikeButton(_props: LikeButtonProps) {
   const {
     count = 0,
     compact = true,
+    padding = compact ? 1.5 : 2, // mirror IconButton's padding
     flush,
     liked = false,
     onPress,
@@ -55,7 +56,7 @@ export const LikeButton = memo(function LikeButton(_props: LikeButtonProps) {
   } = mergedProps;
   const iconScale = useRef(new Animated.Value(1));
   const iconSize = compact ? 's' : 'm';
-  const size = interactableHeight[compact ? 'compact' : 'regular'];
+  const theme = useTheme();
 
   const { marginStart, marginEnd } = getButtonSpacingProps({ compact, flush });
 
@@ -82,6 +83,12 @@ export const LikeButton = memo(function LikeButton(_props: LikeButtonProps) {
     [],
   );
 
+  // override default line height to match the height of the sibling icon
+  const countTextStyle = useMemo(
+    () => ({ lineHeight: theme.iconSize[iconSize] }),
+    [theme.iconSize, iconSize],
+  );
+
   return (
     <Pressable
       accessibilityHint={accessibilityHint}
@@ -100,8 +107,6 @@ export const LikeButton = memo(function LikeButton(_props: LikeButtonProps) {
         flexWrap="nowrap"
         gap={1}
         justifyContent="flex-start"
-        minHeight={size}
-        minWidth={size}
       >
         <TextIcon
           animated
@@ -112,7 +117,7 @@ export const LikeButton = memo(function LikeButton(_props: LikeButtonProps) {
           style={iconStyles}
         />
         {count > 0 ? (
-          <Text mono font="label1">
+          <Text mono font="label1" style={countTextStyle}>
             {count}
           </Text>
         ) : null}
diff --git a/packages/mobile/src/cards/NudgeCard.tsx b/packages/mobile/src/cards/NudgeCard.tsx
index 41ef356313..1e0759aa15 100644
--- a/packages/mobile/src/cards/NudgeCard.tsx
+++ b/packages/mobile/src/cards/NudgeCard.tsx
@@ -13,6 +13,7 @@ import type {
 import { IconButton } from '../buttons';
 import { Pictogram } from '../illustrations/Pictogram';
 import { Box, HStack, VStack } from '../layout';
+import type { StyleProps } from '../styles/styleProps';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 
@@ -104,7 +105,11 @@ export const NudgeCard = memo(
     background = 'bgAlternate',
     onPress,
     maxWidth,
-    ...props
+    maxHeight,
+    minHeight,
+    minWidth,
+    height,
+    aspectRatio,
   }: NudgeCardProps) => {
     const hasMedia = pictogram || media;
     const paddingBottom = action ? 1 : 2;
@@ -135,11 +140,11 @@ export const NudgeCard = memo(
         background={background}
         borderColor="transparent"
         borderRadius={500}
-        maxWidth={maxWidth}
+        maxWidth={maxWidth as StyleProps['maxWidth']}
         paddingEnd={onDismissPress ? 3 : 0}
         position="relative"
         testID={testID}
-        width={width}
+        width={width as StyleProps['width']}
       >
         {onDismissPress ? (
           // zIndex is required otherwise CardBody sits on top of it
@@ -159,14 +164,24 @@ export const NudgeCard = memo(
         {/* ported over from CardBody */}
         <HStack
           alignItems="center"
+          aspectRatio={aspectRatio as StyleProps['aspectRatio']}
           flexGrow={1}
           gap={2}
+          height={height as StyleProps['height']}
           justifyContent={mediaPosition === 'right' ? 'space-between' : 'flex-start'}
+          maxHeight={maxHeight as StyleProps['maxHeight']}
+          minHeight={minHeight as StyleProps['minHeight']}
+          minWidth={minWidth as StyleProps['minWidth']}
           {...spacingProps}
-          {...props}
         >
           {hasMedia && mediaPosition === 'left' ? renderMedia : null}
-          <VStack alignItems="flex-start" flexGrow={1} flexShrink={1} gap={2} maxWidth={maxWidth}>
+          <VStack
+            alignItems="flex-start"
+            flexGrow={1}
+            flexShrink={1}
+            gap={2}
+            maxWidth={maxWidth as StyleProps['maxWidth']}
+          >
             <VStack gap={0.5} maxWidth="100%" paddingTop={hasMedia ? 0 : 2}>
               {typeof title === 'string' ? (
                 <Text
diff --git a/packages/mobile/src/cards/UpsellCard.tsx b/packages/mobile/src/cards/UpsellCard.tsx
index 42c6ab8275..b88ff26254 100644
--- a/packages/mobile/src/cards/UpsellCard.tsx
+++ b/packages/mobile/src/cards/UpsellCard.tsx
@@ -1,5 +1,5 @@
 import React, { isValidElement, memo } from 'react';
-import type { PressableProps } from 'react-native';
+import type { DimensionValue, PressableProps } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { upsellCardDefaultWidth, upsellCardMinHeight } from '@coinbase/cds-common/tokens/card';
 import type {
@@ -9,13 +9,14 @@ import type {
 } from '@coinbase/cds-common/types';
 
 import { Button, IconButton } from '../buttons';
-import { HStack, VStack } from '../layout';
+import { HStack, type HStackProps, VStack } from '../layout';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 
 export type UpsellCardBaseProps = SharedProps &
   Pick<SharedAccessibilityProps, 'accessibilityLabel'> &
-  Pick<DimensionStyles, 'width'> & {
+  Pick<DimensionStyles, 'width'> &
+  Pick<HStackProps, 'style'> & {
     /** Callback fired when the action button is pressed */
     onActionPress?: PressableProps['onPress'];
     /** Callback fired when the dismiss button is pressed */
@@ -38,7 +39,8 @@ export type UpsellCardBaseProps = SharedProps &
      */
     background?: ThemeVars.Color;
     /**
-     * @danger This is a migration escape hatch. It is not intended to be used normally.
+     * @deprecated Use `style` or `background` to customize card background. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
      */
     dangerouslySetBackground?: string;
   };
@@ -87,6 +89,7 @@ export const UpsellCard = memo(
     accessibilityLabel,
     width = upsellCardDefaultWidth,
     onPress,
+    style,
   }: UpsellCardProps) => {
     const content = (
       <HStack
@@ -95,8 +98,9 @@ export const UpsellCard = memo(
         borderRadius={500}
         dangerouslySetBackground={dangerouslySetBackground}
         minHeight={upsellCardMinHeight}
+        style={style}
         testID={testID}
-        width={width}
+        width={width as DimensionValue}
       >
         <HStack
           alignContent="space-between"
diff --git a/packages/mobile/src/cards/__figma__/UpsellCard.figma.tsx b/packages/mobile/src/cards/__figma__/UpsellCard.figma.tsx
index e6945d01f0..56fd4e58a2 100644
--- a/packages/mobile/src/cards/__figma__/UpsellCard.figma.tsx
+++ b/packages/mobile/src/cards/__figma__/UpsellCard.figma.tsx
@@ -36,8 +36,8 @@ figma.connect(
       return (
         <UpsellCard
           {...props}
-          dangerouslySetBackground={green60}
           description={description.string}
+          style={{ backgroundColor: green60 }}
           title={title.string}
         />
       );
diff --git a/packages/mobile/src/cards/__stories__/ContainedAssetCard.stories.tsx b/packages/mobile/src/cards/__stories__/ContainedAssetCard.stories.tsx
index 25f80ec9ba..173b3bc6e9 100644
--- a/packages/mobile/src/cards/__stories__/ContainedAssetCard.stories.tsx
+++ b/packages/mobile/src/cards/__stories__/ContainedAssetCard.stories.tsx
@@ -88,8 +88,8 @@ const ContainedAssetCardScreen = () => {
           description={
             <Text
               accessibilityLabel="Up 6.37%"
-              dangerouslySetColor={customUpwardTrendColor}
               font="label2"
+              style={{ color: customUpwardTrendColor }}
             >
               {subheadIconSignMap.upwardTrend}6.37%
             </Text>
@@ -136,7 +136,7 @@ const ContainedAssetCardScreen = () => {
         />
       </Example>
       <Example title="ContainedAssetCard with no max width">
-        <ContainedAssetCard {...exampleProps} maxWidth="none" />
+        <ContainedAssetCard {...exampleProps} maxWidth={null} />
       </Example>
     </ExampleScreen>
   );
diff --git a/packages/mobile/src/cards/__stories__/ContentCard.stories.tsx b/packages/mobile/src/cards/__stories__/ContentCard.stories.tsx
index 49f0a25117..4aafac9450 100644
--- a/packages/mobile/src/cards/__stories__/ContentCard.stories.tsx
+++ b/packages/mobile/src/cards/__stories__/ContentCard.stories.tsx
@@ -315,7 +315,7 @@ const ContentCardScreen = () => {
               <RemoteImage accessibilityLabel="Uniswap" source={assets.uni.imageUrl} />
               <RemoteImage accessibilityLabel="Sushi" source={assets.sushi.imageUrl} />
             </RemoteImageGroup>
-            <Button compact variant="tertiary">
+            <Button compact variant="inverse">
               Share
             </Button>
           </ContentCardFooter>
@@ -346,7 +346,7 @@ const ContentCardScreen = () => {
               <RemoteImage accessibilityLabel="Uniswap" source={assets.uni.imageUrl} />
               <RemoteImage accessibilityLabel="Sushi" source={assets.sushi.imageUrl} />
             </RemoteImageGroup>
-            <Button compact variant="tertiary">
+            <Button compact variant="inverse">
               Share
             </Button>
           </ContentCardFooter>
@@ -364,7 +364,7 @@ const ContentCardScreen = () => {
               <RemoteImage accessibilityLabel="Uniswap" source={assets.uni.imageUrl} />
               <RemoteImage accessibilityLabel="Sushi" source={assets.sushi.imageUrl} />
             </RemoteImageGroup>
-            <Button compact variant="tertiary">
+            <Button compact variant="inverse">
               Share
             </Button>
           </ContentCardFooter>
@@ -434,7 +434,7 @@ const ContentCardScreen = () => {
                 <RemoteImage accessibilityLabel="Uniswap" source={assets.uni.imageUrl} />
                 <RemoteImage accessibilityLabel="Sushi" source={assets.sushi.imageUrl} />
               </RemoteImageGroup>
-              <Button compact onPress={() => {}} variant="secondary">
+              <Button compact onPress={() => {}} variant="inverse">
                 View Details
               </Button>
             </ContentCardFooter>
@@ -470,7 +470,7 @@ const ContentCardScreen = () => {
                 <RemoteImage accessibilityLabel="Uniswap" source={assets.uni.imageUrl} />
                 <RemoteImage accessibilityLabel="Sushi" source={assets.sushi.imageUrl} />
               </RemoteImageGroup>
-              <Button compact onPress={() => {}} variant="tertiary">
+              <Button compact onPress={() => {}} variant="inverse">
                 View Details
               </Button>
             </ContentCardFooter>
@@ -506,7 +506,7 @@ const ContentCardScreen = () => {
                 <RemoteImage accessibilityLabel="Uniswap" source={assets.uni.imageUrl} />
                 <RemoteImage accessibilityLabel="Sushi" source={assets.sushi.imageUrl} />
               </RemoteImageGroup>
-              <Button compact onPress={() => {}} variant="tertiary">
+              <Button compact onPress={() => {}} variant="inverse">
                 View Details
               </Button>
             </ContentCardFooter>
@@ -537,7 +537,7 @@ const ContentCardScreen = () => {
                 <RemoteImage accessibilityLabel="Uniswap" source={assets.uni.imageUrl} />
                 <RemoteImage accessibilityLabel="Sushi" source={assets.sushi.imageUrl} />
               </RemoteImageGroup>
-              <Button compact disabled variant="tertiary">
+              <Button compact disabled variant="inverse">
                 View Details
               </Button>
             </ContentCardFooter>
diff --git a/packages/mobile/src/cards/__stories__/MediaCard.stories.tsx b/packages/mobile/src/cards/__stories__/MediaCard.stories.tsx
index fbace0dd87..1977ac17f7 100644
--- a/packages/mobile/src/cards/__stories__/MediaCard.stories.tsx
+++ b/packages/mobile/src/cards/__stories__/MediaCard.stories.tsx
@@ -7,7 +7,6 @@ import { Carousel } from '../../carousel/Carousel';
 import { CarouselItem } from '../../carousel/CarouselItem';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { RemoteImage } from '../../media/RemoteImage';
-import { TextHeadline, TextLabel2, TextTitle3 } from '../../typography';
 import { Text } from '../../typography/Text';
 import type { MediaCardProps } from '../MediaCard';
 import { MediaCard } from '../MediaCard';
@@ -85,15 +84,19 @@ const MediaCardScreen = () => {
       <Example title="Custom Content">
         <MediaCard
           description={
-            <TextLabel2>
+            <Text font="label2">
               Custom description with <Text font="headline">bold text</Text> and{' '}
               <Text font="label1">italic text</Text>
-            </TextLabel2>
+            </Text>
           }
           media={exampleMedia}
-          subtitle={<TextHeadline color="fgPositive">Custom Subtitle</TextHeadline>}
+          subtitle={
+            <Text color="fgPositive" font="headline">
+              Custom Subtitle
+            </Text>
+          }
           thumbnail={exampleThumbnail}
-          title={<TextTitle3>Custom Title</TextTitle3>}
+          title={<Text font="title3">Custom Title</Text>}
         />
       </Example>
 
diff --git a/packages/mobile/src/cards/__stories__/UpsellCard.stories.tsx b/packages/mobile/src/cards/__stories__/UpsellCard.stories.tsx
index 6e7e940285..142f1cb287 100644
--- a/packages/mobile/src/cards/__stories__/UpsellCard.stories.tsx
+++ b/packages/mobile/src/cards/__stories__/UpsellCard.stories.tsx
@@ -64,17 +64,17 @@ const UpsellCardScreen = () => {
   return (
     <ExampleScreen>
       <Example title="Upsell Card">
-        <UpsellCard {...exampleProps} dangerouslySetBackground={defaultBackground} />
+        <UpsellCard {...exampleProps} style={{ backgroundColor: defaultBackground }} />
       </Example>
       <Example title="Upsell Card Compact">
-        <UpsellCard {...compactProps} dangerouslySetBackground={defaultBackground} />
+        <UpsellCard {...compactProps} style={{ backgroundColor: defaultBackground }} />
       </Example>
       <Example title="Long action button text">
         <UpsellCard
           {...exampleProps}
           action="This is a very long action button text that will get truncated"
-          dangerouslySetBackground={defaultBackground}
           description="This is a very long description text that will get truncated"
+          style={{ backgroundColor: defaultBackground }}
           title="This is a very long title text that will get truncated"
         />
       </Example>
@@ -86,14 +86,14 @@ const UpsellCardScreen = () => {
               Sign up
             </Button>
           }
-          dangerouslySetBackground={customTextNodeBackgroundColor}
           description={
-            <Text dangerouslySetColor={customTextNodeColor} font="label2">
+            <Text font="label2" style={{ color: customTextNodeColor }}>
               Start your free 30 day trial of Coinbase One
             </Text>
           }
+          style={{ backgroundColor: customTextNodeBackgroundColor }}
           title={
-            <Text dangerouslySetColor={customTextNodeColor} font="headline">
+            <Text font="headline" style={{ color: customTextNodeColor }}>
               Coinbase One
             </Text>
           }
@@ -102,21 +102,21 @@ const UpsellCardScreen = () => {
       <Example title="Custom Background color">
         <UpsellCard
           {...exampleProps}
-          dangerouslySetBackground={customBackgroundColor}
           description={
-            <Text dangerouslySetColor={customTextNodeColor} font="label2">
+            <Text font="label2" style={{ color: customTextNodeColor }}>
               Start your free 30 day trial of Coinbase One
             </Text>
           }
+          style={{ backgroundColor: customBackgroundColor }}
           title={
-            <Text dangerouslySetColor={customTextNodeColor} font="headline">
+            <Text font="headline" style={{ color: customTextNodeColor }}>
               Coinbase One
             </Text>
           }
         />
       </Example>
       <Example title="Custom Width">
-        <UpsellCard {...exampleProps} dangerouslySetBackground={defaultBackground} width="100%" />
+        <UpsellCard {...exampleProps} style={{ backgroundColor: defaultBackground }} width="100%" />
       </Example>
       <VStack gap={2} padding={3}>
         <Text font="title3">Carousel</Text>
@@ -126,19 +126,19 @@ const UpsellCardScreen = () => {
             <UpsellCard
               key="carouselItem1"
               {...exampleProps}
-              dangerouslySetBackground={defaultBackground}
+              style={{ backgroundColor: defaultBackground }}
               width={carouselCardWidth}
             />,
             <UpsellCard
               key="carouselItem2"
               {...exampleProps}
-              dangerouslySetBackground={defaultBackground}
+              style={{ backgroundColor: defaultBackground }}
               width={carouselCardWidth}
             />,
             <UpsellCard
               key="carouselItem3"
               {...exampleProps}
-              dangerouslySetBackground={defaultBackground}
+              style={{ backgroundColor: defaultBackground }}
               width={carouselCardWidth}
             />,
           ]}
diff --git a/packages/mobile/src/cards/__tests__/ContainedAssetCard.test.tsx b/packages/mobile/src/cards/__tests__/ContainedAssetCard.test.tsx
index 998705abf4..b763481fec 100644
--- a/packages/mobile/src/cards/__tests__/ContainedAssetCard.test.tsx
+++ b/packages/mobile/src/cards/__tests__/ContainedAssetCard.test.tsx
@@ -80,7 +80,7 @@ describe('ContainedAssetCard', () => {
         <ContainedAssetCard
           description="Description"
           header={<DummyHeader />}
-          maxWidth="none"
+          maxWidth={500}
           minWidth={120}
           subtitle="Subtitle"
           testID="card"
@@ -89,6 +89,6 @@ describe('ContainedAssetCard', () => {
       </DefaultThemeProvider>,
     );
 
-    expect(screen.getByTestId('card')).toHaveStyle({ maxWidth: 'none', minWidth: 120 });
+    expect(screen.getByTestId('card')).toHaveStyle({ maxWidth: 500, minWidth: 120 });
   });
 });
diff --git a/packages/mobile/src/cards/__tests__/UpsellCard.test.tsx b/packages/mobile/src/cards/__tests__/UpsellCard.test.tsx
index b90c33157d..a5e48084b9 100644
--- a/packages/mobile/src/cards/__tests__/UpsellCard.test.tsx
+++ b/packages/mobile/src/cards/__tests__/UpsellCard.test.tsx
@@ -81,10 +81,10 @@ describe('UpsellCard', () => {
     expect(screen.getByTestId(`${exampleProps.testID}-dismiss-button`)).toBeDefined();
   });
 
-  it('renders dangerouslySetBackground', () => {
+  it('renders custom background via style prop', () => {
     render(
       <DefaultThemeProvider>
-        <UpsellCard {...exampleProps} dangerouslySetBackground="#d3d3d3" />
+        <UpsellCard {...exampleProps} style={{ backgroundColor: '#d3d3d3' }} />
       </DefaultThemeProvider>,
     );
     expect(screen.getByTestId(exampleProps.testID as string)).toHaveStyle({
diff --git a/packages/mobile/src/carousel/Carousel.tsx b/packages/mobile/src/carousel/Carousel.tsx
index f54368683f..0575703a82 100644
--- a/packages/mobile/src/carousel/Carousel.tsx
+++ b/packages/mobile/src/carousel/Carousel.tsx
@@ -45,7 +45,7 @@ const wrap = (min: number, max: number, value: number): number => {
   return min + ((((value - min) % range) + range) % range);
 };
 
-export type CarouselItemRenderChildren = React.FC<{ isVisible: boolean }>;
+export type CarouselItemRenderChildren = (args: { isVisible: boolean }) => React.ReactNode;
 
 export type CarouselItemBaseProps = Omit<BoxBaseProps, 'children'> &
   SharedAccessibilityProps & {
@@ -130,10 +130,10 @@ export type CarouselPaginationComponentBaseProps = {
   paginationAccessibilityLabel?: string | ((pageIndex: number) => string);
   /**
    * Visual variant for the pagination indicators.
-   * - 'pill': All indicators are pill-shaped (default)
-   * - 'dot': Inactive indicators are small dots, active indicator expands to a pill
-   * @default 'pill'
-   * @note 'pill' variant is deprecated, use 'dot' instead
+   * When omitted, the default pagination component renders the current dot-style design.
+   * @default 'dot'
+   * @deprecated Prefer the default dot pagination or provide a custom `PaginationComponent`. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
    */
   variant?: 'pill' | 'dot';
 };
@@ -195,6 +195,11 @@ export type CarouselBaseProps = SharedProps &
      * Hides the pagination indicators (dots/bars showing current page).
      */
     hidePagination?: boolean;
+    /**
+     * @deprecated Use the default dot pagination, or provide a custom `PaginationComponent` if you need custom visuals. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
+     */
+    paginationVariant?: CarouselPaginationComponentBaseProps['variant'];
     /**
      * Custom component to render navigation arrows.
      * @default DefaultCarouselNavigation
@@ -264,14 +269,6 @@ export type CarouselBaseProps = SharedProps &
      * @default 3000 (3 seconds)
      */
     autoplayInterval?: number;
-    /**
-     * Visual variant for the pagination indicators.
-     * - 'pill': All indicators are pill-shaped (default)
-     * - 'dot': Inactive indicators are small dots, active indicator expands to a pill
-     * @default 'pill'
-     * @note 'pill' variant is deprecated, use 'dot' instead
-     */
-    paginationVariant?: CarouselPaginationComponentBaseProps['variant'];
   };
 
 export type CarouselProps = CarouselBaseProps & {
@@ -558,6 +555,7 @@ export const Carousel = memo(
         title,
         hideNavigation,
         hidePagination,
+        paginationVariant,
         drag = 'snap',
         snapMode = 'page',
         NavigationComponent = DefaultCarouselNavigation,
@@ -575,7 +573,6 @@ export const Carousel = memo(
         loop,
         autoplay,
         autoplayInterval = 3000,
-        paginationVariant,
         ...props
       } = mergedProps;
       const carouselScrollX = useRef(0);
@@ -1165,7 +1162,7 @@ export const Carousel = memo(
               {(title || !hideNavigation) && (
                 <HStack alignItems="center" justifyContent={title ? 'space-between' : 'flex-end'}>
                   {typeof title === 'string' ? (
-                    <Text font="title3" style={styles?.title}>
+                    <Text flexShrink={1} font="title3" numberOfLines={1} style={styles?.title}>
                       {title}
                     </Text>
                   ) : (
diff --git a/packages/mobile/src/carousel/DefaultCarouselPagination.tsx b/packages/mobile/src/carousel/DefaultCarouselPagination.tsx
index e45e2f1e4e..edaa47f6b2 100644
--- a/packages/mobile/src/carousel/DefaultCarouselPagination.tsx
+++ b/packages/mobile/src/carousel/DefaultCarouselPagination.tsx
@@ -50,6 +50,7 @@ const PaginationPill = memo(function PaginationPill({
       background={isActive ? 'bgPrimary' : 'bgLine'}
       borderColor="transparent"
       borderRadius={100}
+      borderWidth={0}
       height={INDICATOR_HEIGHT}
       onPress={onPress}
       style={style}
@@ -173,7 +174,7 @@ export const DefaultCarouselPagination = memo(function DefaultCarouselPagination
   style,
   styles,
   paginationAccessibilityLabel = defaultPaginationAccessibilityLabel,
-  variant = 'pill',
+  variant = 'dot',
 }: DefaultCarouselPaginationProps) {
   const theme = useTheme();
   const isDot = variant === 'dot';
@@ -190,7 +191,12 @@ export const DefaultCarouselPagination = memo(function DefaultCarouselPagination
       : paginationAccessibilityLabel;
 
   return (
-    <HStack gap={0.5} justifyContent="center" style={rootStyles}>
+    <HStack
+      gap={0.5}
+      justifyContent="center"
+      style={rootStyles}
+      testID={`carousel-pagination-${variant}`}
+    >
       {totalPages > 0 ? (
         Array.from({ length: totalPages }, (_, index) =>
           isDot ? (
diff --git a/packages/mobile/src/carousel/__figma__/Carousel.figma.tsx b/packages/mobile/src/carousel/__figma__/Carousel.figma.tsx
index 26597b66f8..e10a44c36d 100644
--- a/packages/mobile/src/carousel/__figma__/Carousel.figma.tsx
+++ b/packages/mobile/src/carousel/__figma__/Carousel.figma.tsx
@@ -18,7 +18,7 @@ figma.connect(
       }),
     },
     example: ({ title, hidePagination }) => (
-      <Carousel hidePagination={hidePagination} paginationVariant="dot" title={title}>
+      <Carousel hidePagination={hidePagination} title={title}>
         <CarouselItem id="1">{/* Item content */}</CarouselItem>
         <CarouselItem id="2">{/* Item content */}</CarouselItem>
         <CarouselItem id="3">{/* Item content */}</CarouselItem>
diff --git a/packages/mobile/src/carousel/__stories__/Carousel.stories.tsx b/packages/mobile/src/carousel/__stories__/Carousel.stories.tsx
index 35c54bd461..2ed4cb3a50 100644
--- a/packages/mobile/src/carousel/__stories__/Carousel.stories.tsx
+++ b/packages/mobile/src/carousel/__stories__/Carousel.stories.tsx
@@ -134,8 +134,6 @@ const BasicExamples = () => {
     <>
       <Example paddingX={0}>
         <Carousel
-          autoplay
-          paginationVariant="dot"
           styles={{
             root: { paddingHorizontal: horizontalPadding },
             carousel: { gap: horizontalGap },
@@ -152,12 +150,10 @@ const BasicExamples = () => {
       <Example paddingX={0}>
         <Carousel
           drag="snap"
-          paginationVariant="dot"
           snapMode="item"
           styles={{
             root: { paddingHorizontal: horizontalPadding },
             carousel: { gap: horizontalGap },
-            title: { color: theme.color.fgPrimary },
           }}
           title="Snap Item"
         >
@@ -173,7 +169,6 @@ const BasicExamples = () => {
           loop
           NavigationComponent={SeeAllComponent}
           drag="free"
-          paginationVariant="dot"
           snapMode="item"
           styles={{
             root: { paddingHorizontal: horizontalPadding },
@@ -195,7 +190,6 @@ const BasicExamples = () => {
       <Example paddingX={0}>
         <Carousel
           drag="snap"
-          paginationVariant="dot"
           snapMode="page"
           styles={{
             root: { paddingHorizontal: horizontalPadding },
@@ -223,7 +217,6 @@ const BasicExamples = () => {
       <Example paddingX={0}>
         <Carousel
           drag="none"
-          paginationVariant="dot"
           styles={{
             root: { paddingHorizontal: horizontalPadding },
             carousel: { gap: horizontalGap },
@@ -286,14 +279,14 @@ const CustomComponentsExample = () => {
             disabled={!canGoPrevious}
             name="caretLeft"
             onPress={onPrevious}
-            variant="foregroundMuted"
+            variant="secondary"
           />
           <IconButton
             accessibilityLabel="Next"
             disabled={!canGoNext}
             name="caretRight"
             onPress={onNext}
-            variant="foregroundMuted"
+            variant="secondary"
           />
         </HStack>
         <HStack alignItems="center" gap={1}>
@@ -371,7 +364,6 @@ const AutoplayExample = () => {
       <Carousel
         autoplay
         loop
-        paginationVariant="dot"
         styles={{
           root: { paddingHorizontal: theme.space[2] },
           carousel: { gap: theme.space[2] },
@@ -411,7 +403,6 @@ const DynamicContentExample = () => {
         </Button>
       </HStack>
       <Carousel
-        paginationVariant="dot"
         styles={{
           root: { paddingHorizontal: theme.space[3] },
           carousel: { gap: theme.space[2], height: 156 },
@@ -487,7 +478,6 @@ const AnimatedExample = () => {
   return (
     <Example paddingX={0}>
       <Carousel
-        paginationVariant="dot"
         styles={{
           root: { paddingHorizontal: theme.space[3] },
           carousel: { gap: theme.space[2] },
@@ -634,7 +624,6 @@ const LoopingExamples = () => {
         <Carousel
           loop
           drag="snap"
-          paginationVariant="dot"
           snapMode="page"
           styles={{
             root: { paddingHorizontal: horizontalPadding },
@@ -660,7 +649,6 @@ const LoopingExamples = () => {
           autoplay
           loop
           drag="snap"
-          paginationVariant="dot"
           snapMode="item"
           styles={{
             root: { paddingHorizontal: horizontalPadding },
diff --git a/packages/mobile/src/carousel/__tests__/Carousel.test.tsx b/packages/mobile/src/carousel/__tests__/Carousel.test.tsx
index a76580529c..d304996017 100644
--- a/packages/mobile/src/carousel/__tests__/Carousel.test.tsx
+++ b/packages/mobile/src/carousel/__tests__/Carousel.test.tsx
@@ -271,16 +271,47 @@ describe('Carousel', () => {
 
       render(<TestCarouselWithItems NavigationComponent={mockNavigation} itemCount={5} />);
 
-      expect(mockNavigation).toHaveBeenCalledWith(
+      expect(mockNavigation).toHaveBeenCalled();
+      expect(mockNavigation.mock.calls[0]?.[0]).toEqual(
         expect.objectContaining({
           onGoNext: expect.any(Function),
           onGoPrevious: expect.any(Function),
           disableGoNext: expect.any(Boolean),
           disableGoPrevious: expect.any(Boolean),
         }),
-        {},
       );
     });
+
+    it('does not pass a pagination variant by default', async () => {
+      const mockPagination = jest.fn((props: { variant?: 'pill' | 'dot' }) => null);
+
+      render(<TestCarouselWithItems PaginationComponent={mockPagination} itemCount={5} />);
+
+      await waitFor(() => {
+        expect(
+          mockPagination.mock.calls.some((call) => {
+            const props = call[0];
+            return props !== undefined && props.variant === undefined;
+          }),
+        ).toBe(true);
+      });
+    });
+
+    it('forwards deprecated paginationVariant to custom pagination components', async () => {
+      const mockPagination = jest.fn((props: { variant?: 'pill' | 'dot' }) => null);
+
+      render(
+        <TestCarouselWithItems
+          PaginationComponent={mockPagination}
+          itemCount={5}
+          paginationVariant="pill"
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockPagination.mock.calls.some((call) => call[0]?.variant === 'pill')).toBe(true);
+      });
+    });
   });
 
   describe('Accessibility', () => {
@@ -1181,7 +1212,7 @@ describe('Carousel', () => {
 
       fireEvent.press(screen.getByTestId('get-current-page'));
 
-      expect(screen.getByTestId('current-page-display')).toHaveTextContent('Page 1 of');
+      expect(screen.getByTestId('current-page-display')).toHaveTextContent(/Page 1 of/);
 
       fireEvent.press(screen.getByTestId('go-to-page-2'));
 
@@ -1194,7 +1225,7 @@ describe('Carousel', () => {
 
       fireEvent.press(screen.getByTestId('get-current-page'));
 
-      expect(screen.getByTestId('current-page-display')).toHaveTextContent('Page 1 of');
+      expect(screen.getByTestId('current-page-display')).toHaveTextContent(/Page 1 of/);
     });
   });
 
@@ -1215,9 +1246,13 @@ describe('Carousel', () => {
         </DefaultThemeProvider>,
       );
 
-      expect(screen.getByTestId('render-props-content')).toBeOnTheScreen();
-      expect(screen.getByTestId('visibility-indicator')).toBeOnTheScreen();
-      expect(screen.getByText('Content')).toBeOnTheScreen();
+      expect(
+        screen.getByTestId('render-props-content', { includeHiddenElements: true }),
+      ).toBeOnTheScreen();
+      expect(
+        screen.getByTestId('visibility-indicator', { includeHiddenElements: true }),
+      ).toBeOnTheScreen();
+      expect(screen.getByText('Content', { includeHiddenElements: true })).toBeOnTheScreen();
     });
 
     it('supports both regular children and render props', () => {
@@ -1241,11 +1276,21 @@ describe('Carousel', () => {
         </DefaultThemeProvider>,
       );
 
-      expect(screen.getByTestId('regular-content')).toBeOnTheScreen();
-      expect(screen.getByTestId('render-props-content')).toBeOnTheScreen();
-      expect(screen.getByText('Regular Content')).toBeOnTheScreen();
-      expect(screen.getByText('Render Props Content')).toBeOnTheScreen();
-      expect(screen.getByTestId('visibility-status')).toBeOnTheScreen();
+      expect(
+        screen.getByTestId('regular-content', { includeHiddenElements: true }),
+      ).toBeOnTheScreen();
+      expect(
+        screen.getByTestId('render-props-content', { includeHiddenElements: true }),
+      ).toBeOnTheScreen();
+      expect(
+        screen.getByText('Regular Content', { includeHiddenElements: true }),
+      ).toBeOnTheScreen();
+      expect(
+        screen.getByText('Render Props Content', { includeHiddenElements: true }),
+      ).toBeOnTheScreen();
+      expect(
+        screen.getByTestId('visibility-status', { includeHiddenElements: true }),
+      ).toBeOnTheScreen();
     });
   });
 
diff --git a/packages/mobile/src/carousel/__tests__/DefaultCarouselPagination.test.tsx b/packages/mobile/src/carousel/__tests__/DefaultCarouselPagination.test.tsx
index aa03b553d4..372ae3f35b 100644
--- a/packages/mobile/src/carousel/__tests__/DefaultCarouselPagination.test.tsx
+++ b/packages/mobile/src/carousel/__tests__/DefaultCarouselPagination.test.tsx
@@ -47,6 +47,20 @@ const renderPagination = (props: Partial<React.ComponentProps<typeof DefaultCaro
   );
 
 describe('DefaultCarouselPagination', () => {
+  describe('variant', () => {
+    it('defaults to the dot variant', () => {
+      renderPagination({ totalPages: 3 });
+
+      expect(screen.getByTestId('carousel-pagination-dot')).toBeOnTheScreen();
+    });
+
+    it('uses the pill variant when requested', () => {
+      renderPagination({ totalPages: 3, variant: 'pill' });
+
+      expect(screen.getByTestId('carousel-pagination-pill')).toBeOnTheScreen();
+    });
+  });
+
   describe('paginationAccessibilityLabel', () => {
     it('uses default function that includes page number when not provided', () => {
       renderPagination({ totalPages: 3 });
diff --git a/packages/mobile/src/cells/Cell.tsx b/packages/mobile/src/cells/Cell.tsx
index ece82c5bef..25b526f442 100644
--- a/packages/mobile/src/cells/Cell.tsx
+++ b/packages/mobile/src/cells/Cell.tsx
@@ -1,5 +1,11 @@
 import React, { memo, useMemo } from 'react';
-import { type StyleProp, StyleSheet, type ViewProps, type ViewStyle } from 'react-native';
+import {
+  type DimensionValue,
+  type StyleProp,
+  StyleSheet,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { CellPriority, SharedProps } from '@coinbase/cds-common/types';
 import { hasCellPriority } from '@coinbase/cds-common/utils/cell';
@@ -37,6 +43,7 @@ export type CellBaseProps = BoxBaseProps &
   SharedProps &
   LinkableProps &
   Pick<PressableProps, 'blendStyles'> & {
+    /** Accessory element rendered at the end of the cell (e.g., chevron). */
     accessory?: React.ReactElement<CellAccessoryProps>;
     /** Custom accessory node rendered at the end of the cell. Takes precedence over `accessory`. */
     accessoryNode?: React.ReactNode;
@@ -61,7 +68,7 @@ export type CellBaseProps = BoxBaseProps &
      * @deprecated Use `styles.end` instead. This will be removed in a future major release.
      * @deprecationExpectedRemoval v9
      */
-    detailWidth?: number | string;
+    detailWidth?: DimensionValue;
     /** Is the cell disabled? Will apply opacity and disable interaction. */
     disabled?: boolean;
     /** Which piece of content has the highest priority in regards to text truncation, growing, and shrinking. */
@@ -109,7 +116,24 @@ export const Cell = memo(function Cell(_props: CellProps) {
     accessory,
     accessoryNode,
     alignItems = 'center',
+    bordered,
+    borderedBottom,
+    borderedEnd,
+    borderedHorizontal,
+    borderedStart,
+    borderedTop,
+    borderedVertical,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderBottomWidth,
+    borderColor,
+    borderEndWidth,
     borderRadius = 200,
+    borderStartWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderTopWidth,
+    borderWidth,
     children,
     styles,
     end,
@@ -148,9 +172,55 @@ export const Cell = memo(function Cell(_props: CellProps) {
 
   const { marginX: innerSpacingMarginX, ...innerSpacingWithoutMarginX } = innerSpacing;
 
+  // Border props must be applied to the internal Pressable wrapper for correct visual rendering.
+  // The outer Box was only meant to create padding outside the Pressable area; this behavior
+  // will be removed in https://linear.app/coinbase/issue/CDS-1512/remove-legacy-normal-spacing-variant-from-listcell.
+  const borderProps = useMemo(
+    () => ({
+      bordered,
+      borderedBottom,
+      borderedEnd,
+      borderedHorizontal,
+      borderedStart,
+      borderedTop,
+      borderedVertical,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      borderBottomWidth,
+      borderColor,
+      borderEndWidth,
+      borderRadius,
+      borderStartWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderTopWidth,
+      borderWidth,
+    }),
+    [
+      bordered,
+      borderedBottom,
+      borderedEnd,
+      borderedHorizontal,
+      borderedStart,
+      borderedTop,
+      borderedVertical,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      borderBottomWidth,
+      borderColor,
+      borderEndWidth,
+      borderRadius,
+      borderStartWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderTopWidth,
+      borderWidth,
+    ],
+  );
+
   const content = useMemo(() => {
     const contentContainerProps = {
-      borderRadius,
+      ...borderProps,
       testID,
       renderToHardwareTextureAndroid: disabled,
       ...(selected ? { background } : {}),
@@ -238,7 +308,7 @@ export const Cell = memo(function Cell(_props: CellProps) {
       </VStack>
     );
   }, [
-    borderRadius,
+    borderProps,
     testID,
     disabled,
     selected,
@@ -286,7 +356,7 @@ export const Cell = memo(function Cell(_props: CellProps) {
           accessibilityState={{ disabled, ...accessibilityState }}
           background="bg"
           blendStyles={blendStyles}
-          borderRadius={borderRadius}
+          {...borderProps}
           contentStyle={pressStyles}
           disabled={disabled}
           onPress={onPress}
@@ -310,7 +380,7 @@ export const Cell = memo(function Cell(_props: CellProps) {
     styles?.pressable,
     accessibilityState,
     blendStyles,
-    borderRadius,
+    borderProps,
     testID,
   ]);
 
diff --git a/packages/mobile/src/cells/CellAccessory.tsx b/packages/mobile/src/cells/CellAccessory.tsx
index 121498feab..07e3fe7cf3 100644
--- a/packages/mobile/src/cells/CellAccessory.tsx
+++ b/packages/mobile/src/cells/CellAccessory.tsx
@@ -40,7 +40,7 @@ export const CellAccessory = memo(function CellAccessory({ type, ...props }: Cel
   }
 
   return (
-    <Box {...props} testID="accessory">
+    <Box testID="accessory" {...props}>
       {icon}
     </Box>
   );
diff --git a/packages/mobile/src/cells/ContentCellFallback.tsx b/packages/mobile/src/cells/ContentCellFallback.tsx
index b3ebece0f2..74402448f2 100644
--- a/packages/mobile/src/cells/ContentCellFallback.tsx
+++ b/packages/mobile/src/cells/ContentCellFallback.tsx
@@ -39,6 +39,10 @@ export type ContentCellFallbackProps = FallbackRectWidthProps &
     title?: boolean;
   };
 
+/**
+ * @deprecated Please use the new ListCellFallback component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const ContentCellFallback = memo(function ContentCellFallback({
   accessory,
   accessoryNode,
diff --git a/packages/mobile/src/cells/ListCell.tsx b/packages/mobile/src/cells/ListCell.tsx
index 611d0a3861..631b4dc10e 100644
--- a/packages/mobile/src/cells/ListCell.tsx
+++ b/packages/mobile/src/cells/ListCell.tsx
@@ -4,7 +4,7 @@ import { compactListHeight, listHeight } from '@coinbase/cds-common/tokens/cell'
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { VStack } from '../layout/VStack';
-import { Text, type TextProps } from '../typography/Text';
+import { Text } from '../typography/Text';
 
 import { Cell, type CellBaseProps, type CellProps, type CellSpacing } from './Cell';
 import { CellAccessory, type CellAccessoryType } from './CellAccessory';
@@ -179,16 +179,20 @@ export const ListCell = memo(function ListCell(_props: ListCellProps) {
     variant,
     onPress,
     spacingVariant = compact ? 'compact' : 'normal',
+    minHeight: minHeightProp,
     style,
     styles,
     ...props
   } = mergedProps;
+  // we need to maintain fixed min-heights for the different cell style variants until they are dropped in a breaking change
+  // see CDS-1620
   const minHeight =
-    spacingVariant === 'compact'
+    minHeightProp ??
+    (spacingVariant === 'compact'
       ? compactListHeight
       : spacingVariant === 'normal'
         ? listHeight
-        : undefined;
+        : undefined);
   const accessoryType = selected && !disableSelectionAccessory ? 'selected' : accessory;
   const hasDetails = Boolean(detail || subdetail || detailNode || subdetailNode);
 
diff --git a/packages/mobile/src/cells/MediaFallback.tsx b/packages/mobile/src/cells/MediaFallback.tsx
index abc8075c16..fb5803d58b 100644
--- a/packages/mobile/src/cells/MediaFallback.tsx
+++ b/packages/mobile/src/cells/MediaFallback.tsx
@@ -14,8 +14,8 @@ export const MediaFallback = memo(function MediaFallback({
   ...fallbackProps
 }: MediaFallbackProps) {
   if (type === 'image') {
-    return <Fallback {...fallbackProps} height={imageSize} shape="squircle" width={imageSize} />;
+    return <Fallback height={imageSize} shape="squircle" width={imageSize} {...fallbackProps} />;
   }
 
-  return <Fallback {...fallbackProps} height={mediaSize} shape="circle" width={mediaSize} />;
+  return <Fallback height={mediaSize} shape="circle" width={mediaSize} {...fallbackProps} />;
 });
diff --git a/packages/mobile/src/cells/__stories__/ListCell.stories.tsx b/packages/mobile/src/cells/__stories__/ListCell.stories.tsx
index 74ab9adb05..3890b9b3e3 100644
--- a/packages/mobile/src/cells/__stories__/ListCell.stories.tsx
+++ b/packages/mobile/src/cells/__stories__/ListCell.stories.tsx
@@ -795,6 +795,77 @@ const WithHelperText = () => (
   </>
 );
 
+const BorderCustomization = () => {
+  const [isCondensed, setIsCondensed] = useState(true);
+  const spacingVariant = isCondensed ? 'condensed' : 'normal';
+
+  return (
+    <VStack gap={2} padding={2}>
+      <Switch
+        checked={isCondensed}
+        onChange={(_, nextChecked) => setIsCondensed(Boolean(nextChecked))}
+      >
+        Spacing variant: {spacingVariant}
+      </Switch>
+      <ListCell
+        bordered
+        onPress={onPressConsole}
+        spacingVariant={spacingVariant}
+        title="bordered"
+      />
+      <ListCell
+        borderedTop
+        onPress={onPressConsole}
+        spacingVariant={spacingVariant}
+        title="borderedTop"
+      />
+      <ListCell
+        borderedHorizontal
+        onPress={onPressConsole}
+        spacingVariant={spacingVariant}
+        title="borderedHorizontal"
+      />
+      <ListCell
+        bordered
+        borderColor="accentBoldPurple"
+        onPress={onPressConsole}
+        spacingVariant={spacingVariant}
+        title="borderColor"
+      />
+      <ListCell
+        borderColor="bgLine"
+        borderWidth={200}
+        onPress={onPressConsole}
+        spacingVariant={spacingVariant}
+        title="borderWidth"
+      />
+      <ListCell
+        borderColor="bgLine"
+        borderTopWidth={200}
+        onPress={onPressConsole}
+        spacingVariant={spacingVariant}
+        title="borderTopWidth"
+      />
+      <ListCell
+        borderColor="bgLine"
+        borderRadius={200}
+        borderWidth={100}
+        onPress={onPressConsole}
+        spacingVariant={spacingVariant}
+        title="borderRadius"
+      />
+      <ListCell
+        borderColor="bgLine"
+        borderTopLeftRadius={300}
+        borderWidth={100}
+        onPress={onPressConsole}
+        spacingVariant={spacingVariant}
+        title="borderTopLeftRadius"
+      />
+    </VStack>
+  );
+};
+
 const CustomSpacing = () => (
   <>
     <ListCell
@@ -824,7 +895,7 @@ const CustomSpacing = () => (
 const CondensedListCell = () => {
   const theme = useTheme();
   return (
-    <VStack width="360px">
+    <VStack>
       <ListCell
         accessory="more"
         description="Description"
@@ -1060,7 +1131,7 @@ const UseCaseShowcase = () => {
   }, []);
 
   return (
-    <VStack width="360px">
+    <VStack>
       <ListCell
         accessibilityLabel={`BTC, value ${currency.format(btcPrice)}, amount ${btcAmt.toLocaleString()} BTC`}
         // If you need to pass non-string values to the detail or subdetail,
@@ -1214,6 +1285,9 @@ const ListCellScreen = () => {
       <Example inline title="WithHelperText" titlePadding={titlePadding}>
         <WithHelperText />
       </Example>
+      <Example inline title="BorderCustomization" titlePadding={titlePadding}>
+        <BorderCustomization />
+      </Example>
       <Example inline title="CustomSpacing" titlePadding={titlePadding}>
         <CustomSpacing />
       </Example>
diff --git a/packages/mobile/src/cells/__tests__/CellMedia.test.tsx b/packages/mobile/src/cells/__tests__/CellMedia.test.tsx
index 4eaeea1bda..e514d62ac6 100644
--- a/packages/mobile/src/cells/__tests__/CellMedia.test.tsx
+++ b/packages/mobile/src/cells/__tests__/CellMedia.test.tsx
@@ -192,42 +192,6 @@ describe('CellMedia', () => {
     expect(screen.getByText(glyphMap['arrowUp-24-inactive'])).toBeTruthy();
   });
 
-  it('renders an asset', () => {
-    render(
-      <DefaultThemeProvider>
-        <CellMedia source="some/image/path" type="asset" />
-      </DefaultThemeProvider>,
-    );
-    const image = screen.getByRole('image');
-
-    expect(image).toHaveProp('source', { cache: undefined, uri: 'some/image/path' });
-    expect(image).toHaveStyle({ borderRadius: 100000 });
-  });
-
-  it('renders an avatar', () => {
-    render(
-      <DefaultThemeProvider>
-        <CellMedia source="some/image/path" type="avatar" />
-      </DefaultThemeProvider>,
-    );
-    const image = screen.getByRole('image');
-
-    expect(image).toHaveProp('source', { cache: undefined, uri: 'some/image/path' });
-    expect(image).toHaveStyle({ borderRadius: 100000 });
-  });
-
-  it('renders an image', () => {
-    render(
-      <DefaultThemeProvider>
-        <CellMedia source="some/image/path" type="image" />
-      </DefaultThemeProvider>,
-    );
-    const image = screen.getByRole('image');
-
-    expect(image).toHaveProp('source', { cache: undefined, uri: 'some/image/path' });
-    expect(image).toHaveStyle({ borderRadius: 8 });
-  });
-
   it('renders a pictogram', () => {
     render(
       <DefaultThemeProvider>
@@ -239,46 +203,6 @@ describe('CellMedia', () => {
   });
 
   describe('at normal scale', () => {
-    it('sets icon size', () => {
-      render(
-        <DefaultThemeProvider>
-          <CellMedia name="arrowUp" type="icon" />
-        </DefaultThemeProvider>,
-      );
-
-      expect(screen.getByRole('image')).toHaveStyle({ width: 32, height: 32 });
-    });
-
-    it('sets asset size', () => {
-      render(
-        <DefaultThemeProvider>
-          <CellMedia source="some/image/path" type="asset" />
-        </DefaultThemeProvider>,
-      );
-
-      expect(screen.getByRole('image')).toHaveStyle({ width: 32, height: 32 });
-    });
-
-    it('sets avatar size', () => {
-      render(
-        <DefaultThemeProvider>
-          <CellMedia source="some/image/path" type="avatar" />
-        </DefaultThemeProvider>,
-      );
-
-      expect(screen.getByRole('image')).toHaveStyle({ width: 32, height: 32 });
-    });
-
-    it('sets image size', () => {
-      render(
-        <DefaultThemeProvider>
-          <CellMedia source="some/image/path" type="image" />
-        </DefaultThemeProvider>,
-      );
-
-      expect(screen.getByRole('image')).toHaveStyle({ width: 48, height: 48 });
-    });
-
     it('sets pictogram size', () => {
       render(
         <DefaultThemeProvider>
diff --git a/packages/mobile/src/cells/__tests__/ContentCell.test.tsx b/packages/mobile/src/cells/__tests__/ContentCell.test.tsx
index 234b9c9a60..d0edf9fb2f 100644
--- a/packages/mobile/src/cells/__tests__/ContentCell.test.tsx
+++ b/packages/mobile/src/cells/__tests__/ContentCell.test.tsx
@@ -231,7 +231,7 @@ describe('ContentCell', () => {
       </DefaultThemeProvider>,
     );
 
-    expect(screen.container).not.toBeNull();
+    expect(screen.root).not.toBeNull();
   });
 
   it('renders override nodes when provided', () => {
@@ -290,9 +290,9 @@ describe('ContentCell', () => {
       </DefaultThemeProvider>,
     );
 
-    const titleInstance = screen.getByText('Title').parent;
-    const subtitleInstance = screen.getByText('Subtitle').parent;
-    const descriptionInstance = screen.getByText('Description').parent;
+    const titleInstance = screen.getByText('Title').parent.parent;
+    const subtitleInstance = screen.getByText('Subtitle').parent.parent;
+    const descriptionInstance = screen.getByText('Description').parent.parent;
 
     expect(titleInstance?.props.numberOfLines).toBe(2);
     expect(subtitleInstance?.props.font).toBe('label1');
@@ -321,6 +321,6 @@ describe('ContentCell', () => {
     );
 
     const metaInstance = screen.getByText('Meta').parent;
-    expect(metaInstance?.props.style).toBe(metaStyle);
+    expect(metaInstance?.props.style).toContainEqual(metaStyle);
   });
 });
diff --git a/packages/mobile/src/cells/__tests__/ContentCellFallback.test.tsx b/packages/mobile/src/cells/__tests__/ContentCellFallback.test.tsx
index af6fa9ce62..4e50fd85b9 100644
--- a/packages/mobile/src/cells/__tests__/ContentCellFallback.test.tsx
+++ b/packages/mobile/src/cells/__tests__/ContentCellFallback.test.tsx
@@ -29,7 +29,7 @@ describe('ContentCellFallback', () => {
         <ContentCellFallback media="image" />
       </DefaultThemeProvider>,
     );
-    expect(screen.getByText('MediaFallback image')).toBeDefined();
+    expect(screen.getByText('MediaFallback image', { includeHiddenElements: true })).toBeDefined();
   });
 
   it('should render description fallback', () => {
@@ -38,7 +38,7 @@ describe('ContentCellFallback', () => {
         <ContentCellFallback description disableRandomRectWidth rectWidthVariant={1} />
       </DefaultThemeProvider>,
     );
-    expect(screen.getByText('Fallback')).toBeDefined();
+    expect(screen.getByText('Fallback', { includeHiddenElements: true })).toBeDefined();
     expect(Fallback).toHaveBeenCalledWith(
       expect.objectContaining({
         disableRandomRectWidth: true,
@@ -47,7 +47,7 @@ describe('ContentCellFallback', () => {
         rectWidthVariant: getRectWidthVariant(1, 3),
         width: 110,
       }),
-      {},
+      undefined,
     );
   });
 
@@ -74,7 +74,7 @@ describe('ContentCellFallback', () => {
         <ContentCellFallback disableRandomRectWidth title rectWidthVariant={1} />
       </DefaultThemeProvider>,
     );
-    expect(screen.getByText('Fallback')).toBeDefined();
+    expect(screen.getByText('Fallback', { includeHiddenElements: true })).toBeDefined();
     expect(Fallback).toHaveBeenCalledWith(
       expect.objectContaining({
         disableRandomRectWidth: true,
@@ -82,7 +82,7 @@ describe('ContentCellFallback', () => {
         rectWidthVariant: getRectWidthVariant(1, 1),
         width: 90,
       }),
-      {},
+      undefined,
     );
   });
 
@@ -92,7 +92,7 @@ describe('ContentCellFallback', () => {
         <ContentCellFallback disableRandomRectWidth subtitle rectWidthVariant={1} />
       </DefaultThemeProvider>,
     );
-    expect(screen.getByText('Fallback')).toBeDefined();
+    expect(screen.getByText('Fallback', { includeHiddenElements: true })).toBeDefined();
     expect(Fallback).toHaveBeenCalledWith(
       expect.objectContaining({
         disableRandomRectWidth: true,
@@ -100,7 +100,7 @@ describe('ContentCellFallback', () => {
         rectWidthVariant: getRectWidthVariant(1, 2),
         width: 90,
       }),
-      {},
+      undefined,
     );
   });
 
diff --git a/packages/mobile/src/cells/__tests__/ListCell.test.tsx b/packages/mobile/src/cells/__tests__/ListCell.test.tsx
index b6222283c4..b3aa9a7bc4 100644
--- a/packages/mobile/src/cells/__tests__/ListCell.test.tsx
+++ b/packages/mobile/src/cells/__tests__/ListCell.test.tsx
@@ -3,41 +3,11 @@ import { noop } from '@coinbase/cds-utils';
 import { render, screen } from '@testing-library/react-native';
 
 import { Button } from '../../buttons';
-import { DefaultThemeProvider } from '../../utils/testHelpers';
+import { DefaultThemeProvider, treeHasStyleProp } from '../../utils/testHelpers';
 import { CellHelperText } from '../CellHelperText';
 import { CellMedia } from '../CellMedia';
 import { ListCell } from '../ListCell';
 
-function flattenStyle(style: unknown): Array<Record<string, unknown>> {
-  if (!style) return [];
-  if (Array.isArray(style)) return style.flatMap(flattenStyle);
-  if (typeof style === 'object') return [style as Record<string, unknown>];
-  return [];
-}
-
-function treeHasStyleProp(
-  tree: unknown,
-  predicate: (style: Record<string, unknown>) => boolean,
-): boolean {
-  if (!tree) return false;
-
-  if (Array.isArray(tree)) {
-    return tree.some((node) => treeHasStyleProp(node, predicate));
-  }
-
-  if (typeof tree !== 'object') return false;
-
-  const node = tree as {
-    props?: { style?: unknown };
-    children?: unknown[];
-  };
-
-  const styles = flattenStyle(node.props?.style);
-  if (styles.some(predicate)) return true;
-
-  return (node.children ?? []).some((child) => treeHasStyleProp(child, predicate));
-}
-
 describe('ListCell', () => {
   it('renders a Text component title', () => {
     render(
@@ -288,7 +258,7 @@ describe('ListCell', () => {
       </DefaultThemeProvider>,
     );
 
-    expect(screen.getByText('Helper Text')).toBeTruthy();
+    expect(screen.getByText(/Helper Text/, { includeHiddenElements: true })).toBeTruthy();
   });
 
   it('renders empty strings without crashing', () => {
@@ -298,7 +268,7 @@ describe('ListCell', () => {
       </DefaultThemeProvider>,
     );
 
-    expect(screen.container).not.toBeNull();
+    expect(screen.root).not.toBeNull();
   });
 
   it('can set an accessibilityLabel and accessibilityHint when a pressable', () => {
diff --git a/packages/mobile/src/cells/__tests__/ListCellFallback.test.tsx b/packages/mobile/src/cells/__tests__/ListCellFallback.test.tsx
index 7aa24522cb..21935b0439 100644
--- a/packages/mobile/src/cells/__tests__/ListCellFallback.test.tsx
+++ b/packages/mobile/src/cells/__tests__/ListCellFallback.test.tsx
@@ -20,7 +20,9 @@ describe('ListCellFallback', () => {
         <ListCellFallback description />
       </DefaultThemeProvider>,
     );
-    expect(screen.getByTestId('list-cell-fallback-description')).toBeTruthy();
+    expect(
+      screen.getByTestId('list-cell-fallback-description', { includeHiddenElements: true }),
+    ).toBeTruthy();
   });
 
   it('renders a Fallback component if detail is passed', () => {
@@ -29,7 +31,9 @@ describe('ListCellFallback', () => {
         <ListCellFallback detail />
       </DefaultThemeProvider>,
     );
-    expect(screen.getByTestId('list-cell-fallback-detail')).toBeTruthy();
+    expect(
+      screen.getByTestId('list-cell-fallback-detail', { includeHiddenElements: true }),
+    ).toBeTruthy();
   });
 
   it('renders a Fallback component if subdetail is passed', () => {
@@ -38,7 +42,9 @@ describe('ListCellFallback', () => {
         <ListCellFallback subdetail />
       </DefaultThemeProvider>,
     );
-    expect(screen.getByTestId('list-cell-fallback-subdetail')).toBeTruthy();
+    expect(
+      screen.getByTestId('list-cell-fallback-subdetail', { includeHiddenElements: true }),
+    ).toBeTruthy();
   });
 
   it('renders a Fallback component if title is passed', () => {
@@ -47,7 +53,9 @@ describe('ListCellFallback', () => {
         <ListCellFallback title />
       </DefaultThemeProvider>,
     );
-    expect(screen.getByTestId('list-cell-fallback-title')).toBeTruthy();
+    expect(
+      screen.getByTestId('list-cell-fallback-title', { includeHiddenElements: true }),
+    ).toBeTruthy();
   });
 
   it('renders a MediaFallback component if media is passed', () => {
@@ -56,7 +64,9 @@ describe('ListCellFallback', () => {
         <ListCellFallback media="asset" />
       </DefaultThemeProvider>,
     );
-    expect(screen.getByTestId('list-cell-fallback-media')).toBeTruthy();
+    expect(
+      screen.getByTestId('list-cell-fallback-media', { includeHiddenElements: true }),
+    ).toBeTruthy();
   });
 
   it('renders a Fallback component if helperText is passed', () => {
@@ -65,7 +75,9 @@ describe('ListCellFallback', () => {
         <ListCellFallback helperText />
       </DefaultThemeProvider>,
     );
-    expect(screen.getByTestId('list-cell-fallback-helper-text')).toBeTruthy();
+    expect(
+      screen.getByTestId('list-cell-fallback-helper-text', { includeHiddenElements: true }),
+    ).toBeTruthy();
   });
 
   it('renders ListCellFallback component with innerSpacing and outerSpacing', () => {
diff --git a/packages/mobile/src/chips/Chip.tsx b/packages/mobile/src/chips/Chip.tsx
index 1fffff312d..46d6164443 100644
--- a/packages/mobile/src/chips/Chip.tsx
+++ b/packages/mobile/src/chips/Chip.tsx
@@ -71,6 +71,7 @@ export const Chip = memo(
         paddingX={paddingX}
         paddingY={paddingY}
         style={[contentStyle, styles?.content]}
+        testID={testID ? `${testID}-content` : undefined}
       >
         {start}
         {typeof children === 'string' ? (
diff --git a/packages/mobile/src/chips/ChipProps.ts b/packages/mobile/src/chips/ChipProps.ts
index bb71eb559d..1238c0db25 100644
--- a/packages/mobile/src/chips/ChipProps.ts
+++ b/packages/mobile/src/chips/ChipProps.ts
@@ -1,9 +1,5 @@
-import { type StyleProp, type ViewStyle } from 'react-native';
-import {
-  type DimensionValue,
-  type SharedAccessibilityProps,
-  type SharedProps,
-} from '@coinbase/cds-common/types';
+import { type DimensionValue, type StyleProp, type ViewStyle } from 'react-native';
+import { type SharedAccessibilityProps, type SharedProps } from '@coinbase/cds-common/types';
 
 import type { PressableProps } from '../system';
 
diff --git a/packages/mobile/src/chips/__tests__/Chip.test.tsx b/packages/mobile/src/chips/__tests__/Chip.test.tsx
index 5f7fde7fc5..32307cd4ae 100644
--- a/packages/mobile/src/chips/__tests__/Chip.test.tsx
+++ b/packages/mobile/src/chips/__tests__/Chip.test.tsx
@@ -61,7 +61,7 @@ describe('Chip', () => {
   it('renders correctly when passing custom styles to contentStyle prop', () => {
     render(<TestChip contentStyle={customContentStyle} />);
 
-    expect(screen.getByTestId(chipTestID).children[0]).toHaveStyle(customContentStyle);
+    expect(screen.getByTestId(`${chipTestID}-content`)).toHaveStyle(customContentStyle);
   });
 
   it('applies custom styles to root and content', () => {
@@ -72,8 +72,7 @@ describe('Chip', () => {
 
     render(<TestChip styles={styles} />);
 
-    const chip = screen.getByTestId(chipTestID);
-    expect(chip).toHaveStyle({ borderWidth: 2 });
-    expect(chip.children[0]).toHaveStyle({ paddingVertical: 10 });
+    expect(screen.getByTestId(chipTestID)).toHaveStyle({ borderWidth: 2 });
+    expect(screen.getByTestId(`${chipTestID}-content`)).toHaveStyle({ paddingVertical: 10 });
   });
 });
diff --git a/packages/mobile/src/coachmark/Coachmark.tsx b/packages/mobile/src/coachmark/Coachmark.tsx
index b8dee35f7e..e937c2f5f1 100644
--- a/packages/mobile/src/coachmark/Coachmark.tsx
+++ b/packages/mobile/src/coachmark/Coachmark.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, memo } from 'react';
 import { useWindowDimensions } from 'react-native';
-import type { View } from 'react-native';
-import { type DimensionValue, type SharedProps } from '@coinbase/cds-common';
+import type { DimensionValue, View } from 'react-native';
+import { type SharedProps } from '@coinbase/cds-common';
 
 import { IconButton } from '../buttons';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -70,13 +70,13 @@ export const Coachmark = memo(
     return (
       <InvertedThemeProvider>
         <VStack
-          {...props}
           ref={ref}
           borderRadius={400}
           maxWidth={windowWidth - paddingX * 2}
           overflow="hidden"
           testID={testID}
           width={width}
+          {...props}
         >
           {media}
           <VStack background="bg" padding={2}>
diff --git a/packages/mobile/src/coachmark/__tests__/Coachmark.test.tsx b/packages/mobile/src/coachmark/__tests__/Coachmark.test.tsx
index 0e318f1d4a..29f2c08c5f 100644
--- a/packages/mobile/src/coachmark/__tests__/Coachmark.test.tsx
+++ b/packages/mobile/src/coachmark/__tests__/Coachmark.test.tsx
@@ -83,7 +83,7 @@ describe('Coachmark', () => {
       </DefaultThemeProvider>,
     );
 
-    expect(screen.getByTestId('remoteimage')).toBeTruthy();
+    expect(screen.getByTestId('remoteimage', { includeHiddenElements: true })).toBeTruthy();
   });
 
   it('renders with custom width', () => {
diff --git a/packages/mobile/src/controls/CheckboxGroup.tsx b/packages/mobile/src/controls/CheckboxGroup.tsx
index 53844b48fa..5142c91c2a 100644
--- a/packages/mobile/src/controls/CheckboxGroup.tsx
+++ b/packages/mobile/src/controls/CheckboxGroup.tsx
@@ -6,29 +6,7 @@ import { isDevelopment } from '@coinbase/cds-utils';
 import { Checkbox, type CheckboxProps } from './Checkbox';
 import { ControlGroup } from './ControlGroup';
 
-/**
- * @deprecated CheckboxGroup is deprecated. Use ControlGroup with accessibilityRole="combobox" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- *
- * @example
- * // Instead of:
- * <CheckboxGroup selectedValues={new Set(['value1'])} onChange={onChange}>
- *   <Checkbox value="value1">Option 1</Checkbox>
- * </CheckboxGroup>
- *
- * // Use:
- * <ControlGroup
- *   accessibilityRole="combobox"
- *   ControlComponent={Checkbox}
- *   options={[{ value: 'value1', children: 'Option 1' }]}
- *   value={['value1']}
- *   onChange={(value) => onChange(value)}
- * />
- */
-export type CheckboxGroupBaseProps<CheckboxValue extends string | number> = Omit<
-  ViewProps,
-  'children'
-> &
+type CheckboxGroupBaseProps<CheckboxValue extends string | number> = Omit<ViewProps, 'children'> &
   SharedProps & {
     /** Checkbox elements that are part of the checkbox group. */
     children: React.ReactElement[];
@@ -40,12 +18,7 @@ export type CheckboxGroupBaseProps<CheckboxValue extends string | number> = Omit
     onChange?: (value?: CheckboxValue) => void;
   };
 
-/**
- * @deprecated CheckboxGroup is deprecated. Use ControlGroup with accessibilityRole="combobox" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
-export type CheckboxGroupProps<CheckboxValue extends string> =
-  CheckboxGroupBaseProps<CheckboxValue>;
+type CheckboxGroupProps<CheckboxValue extends string> = CheckboxGroupBaseProps<CheckboxValue>;
 
 // Follows behavior describe in https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-2/checkbox-2.html
 const CheckboxGroupWithRef = forwardRef(function CheckboxGroupWithRef<CheckboxValue extends string>(
diff --git a/packages/mobile/src/controls/HelperText.tsx b/packages/mobile/src/controls/HelperText.tsx
index 205a86b8e7..275d0413ab 100644
--- a/packages/mobile/src/controls/HelperText.tsx
+++ b/packages/mobile/src/controls/HelperText.tsx
@@ -17,6 +17,13 @@ export type HelperTextProps = {
   errorIconAccessibilityLabel?: string;
   /** Test ID for the error icon */
   errorIconTestID?: string;
+  /** Custom styles for individual elements of the HelperText component */
+  styles?: {
+    /** Root text element */
+    root?: TextProps['style'];
+    /** Error icon element */
+    icon?: TextProps['style'];
+  };
 } & TextProps;
 
 export const HelperText = memo(function HelperText({
@@ -26,6 +33,8 @@ export const HelperText = memo(function HelperText({
   children,
   align,
   dangerouslySetColor,
+  style,
+  styles,
   ...props
 }: HelperTextProps) {
   const theme = useTheme();
@@ -36,14 +45,22 @@ export const HelperText = memo(function HelperText({
   const glyph = glyphMap[glyphKey];
 
   const iconStyle = useMemo(
-    () => ({
-      fontFamily: 'CoinbaseIcons',
-      fontSize: iconSize,
-      height: iconSize,
-      width: iconSize,
-      letterSpacing: 4,
-    }),
-    [iconSize],
+    () => [
+      {
+        fontFamily: 'CoinbaseIcons',
+        fontSize: iconSize,
+        height: iconSize,
+        width: iconSize,
+        letterSpacing: 4,
+      },
+      // TODO: when we actually remove dangerouslySetColor:
+      // when migrating from dangerouslySetColor to style.color,
+      // root style/className color will not automatically style the error icon like dangerouslySetColor.
+      // Consumers must set both styles.root and styles.icon (or classNames equivalents).
+      // We need to have a migrator handle this or document in future migration guide.
+      styles?.icon,
+    ],
+    [iconSize, styles?.icon],
   );
 
   return (
@@ -52,6 +69,7 @@ export const HelperText = memo(function HelperText({
       color={color}
       dangerouslySetColor={dangerouslySetColor}
       font="label2"
+      style={[style, styles?.root]}
       {...props}
     >
       {color === 'fgNegative' && (
diff --git a/packages/mobile/src/controls/InputIconButton.tsx b/packages/mobile/src/controls/InputIconButton.tsx
index 26cd0c8440..95d93ac754 100644
--- a/packages/mobile/src/controls/InputIconButton.tsx
+++ b/packages/mobile/src/controls/InputIconButton.tsx
@@ -12,7 +12,7 @@ export const variantTransformMap: Record<InputVariant, IconButtonVariant> = {
   negative: 'primary',
   foreground: 'primary',
   primary: 'primary',
-  foregroundMuted: 'foregroundMuted',
+  foregroundMuted: 'secondary',
   secondary: 'secondary',
 };
 
diff --git a/packages/mobile/src/controls/InputStack.tsx b/packages/mobile/src/controls/InputStack.tsx
index 1f249e6575..b47e783d3d 100644
--- a/packages/mobile/src/controls/InputStack.tsx
+++ b/packages/mobile/src/controls/InputStack.tsx
@@ -2,6 +2,7 @@ import React, { memo, useMemo } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import { inputStackGap } from '@coinbase/cds-common/tokens/input';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
 import type { InputVariant } from '@coinbase/cds-common/types/InputBaseProps';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
@@ -88,7 +89,16 @@ export type InputStackBaseProps = SharedProps & {
 };
 
 export type InputStackProps = Omit<BoxProps, 'width' | 'height' | 'borderRadius'> &
-  InputStackBaseProps;
+  InputStackBaseProps & {
+    styles?: {
+      /** Root container element */
+      root?: StyleProp<ViewStyle>;
+      /** Input horizontal container element */
+      inputContainer?: StyleProp<ViewStyle>;
+      /** Input area element */
+      input?: StyleProp<ViewStyle>;
+    };
+  };
 
 const variantColorMap: Record<InputVariant, ThemeVars.Color> = {
   primary: 'fgPrimary',
@@ -123,6 +133,8 @@ export const InputStack = memo(function InputStack(_props: InputStackProps) {
     inputBackground = 'bg',
     borderWidth = 100,
     focusedBorderWidth = borderWidth,
+    styles,
+    style,
     ...props
   } = mergedProps;
   const theme = useTheme();
@@ -225,10 +237,23 @@ export const InputStack = memo(function InputStack(_props: InputStackProps) {
     inputAreaSize.height,
   ]);
 
+  const rootStyles = useMemo(() => [style, styles?.root], [style, styles?.root]);
+
+  const inputContainerStyles = useMemo(
+    () => [staticStyles.inputAreaContainerStyle, styles?.inputContainer],
+    [styles?.inputContainer],
+  );
+
+  const combinedInputAreaStyles = useMemo(
+    () => [inputAreaStyles, styles?.input],
+    [inputAreaStyles, styles?.input],
+  );
+
   return (
     <VStack
-      gap={0.5}
+      gap={inputStackGap}
       opacity={disabled ? accessibleOpacityDisabled : 1}
+      style={rootStyles}
       testID={testID}
       width={width}
       {...props}
@@ -236,11 +261,11 @@ export const InputStack = memo(function InputStack(_props: InputStackProps) {
       {!!labelNode && labelVariant === 'outside' && <>{labelNode}</>}
       <HStack>
         {!!prependNode && <>{prependNode}</>}
-        <View style={styles.inputAreaContainerStyle}>
+        <View style={inputContainerStyles}>
           {focused && <Animated.View style={borderFocusedStyles} />}
           <Animated.View
             onLayout={onInputAreaLayout}
-            style={inputAreaStyles}
+            style={combinedInputAreaStyles}
             testID={testID && `${testID}-input-area`}
           >
             {focused && enableColorSurge && (
@@ -248,7 +273,7 @@ export const InputStack = memo(function InputStack(_props: InputStackProps) {
             )}
             {!!startNode && <>{startNode}</>}
             {!!labelNode && labelVariant === 'inside' ? (
-              <VStack flexGrow={1} paddingY={1}>
+              <VStack flexGrow={1}>
                 {labelNode}
                 {inputNode}
               </VStack>
@@ -269,9 +294,9 @@ export const InputStack = memo(function InputStack(_props: InputStackProps) {
 // When `overflow: auto` is set the thickened border when focused is not accounted for
 // hence you see a cutoff.
 // Padding must accommodate the focus border extension (default 2px for focusedBorderWidth: 200)
-const styles = StyleSheet.create({
+const staticStyles = StyleSheet.create({
   inputAreaContainerStyle: {
     padding: 2,
-    flexGrow: 1,
+    flexGrow: 2,
   },
 });
diff --git a/packages/mobile/src/controls/NativeInput.tsx b/packages/mobile/src/controls/NativeInput.tsx
index d7e7219f96..a945234498 100644
--- a/packages/mobile/src/controls/NativeInput.tsx
+++ b/packages/mobile/src/controls/NativeInput.tsx
@@ -92,6 +92,7 @@ export const NativeInput = memo(
       const containerStyle: ViewStyle = useMemo(() => {
         return {
           flex: 2,
+          minWidth: 0,
           padding: theme.space[compact ? 1 : 2],
           ...containerSpacing,
           ...(!disabled &&
diff --git a/packages/mobile/src/controls/Radio.tsx b/packages/mobile/src/controls/Radio.tsx
index 6313ddae3c..4846edc110 100644
--- a/packages/mobile/src/controls/Radio.tsx
+++ b/packages/mobile/src/controls/Radio.tsx
@@ -47,11 +47,11 @@ export type RadioProps<RadioValue extends string> = RadioBaseProps<RadioValue>;
 
 const DotSvg = ({
   color = 'black',
-  width = 20,
+  width,
   dotSize = (2 * width) / 3,
 }: {
   color?: ColorValue;
-  width?: number;
+  width: number;
   dotSize?: number;
 }) => {
   return (
@@ -121,13 +121,13 @@ const RadioWithRef = forwardRef(function Radio<RadioValue extends string>(
       : accessibilityLabel;
   return (
     <Control<RadioValue>
-      {...props}
       ref={ref}
       accessibilityHint={accessibilityHint}
       accessibilityLabel={accessibilityLabelValue}
       accessibilityRole="radio"
       hitSlop={5}
       label={children}
+      {...props}
     >
       {RadioIcon}
     </Control>
diff --git a/packages/mobile/src/controls/RadioGroup.tsx b/packages/mobile/src/controls/RadioGroup.tsx
index 53f79e0f16..80823a8132 100644
--- a/packages/mobile/src/controls/RadioGroup.tsx
+++ b/packages/mobile/src/controls/RadioGroup.tsx
@@ -12,24 +12,7 @@ import { Radio, type RadioBaseProps, type RadioProps } from './Radio';
 
 export { Radio, type RadioBaseProps, type RadioProps };
 
-/**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with accessibilityRole="radiogroup" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- *
- * @example
- * // Instead of:
- * <RadioGroup options={{ value1: 'Label 1' }} value={value} onChange={onChange} />
- *
- * // Use:
- * <ControlGroup
- *   accessibilityRole="radiogroup"
- *   ControlComponent={Radio}
- *   options={[{ value: 'value1', children: 'Label 1' }]}
- *   value={value}
- *   onChange={(value) => onChange(value)}
- * />
- */
-export type RadioGroupBaseProps<RadioValue extends string> = Omit<
+type RadioGroupBaseProps<RadioValue extends string> = Omit<
   AccessibilityProps,
   'accessibilityLabelledBy'
 > &
@@ -54,11 +37,7 @@ export type RadioGroupBaseProps<RadioValue extends string> = Omit<
     radioAccessibilityLabel?: string;
   };
 
-/**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with accessibilityRole="radiogroup" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
-export type RadioGroupProps<RadioValue extends string> = RadioGroupBaseProps<RadioValue>;
+type RadioGroupProps<RadioValue extends string> = RadioGroupBaseProps<RadioValue>;
 
 const RadioGroupWithRef = forwardRef(function RadioGroup<RadioValue extends string>(
   {
diff --git a/packages/mobile/src/controls/SearchInput.tsx b/packages/mobile/src/controls/SearchInput.tsx
index e811eb57e4..4c91475237 100644
--- a/packages/mobile/src/controls/SearchInput.tsx
+++ b/packages/mobile/src/controls/SearchInput.tsx
@@ -1,10 +1,10 @@
 import React, { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
 import type { ForwardedRef } from 'react';
 import type {
+  BlurEvent,
+  FocusEvent,
   GestureResponderEvent,
-  NativeSyntheticEvent,
   TextInput as RNTextInput,
-  TextInputFocusEventData,
 } from 'react-native';
 import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import type { IconName } from '@coinbase/cds-common/types';
@@ -118,7 +118,7 @@ export const SearchInput = memo(
     const refs = useMergeRefs(ref, internalRef);
 
     const handleOnFocus = useCallback(
-      (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (e: FocusEvent) => {
         onFocus?.(e);
 
         if (!disableBackArrow && startIcon === undefined) {
@@ -129,7 +129,7 @@ export const SearchInput = memo(
     );
 
     const handleOnBlur = useCallback(
-      (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (e: BlurEvent) => {
         onBlur?.(e);
 
         if (startIcon === undefined) {
diff --git a/packages/mobile/src/controls/SelectContext.tsx b/packages/mobile/src/controls/SelectContext.tsx
index 91c48c0bb6..2328417609 100644
--- a/packages/mobile/src/controls/SelectContext.tsx
+++ b/packages/mobile/src/controls/SelectContext.tsx
@@ -12,9 +12,21 @@ const defaultContext = {
 const errorMessage =
   'SelectContext is undefined. SelectProvider was not found higher up the tree. ';
 
+/**
+ * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const SelectContext = createContext<SelectContextType>(defaultContext);
+/**
+ * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const SelectProvider = SelectContext.Provider;
 
+/**
+ * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const useSelectContext = () => {
   const context = React.useContext(SelectContext);
   //   TODO: check for something required
diff --git a/packages/mobile/src/controls/SelectOption.tsx b/packages/mobile/src/controls/SelectOption.tsx
index eef277c9ed..2ba17018a8 100644
--- a/packages/mobile/src/controls/SelectOption.tsx
+++ b/packages/mobile/src/controls/SelectOption.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import type { GestureResponderEvent } from 'react-native';
 import { selectCellMobileSpacingConfig } from '@coinbase/cds-common/tokens/select';
 import type { SharedAccessibilityProps } from '@coinbase/cds-common/types';
@@ -26,6 +26,10 @@ export type SelectOptionBaseProps = Omit<CellBaseProps, 'children' | 'selected'>
 
 export type SelectOptionProps = SelectOptionBaseProps;
 
+/**
+ * @deprecated Please use the new Select alpha component instead. If you are using this component outside of Select, we recommend replacing it with ListCell. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const SelectOption = memo((_props: SelectOptionProps) => {
   const mergedProps = useComponentConfig('SelectOption', _props);
   const {
diff --git a/packages/mobile/src/controls/Switch.tsx b/packages/mobile/src/controls/Switch.tsx
index 5ede932981..5b8d0904ab 100644
--- a/packages/mobile/src/controls/Switch.tsx
+++ b/packages/mobile/src/controls/Switch.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, memo, useMemo } from 'react';
-import { StyleSheet, type View } from 'react-native';
+import { type StyleProp, StyleSheet, type View, type ViewStyle } from 'react-native';
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
@@ -10,10 +10,30 @@ import { Control, type ControlBaseProps, type ControlIconProps } from './Control
 
 export type SwitchBaseProps<SwitchValue extends string> = Omit<
   ControlBaseProps<SwitchValue>,
-  'style' | 'controlSize' | 'dotSize'
+  'controlSize' | 'dotSize'
 >;
 
-export type SwitchProps<SwitchValue extends string> = SwitchBaseProps<SwitchValue>;
+export type SwitchProps<SwitchValue extends string> = SwitchBaseProps<SwitchValue> & {
+  /**
+   * Label content rendered next to the switch control.
+   *
+   * @example
+   * ```tsx
+   * <Switch onChange={handleChange}>Dark mode</Switch>
+   * ```
+   */
+  children?: React.ReactNode;
+  /** Slot-level styles for Switch. */
+  styles?: {
+    /** Persistent outer wrapper across all variants. */
+    root?: StyleProp<ViewStyle>;
+    /**
+     * Control wrapper style.
+     * Applied to the underlying `Control` element (same element that receives `style`).
+     */
+    control?: StyleProp<ViewStyle>;
+  };
+};
 
 const SwitchIcon = ({
   pressed,
@@ -100,29 +120,37 @@ const SwitchWithRef = forwardRef(function SwitchWithRef<SwitchValue extends stri
   ref: React.ForwardedRef<View>,
 ) {
   const mergedProps = useComponentConfig('Switch', _props);
-  const { children, ...props } = mergedProps;
+  const { children, style, styles, ...props } = mergedProps;
   const theme = useTheme();
   const { switchHeight } = theme.controlSize;
+  const controlStyles = useMemo(
+    () => StyleSheet.flatten([style, styles?.control]),
+    [style, styles?.control],
+  );
 
   const switchNode = (
     <Control
-      {...props}
       ref={ref}
       accessible
       shouldUseSwitchTransition
       accessibilityRole="switch"
       label={children}
+      style={controlStyles}
+      {...props}
     >
       {SwitchIcon}
     </Control>
   );
 
-  return children ? (
-    <Box alignItems="center" flexDirection="row" minHeight={switchHeight}>
+  return (
+    <Box
+      alignItems={children ? 'center' : undefined}
+      flexDirection={children ? 'row' : undefined}
+      minHeight={children ? switchHeight : undefined}
+      style={styles?.root}
+    >
       {switchNode}
     </Box>
-  ) : (
-    switchNode
   );
 });
 
diff --git a/packages/mobile/src/controls/TextInput.tsx b/packages/mobile/src/controls/TextInput.tsx
index ab57c8418f..85aeab1f2c 100644
--- a/packages/mobile/src/controls/TextInput.tsx
+++ b/packages/mobile/src/controls/TextInput.tsx
@@ -11,9 +11,8 @@ import React, {
 import { Pressable } from 'react-native';
 import type { ForwardedRef } from 'react';
 import type {
-  NativeSyntheticEvent,
+  DimensionValue,
   TextInput as RNTextInput,
-  TextInputFocusEventData,
   TextInputProps as RNTextInputProps,
   ViewStyle,
 } from 'react-native';
@@ -26,7 +25,6 @@ import type {
   SharedProps,
   TextAlignProps,
 } from '@coinbase/cds-common/types';
-import type { DimensionValue } from '@coinbase/cds-common/types/DimensionStyles';
 import type { InputVariant } from '@coinbase/cds-common/types/InputBaseProps';
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -177,13 +175,13 @@ export const TextInput = memo(
       focusedBorderWidth,
     );
 
-    const editableInputAddonProps = {
+    const editableInputAddonProps: TextInputProps = {
       ...editableInputProps,
-      onFocus: (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      onFocus: (e) => {
         editableInputProps?.onFocus?.(e);
         setFocused(true);
       },
-      onBlur: (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      onBlur: (e) => {
         editableInputProps?.onBlur?.(e);
         setFocused(false);
       },
@@ -204,7 +202,7 @@ export const TextInput = memo(
         ...(labelVariant === 'inside' &&
           hasLabel &&
           !compact && {
-            paddingBottom: 0,
+            paddingBottom: theme.space[1],
             paddingTop: 0,
           }),
       }),
@@ -224,7 +222,8 @@ export const TextInput = memo(
     const inaccessibleStart = useMemo(() => {
       if (isValidElement(start) && start.type === InputIconButton) {
         return cloneElement(start, {
-          ...start.props,
+          // ReactElement default props is unknown, so we need to cast to the correct type
+          ...(start.props as InputIconButtonProps),
           accessibilityLabel: undefined,
           accessibilityHint: undefined,
           accessibilityElementsHidden: true,
diff --git a/packages/mobile/src/controls/__stories__/InputIconButton.stories.tsx b/packages/mobile/src/controls/__stories__/InputIconButton.stories.tsx
index 0e449d4ae3..d159208e36 100644
--- a/packages/mobile/src/controls/__stories__/InputIconButton.stories.tsx
+++ b/packages/mobile/src/controls/__stories__/InputIconButton.stories.tsx
@@ -22,9 +22,7 @@ const Basic = () => {
           key={`${variant}-input-iconbutton`}
           editable={__DEV__}
           label={variant}
-          start={
-            <InputIconButton active accessibilityLabel="Add" name="add" variant="foregroundMuted" />
-          }
+          start={<InputIconButton active accessibilityLabel="Add" name="add" variant="secondary" />}
           variant={variant}
         />
       ))}
@@ -75,7 +73,7 @@ const AddCustomColor = () => {
           disableInheritFocusStyle
           accessibilityLabel="Add"
           name="add"
-          variant="foregroundMuted"
+          variant="secondary"
         />
       }
     />
@@ -93,7 +91,7 @@ const AddCustomColorEnd = () => {
           transparent
           accessibilityLabel="Add"
           name="add"
-          variant="foregroundMuted"
+          variant="secondary"
         />
       }
       label="Label"
@@ -130,7 +128,7 @@ const InputIconButtonScreen = () => {
 
       <Example title="Using InputIconButton outside of a TextInput should not throw error">
         <Box alignItems="center" flexDirection="row" justifyContent="space-between" width={350}>
-          <InputIconButton active name="add" variant="foregroundMuted" />
+          <InputIconButton active name="add" variant="secondary" />
         </Box>
       </Example>
     </ExampleScreen>
diff --git a/packages/mobile/src/controls/__tests__/Checkbox.test.tsx b/packages/mobile/src/controls/__tests__/Checkbox.test.tsx
index ecd13f3a29..623c1be205 100644
--- a/packages/mobile/src/controls/__tests__/Checkbox.test.tsx
+++ b/packages/mobile/src/controls/__tests__/Checkbox.test.tsx
@@ -1,6 +1,5 @@
-import { Pressable } from 'react-native';
 import { glyphMap } from '@coinbase/cds-icons/glyphMap';
-import { fireEvent, render, screen, within } from '@testing-library/react-native';
+import { fireEvent, render, screen } from '@testing-library/react-native';
 
 import { defaultTheme } from '../../themes/defaultTheme';
 import { DefaultThemeProvider } from '../../utils/testHelpers';
@@ -16,15 +15,19 @@ describe('Checkbox', () => {
     expect(screen.getByTestId('mock-checkbox')).toBeAccessible();
   });
 
-  it('renders a Pressable', () => {
+  it('renders and responds to press', () => {
+    const onChange = jest.fn();
     render(
       <DefaultThemeProvider>
-        <Checkbox>Checkbox</Checkbox>
+        <Checkbox onChange={onChange}>Checkbox</Checkbox>
       </DefaultThemeProvider>,
     );
 
-    expect(screen.UNSAFE_queryAllByType(Pressable)).toHaveLength(1);
-    expect(screen.getByText('Checkbox')).toBeTruthy();
+    const checkboxText = screen.getByText('Checkbox');
+    expect(checkboxText).toBeTruthy();
+
+    fireEvent.press(checkboxText);
+    expect(onChange).toHaveBeenCalled();
   });
 
   it('renders a check icon when checked', () => {
@@ -113,7 +116,7 @@ describe('Checkbox', () => {
       </DefaultThemeProvider>,
     );
 
-    expect(screen.queryAllByA11yState({ checked: true })).toHaveLength(1);
+    expect(screen.getByRole('checkbox')).toBeChecked();
   });
 
   it('has accessibility state disabled when disabled', () => {
@@ -123,7 +126,7 @@ describe('Checkbox', () => {
       </DefaultThemeProvider>,
     );
 
-    expect(screen.queryAllByA11yState({ disabled: true })).toHaveLength(1);
+    expect(screen.getByRole('checkbox')).toBeDisabled();
   });
 
   it('disabled checkbox passes a11y', () => {
@@ -227,9 +230,8 @@ describe('Checkbox', () => {
       </DefaultThemeProvider>,
     );
 
-    const iconBox = screen.getByTestId('checkbox-icon');
-    // The icon glyph is inside the Box, find the Text element by role
-    const iconText = within(iconBox).getByRole('image');
+    // Find the check icon glyph text
+    const iconText = screen.getByText(glyphMap['checkmark-24-inactive']);
     expect(iconText).toHaveStyle({
       color: defaultTheme.lightColor.bgPositive,
     });
@@ -244,9 +246,8 @@ describe('Checkbox', () => {
       </DefaultThemeProvider>,
     );
 
-    const iconBox = screen.getByTestId('checkbox-icon');
-    // The icon glyph is inside the Box, find the Text element by role
-    const iconText = within(iconBox).getByRole('image');
+    // Find the minus icon glyph text
+    const iconText = screen.getByText(glyphMap['minus-24-inactive']);
     expect(iconText).toHaveStyle({
       color: defaultTheme.lightColor.bgWarning,
     });
diff --git a/packages/mobile/src/controls/__tests__/CheckboxCell.test.tsx b/packages/mobile/src/controls/__tests__/CheckboxCell.test.tsx
index bd762757ab..73fed3ce37 100644
--- a/packages/mobile/src/controls/__tests__/CheckboxCell.test.tsx
+++ b/packages/mobile/src/controls/__tests__/CheckboxCell.test.tsx
@@ -70,7 +70,7 @@ describe('CheckboxCell', () => {
     );
 
     // CheckboxCell has proper accessibility state (only the main cell should have checked state)
-    expect(screen.queryAllByA11yState({ checked: true })).toHaveLength(1);
+    expect(screen.getByRole('checkbox')).toBeChecked();
   });
 
   it('shows unchecked state correctly', () => {
@@ -86,7 +86,7 @@ describe('CheckboxCell', () => {
     );
 
     // CheckboxCell has proper accessibility state (only the main cell should have checked state)
-    expect(screen.queryAllByA11yState({ checked: false })).toHaveLength(1);
+    expect(screen.getByRole('checkbox')).not.toBeChecked();
   });
 
   it('triggers onChange when pressed with correct parameters', () => {
@@ -161,8 +161,9 @@ describe('CheckboxCell', () => {
       </DefaultThemeProvider>,
     );
 
-    // CheckboxCell has proper accessibility state (both main cell and internal control have disabled state)
-    expect(screen.queryAllByA11yState({ disabled: true })).toHaveLength(2);
+    // CheckboxCell should have disabled accessibility state
+    const disabledCheckboxes = screen.queryAllByRole('checkbox', { disabled: true });
+    expect(disabledCheckboxes.length).toBeGreaterThanOrEqual(1);
   });
 
   it('attaches testID', () => {
@@ -305,9 +306,7 @@ describe('CheckboxCell', () => {
 
     // Should have proper accessibility role and state
     expect(screen.queryAllByRole('checkbox')).toHaveLength(1);
-    expect(screen.getByTestId('checked-accessible-checkbox')).toHaveAccessibilityState({
-      checked: true,
-    });
+    expect(screen.getByTestId('checked-accessible-checkbox')).toBeChecked();
   });
 
   it('renders with proper accessibility when disabled', () => {
@@ -326,9 +325,7 @@ describe('CheckboxCell', () => {
 
     // Should have proper accessibility role and state
     expect(screen.queryAllByRole('checkbox')).toHaveLength(1);
-    expect(screen.getByTestId('disabled-accessible-checkbox')).toHaveAccessibilityState({
-      disabled: true,
-    });
+    expect(screen.getByTestId('disabled-accessible-checkbox')).toBeDisabled();
   });
 
   it('works without description', () => {
diff --git a/packages/mobile/src/controls/__tests__/HelperText.test.tsx b/packages/mobile/src/controls/__tests__/HelperText.test.tsx
index 0b15288a7a..76f674c2df 100644
--- a/packages/mobile/src/controls/__tests__/HelperText.test.tsx
+++ b/packages/mobile/src/controls/__tests__/HelperText.test.tsx
@@ -14,17 +14,23 @@ describe('HelperText.test', () => {
     expect(screen.getByText('Test text')).toBeTruthy();
   });
 
-  it('renders custom color', () => {
+  it('renders custom color and icon styles via style slots', () => {
     render(
       <DefaultThemeProvider>
-        <HelperText color="fgNegative" dangerouslySetColor="yellow" errorIconTestID="error-icon">
+        <HelperText
+          color="fgNegative"
+          errorIconTestID="error-icon"
+          style={{ color: 'yellow' }}
+          styles={{ root: { marginTop: 8 }, icon: { color: 'yellow' } }}
+        >
           Test text
         </HelperText>
       </DefaultThemeProvider>,
     );
 
-    expect(screen.getByText('Test text')).toHaveStyle({ color: 'yellow' });
-    expect(screen.getByRole('image')).toHaveStyle({ color: 'yellow' });
+    expect(screen.getByText(/Test text/)).toHaveStyle({ color: 'yellow' });
+    expect(screen.getByText(/Test text/)).toHaveStyle({ marginTop: 8 });
+    expect(screen.getByTestId('error-icon')).toHaveStyle({ color: 'yellow' });
   });
 
   it('renders custom spacing', () => {
diff --git a/packages/mobile/src/controls/__tests__/InputIconButton.test.tsx b/packages/mobile/src/controls/__tests__/InputIconButton.test.tsx
index b1353c55d3..bd2b5f1dce 100644
--- a/packages/mobile/src/controls/__tests__/InputIconButton.test.tsx
+++ b/packages/mobile/src/controls/__tests__/InputIconButton.test.tsx
@@ -9,12 +9,7 @@ describe('InputIconButton', () => {
   it('passes a11y', () => {
     render(
       <DefaultThemeProvider>
-        <InputIconButton
-          active
-          name="add"
-          testID={INPUTICONBUTTON_TEST_ID}
-          variant="foregroundMuted"
-        />
+        <InputIconButton active name="add" testID={INPUTICONBUTTON_TEST_ID} variant="secondary" />
       </DefaultThemeProvider>,
     );
     expect(screen.getByTestId(INPUTICONBUTTON_TEST_ID)).toBeAccessible();
@@ -23,12 +18,7 @@ describe('InputIconButton', () => {
   it('renders an InputIconButton', () => {
     render(
       <DefaultThemeProvider>
-        <InputIconButton
-          active
-          name="add"
-          testID={INPUTICONBUTTON_TEST_ID}
-          variant="foregroundMuted"
-        />
+        <InputIconButton active name="add" testID={INPUTICONBUTTON_TEST_ID} variant="secondary" />
       </DefaultThemeProvider>,
     );
     expect(screen.getByTestId(INPUTICONBUTTON_TEST_ID)).toBeTruthy();
diff --git a/packages/mobile/src/controls/__tests__/InputStack.test.tsx b/packages/mobile/src/controls/__tests__/InputStack.test.tsx
index 40ed602c3c..b9e9de8631 100644
--- a/packages/mobile/src/controls/__tests__/InputStack.test.tsx
+++ b/packages/mobile/src/controls/__tests__/InputStack.test.tsx
@@ -1,49 +1,11 @@
-import { TextInput as RNTextInput } from 'react-native';
-import TestRenderer from 'react-test-renderer';
 import { render, screen } from '@testing-library/react-native';
 
 import { DefaultThemeProvider, theme } from '../../utils/testHelpers';
-import type { InputStackProps } from '../InputStack';
 import { InputStack } from '../InputStack';
 import { NativeInput } from '../NativeInput';
 
 const TEST_ID = 'input';
 
-function expectAttribute<
-  K extends keyof Pick<InputStackProps, 'width' | 'disabled' | 'variant' | 'height'>,
->(prop: K, values: readonly NonNullable<InputStackProps[K]>[]) {
-  const input = <RNTextInput value="15" />;
-
-  values.forEach((value) => {
-    it(`will set "${value}" for \`${prop}\` prop`, async () => {
-      const inputRenderer = TestRenderer.create(
-        <DefaultThemeProvider>
-          <InputStack testID={TEST_ID} {...{ [prop]: value }} inputNode={input} />
-        </DefaultThemeProvider>,
-      );
-
-      const inputStackInstance = await inputRenderer.root.findByProps({ testID: TEST_ID });
-      expect(inputStackInstance.props[prop]).toEqual(value);
-    });
-  });
-}
-
-describe('width', () => {
-  expectAttribute('width', ['10%', '50%', '100%']);
-});
-
-describe('height', () => {
-  expectAttribute('height', ['10%', '50%', '100%']);
-});
-
-describe('disabled', () => {
-  expectAttribute('disabled', [false, true]);
-});
-
-describe('variant', () => {
-  expectAttribute('variant', ['foreground', 'foregroundMuted', 'negative', 'positive', 'primary']);
-});
-
 describe('styles', () => {
   it('renders a custom borderStyle', async () => {
     const borderStyle = {
diff --git a/packages/mobile/src/controls/__tests__/RadioCell.test.tsx b/packages/mobile/src/controls/__tests__/RadioCell.test.tsx
index 06a2216e96..ce9145a884 100644
--- a/packages/mobile/src/controls/__tests__/RadioCell.test.tsx
+++ b/packages/mobile/src/controls/__tests__/RadioCell.test.tsx
@@ -69,8 +69,7 @@ describe('RadioCell', () => {
       </DefaultThemeProvider>,
     );
 
-    // The RadioCell should have selected accessibility state
-    expect(screen.queryAllByA11yState({ selected: true })).toHaveLength(1); // Only the cell
+    expect(screen.getByRole('radio')).toBeSelected();
   });
 
   it('shows unselected state correctly', () => {
@@ -85,8 +84,7 @@ describe('RadioCell', () => {
       </DefaultThemeProvider>,
     );
 
-    // The RadioCell should have unselected accessibility state
-    expect(screen.queryAllByA11yState({ selected: false })).toHaveLength(1); // Only the cell
+    expect(screen.getByRole('radio')).not.toBeSelected();
   });
 
   it('triggers onChange when pressed', () => {
@@ -140,8 +138,9 @@ describe('RadioCell', () => {
       </DefaultThemeProvider>,
     );
 
-    // The RadioCell should have disabled accessibility state (both main cell and internal control have disabled state)
-    expect(screen.queryAllByA11yState({ disabled: true })).toHaveLength(2);
+    // The RadioCell should have disabled accessibility state
+    const disabledRadios = screen.queryAllByRole('radio', { disabled: true });
+    expect(disabledRadios.length).toBeGreaterThanOrEqual(1);
   });
 
   it('attaches testID', () => {
@@ -324,9 +323,7 @@ describe('RadioCell', () => {
 
     // Should have proper accessibility role and state
     expect(screen.queryAllByRole('radio')).toHaveLength(1);
-    expect(screen.getByTestId('selected-accessible-radio')).toHaveAccessibilityState({
-      selected: true,
-    });
+    expect(screen.getByTestId('selected-accessible-radio')).toBeSelected();
   });
 
   it('renders with proper accessibility when disabled', () => {
@@ -345,9 +342,7 @@ describe('RadioCell', () => {
 
     // Should have proper accessibility role and state
     expect(screen.queryAllByRole('radio')).toHaveLength(1);
-    expect(screen.getByTestId('disabled-accessible-radio')).toHaveAccessibilityState({
-      disabled: true,
-    });
+    expect(screen.getByTestId('disabled-accessible-radio')).toBeDisabled();
   });
 
   it('works without description', () => {
diff --git a/packages/mobile/src/controls/__tests__/RadioGroup.test.tsx b/packages/mobile/src/controls/__tests__/RadioGroup.test.tsx
index 08644fd326..594f6a293a 100644
--- a/packages/mobile/src/controls/__tests__/RadioGroup.test.tsx
+++ b/packages/mobile/src/controls/__tests__/RadioGroup.test.tsx
@@ -15,15 +15,20 @@ describe('Radio', () => {
     );
     expect(screen.getByTestId('mock-radio')).toBeAccessible();
   });
-  it('renders a Pressable', () => {
+
+  it('renders and responds to press', () => {
+    const onChange = jest.fn();
     render(
       <DefaultThemeProvider>
-        <Radio>Radio</Radio>
+        <Radio onChange={onChange}>Radio</Radio>
       </DefaultThemeProvider>,
     );
 
-    expect(screen.UNSAFE_queryAllByType(Pressable)).toHaveLength(1);
-    expect(screen.getByText('Radio')).toBeTruthy();
+    const radioText = screen.getByText('Radio');
+    expect(radioText).toBeTruthy();
+
+    fireEvent.press(radioText);
+    expect(onChange).toHaveBeenCalled();
   });
 
   it('renders a dot icon when checked', () => {
@@ -65,7 +70,7 @@ describe('Radio', () => {
       </DefaultThemeProvider>,
     );
 
-    expect(screen.queryAllByA11yState({ checked: true })).toHaveLength(1);
+    expect(screen.getByRole('radio')).toBeChecked();
   });
 
   it('has accessibility state disabled when disabled', () => {
@@ -75,7 +80,7 @@ describe('Radio', () => {
       </DefaultThemeProvider>,
     );
 
-    expect(screen.queryAllByA11yState({ disabled: true })).toHaveLength(1);
+    expect(screen.getByRole('radio')).toBeDisabled();
   });
 
   it('Can set custom accessibility label and hints', () => {
diff --git a/packages/mobile/src/controls/__tests__/SearchInput.test.tsx b/packages/mobile/src/controls/__tests__/SearchInput.test.tsx
index 52a21d2094..9298d4ab17 100644
--- a/packages/mobile/src/controls/__tests__/SearchInput.test.tsx
+++ b/packages/mobile/src/controls/__tests__/SearchInput.test.tsx
@@ -213,7 +213,7 @@ describe('Search', () => {
     render(SearchComponent);
 
     // This will throw if we find duplicates
-    expect(screen.getByLabelText(`search`)).toBeAccessible();
+    expect(screen.getByLabelText('search', { includeHiddenElements: true })).toBeAccessible();
   });
 
   it('announces the Back arrow icon button', () => {
@@ -238,13 +238,17 @@ describe('Search', () => {
   it('renders a close icon button at the end node', () => {
     render(SearchComponent);
 
-    expect(screen.getByTestId(`${TEST_ID}-close-iconbtn`)).toBeDefined();
+    expect(
+      screen.getByTestId(`${TEST_ID}-close-iconbtn`, { includeHiddenElements: true }),
+    ).toBeDefined();
   });
 
   it('fires `onSearch` when search btn is pressed', () => {
     render(SearchComponent);
 
-    fireEvent.press(screen.getByTestId(`${TEST_ID}-searchinput-iconbtn`));
+    fireEvent.press(
+      screen.getByTestId(`${TEST_ID}-searchinput-iconbtn`, { includeHiddenElements: true }),
+    );
 
     expect(onSearchSpy).toHaveBeenCalled();
   });
@@ -252,7 +256,9 @@ describe('Search', () => {
   it('fires `onClear` when clear btn is pressed', () => {
     render(SearchComponent);
 
-    fireEvent.press(screen.getByTestId(`${TEST_ID}-close-iconbtn`));
+    fireEvent.press(
+      screen.getByTestId(`${TEST_ID}-close-iconbtn`, { includeHiddenElements: true }),
+    );
 
     expect(onClearSpy).toHaveBeenCalled();
   });
diff --git a/packages/mobile/src/controls/__tests__/Switch.test.tsx b/packages/mobile/src/controls/__tests__/Switch.test.tsx
index 88a9c9950b..06e85a21f4 100644
--- a/packages/mobile/src/controls/__tests__/Switch.test.tsx
+++ b/packages/mobile/src/controls/__tests__/Switch.test.tsx
@@ -3,7 +3,7 @@ import { Text, View } from 'react-native';
 import { fireEvent, render, screen } from '@testing-library/react-native';
 
 import { defaultTheme } from '../../themes/defaultTheme';
-import { DefaultThemeProvider } from '../../utils/testHelpers';
+import { DefaultThemeProvider, treeHasStyleProp } from '../../utils/testHelpers';
 import { Switch } from '../Switch';
 
 describe('Switch.test', () => {
@@ -28,11 +28,11 @@ describe('Switch.test', () => {
     );
 
     expect(screen.getByText('checked is false')).toBeTruthy();
-    expect(screen.getByRole('switch')).toHaveAccessibilityState({ checked: false });
+    expect(screen.getByRole('switch')).not.toBeChecked();
 
     fireEvent.press(screen.getByRole('switch'));
     expect(screen.getByText('checked is true')).toBeTruthy();
-    expect(screen.getByRole('switch')).toHaveAccessibilityState({ checked: true });
+    expect(screen.getByRole('switch')).toBeChecked();
   });
 
   it('passes accessibility', () => {
@@ -129,6 +129,30 @@ describe('Switch.test', () => {
     expect(screen.getByTestId('test-test-id')).toBeTruthy();
   });
 
+  it('keeps a stable root wrapper regardless of label presence', () => {
+    const { toJSON, rerender } = render(
+      <DefaultThemeProvider>
+        <Switch onChange={jest.fn()} />
+      </DefaultThemeProvider>,
+    );
+
+    const treeWithoutLabel = toJSON();
+    expect(treeWithoutLabel).toBeTruthy();
+    expect(Array.isArray(treeWithoutLabel)).toBe(false);
+    expect(treeWithoutLabel).toHaveProperty('type', 'View');
+
+    rerender(
+      <DefaultThemeProvider>
+        <Switch onChange={jest.fn()}>with label</Switch>
+      </DefaultThemeProvider>,
+    );
+
+    const treeWithLabel = toJSON();
+    expect(treeWithLabel).toBeTruthy();
+    expect(Array.isArray(treeWithLabel)).toBe(false);
+    expect(treeWithLabel).toHaveProperty('type', 'View');
+  });
+
   it('has default palette', () => {
     render(
       <DefaultThemeProvider>
@@ -177,4 +201,40 @@ describe('Switch.test', () => {
       backgroundColor: defaultTheme.lightColor.bgTertiary,
     });
   });
+
+  it('applies styles.root', () => {
+    const { toJSON } = render(
+      <DefaultThemeProvider>
+        <Switch
+          onChange={jest.fn()}
+          styles={{
+            root: { borderTopWidth: 1 },
+          }}
+        >
+          label
+        </Switch>
+      </DefaultThemeProvider>,
+    );
+
+    const tree = toJSON();
+    expect(treeHasStyleProp(tree, (s) => s.borderTopWidth === 1)).toBe(true);
+  });
+
+  it('applies styles.control and preserves style prop behavior', () => {
+    const { toJSON } = render(
+      <DefaultThemeProvider>
+        <Switch
+          onChange={jest.fn()}
+          style={{ borderRightWidth: 5 }}
+          styles={{
+            control: { borderLeftWidth: 4 },
+          }}
+        />
+      </DefaultThemeProvider>,
+    );
+
+    const tree = toJSON();
+    expect(treeHasStyleProp(tree, (s) => s.borderLeftWidth === 4)).toBe(true);
+    expect(treeHasStyleProp(tree, (s) => s.borderRightWidth === 5)).toBe(true);
+  });
 });
diff --git a/packages/mobile/src/controls/__tests__/TextInput.test.tsx b/packages/mobile/src/controls/__tests__/TextInput.test.tsx
index 27d67eab28..f114c2f6e6 100644
--- a/packages/mobile/src/controls/__tests__/TextInput.test.tsx
+++ b/packages/mobile/src/controls/__tests__/TextInput.test.tsx
@@ -410,11 +410,11 @@ describe('TextInput', () => {
       </DefaultThemeProvider>,
     );
 
-    const startNode = screen.getByTestId(startTestID);
+    const startNode = screen.getByTestId(startTestID, { includeHiddenElements: true });
     expect(startNode).toBeTruthy();
     expect(startNode).toHaveTextContent('Compact Label');
 
-    expect(screen.getByText('Compact Label')).toBeTruthy();
+    expect(screen.getByText('Compact Label', { includeHiddenElements: true })).toBeTruthy();
   });
 
   it('renders labelNode without compact', () => {
@@ -472,8 +472,8 @@ describe('TextInput', () => {
       </DefaultThemeProvider>,
     );
 
-    const startNode = screen.getByTestId(startTestID);
-    const customLabel = screen.getByTestId(labelTestID);
+    const startNode = screen.getByTestId(startTestID, { includeHiddenElements: true });
+    const customLabel = screen.getByTestId(labelTestID, { includeHiddenElements: true });
     expect(startNode).toBeTruthy();
     expect(customLabel).toBeTruthy();
     expect(customLabel).toHaveTextContent('Custom Label Node');
@@ -535,8 +535,8 @@ describe('TextInput', () => {
       </DefaultThemeProvider>,
     );
 
-    const customLabel = screen.getByTestId(labelTestID);
-    const startContent = screen.getByTestId(startTestID);
+    const customLabel = screen.getByTestId(labelTestID, { includeHiddenElements: true });
+    const startContent = screen.getByTestId(startTestID, { includeHiddenElements: true });
     expect(customLabel).toBeTruthy();
     expect(startContent).toBeTruthy();
   });
@@ -559,12 +559,12 @@ describe('TextInput', () => {
       </DefaultThemeProvider>,
     );
 
-    const startNode = screen.getByTestId(startTestID);
-    const customLabel = screen.getByTestId(labelTestID);
+    const startNode = screen.getByTestId(startTestID, { includeHiddenElements: true });
+    const customLabel = screen.getByTestId(labelTestID, { includeHiddenElements: true });
     expect(startNode).toBeTruthy();
     expect(customLabel).toBeTruthy();
     expect(customLabel).toHaveTextContent('Custom Label Node');
-    expect(screen.queryByText('Regular Label')).toBeFalsy();
+    expect(screen.queryByText('Regular Label', { includeHiddenElements: true })).toBeFalsy();
   });
 
   it('positions label correctly with inside variant and start content', () => {
@@ -581,8 +581,8 @@ describe('TextInput', () => {
       </DefaultThemeProvider>,
     );
 
-    const label = screen.getByTestId('label-test');
-    const startContent = screen.getByTestId('start-content');
+    const label = screen.getByTestId('label-test', { includeHiddenElements: true });
+    const startContent = screen.getByTestId('start-content', { includeHiddenElements: true });
 
     expect(label).toBeTruthy();
     expect(startContent).toBeTruthy();
diff --git a/packages/mobile/src/controls/__tests__/useControlMotionProps.test.tsx b/packages/mobile/src/controls/__tests__/useControlMotionProps.test.tsx
index f09eb96cac..82f0e08e94 100644
--- a/packages/mobile/src/controls/__tests__/useControlMotionProps.test.tsx
+++ b/packages/mobile/src/controls/__tests__/useControlMotionProps.test.tsx
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import { useControlMotionProps } from '../useControlMotionProps';
 
diff --git a/packages/mobile/src/dates/DateInput.tsx b/packages/mobile/src/dates/DateInput.tsx
index 59a9ed9a78..e736909458 100644
--- a/packages/mobile/src/dates/DateInput.tsx
+++ b/packages/mobile/src/dates/DateInput.tsx
@@ -1,11 +1,11 @@
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
 import {
+  type BlurEvent,
   type NativeSyntheticEvent,
   type StyleProp,
   type TextInput as NativeTextInput,
   type TextInputChangeEventData,
   type TextInputEndEditingEventData,
-  type TextInputFocusEventData,
   type ViewStyle,
 } from 'react-native';
 import { IntlDateFormat } from '@coinbase/cds-common/dates/IntlDateFormat';
@@ -89,7 +89,7 @@ export const DateInput = memo(
      */
 
     const handleBlur = useCallback(
-      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event: BlurEvent) => {
         onBlur?.(event);
         if (!required || !hasTyped.current) return;
         const error = validateDateInput(inputValue);
@@ -121,7 +121,6 @@ export const DateInput = memo(
       <VStack minWidth={164} style={style} width="100%">
         <TextInput
           ref={ref}
-          {...props}
           end={end}
           helperText={helperText || error?.message || intlDateFormat.dateStringFormat}
           keyboardType="number-pad"
@@ -134,6 +133,7 @@ export const DateInput = memo(
           testIDMap={testIDMap}
           value={inputValue}
           variant={variant || (error ? 'negative' : undefined)}
+          {...props}
         />
       </VStack>
     );
diff --git a/packages/mobile/src/dates/DatePicker.tsx b/packages/mobile/src/dates/DatePicker.tsx
index ac073f2919..5d5732bd23 100644
--- a/packages/mobile/src/dates/DatePicker.tsx
+++ b/packages/mobile/src/dates/DatePicker.tsx
@@ -232,7 +232,6 @@ export const DatePicker = memo(
       <Box ref={ref} width={width}>
         <DateInput
           ref={dateInputRef}
-          {...props}
           accessibilityHint={accessibilityHint}
           accessibilityLabel={accessibilityLabel}
           accessibilityLabelledBy={accessibilityLabelledBy}
@@ -255,6 +254,7 @@ export const DatePicker = memo(
           requiredError={requiredError}
           style={[dateInputStyle, styles?.dateInput]}
           variant={variant}
+          {...props}
         />
         {showPicker && (
           <Tray
diff --git a/packages/mobile/src/dates/__stories__/DatePicker.stories.tsx b/packages/mobile/src/dates/__stories__/DatePicker.stories.tsx
index d6201c9e23..9857ed912f 100644
--- a/packages/mobile/src/dates/__stories__/DatePicker.stories.tsx
+++ b/packages/mobile/src/dates/__stories__/DatePicker.stories.tsx
@@ -100,22 +100,22 @@ export const FullExample = () => {
           openCalendarAccessibilityLabel="Birthdate calendar"
         />
       </Example>
-      <Example title="DatePicker fit-content width">
+      <Example title="DatePicker width=null">
         <HStack flexWrap="wrap" gap={2}>
           <ExampleDatePicker
             label="Example Date"
             openCalendarAccessibilityLabel="Example calendar"
-            width="fit-content"
+            width={null}
           />
           <ExampleDatePicker
             label="Example Date 2"
             openCalendarAccessibilityLabel="Example calendar 2"
-            width="fit-content"
+            width={null}
           />
           <ExampleDatePicker
             label="Example Date 3"
             openCalendarAccessibilityLabel="Example calendar 3"
-            width="fit-content"
+            width={null}
           />
         </HStack>
       </Example>
diff --git a/packages/mobile/src/dates/__tests__/Calendar.test.tsx b/packages/mobile/src/dates/__tests__/Calendar.test.tsx
index f0ee9fb76b..239f2306ab 100644
--- a/packages/mobile/src/dates/__tests__/Calendar.test.tsx
+++ b/packages/mobile/src/dates/__tests__/Calendar.test.tsx
@@ -86,13 +86,14 @@ describe('Calendar', () => {
   it('renders days of the week', () => {
     render(<CalendarExample />);
 
-    // Check for first letter of each day
-    const sLetters = screen.getAllByText('S');
+    // Weekday header row uses aria-hidden; include hidden elements to assert visual labels exist.
+    const hidden = { includeHiddenElements: true } as const;
+    const sLetters = screen.getAllByText('S', hidden);
     expect(sLetters.length).toBeGreaterThanOrEqual(2); // Sunday and Saturday (plus potentially dates)
-    expect(screen.getByText('M')).toBeTruthy();
-    expect(screen.getAllByText('T').length).toBeGreaterThanOrEqual(1); // Tuesday and Thursday
-    expect(screen.getByText('W')).toBeTruthy();
-    expect(screen.getByText('F')).toBeTruthy();
+    expect(screen.getByText('M', hidden)).toBeTruthy();
+    expect(screen.getAllByText('T', hidden).length).toBeGreaterThanOrEqual(1); // Tuesday and Thursday
+    expect(screen.getByText('W', hidden)).toBeTruthy();
+    expect(screen.getByText('F', hidden)).toBeTruthy();
   });
 
   it('handles disabled state correctly', () => {
@@ -249,14 +250,15 @@ describe('Calendar', () => {
   it('days of week header is not accessible to screen readers', () => {
     render(<CalendarExample />);
 
-    // The days of week header HStack should have accessible={false}
-    // This is tested indirectly by checking the structure
     const calendar = screen.getByTestId(testID);
     expect(calendar).toBeTruthy();
 
-    // Days of week letters should still be present in the DOM
-    expect(screen.getAllByText('S').length).toBeGreaterThan(0);
-    expect(screen.getAllByText('M').length).toBeGreaterThan(0);
+    // Header row is aria-hidden: excluded from default queries (a11y tree) but still rendered.
+    expect(screen.queryAllByText('S')).toHaveLength(0);
+    expect(screen.queryAllByText('M')).toHaveLength(0);
+    const hidden = { includeHiddenElements: true } as const;
+    expect(screen.getAllByText('S', hidden).length).toBeGreaterThan(0);
+    expect(screen.getAllByText('M', hidden).length).toBeGreaterThan(0);
   });
 
   it('respects minDate and disables dates before it', () => {
diff --git a/packages/mobile/src/dates/__tests__/DatePicker.test.tsx b/packages/mobile/src/dates/__tests__/DatePicker.test.tsx
index 40a311fac6..4b06d9b95c 100644
--- a/packages/mobile/src/dates/__tests__/DatePicker.test.tsx
+++ b/packages/mobile/src/dates/__tests__/DatePicker.test.tsx
@@ -75,10 +75,7 @@ describe('DatePicker', () => {
 
     expect(mockOnOpen).toHaveBeenCalledTimes(1);
 
-    // Calendar should be visible
-    await waitFor(() => {
-      expect(screen.getByText('Confirm')).toBeTruthy();
-    });
+    screen.getByText('Confirm');
   });
 
   it('closes calendar when handle bar is pressed', async () => {
@@ -90,9 +87,7 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('Confirm')).toBeTruthy();
-    });
+    screen.getByText('Confirm');
 
     // Close calendar via handle bar using testID
     const handleBar = screen.getByTestId('handleBar');
@@ -119,9 +114,7 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      expect(screen.getByLabelText('Custom close label')).toBeTruthy();
-    });
+    expect(screen.getByLabelText('Custom close label')).toBeTruthy();
   });
 
   it('displays confirm button with custom text', async () => {
@@ -131,9 +124,7 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('Done')).toBeTruthy();
-    });
+    expect(screen.getByText('Done')).toBeTruthy();
   });
 
   it('confirm button is disabled when no date is selected', async () => {
@@ -143,10 +134,8 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      const confirmButton = screen.getByRole('button', { name: 'Confirm' });
-      expect(confirmButton).toBeDisabled();
-    });
+    const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+    expect(confirmButton).toBeDisabled();
   });
 
   it('confirm button has custom accessibility hint', async () => {
@@ -161,10 +150,8 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      const confirmButton = screen.getByRole('button', { name: 'Confirm' });
-      expect(confirmButton).toHaveProp('accessibilityHint', 'Custom confirm button hint');
-    });
+    const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+    expect(confirmButton).toHaveProp('accessibilityHint', 'Custom confirm button hint');
   });
 
   it('confirm button is enabled after selecting a date from calendar', async () => {
@@ -175,9 +162,7 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('July 2024')).toBeTruthy();
-    });
+    screen.getByText('July 2024');
 
     // Select a date
     const july15Button = screen.getByLabelText(/15.*July.*2024/);
@@ -212,9 +197,7 @@ describe('DatePicker', () => {
 
     expect(mockOnOpen).toHaveBeenCalledTimes(1);
 
-    await waitFor(() => {
-      expect(screen.getByText('July 2024')).toBeTruthy();
-    });
+    screen.getByText('July 2024');
 
     // Select a date
     const july15Button = screen.getByLabelText(/15.*July.*2024/);
@@ -268,9 +251,7 @@ describe('DatePicker', () => {
 
     expect(mockOnOpen).toHaveBeenCalledTimes(1);
 
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Confirm' })).toBeTruthy();
-    });
+    screen.getByRole('button', { name: 'Confirm' });
 
     // Close calendar using testID
     const handleBar = screen.getByTestId('handleBar');
@@ -301,10 +282,8 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      // Should show June 2024 (the month of the current date)
-      expect(screen.getByText('June 2024')).toBeTruthy();
-    });
+    // Should show June 2024 (the month of the current date)
+    expect(screen.getByText('June 2024')).toBeTruthy();
   });
 
   it('passes disabled state to DateInput and Calendar', () => {
@@ -324,9 +303,7 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('July 2024')).toBeTruthy();
-    });
+    screen.getByText('July 2024');
 
     // Previous month arrow should be disabled since minDate is in current month
     const prevArrow = screen.getByLabelText('Go to previous month');
@@ -342,9 +319,7 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('July 2024')).toBeTruthy();
-    });
+    screen.getByText('July 2024');
 
     // Next month arrow should be disabled since maxDate is in current month
     const nextArrow = screen.getByLabelText('Go to next month');
@@ -360,9 +335,7 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('July 2024')).toBeTruthy();
-    });
+    screen.getByText('July 2024');
 
     // Check that the calendar is rendered (specific dates being disabled is tested in Calendar.test.tsx)
     const allButtons = screen.getAllByRole('button');
@@ -447,9 +420,7 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('July 2024')).toBeTruthy();
-    });
+    screen.getByText('July 2024');
 
     // Select a date
     const july15Button = screen.getByLabelText(/15.*July.*2024/);
@@ -483,9 +454,7 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('July 2024')).toBeTruthy();
-    });
+    screen.getByText('July 2024');
 
     // Select a date
     const july15Button = screen.getByLabelText(/15.*July.*2024/);
@@ -512,9 +481,7 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('July 2024')).toBeTruthy();
-    });
+    expect(screen.getByText('July 2024')).toBeTruthy();
   });
 
   it('passes navigation accessibility labels to Calendar', async () => {
@@ -530,9 +497,7 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      expect(screen.getByLabelText('Next month custom')).toBeTruthy();
-    });
+    expect(screen.getByLabelText('Next month custom')).toBeTruthy();
     expect(screen.getByLabelText('Previous month custom')).toBeTruthy();
   });
 
@@ -552,9 +517,7 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('July 2024')).toBeTruthy();
-    });
+    screen.getByText('July 2024');
 
     // Select a date
     const july15Button = screen.getByLabelText(/15.*July.*2024/);
@@ -589,9 +552,7 @@ describe('DatePicker', () => {
     const calendarButton = screen.getByLabelText('Open calendar');
     fireEvent.press(calendarButton);
 
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Confirm' })).toBeTruthy();
-    });
+    screen.getByRole('button', { name: 'Confirm' });
 
     // Try to press disabled confirm button
     const confirmButton = screen.getByRole('button', { name: 'Confirm' });
diff --git a/packages/mobile/src/dots/DotCount.tsx b/packages/mobile/src/dots/DotCount.tsx
index 85f739082c..8ee702decc 100644
--- a/packages/mobile/src/dots/DotCount.tsx
+++ b/packages/mobile/src/dots/DotCount.tsx
@@ -56,8 +56,6 @@ const [opacityEnter, opacityExit, scaleEnter, scaleExit] = convertMotionConfigs(
   dotScaleExitConfig,
 ]);
 
-const dotTextPaddingHorizontal = 6;
-
 const variantColorMap: Record<DotCountVariants, ThemeVars.Color> = {
   negative: 'bgNegative',
 };
@@ -87,6 +85,18 @@ export type DotCountBaseProps = SharedProps &
     children?: React.ReactNode;
     /** Indicates what shape Dot is overlapping */
     overlap?: DotOverlap;
+    /**
+     * An optional fixed height of the DotCount component.
+     * Width grows based on content length.
+     * @default 24
+     * */
+    height?: number;
+    /**
+     * An optional fixed width of the DotCount component.
+     * By default, width grows based on content length.
+     * @default auto
+     * */
+    width?: number;
   };
 
 export type DotCountProps = DotCountBaseProps & {
@@ -110,6 +120,8 @@ export const DotCount = memo((_props: DotCountProps) => {
     variant = 'negative',
     count,
     max,
+    height = dotCountSize,
+    width,
     overlap,
     style,
     styles,
@@ -119,7 +131,7 @@ export const DotCount = memo((_props: DotCountProps) => {
   const [childrenSize, onChildrenLayout] = useDotsLayout();
   const transforms = useDotPinStyles(
     childrenSize,
-    { width: dotCountSize + dotTextPaddingHorizontal, height: dotCountSize } as LayoutRectangle,
+    { width: width ?? height, height } as LayoutRectangle,
     overlap,
   );
 
@@ -145,11 +157,17 @@ export const DotCount = memo((_props: DotCountProps) => {
     return [
       styleSheet.container,
       {
+        height,
+        minWidth: height,
+        width,
+        paddingHorizontal: theme.space[0.75],
+        borderWidth: theme.borderWidth[100],
+        borderRadius: theme.borderRadius[400],
         borderColor: theme.color.bgSecondary,
         backgroundColor: theme.color[variantColorMap[variant]],
       },
     ];
-  }, [theme.color, variant]);
+  }, [height, width, theme.space, theme.borderWidth, theme.borderRadius, theme.color, variant]);
 
   // avoid displaying 0 during animations and preserve exit animation
   useEffect(() => {
@@ -191,11 +209,6 @@ export const DotCount = memo((_props: DotCountProps) => {
     [containerStyles, animatedStyles, styles?.container],
   );
 
-  const textStyles = useMemo(
-    () => [{ paddingHorizontal: dotTextPaddingHorizontal }, styles?.text],
-    [styles?.text],
-  );
-
   const rootStyles = useMemo(() => [style, styles?.root], [styles?.root, style]);
 
   // only check childrenSize when children is defined
@@ -209,7 +222,7 @@ export const DotCount = memo((_props: DotCountProps) => {
       {!shouldUnmount && shouldShow && (
         <View style={pinStyles}>
           <Animated.View style={dotCountContainerStyle} testID="dotcount-container">
-            <Text color="fgInverse" font="caption" style={textStyles}>
+            <Text color="fgInverse" font="caption" style={styles?.text}>
               {parseDotCountMaxOverflow(countInternal, max)}
             </Text>
           </Animated.View>
@@ -224,9 +237,5 @@ const styleSheet = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     display: 'flex',
-    borderWidth: 1,
-    minWidth: dotCountSize,
-    height: dotCountSize,
-    borderRadius: 16,
   },
 });
diff --git a/packages/mobile/src/dots/DotSymbol.tsx b/packages/mobile/src/dots/DotSymbol.tsx
index 58681fea03..ca7dc17254 100644
--- a/packages/mobile/src/dots/DotSymbol.tsx
+++ b/packages/mobile/src/dots/DotSymbol.tsx
@@ -123,7 +123,7 @@ export const DotSymbol = memo((_props: DotSymbolProps) => {
   const shouldShow = children !== undefined ? childrenSize !== null : true;
 
   return (
-    <View {...props} style={style}>
+    <View style={style} {...props}>
       <View onLayout={onChildrenLayout} testID={`${props.testID}-children`}>
         {children}
       </View>
diff --git a/packages/mobile/src/dots/__tests__/DotSymbol.test.tsx b/packages/mobile/src/dots/__tests__/DotSymbol.test.tsx
index 7c6461ed55..0b03dbdf16 100644
--- a/packages/mobile/src/dots/__tests__/DotSymbol.test.tsx
+++ b/packages/mobile/src/dots/__tests__/DotSymbol.test.tsx
@@ -40,7 +40,9 @@ describe('DotSymbol', () => {
       nativeEvent: { layout: { height: 12, width: 12 } },
     });
 
-    expect(screen.getByTestId('dotsymbol-remote-image').props.source).toEqual({ uri: src });
+    expect(
+      screen.getByTestId('dotsymbol-remote-image', { includeHiddenElements: true }).props.source,
+    ).toEqual({ uri: src });
   });
 
   it('renders an image when source is a string', () => {
@@ -55,7 +57,9 @@ describe('DotSymbol', () => {
       nativeEvent: { layout: { height: 12, width: 12 } },
     });
 
-    expect(screen.getByTestId('dotsymbol-remote-image').props.source).toEqual({ uri: src });
+    expect(
+      screen.getByTestId('dotsymbol-remote-image', { includeHiddenElements: true }).props.source,
+    ).toEqual({ uri: src });
   });
 
   it('passes a11y for DotSymbol that have a children', () => {
diff --git a/packages/mobile/src/examples/ExampleScreen.tsx b/packages/mobile/src/examples/ExampleScreen.tsx
index 08482319aa..1abca8d9e6 100644
--- a/packages/mobile/src/examples/ExampleScreen.tsx
+++ b/packages/mobile/src/examples/ExampleScreen.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useMemo, useRef } from 'react';
+import React, { createContext, type JSX, useCallback, useContext, useMemo, useRef } from 'react';
 import { ScrollView } from 'react-native';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
 import type { PaddingProps } from '@coinbase/cds-common/types';
@@ -34,7 +34,7 @@ export const Example = ({
   const { registerExample } = useContext(ExampleContext);
 
   // Register exactly once during first render
-  const exampleNumberRef = useRef<number>();
+  const exampleNumberRef = useRef<number>(undefined);
   if (exampleNumberRef.current === undefined) {
     exampleNumberRef.current = registerExample();
   }
diff --git a/packages/mobile/src/gradients/LinearGradient.tsx b/packages/mobile/src/gradients/LinearGradient.tsx
index fcc80a32b5..107dc8fdc3 100644
--- a/packages/mobile/src/gradients/LinearGradient.tsx
+++ b/packages/mobile/src/gradients/LinearGradient.tsx
@@ -45,13 +45,6 @@ type LinearGradientProps = {
    * Colors to be distributed between start and end.
    */
   colors: NonNullable<string>[];
-  /**
-   * @deprecated Please use the elevated prop instead. This will be removed in a future major release.
-   * @deprecationExpectedRemoval v6
-   * Sets layout position between SVG and children. Set it to false when gradient should overlay children content.
-   * @default true
-   */
-  isBelowChildren?: boolean;
   /**
    * @default false
    * Linear gradient will overlay the children content when true
@@ -72,7 +65,6 @@ export function LinearGradient({
   end,
   stops = defaultStops,
   colors,
-  isBelowChildren = true,
   elevated,
   angle = 180,
   style,
@@ -107,7 +99,7 @@ export function LinearGradient({
     );
   }, [colors, start, end, angle, stops]);
 
-  const items = isBelowChildren || !elevated ? [svg, children] : [children, svg];
+  const items = !elevated ? [svg, children] : [children, svg];
   return (
     <View pointerEvents={pointerEvents} style={style} testID={testID}>
       {items}
diff --git a/packages/mobile/src/gradients/__stories__/LinearGradient.stories.tsx b/packages/mobile/src/gradients/__stories__/LinearGradient.stories.tsx
index 4cfb4ae40d..2c4f9136fb 100644
--- a/packages/mobile/src/gradients/__stories__/LinearGradient.stories.tsx
+++ b/packages/mobile/src/gradients/__stories__/LinearGradient.stories.tsx
@@ -24,12 +24,6 @@ const LinearGradientScreen = () => {
           <Text font="body">Horizontal angle example</Text>
         </LinearGradient>
       </Example>
-      <Example inline title="As overlay with isBelowChildren set to false">
-        <LinearGradient colors={[transparent, bg]} isBelowChildren={false}>
-          <Text font="body">{loremIpsum}...</Text>
-        </LinearGradient>
-        <Text font="label1">More</Text>
-      </Example>
       <Example inline title="As overlay with elevated prop">
         <LinearGradient elevated colors={[transparent, bg]}>
           <Text font="body">{loremIpsum}...</Text>
diff --git a/packages/mobile/src/hooks/__tests__/constants.ts b/packages/mobile/src/hooks/__tests__/constants.ts
deleted file mode 100644
index 5f6db193d9..0000000000
--- a/packages/mobile/src/hooks/__tests__/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const mockStatusBarHeight = 20;
diff --git a/packages/mobile/src/hooks/__tests__/useA11y.test.ts b/packages/mobile/src/hooks/__tests__/useA11y.test.ts
index ade93a0a97..3629ffa283 100644
--- a/packages/mobile/src/hooks/__tests__/useA11y.test.ts
+++ b/packages/mobile/src/hooks/__tests__/useA11y.test.ts
@@ -1,5 +1,5 @@
 import { AccessibilityInfo } from 'react-native';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import { useA11y } from '../useA11y';
 
diff --git a/packages/mobile/src/hooks/__tests__/useAppState.test.ts b/packages/mobile/src/hooks/__tests__/useAppState.test.ts
index 2f21f2ebfb..cec7c72d8d 100644
--- a/packages/mobile/src/hooks/__tests__/useAppState.test.ts
+++ b/packages/mobile/src/hooks/__tests__/useAppState.test.ts
@@ -1,46 +1,59 @@
-import type { AppStateStatus } from 'react-native';
-import { renderHook } from '@testing-library/react-hooks';
+import { AppState, type AppStateStatus } from 'react-native';
+import { renderHook } from '@testing-library/react-native';
 
 import { useAppState } from '../useAppState';
 
 describe('useAppState', () => {
-  const removeListenerSpy = jest.fn();
-  const addListenerSpy = jest.fn(() => {
-    return {
-      remove: removeListenerSpy,
-    };
+  const mockRemoveListener = jest.fn();
+  let addEventListenerSpy: jest.SpyInstance;
+  const originalCurrentState = AppState.currentState;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    addEventListenerSpy = jest.spyOn(AppState, 'addEventListener').mockReturnValue({
+      remove: mockRemoveListener,
+    });
+  });
+
+  afterEach(() => {
+    addEventListenerSpy.mockRestore();
+    Object.defineProperty(AppState, 'currentState', {
+      value: originalCurrentState,
+      writable: true,
+      configurable: true,
+    });
   });
 
-  const mockCurrentAppState = (state: AppStateStatus) => {
-    jest.resetModules();
-    jest.doMock('react-native/Libraries/AppState/AppState', () => ({
-      currentState: state,
-      addEventListener: addListenerSpy,
-    }));
+  const mockCurrentState = (state: AppStateStatus) => {
+    Object.defineProperty(AppState, 'currentState', {
+      value: state,
+      writable: true,
+      configurable: true,
+    });
   };
 
   it('returns AppState.currentState - active', () => {
-    mockCurrentAppState('active');
+    mockCurrentState('active');
     const { result } = renderHook(() => useAppState());
     expect(result.current).toBe('active');
   });
 
   it('returns AppState.currentState - inactive', () => {
-    mockCurrentAppState('inactive');
+    mockCurrentState('inactive');
     const { result } = renderHook(() => useAppState());
     expect(result.current).toBe('inactive');
   });
 
   it('adds an event listener for state changes', () => {
-    mockCurrentAppState('active');
+    mockCurrentState('active');
     renderHook(() => useAppState());
-    expect(addListenerSpy).toHaveBeenCalled();
+    expect(addEventListenerSpy).toHaveBeenCalled();
   });
 
   it('removes event listener on unmount', () => {
-    mockCurrentAppState('inactive');
+    mockCurrentState('inactive');
     const { unmount } = renderHook(() => useAppState());
     unmount();
-    expect(removeListenerSpy).toHaveBeenCalled();
+    expect(mockRemoveListener).toHaveBeenCalled();
   });
 });
diff --git a/packages/mobile/src/hooks/__tests__/useCellSpacing.test.ts b/packages/mobile/src/hooks/__tests__/useCellSpacing.test.ts
index b1c711fe34..38fb2f878a 100644
--- a/packages/mobile/src/hooks/__tests__/useCellSpacing.test.ts
+++ b/packages/mobile/src/hooks/__tests__/useCellSpacing.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import { innerDefaults, outerDefaults, useCellSpacing } from '../useCellSpacing';
 
diff --git a/packages/mobile/src/hooks/__tests__/useDimension.test.ts b/packages/mobile/src/hooks/__tests__/useDimension.test.ts
index 9ebaf6a1ad..29f18283c8 100644
--- a/packages/mobile/src/hooks/__tests__/useDimension.test.ts
+++ b/packages/mobile/src/hooks/__tests__/useDimension.test.ts
@@ -1,10 +1,20 @@
-import { renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { renderHook } from '@testing-library/react-native';
 
 import { useDimensions } from '../useDimensions';
 
+const safeAreaInitialMetrics = {
+  frame: { x: 0, y: 0, width: 0, height: 0 },
+  insets: { top: 20, left: 0, right: 0, bottom: 0 },
+};
+
 describe('useDimensions.test', () => {
   it('returns screen dimensions', () => {
-    const { result } = renderHook(() => useDimensions());
+    const { result } = renderHook(() => useDimensions(), {
+      wrapper: ({ children }) =>
+        React.createElement(SafeAreaProvider, { initialMetrics: safeAreaInitialMetrics }, children),
+    });
 
     expect(result.current.screenHeight).toBe(1334);
     expect(result.current.screenWidth).toBe(750);
diff --git a/packages/mobile/src/hooks/__tests__/useHorizontalScrollToTarget.test.ts b/packages/mobile/src/hooks/__tests__/useHorizontalScrollToTarget.test.ts
index 8fced6da5a..d13b989be9 100644
--- a/packages/mobile/src/hooks/__tests__/useHorizontalScrollToTarget.test.ts
+++ b/packages/mobile/src/hooks/__tests__/useHorizontalScrollToTarget.test.ts
@@ -5,25 +5,26 @@ import type {
   ScrollView,
   View,
 } from 'react-native';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react-native';
 import throttle from 'lodash/throttle';
 
 import { useHorizontalScrollToTarget } from '../useHorizontalScrollToTarget';
 
 jest.mock('lodash/throttle');
 
+type ThrottledMock = jest.Mock & { cancel: jest.Mock };
+
 describe('useHorizontalScrollToTarget', () => {
   let mockScrollView: ScrollView;
   let mockActiveTarget: View;
-  let throttledFn: jest.Mock;
+  let throttledFn: ThrottledMock;
 
   beforeEach(() => {
     jest.clearAllMocks();
     jest.useFakeTimers();
 
     // Mock throttle to return the function immediately
-    throttledFn = jest.fn();
-    // @ts-expect-error - Testing internal ref assignment
+    throttledFn = jest.fn() as ThrottledMock;
     throttledFn.cancel = jest.fn();
     (throttle as jest.Mock).mockImplementation((fn) => {
       throttledFn.mockImplementation(fn);
@@ -78,7 +79,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ overflowThreshold: 1 }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
@@ -93,7 +93,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ overflowThreshold: 1 }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(400);
         result.current.handleScrollContainerLayout({
@@ -108,7 +107,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ overflowThreshold: 1 }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
@@ -125,7 +123,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ overflowThreshold: 1 }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
@@ -142,7 +139,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ overflowThreshold: 1 }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
@@ -159,7 +155,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ overflowThreshold: 1 }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
@@ -176,7 +171,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ overflowThreshold: 10 }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
@@ -207,7 +201,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget());
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
@@ -228,7 +221,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget());
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
@@ -243,7 +235,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget());
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
@@ -260,7 +251,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget());
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContainerLayout({
           nativeEvent: { layout: { width: 500 } },
@@ -275,7 +265,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget());
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContainerLayout({
           nativeEvent: { layout: { width: 500 } },
@@ -289,13 +278,14 @@ describe('useHorizontalScrollToTarget', () => {
 
   describe('active target scrolling', () => {
     it('should scroll to active target when offscreen left', () => {
-      const { result, rerender } = renderHook(
-        ({ activeTarget }) => useHorizontalScrollToTarget({ activeTarget }),
-        { initialProps: { activeTarget: null } },
-      );
+      const { result, rerender } = renderHook<
+        ReturnType<typeof useHorizontalScrollToTarget>,
+        { activeTarget: View | null }
+      >(({ activeTarget }) => useHorizontalScrollToTarget({ activeTarget }), {
+        initialProps: { activeTarget: null },
+      });
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
@@ -307,7 +297,6 @@ describe('useHorizontalScrollToTarget', () => {
         });
       });
 
-      // @ts-expect-error - Type inference issue with renderHook
       rerender({ activeTarget: mockActiveTarget });
 
       expect(mockActiveTarget.measureLayout).toHaveBeenCalled();
@@ -319,13 +308,14 @@ describe('useHorizontalScrollToTarget', () => {
     });
 
     it('should scroll to active target when offscreen right', () => {
-      const { result, rerender } = renderHook(
-        ({ activeTarget }) => useHorizontalScrollToTarget({ activeTarget }),
-        { initialProps: { activeTarget: null } },
-      );
+      const { result, rerender } = renderHook<
+        ReturnType<typeof useHorizontalScrollToTarget>,
+        { activeTarget: View | null }
+      >(({ activeTarget }) => useHorizontalScrollToTarget({ activeTarget }), {
+        initialProps: { activeTarget: null },
+      });
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
@@ -337,7 +327,6 @@ describe('useHorizontalScrollToTarget', () => {
         });
       });
 
-      // @ts-expect-error - Type inference issue with renderHook
       rerender({ activeTarget: mockActiveTarget });
 
       expect(mockActiveTarget.measureLayout).toHaveBeenCalled();
@@ -349,13 +338,14 @@ describe('useHorizontalScrollToTarget', () => {
     });
 
     it('should not scroll when target is visible', () => {
-      const { result, rerender } = renderHook(
-        ({ activeTarget }) => useHorizontalScrollToTarget({ activeTarget }),
-        { initialProps: { activeTarget: null } },
-      );
+      const { result, rerender } = renderHook<
+        ReturnType<typeof useHorizontalScrollToTarget>,
+        { activeTarget: View | null }
+      >(({ activeTarget }) => useHorizontalScrollToTarget({ activeTarget }), {
+        initialProps: { activeTarget: null },
+      });
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
@@ -367,7 +357,6 @@ describe('useHorizontalScrollToTarget', () => {
         });
       });
 
-      // @ts-expect-error - Type inference issue with renderHook
       rerender({ activeTarget: mockActiveTarget });
 
       expect(mockActiveTarget.measureLayout).toHaveBeenCalled();
@@ -375,14 +364,16 @@ describe('useHorizontalScrollToTarget', () => {
     });
 
     it('should use autoScrollOffset when scrolling', () => {
-      const { result, rerender } = renderHook(
+      const { result, rerender } = renderHook<
+        ReturnType<typeof useHorizontalScrollToTarget>,
+        { activeTarget: View | null; autoScrollOffset: number }
+      >(
         ({ activeTarget, autoScrollOffset }) =>
           useHorizontalScrollToTarget({ activeTarget, autoScrollOffset }),
         { initialProps: { activeTarget: null, autoScrollOffset: 0 } },
       );
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
@@ -394,7 +385,6 @@ describe('useHorizontalScrollToTarget', () => {
         });
       });
 
-      // @ts-expect-error - Type inference issue with renderHook
       rerender({ activeTarget: mockActiveTarget, autoScrollOffset: 20 });
 
       expect(mockScrollView.scrollTo).toHaveBeenCalledWith({
@@ -408,7 +398,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ activeTarget: null }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
       });
 
@@ -421,7 +410,6 @@ describe('useHorizontalScrollToTarget', () => {
       );
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = null;
       });
 
@@ -435,7 +423,6 @@ describe('useHorizontalScrollToTarget', () => {
 
       unmount();
 
-      // @ts-expect-error - Testing internal ref assignment
       expect(throttledFn.cancel).toHaveBeenCalled();
     });
   });
@@ -445,7 +432,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget());
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(500);
         result.current.handleScrollContainerLayout({
@@ -463,7 +449,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget());
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(300);
         result.current.handleScrollContainerLayout({
@@ -481,7 +466,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ overflowThreshold: 1 }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollView;
         result.current.handleScrollContentSizeChange(1000);
         result.current.handleScrollContainerLayout({
diff --git a/packages/mobile/src/hooks/__tests__/useInputBorderStyle.test.ts b/packages/mobile/src/hooks/__tests__/useInputBorderStyle.test.ts
index 07d35ef10b..00ead4cc79 100644
--- a/packages/mobile/src/hooks/__tests__/useInputBorderStyle.test.ts
+++ b/packages/mobile/src/hooks/__tests__/useInputBorderStyle.test.ts
@@ -1,5 +1,5 @@
 import { focusedInputBorderWidth, inputBorderWidth } from '@coinbase/cds-common/tokens/input';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import { DefaultThemeProvider } from '../../utils/testHelpers';
 import { useInputBorderAnimation } from '../useInputBorderAnimation';
diff --git a/packages/mobile/src/hooks/__tests__/usePressAnimation.test.ts b/packages/mobile/src/hooks/__tests__/usePressAnimation.test.ts
index 24602fbab5..7a76bdc6d2 100644
--- a/packages/mobile/src/hooks/__tests__/usePressAnimation.test.ts
+++ b/packages/mobile/src/hooks/__tests__/usePressAnimation.test.ts
@@ -1,6 +1,6 @@
 import { act } from 'react';
 import { Animated } from 'react-native';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import { usePressAnimation } from '../usePressAnimation';
 
diff --git a/packages/mobile/src/hooks/__tests__/useScreenReaderStatus.test.ts b/packages/mobile/src/hooks/__tests__/useScreenReaderStatus.test.ts
index 533dfe17c1..1e7d045c44 100644
--- a/packages/mobile/src/hooks/__tests__/useScreenReaderStatus.test.ts
+++ b/packages/mobile/src/hooks/__tests__/useScreenReaderStatus.test.ts
@@ -1,5 +1,5 @@
 import { AccessibilityInfo } from 'react-native';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react-native';
 
 import { useScreenReaderStatus } from '../useScreenReaderStatus';
 
@@ -15,9 +15,10 @@ describe('useScreenReaderStatus', () => {
 
   it('should return true when screen reader is enabled', async () => {
     (AccessibilityInfo.isScreenReaderEnabled as jest.Mock).mockResolvedValueOnce(true);
-    const { result, waitForNextUpdate } = renderHook(() => useScreenReaderStatus());
-    await waitForNextUpdate();
-    expect(result.current).toBe(true);
+    const { result } = renderHook(() => useScreenReaderStatus());
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
   });
 
   it('should return false when screen reader is disabled', () => {
diff --git a/packages/mobile/src/hooks/__tests__/useScrollOffset.test.ts b/packages/mobile/src/hooks/__tests__/useScrollOffset.test.ts
index 238403be11..1d1564d95a 100644
--- a/packages/mobile/src/hooks/__tests__/useScrollOffset.test.ts
+++ b/packages/mobile/src/hooks/__tests__/useScrollOffset.test.ts
@@ -1,5 +1,5 @@
 import { act } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import { useScrollOffset } from '../useScrollOffset';
 
diff --git a/packages/mobile/src/hooks/__tests__/useScrollTo.test.tsx b/packages/mobile/src/hooks/__tests__/useScrollTo.test.tsx
index 08e037b741..9aa3ac2471 100644
--- a/packages/mobile/src/hooks/__tests__/useScrollTo.test.tsx
+++ b/packages/mobile/src/hooks/__tests__/useScrollTo.test.tsx
@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { ScrollView } from 'react-native';
-import { renderHook } from '@testing-library/react-hooks';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react-native';
+import { cleanup, fireEvent, render, renderHook, screen } from '@testing-library/react-native';
 
 import { Button } from '../../buttons';
 import { Box } from '../../layout';
diff --git a/packages/mobile/src/hooks/__tests__/useStatusBarHeight.test.ts b/packages/mobile/src/hooks/__tests__/useStatusBarHeight.test.ts
deleted file mode 100644
index b7a17e5eeb..0000000000
--- a/packages/mobile/src/hooks/__tests__/useStatusBarHeight.test.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { StatusBar } from 'react-native';
-import { renderHook } from '@testing-library/react-hooks';
-
-import { useStatusBarHeight } from '../useStatusBarHeight';
-
-import { mockStatusBarHeight } from './constants';
-
-describe('useStatusBarHeight.test', () => {
-  beforeEach(() => {
-    jest.resetModules();
-  });
-
-  it('returns status bar height', () => {
-    const { result } = renderHook(() => useStatusBarHeight());
-
-    expect(result.current).toBe(mockStatusBarHeight);
-  });
-
-  it('returns default status bar height on android', () => {
-    jest.doMock('react-native/Libraries/Utilities/Platform', () => ({ OS: 'android' }));
-
-    const { result } = renderHook(() => useStatusBarHeight());
-
-    expect(result.current).toBe(StatusBar.currentHeight);
-  });
-});
diff --git a/packages/mobile/src/hooks/__tests__/useWebBrowserOpener.test.tsx b/packages/mobile/src/hooks/__tests__/useWebBrowserOpener.test.tsx
index 094e01cbd6..1ed7576fd4 100644
--- a/packages/mobile/src/hooks/__tests__/useWebBrowserOpener.test.tsx
+++ b/packages/mobile/src/hooks/__tests__/useWebBrowserOpener.test.tsx
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import { defaultTheme } from '../../themes/defaultTheme';
 import * as openWebBrowser from '../../utils/openWebBrowser';
diff --git a/packages/mobile/src/hooks/useA11y.ts b/packages/mobile/src/hooks/useA11y.ts
index e10497ba90..e6c9d6f7fa 100644
--- a/packages/mobile/src/hooks/useA11y.ts
+++ b/packages/mobile/src/hooks/useA11y.ts
@@ -17,7 +17,7 @@ import { AccessibilityInfo, findNodeHandle } from 'react-native';
  *
  */
 export const useA11y = () => {
-  const setA11yFocus = useCallback(<T>(ref: React.RefObject<T>) => {
+  const setA11yFocus = useCallback(<T>(ref: React.RefObject<T | null>) => {
     // TODO: Migrate this to fabric supported API
     const reactTag = findNodeHandle(ref.current as React.Component);
     if (reactTag) {
diff --git a/packages/mobile/src/hooks/useAppState.ts b/packages/mobile/src/hooks/useAppState.ts
index a398a333e2..50f2cb7935 100644
--- a/packages/mobile/src/hooks/useAppState.ts
+++ b/packages/mobile/src/hooks/useAppState.ts
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { AppState } from 'react-native';
-import type { AppStateStatus } from 'react-native';
+import { AppState, type AppStateStatus } from 'react-native';
 
 export const useAppState = () => {
   const [appState, setAppState] = useState(AppState.currentState);
diff --git a/packages/mobile/src/hooks/useDimensions.ts b/packages/mobile/src/hooks/useDimensions.ts
index 82fa91b25b..51ed8fc44c 100644
--- a/packages/mobile/src/hooks/useDimensions.ts
+++ b/packages/mobile/src/hooks/useDimensions.ts
@@ -1,6 +1,5 @@
 import { useWindowDimensions } from 'react-native';
-
-import { useStatusBarHeight } from './useStatusBarHeight';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 // The bottom Navigation bar height needs the be accounted for but could not find a lib to help with this.
 export const IOS_BOTTOM_NAV_BAR_HEIGHT = 50;
@@ -8,7 +7,7 @@ export const IOS_BOTTOM_NAV_BAR_HEIGHT = 50;
 // This is the beginning of our new dimensions hook. It will build on the old retail `useDimensions` hook.
 export function useDimensions() {
   const { height: screenHeight, width: screenWidth } = useWindowDimensions();
-  const statusBarHeight = useStatusBarHeight();
+  const { top: statusBarHeight } = useSafeAreaInsets();
   return {
     screenHeight,
     screenWidth,
diff --git a/packages/mobile/src/hooks/useDotPinStyles.ts b/packages/mobile/src/hooks/useDotPinStyles.ts
index 6ec4f30719..f5ac07027b 100644
--- a/packages/mobile/src/hooks/useDotPinStyles.ts
+++ b/packages/mobile/src/hooks/useDotPinStyles.ts
@@ -1,8 +1,32 @@
 import type { LayoutRectangle } from 'react-native';
 import type { DotOverlap } from '@coinbase/cds-common';
 
+/** Valid keys for accessing pin position offsets. */
 export type DotPinStylesKey = 'end' | 'start' | 'bottom' | 'top';
 
+/**
+ * Calculates positioning offsets for pinning a dot badge to the edges of its parent element.
+ *
+ * Returns transform offsets that position the dot so it overlaps the edge by half its size.
+ * Used by DotCount, DotSymbol, and DotStatusColor to position badges at corners like "top-end".
+ *
+ * @param childrenSize - Measured dimensions of the parent/host element
+ * @param dotSize - Dimensions of the dot badge (number for uniform size, or LayoutRectangle)
+ * @param overlap - When 'circular', pulls offsets inward to better align with circular parents (e.g., avatars)
+ * @returns Object with edge offsets { end, start, bottom, top }, or null if dimensions unavailable
+ *
+ * @example
+ * ```tsx
+ * const transforms = useDotPinStyles(childrenSize, dotSize, overlap);
+ * // For pin="top-end", use:
+ * const style = {
+ *   transform: [
+ *     { translateX: transforms.end },
+ *     { translateY: transforms.top }
+ *   ]
+ * };
+ * ```
+ */
 export const useDotPinStyles = (
   childrenSize: LayoutRectangle | null = null,
   dotSize: LayoutRectangle | number | null = null,
diff --git a/packages/mobile/src/hooks/useHasNotch.ts b/packages/mobile/src/hooks/useHasNotch.ts
index 1cc3065ffa..3b6073288b 100644
--- a/packages/mobile/src/hooks/useHasNotch.ts
+++ b/packages/mobile/src/hooks/useHasNotch.ts
@@ -1,8 +1,11 @@
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+/**
+ * @deprecated This logic is seriously outdated. The last iPhone version to have a 20px status bar was iPhone 8. Most modern iOS devices no longer have a "notch". This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const useHasNotch = () => {
   const { top } = useSafeAreaInsets();
-  // we choose to hide the statusbar on iOS for devices with a notch, which
-  // has a top inset of more than 20.
+  // older iphones without a notch (or island for current phones) have a status bar of 20px
   return top > 20;
 };
diff --git a/packages/mobile/src/hooks/useScrollTo.ts b/packages/mobile/src/hooks/useScrollTo.ts
index 3c536f9ea3..bf68a558b7 100644
--- a/packages/mobile/src/hooks/useScrollTo.ts
+++ b/packages/mobile/src/hooks/useScrollTo.ts
@@ -18,7 +18,7 @@ export type ScrollToFns = {
 };
 
 export const useScrollTo = (ref?: AnyRef<ScrollView>): [ScrollRef, ScrollToFns] => {
-  const internalRef = useRef<ScrollView>();
+  const internalRef = useRef<ScrollView>(undefined);
   const scrollRef = useMergeRefs(ref, internalRef);
   const scrollTo = useCallback(({ x = 0, y = 0, animated = true }: ScrollToParams) => {
     internalRef.current?.scrollTo({ x, y, animated });
diff --git a/packages/mobile/src/hooks/useStatusBarHeight.ts b/packages/mobile/src/hooks/useStatusBarHeight.ts
index c125b82c52..5404619f1f 100644
--- a/packages/mobile/src/hooks/useStatusBarHeight.ts
+++ b/packages/mobile/src/hooks/useStatusBarHeight.ts
@@ -1,16 +1,9 @@
-import { useEffect, useState } from 'react';
-import { NativeEventEmitter, NativeModules, Platform, StatusBar } from 'react-native';
-import type { NativeModule } from 'react-native';
-
-const { StatusBarManager } = NativeModules;
-
-type StatusBarNativeModule = {
-  getHeight: (arg1: ({ height }: { height: number }) => void) => void;
-} & NativeModule;
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 /**
  * @deprecated Use `useSafeAreaInsets().top` from `react-native-safe-area-context` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v9
+ *
  * This approach is recommended by Expo and provides more reliable values across platforms.
  * @see https://docs.expo.dev/versions/latest/sdk/safe-area-context/
  *
@@ -24,27 +17,6 @@ type StatusBarNativeModule = {
  * const statusBarHeight = insets.top;
  */
 export const useStatusBarHeight = () => {
-  const [statusBarHeight, setStatusBarHeight] = useState<number>();
-
-  useEffect(() => {
-    if (Platform.OS === 'ios' && StatusBarManager !== undefined) {
-      const statusBarManager = StatusBarManager as StatusBarNativeModule;
-      const emitter = new NativeEventEmitter(statusBarManager);
-
-      statusBarManager.getHeight(({ height }: { height: number }) => setStatusBarHeight(height));
-
-      const subscription = emitter.addListener(
-        'statusBarFrameWillChange',
-        ({ frame: { height } }: { frame: { height: number } }) => {
-          setStatusBarHeight(height);
-        },
-      );
-
-      return () => subscription.remove();
-    }
-    setStatusBarHeight(StatusBar.currentHeight);
-    return () => {};
-  }, []);
-
-  return statusBarHeight;
+  const { top } = useSafeAreaInsets();
+  return top;
 };
diff --git a/packages/mobile/src/icons/Icon.tsx b/packages/mobile/src/icons/Icon.tsx
index 6a0e9517fa..3dd6e7d42d 100644
--- a/packages/mobile/src/icons/Icon.tsx
+++ b/packages/mobile/src/icons/Icon.tsx
@@ -47,7 +47,10 @@ export type IconBaseProps = SharedProps &
      * @default primary
      */
     color?: ThemeVars.Color;
-    /** @danger This is a migration escape hatch. It is not intended to be used normally. */
+    /**
+     * @deprecated Use `style`, `styles.icon`, or the `color` prop to customize icon color. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
+     */
     dangerouslySetColor?: string | Animated.AnimatedInterpolation<string>;
     animated?: boolean;
     style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
@@ -161,7 +164,8 @@ export const Icon = memo((_props: IconProps) => {
         accessibilityRole="image"
         accessible={!!accessibilityLabel}
         allowFontScaling={false}
-        style={iconStyle}
+        // TODO https://linear.app/coinbase/issue/CDS-1518/audit-potentially-harmful-reactnative-animated-pattern
+        style={iconStyle as StyleProp<TextStyle>}
       >
         {glyph}
       </TextComponent>
diff --git a/packages/mobile/src/icons/TextIcon.tsx b/packages/mobile/src/icons/TextIcon.tsx
index 7e372b243b..684ce895db 100644
--- a/packages/mobile/src/icons/TextIcon.tsx
+++ b/packages/mobile/src/icons/TextIcon.tsx
@@ -53,7 +53,8 @@ export const TextIcon = memo(function TextIcon({
           color: iconColor,
         },
         style,
-      ] as TextStyle,
+        // TODO https://linear.app/coinbase/issue/CDS-1518/audit-potentially-harmful-reactnative-animated-pattern
+      ] as StyleProp<TextStyle>,
     [style, iconColor, iconSize],
   );
 
diff --git a/packages/mobile/src/jest.d.ts b/packages/mobile/src/jest.d.ts
index 4ffd9e6b26..034d98878c 100644
--- a/packages/mobile/src/jest.d.ts
+++ b/packages/mobile/src/jest.d.ts
@@ -1,3 +1,50 @@
 /// <reference types='react-native-gesture-handler/jestSetup' />
-/// <reference types='react-native-accessibility-engine' />
-/// <reference types='@testing-library/jest-native/extend-expect' />
+
+/**
+ * Custom accessibility matcher type declaration.
+ * Replaces the react-native-accessibility-engine types.
+ */
+
+type AccessibilityViolation = {
+  pathToComponent: string[];
+  problem: string;
+  solution: string;
+  link: string;
+};
+
+type AccessibilityOptions = {
+  /** Specific rule IDs to check. If not provided, all rules are checked. */
+  rules?: string[];
+  /** Custom handler to filter or modify violations before the assertion. */
+  customViolationHandler?: (violations: AccessibilityViolation[]) => AccessibilityViolation[];
+};
+
+type AccessibilityMatchers<R> = {
+  /**
+   * Check if a component is accessible according to React Native accessibility rules.
+   *
+   * @param options - Optional configuration for accessibility checks
+   * @example
+   * expect(screen.getByTestId('my-button')).toBeAccessible();
+   * expect(screen.getByTestId('my-button')).toBeAccessible({
+   *   customViolationHandler: (violations) => violations.filter(v => v.problem !== 'some problem')
+   * });
+   */
+  toBeAccessible(options?: AccessibilityOptions): R;
+};
+
+// Implicit Jest global `expect`.
+declare global {
+  namespace jest {
+    // eslint-disable-next-line no-restricted-syntax, @typescript-eslint/no-empty-object-type
+    interface Matchers<R, T = object> extends AccessibilityMatchers<R> {}
+  }
+}
+
+// Explicit `@jest/globals` `expect` matchers.
+declare module '@jest/expect' {
+  // eslint-disable-next-line no-restricted-syntax, @typescript-eslint/no-empty-object-type
+  interface Matchers<R extends void | Promise<void>> extends AccessibilityMatchers<R> {}
+}
+
+export {};
diff --git a/packages/mobile/src/layout/Box.tsx b/packages/mobile/src/layout/Box.tsx
index cc5a35facc..0a70083eb7 100644
--- a/packages/mobile/src/layout/Box.tsx
+++ b/packages/mobile/src/layout/Box.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef, memo, useMemo } from 'react';
 import { Animated, type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
-import type { PinningDirection } from '@coinbase/cds-common';
+import type { PinningDirection, SharedProps } from '@coinbase/cds-common';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { ElevationLevels } from '@coinbase/cds-common/types/ElevationLevels';
 
@@ -9,34 +9,36 @@ import { useTheme } from '../hooks/useTheme';
 import { pinStyles } from '../styles/pinStyles';
 import { getStyles, type StyleProps } from '../styles/styleProps';
 
-export type BoxBaseProps = StyleProps & {
-  children?: React.ReactNode;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  animated?: boolean;
-  /** Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. */
-  elevation?: ElevationLevels;
-  font?: ThemeVars.FontFamily | 'inherit';
-  /** Direction in which to absolutely pin the box. */
-  pin?: PinningDirection;
-  /** Add a border around all sides of the box. */
-  bordered?: boolean;
-  /** Add a border to the top side of the box. */
-  borderedTop?: boolean;
-  /** Add a border to the bottom side of the box. */
-  borderedBottom?: boolean;
-  /** Add a border to the leading side of the box. */
-  borderedStart?: boolean;
-  /** Add a border to the trailing side of the box. */
-  borderedEnd?: boolean;
-  /** Add a border to the leading and trailing sides of the box. */
-  borderedHorizontal?: boolean;
-  /** Add a border to the top and bottom sides of the box. */
-  borderedVertical?: boolean;
-  /** @danger This is a migration escape hatch. It is not intended to be used normally. */
-  dangerouslySetBackground?: string;
-  /** Used to locate this element in unit and end-to-end tests. */
-  testID?: string;
-};
+export type BoxBaseProps = SharedProps &
+  StyleProps & {
+    children?: React.ReactNode;
+    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    animated?: boolean;
+    /** Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. */
+    elevation?: ElevationLevels;
+    font?: ThemeVars.FontFamily | 'inherit';
+    /** Direction in which to absolutely pin the box. */
+    pin?: PinningDirection;
+    /** Add a border around all sides of the box. */
+    bordered?: boolean;
+    /** Add a border to the top side of the box. */
+    borderedTop?: boolean;
+    /** Add a border to the bottom side of the box. */
+    borderedBottom?: boolean;
+    /** Add a border to the leading side of the box. */
+    borderedStart?: boolean;
+    /** Add a border to the trailing side of the box. */
+    borderedEnd?: boolean;
+    /** Add a border to the leading and trailing sides of the box. */
+    borderedHorizontal?: boolean;
+    /** Add a border to the top and bottom sides of the box. */
+    borderedVertical?: boolean;
+    /**
+     * @deprecated Use `style` or the `background` style prop to set custom background colors. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
+     */
+    dangerouslySetBackground?: string;
+  };
 
 export type BoxProps = BoxBaseProps & Omit<ViewProps, 'style'>;
 
@@ -396,7 +398,8 @@ export const Box = memo(
       );
 
       return (
-        <Component ref={ref} style={styles} testID={testID} {...props}>
+        // TODO https://linear.app/coinbase/issue/CDS-1518/audit-potentially-harmful-reactnative-animated-pattern
+        <Component ref={ref} style={styles as StyleProp<ViewStyle>} testID={testID} {...props}>
           {children}
         </Component>
       );
diff --git a/packages/mobile/src/layout/Fallback.tsx b/packages/mobile/src/layout/Fallback.tsx
index 2dca933473..ce3547abeb 100644
--- a/packages/mobile/src/layout/Fallback.tsx
+++ b/packages/mobile/src/layout/Fallback.tsx
@@ -20,7 +20,7 @@ export type FallbackBaseProps = {
    * @default rectangle
    */
   shape?: Shape;
-  width: number | string;
+  width: DimensionValue;
   /** Disables randomization of rectangle shape width. */
   disableRandomRectWidth?: boolean;
   /**
@@ -51,7 +51,11 @@ export const Fallback = memo((_props: FallbackProps) => {
     [disableRandomRectWidth, rectWidthVariant],
   );
 
-  const { width, borderRadius } = useFallbackShape(shape, baseWidth, fallbackShapeOptions);
+  const { width, borderRadius } = useFallbackShape<DimensionValue>(
+    shape,
+    baseWidth,
+    fallbackShapeOptions,
+  );
 
   const { activeColorScheme } = useTheme();
   const shimmerColor = fallbackShimmer[activeColorScheme];
diff --git a/packages/mobile/src/layout/Group.tsx b/packages/mobile/src/layout/Group.tsx
index 3fc7beddcb..e44a9b390f 100644
--- a/packages/mobile/src/layout/Group.tsx
+++ b/packages/mobile/src/layout/Group.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useMemo } from 'react';
+import React, { forwardRef, memo, type ReactElement, useMemo } from 'react';
 import type { View } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 
@@ -33,11 +33,11 @@ export type GroupBaseProps<BoxProps> = BoxProps & {
    */
   renderItem?: (info: {
     Wrapper: React.ComponentType<React.PropsWithChildren<BoxProps>>;
-    item: React.ReactChild;
+    item: ReactElement | string | number;
     index: number;
     isFirst: boolean;
     isLast: boolean;
-  }) => React.ReactChild;
+  }) => ReactElement | string | number;
 };
 
 export type RenderGroupItem = GroupBaseProps<BoxProps>['renderItem'];
diff --git a/packages/mobile/src/layout/Spacer.tsx b/packages/mobile/src/layout/Spacer.tsx
index b8fe22a8be..4954336872 100644
--- a/packages/mobile/src/layout/Spacer.tsx
+++ b/packages/mobile/src/layout/Spacer.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { Animated, View } from 'react-native';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
@@ -42,16 +42,14 @@ export const Spacer = memo(function Spacer({
   minHorizontal,
   minVertical,
   animated,
+  style,
   ...viewProps
 }: SpacerProps) {
   const theme = useTheme();
   const Component = animated ? Animated.View : View;
-
-  return (
-    <Component
-      {...viewProps}
-      accessibilityRole="none"
-      style={
+  const styles = useMemo(
+    () =>
+      [
         getSpacerStyle({
           flexGrow,
           flexShrink,
@@ -63,8 +61,23 @@ export const Spacer = memo(function Spacer({
           minHorizontal,
           minVertical,
           spacingScaleValues: theme.space,
-        }) as ViewStyle
-      }
-    />
+        }) as ViewStyle,
+        style,
+      ] as StyleProp<ViewStyle>,
+    [
+      flexGrow,
+      flexShrink,
+      flexBasis,
+      horizontal,
+      vertical,
+      maxHorizontal,
+      maxVertical,
+      minHorizontal,
+      minVertical,
+      theme.space,
+      style,
+    ],
   );
+
+  return <Component accessibilityRole="none" style={styles} {...viewProps} />;
 });
diff --git a/packages/mobile/src/layout/__tests__/Box.test.tsx b/packages/mobile/src/layout/__tests__/Box.test.tsx
index 0623231ac2..2bb907643e 100644
--- a/packages/mobile/src/layout/__tests__/Box.test.tsx
+++ b/packages/mobile/src/layout/__tests__/Box.test.tsx
@@ -140,7 +140,7 @@ describe('Box', () => {
 
   it('renders width styles', async () => {
     render(
-      <Box maxWidth={789} minWidth="66%" testID="parent" width="321px">
+      <Box maxWidth={789} minWidth="66%" testID="parent" width={321}>
         <Text>Child</Text>
       </Box>,
     );
@@ -150,7 +150,7 @@ describe('Box', () => {
     expect(screen.getByTestId('parent')).toBeAccessible();
 
     expect(screen.getByTestId('parent')).toHaveStyle({
-      width: '321px',
+      width: 321,
       maxWidth: 789,
       minWidth: '66%',
     });
@@ -158,7 +158,7 @@ describe('Box', () => {
 
   it('renders height styles', async () => {
     render(
-      <Box height="321px" maxHeight={789} minHeight="66%" testID="parent">
+      <Box height={321} maxHeight={789} minHeight="66%" testID="parent">
         <Text>Child</Text>
       </Box>,
     );
@@ -168,7 +168,7 @@ describe('Box', () => {
     expect(screen.getByTestId('parent')).toBeAccessible();
 
     expect(screen.getByTestId('parent')).toHaveStyle({
-      height: '321px',
+      height: 321,
       maxHeight: 789,
       minHeight: '66%',
     });
@@ -177,12 +177,12 @@ describe('Box', () => {
   it('renders position styles', async () => {
     render(
       <Box
-        bottom="8rem"
+        bottom={8}
         left="1000%"
         position="absolute"
-        right="30px"
+        right={30}
         testID="parent"
-        top="25%"
+        top={25}
         zIndex={zIndex.alert}
       >
         <Text>Child</Text>
@@ -194,11 +194,11 @@ describe('Box', () => {
     expect(screen.getByTestId('parent')).toBeAccessible();
 
     expect(screen.getByTestId('parent')).toHaveStyle({
-      bottom: '8rem',
+      bottom: 8,
       left: '1000%',
       position: 'absolute',
-      right: '30px',
-      top: '25%',
+      right: 30,
+      top: 25,
       zIndex: 7,
     });
   });
diff --git a/packages/mobile/src/media/Avatar.tsx b/packages/mobile/src/media/Avatar.tsx
index a24a6e492f..d2eb37e4a4 100644
--- a/packages/mobile/src/media/Avatar.tsx
+++ b/packages/mobile/src/media/Avatar.tsx
@@ -1,6 +1,8 @@
 import React, { memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
+import { ClipPath, Defs, Path, Rect, Svg } from 'react-native-svg';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import { hexagonShapePath } from '@coinbase/cds-common/svg/shape';
 import { colorSchemeMap } from '@coinbase/cds-common/tokens/avatar';
 import type {
   AvatarFallbackColor,
@@ -22,6 +24,7 @@ import { shapeStyles } from './RemoteImageGroup';
 const smallAvatarSize = 44;
 
 export const coloredFallbackTestID = 'cds-avatar-colored-fallback';
+const avatarHexagonClipPathId = 'cds-avatar-hexagon-fallback-clip-path';
 
 export const fallbackImageSrc =
   'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAOAA4AwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+t80Zo4o4oAM0ZrsPBvw7m8Sxi7uZDa2GcKwHzyeu30HvXdf8Kp0Dytnlz7v+ennHP8Ah+lAHiuaM12XjL4dTeG4jd2sjXViDhiR88f1x1HvXG8UAGaKOKKADI9Kkt4vtFxFEOC7Bc/U4qPJ9KVXZGDLwwOQaAPpS0tY7G1ht4VCRRKEVcdABipc1meG9eh8RaRBeRMNzACRB1R+4/z2rU/OgCK5t47y3lgmUPFKpR1I6gjBr5uu4fst1NCefLdkz64OK+g/EWuQ+HtJnvJmHyjCIerv2Ar55klaWRnblmJJPqaAG5HpRRk+lFABzVnTtOutWvY7W0iMs8hwqj+Z9BVbB9a9o+GXhlNI0VL2VR9rvFD5PVY/4R+PX8vSgCfwX4EXwsDNJdSTXTrh1RisQ/Dv9T+QrrP89aT8qPyoA5Txr4FHilRNHdSQ3Ua4RHYtEfw7fUfrXjOo6dc6Tey2t3EYp4zgqf5j1FfSP5VxvxN8Mpq+jPfRKPtlmpfI6tH/ABD8Ov5+tAHi/NFGDRQBY060+3aja22f9dKsf5kD+tfSKIsaKigKqjAAHAFFFAC/j+lL+P6UUUAH4/pTXRZEZGG5WGCCOooooA+btRtPsOoXVtn/AFMrR/kSKKKKAP/Z';
@@ -107,8 +110,8 @@ export const Avatar = memo((_props: AvatarProps) => {
       return (
         <Text
           align="center"
-          dangerouslySetColor={fallbackTextColor}
           font="title2"
+          style={{ color: fallbackTextColor }}
           textTransform="uppercase"
         >
           {placeholderLetter}
@@ -119,8 +122,8 @@ export const Avatar = memo((_props: AvatarProps) => {
       return (
         <Text
           align="center"
-          dangerouslySetColor={fallbackTextColor}
           font="caption"
+          style={{ color: fallbackTextColor }}
           textTransform="uppercase"
         >
           {placeholderLetter}
@@ -131,8 +134,8 @@ export const Avatar = memo((_props: AvatarProps) => {
     return (
       <Text
         align="center"
-        dangerouslySetColor={fallbackTextColor}
         font="body"
+        style={{ color: fallbackTextColor }}
         textTransform="uppercase"
       >
         {placeholderLetter}
@@ -151,10 +154,9 @@ export const Avatar = memo((_props: AvatarProps) => {
     () => (
       <Box
         alignItems="center"
-        dangerouslySetBackground={colorSchemeRgb}
         height="100%"
         justifyContent="center"
-        style={shapeStyle}
+        style={[shapeStyle, { backgroundColor: colorSchemeRgb }]}
         testID={coloredFallbackTestID}
         width="100%"
       >
@@ -164,11 +166,40 @@ export const Avatar = memo((_props: AvatarProps) => {
     [avatarText, shapeStyle, colorSchemeRgb],
   );
 
+  const hexagonColoredFallback = useMemo(
+    () => (
+      <Box
+        alignItems="center"
+        height="100%"
+        justifyContent="center"
+        testID={coloredFallbackTestID}
+        width="100%"
+      >
+        <Svg height="100%" viewBox="0 0 16 16" width="100%">
+          <Defs>
+            <ClipPath id={avatarHexagonClipPathId}>
+              <Path d={hexagonShapePath} />
+            </ClipPath>
+          </Defs>
+          <Rect
+            clipPath={`url(#${avatarHexagonClipPathId})`}
+            fill={colorSchemeRgb}
+            height={16}
+            width={16}
+            x={0}
+            y={0}
+          />
+        </Svg>
+        <Box style={styles.hexagonFallbackLabel}>{avatarText}</Box>
+      </Box>
+    ),
+    [avatarText, colorSchemeRgb],
+  );
+
   return (
     <Box
       accessibilityLabel={accessibilityLabel}
       borderColor={borderColor}
-      dangerouslySetBackground={imgSrc}
       flexGrow={0}
       flexShrink={0}
       height={computedSize}
@@ -190,6 +221,8 @@ export const Avatar = memo((_props: AvatarProps) => {
             testID={`${testID ?? ''}-image`}
             width={computedSize}
           />
+        ) : shape === 'hexagon' ? (
+          hexagonColoredFallback
         ) : (
           coloredFallback
         )}
@@ -211,4 +244,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  hexagonFallbackLabel: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
diff --git a/packages/mobile/src/media/Carousel/Carousel.tsx b/packages/mobile/src/media/Carousel/Carousel.tsx
index 63020b8098..ab0b2b3ef8 100644
--- a/packages/mobile/src/media/Carousel/Carousel.tsx
+++ b/packages/mobile/src/media/Carousel/Carousel.tsx
@@ -155,7 +155,6 @@ export const Carousel = memo(
 
       return (
         <Animated.ScrollView
-          {...otherProps}
           ref={scrollRef}
           horizontal
           contentContainerStyle={styles.scrollViewContainer}
@@ -165,6 +164,7 @@ export const Carousel = memo(
           snapToOffsets={snapPoints}
           style={styles.carousel}
           testID={testID}
+          {...otherProps}
         >
           {content}
         </Animated.ScrollView>
diff --git a/packages/mobile/src/media/Carousel/__tests__/useCarouselItem.test.tsx b/packages/mobile/src/media/Carousel/__tests__/useCarouselItem.test.tsx
index f5360bb595..a63979ef29 100644
--- a/packages/mobile/src/media/Carousel/__tests__/useCarouselItem.test.tsx
+++ b/packages/mobile/src/media/Carousel/__tests__/useCarouselItem.test.tsx
@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react-native';
+import { cleanup, fireEvent, render, renderHook, screen } from '@testing-library/react-native';
 
 import { Button } from '../../../buttons';
 import { Box } from '../../../layout';
diff --git a/packages/mobile/src/media/RemoteImage.tsx b/packages/mobile/src/media/RemoteImage.tsx
index 922520956b..e514a40bf6 100644
--- a/packages/mobile/src/media/RemoteImage.tsx
+++ b/packages/mobile/src/media/RemoteImage.tsx
@@ -13,6 +13,7 @@ import type {
 import { ClipPath, Defs, Image as SvgImage, Path, Svg, SvgXml } from 'react-native-svg';
 import { SvgCssUri } from 'react-native-svg/css';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import { hexagonShapePath } from '@coinbase/cds-common/svg/shape';
 import type { AspectRatio, AvatarSize, FixedValue, Shape } from '@coinbase/cds-common/types';
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -44,7 +45,7 @@ type BaseRemoteImageProps = Omit<ImageProps, 'style' | 'width' | 'height' | 'sou
   /** Adds a custom border color */
   borderColor?: ThemeVars.Color;
   /**
-   * @deprecated Use darkModeEnhancementsApplied instead. This will be removed in a future major release.
+   * @deprecated Use `darkModeEnhancementsApplied` instead. This will be removed in a future major release.
    * @deprecationExpectedRemoval v6
    * Fill in transparent background with inverted background color and add border. This solves issue of transparent, stamped out asset icons not being visible on dark backgrounds.
    */
@@ -115,10 +116,10 @@ type HexagonClipPathProps = {
 
 const HexagonClipPath = ({ image, ...props }: HexagonClipPathProps) => {
   return (
-    <Svg {...props} viewBox="0 0 16 16">
+    <Svg viewBox="0 0 16 16" {...props}>
       <Defs>
         <ClipPath id="hex-hw-shapeclip-clipconfig">
-          <Path d="M15.4855 6.0242C16.1715 7.24852 16.1715 8.75148 15.4855 9.97581L13.4213 13.6598C12.7259 14.9008 11.4317 15.6667 10.0301 15.6667H5.96994C4.56828 15.6667 3.2741 14.9008 2.57874 13.6598L0.514515 9.97581C-0.171504 8.75148 -0.171505 7.24852 0.514514 6.0242L2.57874 2.34022C3.2741 1.09922 4.56828 0.333336 5.96994 0.333336H10.0301C11.4317 0.333336 12.7259 1.09922 13.4213 2.34022L15.4855 6.0242Z" />
+          <Path d={hexagonShapePath} />
         </ClipPath>
       </Defs>
       {image}
@@ -230,11 +231,11 @@ export const RemoteImage = memo(function RemoteImage(_props: RemoteImageProps) {
       <SvgCssUri
         accessibilityRole="image"
         accessible={!!props.accessibilityLabel}
+        height={computedHeight}
         style={styles}
         uri={isImageURISource(transformedSource) ? (transformedSource?.uri ?? null) : null}
-        {...props}
-        height={computedHeight}
         width={computedWidth}
+        {...props}
       />
     );
   }
@@ -288,8 +289,8 @@ export const RemoteImage = memo(function RemoteImage(_props: RemoteImageProps) {
       onError={onError}
       onLoad={onLoad}
       source={transformedSource as ImageSourcePropType}
-      {...props}
       style={stylesWithDimensions}
+      {...props}
     />
   );
 });
diff --git a/packages/mobile/src/media/RemoteImageGroup.tsx b/packages/mobile/src/media/RemoteImageGroup.tsx
index 3e126c6005..2e27001e01 100644
--- a/packages/mobile/src/media/RemoteImageGroup.tsx
+++ b/packages/mobile/src/media/RemoteImageGroup.tsx
@@ -90,15 +90,22 @@ export const RemoteImageGroup = (_props: RemoteImageGroupProps) => {
         if (!isValidElement(child)) {
           return null;
         }
-        const childShape: RemoteImageProps['shape'] = child.props.shape;
+
+        const childShape: RemoteImageProps['shape'] = (
+          child as React.ReactElement<RemoteImageProps>
+        ).props.shape;
 
         // dynamically apply uniform sizing and shape to all RemoteImage children elements
-        const clonedChild = React.cloneElement<RemoteImageProps>(child as React.ReactElement, {
-          testID: `${testID ? `${testID}-` : ''}image-${index}`,
-          width: sizeAsNumber,
-          height: sizeAsNumber,
-          ...(childShape ? undefined : { shape }),
-        });
+        const clonedChild = React.cloneElement<RemoteImageProps>(
+          // the type of child (after isValidElement check) is not inferred so it must be typecast here
+          child as React.ReactElement<RemoteImageProps>,
+          {
+            testID: `${testID ? `${testID}-` : ''}image-${index}`,
+            width: sizeAsNumber,
+            height: sizeAsNumber,
+            ...(childShape ? undefined : { shape }),
+          },
+        );
 
         // zIndex is progressively lower so that each child is stacked below the previous one
         const zIndex = -index;
diff --git a/packages/mobile/src/media/__stories__/Avatar.stories.tsx b/packages/mobile/src/media/__stories__/Avatar.stories.tsx
index d11a525b85..c9fd9af00c 100644
--- a/packages/mobile/src/media/__stories__/Avatar.stories.tsx
+++ b/packages/mobile/src/media/__stories__/Avatar.stories.tsx
@@ -77,6 +77,7 @@ const AvatarScreen = () => {
                 accessibilityLabel=""
                 alt=""
                 borderColor="bgPositive"
+                borderWidth={0}
                 size={size}
                 src={image}
               />
diff --git a/packages/mobile/src/media/__stories__/CarouselAlphaExample.tsx b/packages/mobile/src/media/__stories__/CarouselAlphaExample.tsx
deleted file mode 100644
index 46e5bc94bd..0000000000
--- a/packages/mobile/src/media/__stories__/CarouselAlphaExample.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { feedImages } from '@coinbase/cds-common/internal/data/feedImages';
-
-import type { CarouselId } from '../../alpha/carousel/Carousel';
-import { Carousel } from '../../alpha/carousel/Carousel';
-import { useCarousel } from '../../alpha/carousel/useCarousel';
-import type { AnnouncementCardProps } from '../../cards/AnnouncementCard';
-import { AnnouncementCard } from '../../cards/AnnouncementCard';
-import { Divider } from '../../layout/Divider';
-
-export function CarouselItem({ pictogram, spotSquare, ...props }: AnnouncementCardProps) {
-  const handleOnPress = useCallback(() => {
-    console.log('pressed card');
-  }, []);
-
-  return (
-    <AnnouncementCard
-      description="You can fit up to fifty two chararcters on 2 lines"
-      onPress={handleOnPress}
-      pictogram={pictogram}
-      spotSquare={spotSquare}
-      title="Title/Headline"
-      {...props}
-    />
-  );
-}
-
-export function CarouselItemImage({ image, ...props }: { image: string } & AnnouncementCardProps) {
-  const handleOnPress = useCallback(() => {
-    console.log('pressed card');
-  }, []);
-
-  return (
-    <AnnouncementCard
-      description="You can fit up to fifty two chararcters on 2 lines"
-      image={image}
-      onPress={handleOnPress}
-      title="Title/Headline"
-      {...props}
-    />
-  );
-}
-
-export function ProgressBarsExample() {
-  const carouselRef = useCarousel();
-  const [currentCarouselRef, setCurrentCarouselRef] = useState(carouselRef.current);
-  const onDismissItem = useCallback(
-    (id: CarouselId) => {
-      setCurrentCarouselRef(carouselRef.current);
-      console.log('onDismissItem', id);
-    },
-    [carouselRef],
-  );
-
-  const onDismissLastItem = useCallback(() => {
-    console.log('onDismissLastItem');
-  }, []);
-
-  useEffect(() => {
-    setCurrentCarouselRef(carouselRef.current);
-  }, [carouselRef]);
-
-  const handleOnMomentumScrollEnd = useCallback(() => {
-    setCurrentCarouselRef(carouselRef.current);
-  }, [carouselRef]);
-
-  const accessibilityLabel = `${currentCarouselRef.currentIndex + 1} of ${
-    currentCarouselRef.length
-  }, Title/Headline`;
-
-  return (
-    <>
-      <Carousel
-        showDismiss
-        showProgress
-        carouselRef={carouselRef}
-        dismissButtonAccessibilityLabel="Close"
-        items={[
-          <CarouselItem
-            key="item1"
-            accessibilityLabel={accessibilityLabel}
-            spotSquare="sparkleToken"
-          />,
-          <CarouselItem
-            key="item2"
-            accessibilityLabel={accessibilityLabel}
-            pictogram="addressBook"
-          />,
-          <CarouselItem
-            key="item3"
-            accessibilityLabel={accessibilityLabel}
-            spotSquare="announcementAdvancedTrading"
-          />,
-          <CarouselItem
-            key="item4"
-            accessibilityLabel={accessibilityLabel}
-            pictogram="worldwide"
-          />,
-        ]}
-        onDismissItem={onDismissItem}
-        onDismissLastItem={onDismissLastItem}
-        onMomentumScrollEnd={handleOnMomentumScrollEnd}
-      />
-      <Divider />
-      <Carousel
-        showProgress
-        items={feedImages.map((item, index) => (
-          <CarouselItemImage
-            key={item}
-            accessibilityLabel={`${index + 1} of ${feedImages.length}, Title/Headline`}
-            image={item}
-          />
-        ))}
-        onDismissItem={onDismissItem}
-        onDismissLastItem={onDismissLastItem}
-      />
-      <Divider />
-    </>
-  );
-}
diff --git a/packages/mobile/src/media/__stories__/CarouselMedia.stories.tsx b/packages/mobile/src/media/__stories__/CarouselMedia.stories.tsx
deleted file mode 100644
index 3eba7e5334..0000000000
--- a/packages/mobile/src/media/__stories__/CarouselMedia.stories.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import React, { memo, useCallback, useMemo, useRef } from 'react';
-import { useIndexCounter } from '@coinbase/cds-common/hooks/useIndexCounter';
-import { svgs } from '@coinbase/cds-common/internal/data/assets';
-
-import { Button } from '../../buttons';
-import { Card } from '../../cards';
-import { Example, ExampleScreen } from '../../examples/ExampleScreen';
-import { HStack } from '../../layout';
-import { Text } from '../../typography/Text';
-import { Carousel } from '../Carousel/Carousel';
-import type { CarouselRef } from '../Carousel/types';
-import { useCarousel } from '../Carousel/useCarousel';
-import { useCarouselItem } from '../Carousel/useCarouselItem';
-import { RemoteImage } from '../RemoteImage';
-
-import { ProgressBarsExample } from './CarouselAlphaExample';
-
-const ExampleCarouselItem = memo(({ svgId = 1 }: { svgId?: number }) => {
-  const { dismiss } = useCarouselItem();
-  return (
-    <Card onPress={() => dismiss()} padding={2}>
-      <Text ellipsize="tail" font="label1">
-        Label
-      </Text>
-      <Text color="fgMuted" ellipsize="tail" font="headline" numberOfLines={2} paddingBottom={0.5}>
-        Title
-      </Text>
-      <RemoteImage
-        height={120}
-        resizeMode="cover"
-        shape="squircle"
-        source={svgs[svgId]}
-        width={120}
-      />
-    </Card>
-  );
-});
-
-const SimpleExample = () => {
-  return (
-    <Example title="Carousel">
-      <Carousel
-        items={[
-          <ExampleCarouselItem key="item1" svgId={3} />,
-          <ExampleCarouselItem key="item2" svgId={2} />,
-          <ExampleCarouselItem key="item3" svgId={4} />,
-          <ExampleCarouselItem key="item4" svgId={2} />,
-          <ExampleCarouselItem key="item5" svgId={1} />,
-          <ExampleCarouselItem key="item6" svgId={2} />,
-        ]}
-      />
-    </Example>
-  );
-};
-
-const UpdateOnMountExample = () => {
-  const handleOnReady = useCallback(({ scrollToId }: CarouselRef) => {
-    scrollToId('item3', { animated: false });
-  }, []);
-
-  return (
-    <Example title="Carousel - snap to index on mount">
-      <Carousel
-        items={[
-          <ExampleCarouselItem key="item1" svgId={4} />,
-          <ExampleCarouselItem key="item2" svgId={3} />,
-          <ExampleCarouselItem key="item3" svgId={2} />,
-          <ExampleCarouselItem key="item4" svgId={5} />,
-          <ExampleCarouselItem key="item5" svgId={2} />,
-          <ExampleCarouselItem key="item6" svgId={2} />,
-        ]}
-        onReady={handleOnReady}
-      />
-    </Example>
-  );
-};
-
-const TriggerViaButton = () => {
-  const carousel = useCarousel();
-  const triggerScrollTo = useCallback(() => {
-    carousel.current.scrollToId('item3');
-  }, [carousel]);
-
-  return (
-    <Example title="Carousel - trigger scrollTo via button">
-      <Button onPress={triggerScrollTo}>Test scrollTo</Button>
-      <Carousel
-        carouselRef={carousel}
-        items={[
-          <ExampleCarouselItem key="item1" svgId={1} />,
-          <ExampleCarouselItem key="item2" svgId={2} />,
-          <ExampleCarouselItem key="item3" svgId={3} />,
-          <ExampleCarouselItem key="item4" svgId={4} />,
-          <ExampleCarouselItem key="item5" svgId={5} />,
-          <ExampleCarouselItem key="item6" svgId={2} />,
-        ]}
-      />
-    </Example>
-  );
-};
-
-const DynamicItemsExample = () => {
-  const carousel = useCarousel();
-  const triggerScrollToEnd = useRef(false);
-
-  const onIncrement = useCallback(() => {
-    triggerScrollToEnd.current = true;
-  }, []);
-
-  const { activeIndex: itemsLength, handleIncrement } = useIndexCounter({
-    length: 100,
-    startIndex: 4,
-    onIncrement,
-  });
-
-  const handleScrollToEnd = useCallback(() => {
-    carousel.current.scrollToEnd();
-  }, [carousel]);
-
-  const onContentSizeChange = useCallback(() => {
-    if (triggerScrollToEnd.current) {
-      handleScrollToEnd();
-      triggerScrollToEnd.current = false;
-    }
-  }, [handleScrollToEnd]);
-
-  const items = useMemo(() => {
-    return Array.from({ length: itemsLength }).map((_, index) => {
-      return <ExampleCarouselItem key={`add-item-example-${index}`} />;
-    });
-  }, [itemsLength]);
-
-  return (
-    <Example title="Carousel - dynamic items">
-      <HStack alignItems="flex-start" gap={2} paddingBottom={2}>
-        <Button compact onPress={handleIncrement}>
-          Add item
-        </Button>
-        <Button compact onPress={handleScrollToEnd}>
-          Scroll to end
-        </Button>
-      </HStack>
-      <Carousel carouselRef={carousel} items={items} onContentSizeChange={onContentSizeChange} />
-    </Example>
-  );
-};
-
-const CarouselScreen = () => {
-  return (
-    <ExampleScreen>
-      <ProgressBarsExample />
-      <DynamicItemsExample />
-      <SimpleExample />
-      <UpdateOnMountExample />
-      <TriggerViaButton />
-    </ExampleScreen>
-  );
-};
-
-export default CarouselScreen;
-ExampleCarouselItem.displayName = 'ExampleCarouselItem';
diff --git a/packages/mobile/src/media/__tests__/Avatar.test.tsx b/packages/mobile/src/media/__tests__/Avatar.test.tsx
index ef7b6096fa..913042fb57 100644
--- a/packages/mobile/src/media/__tests__/Avatar.test.tsx
+++ b/packages/mobile/src/media/__tests__/Avatar.test.tsx
@@ -16,12 +16,10 @@ describe('Avatar', () => {
         <Avatar accessibilityLabel="" name={name} src={src} testID="avatar" />
       </DefaultThemeProvider>,
     );
-    const image = screen.getByTestId('avatar-image');
+    const image = screen.getByTestId('avatar-image', { includeHiddenElements: true });
     expect(image).toBeTruthy();
     expect(image?.props.source).toEqual({ uri: src });
 
-    expect(image).toBeAccessible();
-
     expect(screen.queryByText('T')).toBeFalsy();
   });
 
@@ -148,6 +146,25 @@ describe('Avatar', () => {
     expect(screen.getByText('T')).toBeTruthy();
   });
 
+  it('renders a hexagon fallback when shape is hexagon and name is provided without src', async () => {
+    render(
+      <DefaultThemeProvider>
+        <Avatar
+          accessibilityLabel=""
+          colorScheme="pink"
+          name="TestName"
+          shape="hexagon"
+          testID="avatar"
+        />
+      </DefaultThemeProvider>,
+    );
+
+    await screen.findByTestId(coloredFallbackTestID);
+
+    expect(screen.getByTestId(coloredFallbackTestID)).toBeAccessible();
+    expect(screen.getByText('T')).toBeTruthy();
+  });
+
   it('applies provider config defaults', () => {
     const config: ComponentConfig = {
       Avatar: {
diff --git a/packages/mobile/src/media/__tests__/RemoteImage.test.tsx b/packages/mobile/src/media/__tests__/RemoteImage.test.tsx
index e158b8ec78..7cf54d2779 100644
--- a/packages/mobile/src/media/__tests__/RemoteImage.test.tsx
+++ b/packages/mobile/src/media/__tests__/RemoteImage.test.tsx
@@ -12,7 +12,7 @@ const mockSvgFetch = async () =>
   );
 
 describe('RemoteImage', () => {
-  it('shouldApplyDarkModeEnhacements border styles takes precedence over custom borderColor and passes a11y', () => {
+  it('shouldApplyDarkModeEnhacements border styles takes precedence over custom borderColor', () => {
     render(
       <DefaultThemeProvider activeColorScheme="dark" theme={defaultTheme}>
         <RemoteImage
@@ -23,16 +23,14 @@ describe('RemoteImage', () => {
         />
       </DefaultThemeProvider>,
     );
-    const image = screen.queryByTestId('remoteimage');
+    const image = screen.getByTestId('remoteimage', { includeHiddenElements: true });
     expect(image).toBeTruthy();
 
-    expect(image).toBeAccessible();
-
     expect(image).toHaveStyle({
       borderWidth: 1,
     });
   });
-  it('darkModeEnhancementsApplied border styles takes precedence over custom borderColor and passes a11y', () => {
+  it('darkModeEnhancementsApplied border styles takes precedence over custom borderColor', () => {
     render(
       <DefaultThemeProvider activeColorScheme="dark" theme={defaultTheme}>
         <RemoteImage
@@ -43,42 +41,36 @@ describe('RemoteImage', () => {
         />
       </DefaultThemeProvider>,
     );
-    const image = screen.queryByTestId('remoteimage');
+    const image = screen.getByTestId('remoteimage', { includeHiddenElements: true });
     expect(image).toBeTruthy();
 
-    expect(image).toBeAccessible();
-
     expect(image).toHaveStyle({
       borderWidth: 1,
     });
   });
 
-  it('has a default shape of square and passes a11y', () => {
+  it('has a default shape of square', () => {
     render(
       <DefaultThemeProvider>
         <RemoteImage source="https://images.coinbase.com/avatar?s=56" testID="remoteimage" />
       </DefaultThemeProvider>,
     );
 
-    const image = screen.queryByTestId('remoteimage');
-
-    expect(image).toBeAccessible();
+    const image = screen.getByTestId('remoteimage', { includeHiddenElements: true });
 
     expect(image).toHaveStyle({
       borderRadius: defaultTheme.borderRadius[100],
     });
   });
 
-  it('if width/height/size is not set, it will default to size = m. Passes a11y', () => {
+  it('if width/height/size is not set, it will default to size = m', () => {
     render(
       <DefaultThemeProvider>
         <RemoteImage source="https://images.coinbase.com/avatar?s=56" testID="remoteimage" />
       </DefaultThemeProvider>,
     );
 
-    const image = screen.queryByTestId('remoteimage');
-
-    expect(image).toBeAccessible();
+    const image = screen.getByTestId('remoteimage', { includeHiddenElements: true });
 
     expect(image).toHaveStyle({
       width: theme.avatarSize.m,
@@ -134,9 +126,9 @@ describe('RemoteImage', () => {
       </DefaultThemeProvider>,
     );
 
-    expect(screen.getByRole('image')).toHaveProp('accessibilityElementsHidden', false);
-    expect(screen.getByRole('image')).toHaveProp('importantForAccessibility', 'auto');
-    expect(screen.getByLabelText('A label')).toBeTruthy();
+    const image = screen.getByLabelText('A label');
+    expect(image).toHaveProp('accessibilityElementsHidden', false);
+    expect(image).toHaveProp('importantForAccessibility', 'auto');
     expect(screen.getByHintText('A hint')).toBeTruthy();
   });
 
diff --git a/packages/mobile/src/media/__tests__/RemoteImageGroup.test.tsx b/packages/mobile/src/media/__tests__/RemoteImageGroup.test.tsx
index 5e85c6784b..08ee974b54 100644
--- a/packages/mobile/src/media/__tests__/RemoteImageGroup.test.tsx
+++ b/packages/mobile/src/media/__tests__/RemoteImageGroup.test.tsx
@@ -69,7 +69,9 @@ describe('RemoteImageGroup', () => {
     render(<MockRemoteImageGroup />);
 
     remoteImageIndices.forEach((index) => {
-      const remoteImage = screen.getByTestId(`${TEST_ID}-image-${index}`);
+      const remoteImage = screen.getByTestId(`${TEST_ID}-image-${index}`, {
+        includeHiddenElements: true,
+      });
 
       expect(remoteImage).toHaveStyle({
         width: 24,
@@ -84,7 +86,9 @@ describe('RemoteImageGroup', () => {
     await screen.findByTestId(TEST_ID);
 
     remoteImageIndices.forEach((index) => {
-      const remoteImage = screen.getByTestId(`${TEST_ID}-image-${index}`);
+      const remoteImage = screen.getByTestId(`${TEST_ID}-image-${index}`, {
+        includeHiddenElements: true,
+      });
 
       expect(remoteImage).toHaveStyle({
         borderRadius: defaultTheme.borderRadius[1000],
@@ -104,7 +108,9 @@ describe('RemoteImageGroup', () => {
     render(<MockRemoteImageGroup size={30} />);
 
     remoteImageIndices.forEach((index) => {
-      const remoteImage = screen.getByTestId(`${TEST_ID}-image-${index}`);
+      const remoteImage = screen.getByTestId(`${TEST_ID}-image-${index}`, {
+        includeHiddenElements: true,
+      });
 
       expect(remoteImage).toHaveStyle({
         width: 30,
@@ -117,7 +123,9 @@ describe('RemoteImageGroup', () => {
     render(<MockRemoteImageGroup size="l" />);
 
     remoteImageIndices.forEach((index) => {
-      const remoteImage = screen.getByTestId(`${TEST_ID}-image-${index}`);
+      const remoteImage = screen.getByTestId(`${TEST_ID}-image-${index}`, {
+        includeHiddenElements: true,
+      });
 
       expect(remoteImage).toHaveStyle({
         width: 32,
diff --git a/packages/mobile/src/motion/__tests__/Pulse.test.tsx b/packages/mobile/src/motion/__tests__/Pulse.test.tsx
index d7ff7a4023..d3cd727139 100644
--- a/packages/mobile/src/motion/__tests__/Pulse.test.tsx
+++ b/packages/mobile/src/motion/__tests__/Pulse.test.tsx
@@ -63,7 +63,7 @@ describe('Pulse', () => {
     const ref = { current: null } as React.RefObject<{
       play: () => Promise<void>;
       stop: () => Promise<void>;
-    }>;
+    } | null>;
     render(
       <Pulse ref={ref}>
         <Text>Children</Text>
diff --git a/packages/mobile/src/motion/__tests__/Shake.test.tsx b/packages/mobile/src/motion/__tests__/Shake.test.tsx
index 69cb40adb4..3812700e11 100644
--- a/packages/mobile/src/motion/__tests__/Shake.test.tsx
+++ b/packages/mobile/src/motion/__tests__/Shake.test.tsx
@@ -62,7 +62,7 @@ describe('Shake', () => {
   it('exposes imperative handlers that start the animation', () => {
     const ref = { current: null } as React.RefObject<{
       play: () => Promise<void>;
-    }>;
+    } | null>;
     render(
       <Shake ref={ref}>
         <Text>Children</Text>
diff --git a/packages/mobile/src/navigation/BrowserBarSearchInput.tsx b/packages/mobile/src/navigation/BrowserBarSearchInput.tsx
index 489cd85020..7c14acee76 100644
--- a/packages/mobile/src/navigation/BrowserBarSearchInput.tsx
+++ b/packages/mobile/src/navigation/BrowserBarSearchInput.tsx
@@ -1,5 +1,5 @@
 import { memo, useCallback } from 'react';
-import type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
+import type { BlurEvent, FocusEvent } from 'react-native';
 
 import { SearchInput, type SearchInputProps } from '../controls/SearchInput';
 
@@ -29,7 +29,7 @@ export const BrowserBarSearchInput = memo(
     const { setHideStart, setHideEnd } = useBrowserBarContext();
 
     const handleFocus = useCallback(
-      (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (e: FocusEvent) => {
         if (expandOnFocus) {
           setHideStart(true);
           setHideEnd(true);
@@ -40,7 +40,7 @@ export const BrowserBarSearchInput = memo(
     );
 
     const handleBlur = useCallback(
-      (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (e: BlurEvent) => {
         setHideEnd(false);
         setHideStart(false);
         onBlur?.(e);
diff --git a/packages/mobile/src/navigation/NavigationTitleSelect.tsx b/packages/mobile/src/navigation/NavigationTitleSelect.tsx
index 23dec815f4..0acc943b69 100644
--- a/packages/mobile/src/navigation/NavigationTitleSelect.tsx
+++ b/packages/mobile/src/navigation/NavigationTitleSelect.tsx
@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { selectCellMobileSpacingConfig } from '@coinbase/cds-common/tokens/select';
 
-import { SelectProvider } from '../controls/SelectContext';
-import { SelectOption } from '../controls/SelectOption';
-import { useSelect } from '../controls/useSelect';
+import { Cell } from '../cells/Cell';
+import { CellAccessory } from '../cells/CellAccessory';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons';
 import { HStack } from '../layout/HStack';
@@ -40,16 +40,18 @@ export const NavigationTitleSelect = memo((_props: NavigationTitleSelectProps) =
     setVisible(true);
   }, []);
 
-  const handleOptionPress = useCallback(() => {
-    trayRef.current?.handleClose();
-  }, []);
+  const handleOptionPress = useCallback(
+    (id: string) => {
+      trayRef.current?.handleClose();
+      onChange(id);
+    },
+    [onChange],
+  );
 
   const label = useMemo(() => {
     return options.find((option) => option.id === value)?.label;
   }, [options, value]);
 
-  const selectContextValue = useSelect({ onChange, value });
-
   return (
     <>
       <Pressable background="transparent" onPress={handleOpenMenu}>
@@ -66,11 +68,26 @@ export const NavigationTitleSelect = memo((_props: NavigationTitleSelectProps) =
       </Pressable>
       {visible && (
         <Tray ref={trayRef} onCloseComplete={handleCloseMenu}>
-          <SelectProvider value={selectContextValue}>
-            {options.map(({ id, label }) => (
-              <SelectOption key={id} onPress={handleOptionPress} title={label} value={id} />
-            ))}
-          </SelectProvider>
+          {options.map(({ id, label }) => {
+            const selected = id === value;
+            return (
+              <Cell
+                key={id}
+                accessibilityState={selected ? { selected: true } : undefined}
+                accessory={selected ? <CellAccessory type="selected" /> : undefined}
+                borderRadius={0}
+                onPress={() => handleOptionPress(id)}
+                selected={id === value}
+                {...selectCellMobileSpacingConfig}
+              >
+                {!!label && (
+                  <Text ellipsize="tail" font="headline" numberOfLines={1}>
+                    {label}
+                  </Text>
+                )}
+              </Cell>
+            );
+          })}
         </Tray>
       )}
     </>
diff --git a/packages/mobile/src/navigation/TopNavBar.tsx b/packages/mobile/src/navigation/TopNavBar.tsx
index 90bacfba17..946fc6840c 100644
--- a/packages/mobile/src/navigation/TopNavBar.tsx
+++ b/packages/mobile/src/navigation/TopNavBar.tsx
@@ -166,7 +166,7 @@ export const TopNavBar = memo((_props: NavigationBarProps) => {
         paddingBottom={paddingBottom}
         paddingTop={paddingTop}
         paddingX={paddingX}
-        position="sticky"
+        position="absolute"
         right={0}
         top={0}
         width="100%"
diff --git a/packages/mobile/src/overlays/Alert.tsx b/packages/mobile/src/overlays/Alert.tsx
index 70723e80c0..4e1a3cdb2f 100644
--- a/packages/mobile/src/overlays/Alert.tsx
+++ b/packages/mobile/src/overlays/Alert.tsx
@@ -1,9 +1,8 @@
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
-import { Modal as RNModal } from 'react-native';
+import { Modal as RNModal, type ViewStyle } from 'react-native';
 import type {
   ButtonVariant,
   IllustrationPictogramNames,
-  PositionStyles,
   SharedProps,
 } from '@coinbase/cds-common/types';
 
@@ -18,7 +17,6 @@ import { Overlay } from './overlay/Overlay';
 import { useAlertAnimation } from './useAlertAnimation';
 
 export type AlertBaseProps = SharedProps &
-  Pick<PositionStyles, 'zIndex'> &
   Pick<ModalBaseProps, 'onRequestClose' | 'visible' | 'onDidClose'> & {
     /**
      * Alert title
@@ -58,6 +56,7 @@ export type AlertBaseProps = SharedProps &
      * @default horizontal
      */
     actionLayout?: 'horizontal' | 'vertical';
+    zIndex?: ViewStyle['zIndex'];
   };
 
 export type AlertProps = AlertBaseProps;
@@ -190,7 +189,7 @@ export const Alert = memo(
             </Box>
             <Box
               flexDirection={actionFlexDirection}
-              gap={2}
+              gap={1}
               paddingX={3}
               paddingY={2}
               testID={testID && `${testID}-actions`}
diff --git a/packages/mobile/src/overlays/PortalProvider.tsx b/packages/mobile/src/overlays/PortalProvider.tsx
index 7323c5857b..bbf9b5bacd 100644
--- a/packages/mobile/src/overlays/PortalProvider.tsx
+++ b/packages/mobile/src/overlays/PortalProvider.tsx
@@ -17,6 +17,11 @@ export type PortalProviderProps = ToastProviderProps & {
 
 type PortalHostProps = { nodes: PortalNode[] };
 
+/**
+ * Internal component that renders active overlay nodes. On Android, nests multiple
+ * overlays as children of each other since Android's native Modal cannot render
+ * sibling modals at the same level.
+ */
 export const PortalHost = memo(({ nodes }: PortalHostProps) => {
   if (!nodes.length) return null;
 
@@ -46,6 +51,16 @@ export const PortalHost = memo(({ nodes }: PortalHostProps) => {
   return <>{elements}</>;
 });
 
+/**
+ * Required root-level provider that enables CDS overlay components (Modal, Toast, Alert,
+ * Tooltip, Tray). Manages the registry of active overlays and provides the context for
+ * overlay state management and toast queuing.
+ *
+ * Unlike the PortalProvider in cds-web, cds-mobile does not use DOM portals. Overlay components render
+ * above other content using React Native's native Modal component.
+ *
+ * Must be rendered once near the root of your application, alongside ThemeProvider.
+ */
 export const PortalProvider: React.FC<React.PropsWithChildren<PortalProviderProps>> = ({
   children,
   toastBottomOffset = 0,
@@ -63,6 +78,11 @@ export const PortalProvider: React.FC<React.PropsWithChildren<PortalProviderProp
   );
 };
 
+/**
+ * Renders overlay nodes independently from PortalProvider.
+ * Use this when `renderPortals={false}` is set on PortalProvider to control
+ * where in the component tree the overlay nodes are rendered.
+ */
 export const PortalNodes = () => {
   const { nodes } = usePortal();
   return <PortalHost nodes={nodes} />;
diff --git a/packages/mobile/src/overlays/Toast.tsx b/packages/mobile/src/overlays/Toast.tsx
index 25010fe5f4..b37ab905a2 100644
--- a/packages/mobile/src/overlays/Toast.tsx
+++ b/packages/mobile/src/overlays/Toast.tsx
@@ -1,4 +1,5 @@
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type {
   ToastBaseProps as CommonToastBaseProps,
   ToastRefHandle,
@@ -8,7 +9,6 @@ import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { Button } from '../buttons';
 import { useA11y } from '../hooks/useA11y';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { useTheme } from '../hooks/useTheme';
 import { Box, type BoxProps, HStack } from '../layout';
 import { ColorSurge } from '../motion/ColorSurge';
 import { Text } from '../typography/Text';
@@ -32,7 +32,7 @@ export const Toast = memo(
       accessibilityLabel,
       ...props
     } = mergedProps;
-    const theme = useTheme();
+    const { bottom: safeAreaBottom } = useSafeAreaInsets();
     const [{ opacity, bottom }, animateIn, animateOut] = useToastAnimation();
     const { announceForA11y } = useA11y();
     const defaultA11yLabel = text + (action ? action.label : '');
@@ -79,8 +79,9 @@ export const Toast = memo(
 
     return (
       <Box
+        accessibilityRole="alert"
         alignSelf="center"
-        bottom={bottomOffset ?? theme.space[2]}
+        bottom={(bottomOffset as number) ?? safeAreaBottom}
         maxWidth="100%"
         padding={2}
         position="absolute"
@@ -90,7 +91,6 @@ export const Toast = memo(
         }}
         zIndex={zIndex.portal}
         {...props}
-        accessibilityRole="alert"
       >
         <HStack
           animated
diff --git a/packages/mobile/src/overlays/__stories__/TrayPromotional.stories.tsx b/packages/mobile/src/overlays/__stories__/TrayPromotional.stories.tsx
index 01a89843a3..4056b25c5f 100644
--- a/packages/mobile/src/overlays/__stories__/TrayPromotional.stories.tsx
+++ b/packages/mobile/src/overlays/__stories__/TrayPromotional.stories.tsx
@@ -236,7 +236,7 @@ const ProductUpsellTrayContent = memo(function ProductUpsellTrayContent({
   return (
     <ThemeProvider activeColorScheme="dark" theme={defaultTheme}>
       <VStack position="relative">
-        <VStack dangerouslySetBackground={BACKGROUND_COLOR} gap={4} paddingTop={5} paddingX={3}>
+        <VStack gap={4} paddingTop={5} paddingX={3} style={{ backgroundColor: BACKGROUND_COLOR }}>
           <Box alignItems="center" justifyContent="center">
             <SpotRectangle name="creditCardExcitement" />
           </Box>
diff --git a/packages/mobile/src/overlays/__tests__/Toast.test.tsx b/packages/mobile/src/overlays/__tests__/Toast.test.tsx
index e3a1a8592b..57aace5792 100644
--- a/packages/mobile/src/overlays/__tests__/Toast.test.tsx
+++ b/packages/mobile/src/overlays/__tests__/Toast.test.tsx
@@ -1,7 +1,8 @@
 import { Animated } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { fireEvent, render, screen } from '@testing-library/react-native';
 
-import { DefaultThemeProvider } from '../../utils/testHelpers';
+import { DefaultThemeProvider, SAFE_AREA_METRICS } from '../../utils/testHelpers';
 import { Toast } from '../Toast';
 
 jest.mock('react-native/Libraries/Animated/Animated', () => {
@@ -31,9 +32,11 @@ describe('Toast', () => {
   it('renders text and passes a11y', () => {
     const text = 'Toast copy';
     render(
-      <DefaultThemeProvider>
-        <Toast testID="mock-toast" text={text} />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <Toast testID="mock-toast" text={text} />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     expect(screen.getByTestId('mock-toast')).toBeAccessible();
@@ -50,15 +53,17 @@ describe('Toast', () => {
       testID: 'toast-action',
     };
     render(
-      <DefaultThemeProvider>
-        <Toast
-          action={action}
-          onDidHide={onDidHide}
-          onWillHide={onWillHide}
-          testID="mock-toast"
-          text={text}
-        />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <Toast
+            action={action}
+            onDidHide={onDidHide}
+            onWillHide={onWillHide}
+            testID="mock-toast"
+            text={text}
+          />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     fireEvent.press(screen.getByTestId(action.testID));
@@ -72,9 +77,11 @@ describe('Toast', () => {
   it('triggers animation', () => {
     const text = 'Toast copy';
     render(
-      <DefaultThemeProvider>
-        <Toast text={text} />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <Toast text={text} />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     expect(animationParallelSpy).toHaveBeenCalled();
diff --git a/packages/mobile/src/overlays/drawer/Drawer.tsx b/packages/mobile/src/overlays/drawer/Drawer.tsx
index e83a22499e..f2482ecbee 100644
--- a/packages/mobile/src/overlays/drawer/Drawer.tsx
+++ b/packages/mobile/src/overlays/drawer/Drawer.tsx
@@ -8,7 +8,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Animated, Keyboard, Modal, Platform, useWindowDimensions } from 'react-native';
+import { Animated, Keyboard, Modal, Platform, StatusBar, useWindowDimensions } from 'react-native';
 import type { ModalProps, PressableProps, StyleProp, ViewStyle } from 'react-native';
 import {
   drawerAnimationDefaultDuration,
@@ -29,6 +29,7 @@ import type {
 } from '@coinbase/cds-common/types';
 
 import { useComponentConfig } from '../../hooks/useComponentConfig';
+import { useHasNotch } from '../../hooks/useHasNotch';
 import { useTheme } from '../../hooks/useTheme';
 import { Box } from '../../layout/Box';
 import { HandleBar, type HandleBarProps } from '../handlebar/HandleBar';
@@ -40,7 +41,7 @@ import { useDrawerAnimation } from './useDrawerAnimation';
 import { useDrawerPanResponder } from './useDrawerPanResponder';
 import { useDrawerSpacing } from './useDrawerSpacing';
 
-export type DrawerRenderChildren = React.FC<{ handleClose: () => void }>;
+export type DrawerRenderChildren = (args: { handleClose: () => void }) => React.ReactNode;
 
 export type DrawerRefBaseProps = {
   /** ref callback that animates out the drawer */
@@ -310,6 +311,12 @@ export const Drawer = memo(
       ],
     );
 
+    // this outdated logic needs to be removed
+    // rather than hiding on the presence of a "notch" (all modern phones based on how we determine), we should hide the status bar when any overlay is visible
+    // see: https://linear.app/coinbase/issue/CDS-1557/temporarily-hide-status-bar-in-all-overlay-components
+    const hasNotch = useHasNotch();
+    const hideStatusBar = hasNotch && ['left', 'right', 'top'].includes(pin);
+
     return (
       <Modal
         hardwareAccelerated
@@ -322,7 +329,11 @@ export const Drawer = memo(
         {...props}
       >
         <OverlayContentContext.Provider value={overlayContentContextValue}>
-          <DrawerStatusBar visible pin={pin} />
+          {/* for some reason we are hiding on iOS only (see linked issue above) */}
+          {Platform.select({
+            ios: hideStatusBar ? <StatusBar animated hidden /> : null,
+            default: null,
+          })}
           <Overlay
             onTouchStart={handleOverlayPress}
             opacity={opacityAnimation}
diff --git a/packages/mobile/src/overlays/drawer/DrawerStatusBar.tsx b/packages/mobile/src/overlays/drawer/DrawerStatusBar.tsx
index f4fbd921ae..6d720f580e 100644
--- a/packages/mobile/src/overlays/drawer/DrawerStatusBar.tsx
+++ b/packages/mobile/src/overlays/drawer/DrawerStatusBar.tsx
@@ -9,6 +9,10 @@ type DrawerStatusBarProps = {
   visible: boolean;
 };
 
+/**
+ * @deprecated If you need to hide the status bar and you're not using Drawer already, use the StatusBar component from react-native directly. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const DrawerStatusBar = memo(function DrawerStatusBar({
   pin,
   visible,
diff --git a/packages/mobile/src/overlays/drawer/__tests__/useDrawerSpacing.test.tsx b/packages/mobile/src/overlays/drawer/__tests__/useDrawerSpacing.test.tsx
index b4815f51cc..d97e190e07 100644
--- a/packages/mobile/src/overlays/drawer/__tests__/useDrawerSpacing.test.tsx
+++ b/packages/mobile/src/overlays/drawer/__tests__/useDrawerSpacing.test.tsx
@@ -1,5 +1,5 @@
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import { DefaultThemeProvider, SAFE_AREA_METRICS } from '../../../utils/testHelpers';
 import { useDrawerSpacing } from '../useDrawerSpacing';
diff --git a/packages/mobile/src/overlays/modal/Modal.tsx b/packages/mobile/src/overlays/modal/Modal.tsx
index 9df112d2ce..fb005a22bd 100644
--- a/packages/mobile/src/overlays/modal/Modal.tsx
+++ b/packages/mobile/src/overlays/modal/Modal.tsx
@@ -7,15 +7,16 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { Modal as RNModal, Platform, SafeAreaView, StatusBar, StyleSheet } from 'react-native';
-import type { ModalProps as RNModalProps } from 'react-native';
+import { Modal as RNModal, Platform, StatusBar, StyleSheet } from 'react-native';
+import type { ModalProps as RNModalProps, ViewStyle } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { ModalContext, type ModalContextValue } from '@coinbase/cds-common/overlays/ModalContext';
 import {
   OverlayContentContext,
   type OverlayContentContextValue,
 } from '@coinbase/cds-common/overlays/OverlayContentContext';
-import type { PositionStyles, SharedProps } from '@coinbase/cds-common/types';
+import type { SharedProps } from '@coinbase/cds-common/types';
 
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { VStack } from '../../layout';
@@ -26,10 +27,9 @@ type ModalChildrenRenderProps = { closeModal: () => void };
 
 export type ModalBaseProps = SharedProps &
   ModalContextValue &
-  Pick<PositionStyles, 'zIndex'> &
   Omit<RNModalProps, 'children' | 'visible' | 'onRequestClose' | 'animationType'> & {
     /** Component to render as the Modal content */
-    children?: React.ReactNode | React.FC<ModalChildrenRenderProps>;
+    children?: React.ReactNode | ((props: ModalChildrenRenderProps) => React.ReactNode);
     /**
      * Callback fired after the component is closed.
      */
@@ -38,6 +38,7 @@ export type ModalBaseProps = SharedProps &
      * @danger This is a migration escape hatch. It is not intended to be used normally.
      * */
     width?: number;
+    zIndex?: ViewStyle['zIndex'];
   };
 
 export type ModalRefBaseProps = Pick<ModalBaseProps, 'onRequestClose'>;
diff --git a/packages/mobile/src/overlays/modal/ModalFooter.tsx b/packages/mobile/src/overlays/modal/ModalFooter.tsx
index 13c1f6ea05..5b3c78c1df 100644
--- a/packages/mobile/src/overlays/modal/ModalFooter.tsx
+++ b/packages/mobile/src/overlays/modal/ModalFooter.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, memo } from 'react';
+import React, { cloneElement, memo } from 'react';
 import type { PressableProps } from 'react-native';
 import { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
 
@@ -30,7 +30,9 @@ export const ModalFooter = memo((_props: ModalFooterProps) => {
     ...props
   } = mergedProps;
   const { hideDividers = false } = useModalContext();
-  const actions = [secondaryAction, primaryAction].filter(Boolean);
+  const actions = [secondaryAction, primaryAction].filter(
+    (action): action is NonNullable<typeof action> => Boolean(action),
+  );
   const isVertical = direction === 'vertical';
 
   // reverse actions order when stacked
@@ -41,11 +43,10 @@ export const ModalFooter = memo((_props: ModalFooterProps) => {
   return (
     <Box borderedTop={!hideDividers} paddingX={paddingX} paddingY={paddingY} {...props}>
       <ButtonGroup block={!isVertical} direction={direction}>
-        {actions.map((action, i) => (
+        {actions.map((action, i) =>
           // actions are stable so should be fine to use index as key
-
-          <Fragment key={i}>{action}</Fragment>
-        ))}
+          cloneElement(action, { key: i }),
+        )}
       </ButtonGroup>
     </Box>
   );
diff --git a/packages/mobile/src/overlays/modal/__tests__/Modal.test.tsx b/packages/mobile/src/overlays/modal/__tests__/Modal.test.tsx
index fe9c474d90..23c20f0268 100644
--- a/packages/mobile/src/overlays/modal/__tests__/Modal.test.tsx
+++ b/packages/mobile/src/overlays/modal/__tests__/Modal.test.tsx
@@ -1,12 +1,13 @@
 import React, { useCallback, useState } from 'react';
 import { Animated, Modal as RNModal } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { loremIpsum } from '@coinbase/cds-common/internal/data/loremIpsum';
 import { act, cleanup, fireEvent, render, screen } from '@testing-library/react-native';
 
 import type { ButtonProps } from '../../../buttons';
 import { Button } from '../../../buttons';
 import { Text } from '../../../typography/Text';
-import { DefaultThemeProvider } from '../../../utils/testHelpers';
+import { DefaultThemeProvider, SAFE_AREA_METRICS } from '../../../utils/testHelpers';
 import { Modal } from '../Modal';
 import { ModalBody } from '../ModalBody';
 import { ModalFooter } from '../ModalFooter';
@@ -21,9 +22,11 @@ type LoremIpsumProps = {
 const LoremIpsum = ({ title, concise, repeat }: LoremIpsumProps) => {
   return (
     <>
-      <Text font="label1" paddingBottom={1} renderEmptyNode={false}>
-        {title}
-      </Text>
+      {title && (
+        <Text font="label1" paddingBottom={1}>
+          {title}
+        </Text>
+      )}
       {concise ? null : (
         <Text font="body" paddingBottom={3}>
           {repeat ? loremIpsum.repeat(repeat) : loremIpsum}
@@ -142,7 +145,9 @@ describe('Modal', () => {
   it('passes a11y', () => {
     render(
       <DefaultThemeProvider>
-        <MockModal visible testID="mock-modal" />
+        <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+          <MockModal visible testID="mock-modal" />
+        </SafeAreaProvider>
       </DefaultThemeProvider>,
     );
     expect(screen.getByTestId('mock-modal')).toBeAccessible();
@@ -151,7 +156,9 @@ describe('Modal', () => {
   it('passes a11y when title is not provided', () => {
     render(
       <DefaultThemeProvider>
-        <MockModal visible testID="mock-modal" title="" />
+        <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+          <MockModal visible testID="mock-modal" title="" />
+        </SafeAreaProvider>
       </DefaultThemeProvider>,
     );
     expect(screen.getByTestId('mock-modal')).toBeAccessible();
@@ -159,9 +166,11 @@ describe('Modal', () => {
 
   it('renders React Native Modal', () => {
     render(
-      <DefaultThemeProvider>
-        <MockModal />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <MockModal />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     expect(screen.UNSAFE_queryAllByType(RNModal)).toHaveLength(1);
@@ -169,9 +178,11 @@ describe('Modal', () => {
 
   it('show modal on press', () => {
     render(
-      <DefaultThemeProvider>
-        <MockModal visible={false} />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <MockModal visible={false} />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     expect(screen.UNSAFE_queryByProps({ visible: false })).toBeTruthy();
@@ -186,13 +197,15 @@ describe('Modal', () => {
     const onDidClose = jest.fn();
 
     render(
-      <DefaultThemeProvider>
-        <MockModal
-          closeAccessibilityLabel="Close"
-          onDidClose={onDidClose}
-          onRequestClose={onRequestClose}
-        />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <MockModal
+            closeAccessibilityLabel="Close"
+            onDidClose={onDidClose}
+            onRequestClose={onRequestClose}
+          />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     fireEvent.press(screen.getByText('Open Modal'));
@@ -205,9 +218,11 @@ describe('Modal', () => {
     const onDidClose = jest.fn();
 
     render(
-      <DefaultThemeProvider>
-        <MockModal closeAccessibilityLabel="Close" onDidClose={onDidClose} />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <MockModal closeAccessibilityLabel="Close" onDidClose={onDidClose} />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     fireEvent.press(screen.getByText('Open Modal'));
@@ -222,9 +237,11 @@ describe('Modal', () => {
   it('triggers back action on back button press', () => {
     const onBackButtonClick = jest.fn();
     render(
-      <DefaultThemeProvider>
-        <MockModal backAccessibilityLabel="Back" onBackButtonClick={onBackButtonClick} />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <MockModal backAccessibilityLabel="Back" onBackButtonClick={onBackButtonClick} />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     fireEvent.press(screen.getByText('Open Modal'));
@@ -236,9 +253,11 @@ describe('Modal', () => {
   it('renders modal title', async () => {
     const title = 'Modal Title';
     render(
-      <DefaultThemeProvider>
-        <MockModal title={title} />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <MockModal title={title} />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     fireEvent.press(screen.getByText('Open Modal'));
@@ -273,9 +292,11 @@ describe('Modal', () => {
 
   it('renders modal body', async () => {
     render(
-      <DefaultThemeProvider>
-        <MockModal />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <MockModal />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     fireEvent.press(screen.getByText('Open Modal'));
@@ -285,9 +306,11 @@ describe('Modal', () => {
 
   it('renders modal body without dividers', async () => {
     render(
-      <DefaultThemeProvider>
-        <MockModal hideDividers />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <MockModal hideDividers />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     fireEvent.press(screen.getByText('Open Modal'));
@@ -297,9 +320,11 @@ describe('Modal', () => {
 
   it('renders modal footer', () => {
     render(
-      <DefaultThemeProvider>
-        <MockModal />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <MockModal />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     fireEvent.press(screen.getByText('Open Modal'));
@@ -313,9 +338,11 @@ describe('Modal', () => {
     const animationTimingSpy = jest.spyOn(Animated, 'timing');
 
     render(
-      <DefaultThemeProvider>
-        <MockModal visible onRequestClose={onRequestClose} />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <MockModal visible onRequestClose={onRequestClose} />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     // press on footer action
@@ -327,9 +354,11 @@ describe('Modal', () => {
 
   it('sets accessible labels on close button', () => {
     render(
-      <DefaultThemeProvider>
-        <MockModal closeAccessibilityHint="Close button hint" closeAccessibilityLabel="Close" />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <MockModal closeAccessibilityHint="Close button hint" closeAccessibilityLabel="Close" />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     fireEvent.press(screen.getByText('Open Modal'));
@@ -340,13 +369,15 @@ describe('Modal', () => {
 
   it('sets accessible labels on back button', () => {
     render(
-      <DefaultThemeProvider>
-        <MockModal
-          backAccessibilityHint="Back button hint"
-          backAccessibilityLabel="Back"
-          onBackButtonClick={jest.fn()}
-        />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={SAFE_AREA_METRICS}>
+        <DefaultThemeProvider>
+          <MockModal
+            backAccessibilityHint="Back button hint"
+            backAccessibilityLabel="Back"
+            onBackButtonClick={jest.fn()}
+          />
+        </DefaultThemeProvider>
+      </SafeAreaProvider>,
     );
 
     fireEvent.press(screen.getByText('Open Modal'));
diff --git a/packages/mobile/src/overlays/overlay/Overlay.tsx b/packages/mobile/src/overlays/overlay/Overlay.tsx
index da7f25167d..21e7c9dfaf 100644
--- a/packages/mobile/src/overlays/overlay/Overlay.tsx
+++ b/packages/mobile/src/overlays/overlay/Overlay.tsx
@@ -24,7 +24,7 @@ export type OverlayProps = OverlayBaseProps & Omit<VStackProps, 'opacity'>;
 
 export const Overlay = memo((_props: OverlayProps) => {
   const mergedProps = useComponentConfig('Overlay', _props);
-  const { opacity, ...props } = mergedProps;
+  const { opacity, style, ...props } = mergedProps;
   const theme = useTheme();
   return (
     <OverlayContentContext.Provider value={overlayContentContextValue}>
@@ -32,13 +32,14 @@ export const Overlay = memo((_props: OverlayProps) => {
         animated
         renderToHardwareTextureAndroid
         background="bgOverlay"
-        dangerouslySetBackground={
-          theme.activeColorScheme === 'dark'
-            ? `rgba(${theme?.darkSpectrum?.gray0}, 0.5)`
-            : undefined
-        }
         opacity={opacity}
         pin="all"
+        style={[
+          theme.activeColorScheme === 'dark'
+            ? { backgroundColor: `rgba(${theme?.darkSpectrum?.gray0}, 0.5)` }
+            : undefined,
+          style,
+        ]}
         {...props}
       />
     </OverlayContentContext.Provider>
diff --git a/packages/mobile/src/overlays/overlay/__tests__/useOverlayAnimation.test.ts b/packages/mobile/src/overlays/overlay/__tests__/useOverlayAnimation.test.ts
index c6e5f627b9..fba1509570 100644
--- a/packages/mobile/src/overlays/overlay/__tests__/useOverlayAnimation.test.ts
+++ b/packages/mobile/src/overlays/overlay/__tests__/useOverlayAnimation.test.ts
@@ -1,5 +1,5 @@
 import { Animated } from 'react-native';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import { useOverlayAnimation } from '../useOverlayAnimation';
 
diff --git a/packages/mobile/src/overlays/tooltip/__figma__/Tooltip.figma.tsx b/packages/mobile/src/overlays/tooltip/__figma__/Tooltip.figma.tsx
index d33dcb570c..712e373008 100644
--- a/packages/mobile/src/overlays/tooltip/__figma__/Tooltip.figma.tsx
+++ b/packages/mobile/src/overlays/tooltip/__figma__/Tooltip.figma.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { figma } from '@figma/code-connect';
 
 import { Button } from '../../../buttons';
-import { TextBody, TextHeadline } from '../../../typography';
+import { Text } from '../../../typography';
 import { Tooltip } from '../Tooltip';
 
 figma.connect(
@@ -79,8 +79,8 @@ figma.connect(
       <Tooltip
         content={
           <>
-            <TextHeadline>{content.title}</TextHeadline>
-            <TextBody>{content.description}</TextBody>
+            <Text font="headline">{content.title}</Text>
+            <Text font="body">{content.description}</Text>
           </>
         }
       >
diff --git a/packages/mobile/src/overlays/tooltip/__tests__/InternalTooltip.test.tsx b/packages/mobile/src/overlays/tooltip/__tests__/InternalTooltip.test.tsx
index 09504f1740..bb62ebda85 100644
--- a/packages/mobile/src/overlays/tooltip/__tests__/InternalTooltip.test.tsx
+++ b/packages/mobile/src/overlays/tooltip/__tests__/InternalTooltip.test.tsx
@@ -1,4 +1,6 @@
 import { Animated, Text } from 'react-native';
+import type { ReactElement } from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { render, screen } from '@testing-library/react-native';
 
 import { defaultTheme } from '../../../themes/defaultTheme';
@@ -7,6 +9,11 @@ import { InternalTooltip } from '../InternalTooltip';
 
 const TEST_ID = 'mock-internal-tooltip';
 
+const safeAreaInitialMetrics = {
+  frame: { x: 0, y: 0, width: 0, height: 0 },
+  insets: { top: 0, left: 0, right: 0, bottom: 0 },
+};
+
 const mockAnimateIn = {
   start: jest.fn(),
 };
@@ -16,36 +23,39 @@ describe('InternalTooltip.test', () => {
     jest.clearAllMocks();
   });
 
-  it('passes a11y', () => {
+  const renderWithProviders = (ui: ReactElement) =>
     render(
-      <DefaultThemeProvider>
-        <InternalTooltip
-          animateIn={mockAnimateIn as unknown as Animated.CompositeAnimation}
-          content={<Text>test content</Text>}
-          opacity={new Animated.Value(1)}
-          placement="top"
-          subjectLayout={{ width: 20, height: 30, pageOffsetX: 15, pageOffsetY: 25 }}
-          testID={TEST_ID}
-          translateY={new Animated.Value(5)}
-        />
-      </DefaultThemeProvider>,
+      <SafeAreaProvider initialMetrics={safeAreaInitialMetrics}>
+        <DefaultThemeProvider>{ui}</DefaultThemeProvider>
+      </SafeAreaProvider>,
+    );
+
+  it('passes a11y', () => {
+    renderWithProviders(
+      <InternalTooltip
+        animateIn={mockAnimateIn as unknown as Animated.CompositeAnimation}
+        content={<Text>test content</Text>}
+        opacity={new Animated.Value(1)}
+        placement="top"
+        subjectLayout={{ width: 20, height: 30, pageOffsetX: 15, pageOffsetY: 25 }}
+        testID={TEST_ID}
+        translateY={new Animated.Value(5)}
+      />,
     );
     expect(screen.getByTestId(TEST_ID)).toBeAccessible();
   });
 
   it('renders content', () => {
-    render(
-      <DefaultThemeProvider>
-        <InternalTooltip
-          animateIn={mockAnimateIn as unknown as Animated.CompositeAnimation}
-          content={<Text>test content</Text>}
-          opacity={new Animated.Value(1)}
-          placement="top"
-          subjectLayout={{ width: 20, height: 30, pageOffsetX: 15, pageOffsetY: 25 }}
-          testID={TEST_ID}
-          translateY={new Animated.Value(5)}
-        />
-      </DefaultThemeProvider>,
+    renderWithProviders(
+      <InternalTooltip
+        animateIn={mockAnimateIn as unknown as Animated.CompositeAnimation}
+        content={<Text>test content</Text>}
+        opacity={new Animated.Value(1)}
+        placement="top"
+        subjectLayout={{ width: 20, height: 30, pageOffsetX: 15, pageOffsetY: 25 }}
+        testID={TEST_ID}
+        translateY={new Animated.Value(5)}
+      />,
     );
 
     expect(screen.getByText('test content')).toBeTruthy();
@@ -56,17 +66,15 @@ describe('InternalTooltip.test', () => {
   });
 
   it('renders string content', () => {
-    render(
-      <DefaultThemeProvider>
-        <InternalTooltip
-          animateIn={mockAnimateIn as unknown as Animated.CompositeAnimation}
-          content="test content"
-          opacity={new Animated.Value(1)}
-          placement="bottom"
-          subjectLayout={{ width: 20, height: 30, pageOffsetX: 15, pageOffsetY: 25 }}
-          translateY={new Animated.Value(5)}
-        />
-      </DefaultThemeProvider>,
+    renderWithProviders(
+      <InternalTooltip
+        animateIn={mockAnimateIn as unknown as Animated.CompositeAnimation}
+        content="test content"
+        opacity={new Animated.Value(1)}
+        placement="bottom"
+        subjectLayout={{ width: 20, height: 30, pageOffsetX: 15, pageOffsetY: 25 }}
+        translateY={new Animated.Value(5)}
+      />,
     );
 
     expect(screen.getByText('test content')).toBeTruthy();
@@ -74,20 +82,18 @@ describe('InternalTooltip.test', () => {
   });
 
   it('renders active colorScheme when invertColorScheme sets to false', () => {
-    render(
-      <DefaultThemeProvider>
-        <InternalTooltip
-          animateIn={mockAnimateIn as unknown as Animated.CompositeAnimation}
-          content={<Text>test content</Text>}
-          elevation={2}
-          invertColorScheme={false}
-          opacity={new Animated.Value(1)}
-          placement="top"
-          subjectLayout={{ width: 20, height: 30, pageOffsetX: 15, pageOffsetY: 25 }}
-          testID={TEST_ID}
-          translateY={new Animated.Value(5)}
-        />
-      </DefaultThemeProvider>,
+    renderWithProviders(
+      <InternalTooltip
+        animateIn={mockAnimateIn as unknown as Animated.CompositeAnimation}
+        content={<Text>test content</Text>}
+        elevation={2}
+        invertColorScheme={false}
+        opacity={new Animated.Value(1)}
+        placement="top"
+        subjectLayout={{ width: 20, height: 30, pageOffsetX: 15, pageOffsetY: 25 }}
+        testID={TEST_ID}
+        translateY={new Animated.Value(5)}
+      />,
     );
 
     expect(screen.getByTestId(TEST_ID)).toHaveStyle({
diff --git a/packages/mobile/src/overlays/tooltip/__tests__/Tooltip.test.tsx b/packages/mobile/src/overlays/tooltip/__tests__/Tooltip.test.tsx
index e599017ba9..89db3eb0a6 100644
--- a/packages/mobile/src/overlays/tooltip/__tests__/Tooltip.test.tsx
+++ b/packages/mobile/src/overlays/tooltip/__tests__/Tooltip.test.tsx
@@ -1,5 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { act, fireEvent, render, screen } from '@testing-library/react-native';
+import { act, fireEvent, render, renderHook, screen } from '@testing-library/react-native';
 
 import { Button } from '../../../buttons';
 import { useDimensions } from '../../../hooks/useDimensions';
diff --git a/packages/mobile/src/overlays/tooltip/__tests__/UseTooltipPositionTestData.ts b/packages/mobile/src/overlays/tooltip/__tests__/UseTooltipPositionTestData.ts
index f1d5a6ef8b..cd0144ba90 100644
--- a/packages/mobile/src/overlays/tooltip/__tests__/UseTooltipPositionTestData.ts
+++ b/packages/mobile/src/overlays/tooltip/__tests__/UseTooltipPositionTestData.ts
@@ -38,7 +38,7 @@ export const basicCenterSubject: UseTooltipPositionTestData = {
   },
   dimensions: galaxyScreenDimensions,
 
-  expectedTop: { opacity: 1, start: 112.13333129882812, top: 212.97779083251953 },
+  expectedTop: { opacity: 1, start: 112.13333129882812, top: 238.93334579467773 },
 
   // To do:
   expectedBottom: {
diff --git a/packages/mobile/src/overlays/tooltip/__tests__/useTooltipPosition.test.tsx b/packages/mobile/src/overlays/tooltip/__tests__/useTooltipPosition.test.tsx
new file mode 100644
index 0000000000..c22b5b0f75
--- /dev/null
+++ b/packages/mobile/src/overlays/tooltip/__tests__/useTooltipPosition.test.tsx
@@ -0,0 +1,214 @@
+import { Platform } from 'react-native';
+import { renderHook } from '@testing-library/react-native';
+
+import { useDimensions } from '../../../hooks/useDimensions';
+import { DefaultThemeProvider } from '../../../utils/testHelpers';
+import type { UseTooltipPositionParams } from '../TooltipProps';
+import { useTooltipPosition } from '../useTooltipPosition';
+
+jest.mock('../../../hooks/useDimensions');
+
+const mockUseDimensions = (mocks: ReturnType<typeof useDimensions>) => {
+  (useDimensions as jest.Mock).mockReturnValue(mocks);
+};
+
+const createHookInstance = (options: UseTooltipPositionParams) => {
+  return renderHook(() => useTooltipPosition(options), {
+    wrapper: DefaultThemeProvider,
+  });
+};
+
+const STATUS_BAR_HEIGHT = 24;
+const SCREEN_HEIGHT = 800;
+const SCREEN_WIDTH = 400;
+
+const baseSubjectLayout = {
+  height: 40,
+  width: 100,
+  pageOffsetX: 150,
+  pageOffsetY: 200,
+};
+
+const baseTooltipLayout = {
+  height: 50,
+  width: 150,
+  x: 0,
+  y: 0,
+};
+
+describe('useTooltipPosition - Android Edge-to-Edge', () => {
+  const originalPlatformOS = Platform.OS;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // Set platform to Android for these tests
+    Platform.OS = 'android';
+  });
+
+  afterEach(() => {
+    Platform.OS = originalPlatformOS;
+  });
+
+  describe('Android Edge-to-Edge Mode (safe area insets > 0)', () => {
+    // In edge-to-edge mode, useSafeAreaInsets().top returns the status bar height
+    // The Modal and main view share the same coordinate system (both start from screen top)
+    // Therefore, NO adjustment should be made to pageOffsetY
+
+    it('positions tooltip above subject without status bar offset', () => {
+      // Edge-to-edge: statusBarHeight comes from safe area insets and is > 0
+      mockUseDimensions({
+        screenHeight: SCREEN_HEIGHT,
+        screenWidth: SCREEN_WIDTH,
+        statusBarHeight: STATUS_BAR_HEIGHT,
+      });
+
+      const { result } = createHookInstance({
+        placement: 'top',
+        subjectLayout: baseSubjectLayout,
+        tooltipLayout: baseTooltipLayout,
+      });
+
+      // Expected: tooltip top = pageOffsetY - tooltipHeight (no status bar subtraction)
+      // = 200 - 50 = 150
+      const expectedTop = baseSubjectLayout.pageOffsetY - baseTooltipLayout.height;
+
+      expect(result.current.top).toBe(expectedTop);
+      expect(result.current.opacity).toBe(1);
+    });
+
+    it('positions tooltip below subject without status bar offset', () => {
+      mockUseDimensions({
+        screenHeight: SCREEN_HEIGHT,
+        screenWidth: SCREEN_WIDTH,
+        statusBarHeight: STATUS_BAR_HEIGHT,
+      });
+
+      const { result } = createHookInstance({
+        placement: 'bottom',
+        subjectLayout: baseSubjectLayout,
+        tooltipLayout: baseTooltipLayout,
+      });
+
+      // Expected: tooltip top = pageOffsetY + subjectHeight (no status bar subtraction)
+      // = 200 + 40 = 240
+      const expectedTop = baseSubjectLayout.pageOffsetY + baseSubjectLayout.height;
+
+      expect(result.current.top).toBe(expectedTop);
+      expect(result.current.opacity).toBe(1);
+    });
+  });
+
+  describe('Android Non-Edge-to-Edge Mode (safe area insets = 0)', () => {
+    // In non-edge-to-edge mode, useSafeAreaInsets().top returns 0
+    // But the coordinate systems are still offset by the status bar
+    // Therefore, we need to subtract StatusBar.currentHeight from pageOffsetY
+
+    it('positions tooltip above subject with status bar offset adjustment', () => {
+      // Non-edge-to-edge: statusBarHeight from safe area insets is 0
+      // But StatusBar.currentHeight should be used for the offset
+      mockUseDimensions({
+        screenHeight: SCREEN_HEIGHT,
+        screenWidth: SCREEN_WIDTH,
+        statusBarHeight: 0,
+      });
+
+      const { result } = createHookInstance({
+        placement: 'top',
+        subjectLayout: baseSubjectLayout,
+        tooltipLayout: baseTooltipLayout,
+      });
+
+      // Expected: tooltip top = (pageOffsetY - StatusBar.currentHeight) - tooltipHeight
+      // With StatusBar.currentHeight ≈ 24, this should be: (200 - 24) - 50 = 126
+      // Note: The actual StatusBar.currentHeight value would come from the native module
+      // For this test, we verify the offset IS applied (top should be less than edge-to-edge case)
+      const edgeToEdgeTop = baseSubjectLayout.pageOffsetY - baseTooltipLayout.height; // 150
+
+      // In non-edge-to-edge, the top should be offset by the status bar height
+      // So it should be: 150 - ACTUAL_STATUS_BAR_HEIGHT
+      // We expect this to be LESS than the edge-to-edge case
+      expect(result.current.top).toBeLessThan(edgeToEdgeTop);
+      expect(result.current.opacity).toBe(1);
+    });
+
+    it('positions tooltip below subject with status bar offset adjustment', () => {
+      mockUseDimensions({
+        screenHeight: SCREEN_HEIGHT,
+        screenWidth: SCREEN_WIDTH,
+        statusBarHeight: 0,
+      });
+
+      const { result } = createHookInstance({
+        placement: 'bottom',
+        subjectLayout: baseSubjectLayout,
+        tooltipLayout: baseTooltipLayout,
+      });
+
+      // Expected: tooltip top = (pageOffsetY - StatusBar.currentHeight) + subjectHeight
+      // With StatusBar.currentHeight ≈ 24, this should be: (200 - 24) + 40 = 216
+      const edgeToEdgeTop = baseSubjectLayout.pageOffsetY + baseSubjectLayout.height; // 240
+
+      // In non-edge-to-edge, the top should be offset by the status bar height
+      expect(result.current.top).toBeLessThan(edgeToEdgeTop);
+      expect(result.current.opacity).toBe(1);
+    });
+  });
+
+  describe('Android with yShiftByStatusBarHeight flag', () => {
+    // When yShiftByStatusBarHeight is true, the status bar offset should NOT be applied
+    // This is for cases where the tooltip is already in a context with aligned coordinates
+
+    it('does not apply status bar offset when yShiftByStatusBarHeight is true', () => {
+      mockUseDimensions({
+        screenHeight: SCREEN_HEIGHT,
+        screenWidth: SCREEN_WIDTH,
+        statusBarHeight: STATUS_BAR_HEIGHT,
+      });
+
+      const { result } = createHookInstance({
+        placement: 'top',
+        subjectLayout: baseSubjectLayout,
+        tooltipLayout: baseTooltipLayout,
+        yShiftByStatusBarHeight: true,
+      });
+
+      // With yShiftByStatusBarHeight=true, should use pageOffsetY directly
+      const expectedTop = baseSubjectLayout.pageOffsetY - baseTooltipLayout.height;
+
+      expect(result.current.top).toBe(expectedTop);
+    });
+  });
+});
+
+describe('useTooltipPosition - iOS (baseline comparison)', () => {
+  const originalPlatformOS = Platform.OS;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    Platform.OS = 'ios';
+  });
+
+  afterEach(() => {
+    Platform.OS = originalPlatformOS;
+  });
+
+  it('positions tooltip without status bar offset on iOS', () => {
+    mockUseDimensions({
+      screenHeight: SCREEN_HEIGHT,
+      screenWidth: SCREEN_WIDTH,
+      statusBarHeight: STATUS_BAR_HEIGHT,
+    });
+
+    const { result } = createHookInstance({
+      placement: 'top',
+      subjectLayout: baseSubjectLayout,
+      tooltipLayout: baseTooltipLayout,
+    });
+
+    // iOS always uses pageOffsetY directly (no status bar subtraction)
+    const expectedTop = baseSubjectLayout.pageOffsetY - baseTooltipLayout.height;
+
+    expect(result.current.top).toBe(expectedTop);
+    expect(result.current.opacity).toBe(1);
+  });
+});
diff --git a/packages/mobile/src/overlays/tooltip/useTooltipPosition.ts b/packages/mobile/src/overlays/tooltip/useTooltipPosition.ts
index 4369b1fb5a..2f63fe42eb 100644
--- a/packages/mobile/src/overlays/tooltip/useTooltipPosition.ts
+++ b/packages/mobile/src/overlays/tooltip/useTooltipPosition.ts
@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { Platform } from 'react-native';
+import { Platform, StatusBar } from 'react-native';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
 
 import { IOS_BOTTOM_NAV_BAR_HEIGHT, useDimensions } from '../../hooks/useDimensions';
@@ -31,10 +31,20 @@ export const useTooltipPosition = ({
 
       const { pageOffsetY } = subjectLayout;
 
+      // On Android, we detect edge-to-edge mode by checking useSafeAreaInsets().top:
+      // - When > 0: App content extends behind the status bar (edge-to-edge enabled).
+      //   The tooltip and subject share the same coordinate origin, so no adjustment needed.
+      // - When === 0: App content is placed below the status bar (edge-to-edge disabled).
+      //   The subject's pageOffsetY is measured from screen top, but the tooltip is
+      //   rendered inside a Modal whose coordinate system starts below the status bar.
+      //   We subtract StatusBar.currentHeight to reconcile these two origins.
+      const isEdgeToEdge = statusBarHeight > 0;
       const actualPageYOffset =
         Platform.OS === 'ios' || yShiftByStatusBarHeight
           ? pageOffsetY
-          : pageOffsetY - (statusBarHeight ?? 0);
+          : isEdgeToEdge
+            ? pageOffsetY
+            : pageOffsetY - (StatusBar.currentHeight ?? 0);
 
       return calculatedPlacement === 'bottom'
         ? actualPageYOffset + (subjectLayout?.height ?? 0)
diff --git a/packages/mobile/src/overlays/tray/Tray.tsx b/packages/mobile/src/overlays/tray/Tray.tsx
index 5031868dcc..cc1872c5f4 100644
--- a/packages/mobile/src/overlays/tray/Tray.tsx
+++ b/packages/mobile/src/overlays/tray/Tray.tsx
@@ -25,7 +25,7 @@ import {
   type DrawerRefBaseProps,
 } from '../drawer/Drawer';
 
-export type TrayRenderChildren = React.FC<{ handleClose: () => void }>;
+export type TrayRenderChildren = (args: { handleClose: () => void }) => React.ReactNode;
 
 export type TrayBaseProps = Omit<DrawerBaseProps, 'pin' | 'children'> & {
   /** Component to render as the Tray content */
diff --git a/packages/mobile/src/overlays/useModal.ts b/packages/mobile/src/overlays/useModal.ts
index c9dd8af227..56c221bf4e 100644
--- a/packages/mobile/src/overlays/useModal.ts
+++ b/packages/mobile/src/overlays/useModal.ts
@@ -1,7 +1,7 @@
 import { useModal } from '@coinbase/cds-common/overlays/useModal';
 
 /**
- * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
+ * @deprecated Use the `visible` and `onRequestClose` props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
  * @deprecationExpectedRemoval v7
  */
 export { useModal };
diff --git a/packages/mobile/src/page/PageFooter.tsx b/packages/mobile/src/page/PageFooter.tsx
index c59ca363ea..713d6abfab 100644
--- a/packages/mobile/src/page/PageFooter.tsx
+++ b/packages/mobile/src/page/PageFooter.tsx
@@ -2,11 +2,12 @@ import React, { forwardRef, memo } from 'react';
 import type { View } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { pageFooterHeight } from '@coinbase/cds-common/tokens/page';
-import type { PositionStyles, SharedProps } from '@coinbase/cds-common/types';
+import type { SharedProps } from '@coinbase/cds-common/types';
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, type BoxProps } from '../layout/Box';
 import { VStack } from '../layout/VStack';
+import type { PositionStyles } from '../styles/styleProps';
 import { Text } from '../typography/Text';
 
 export type PageFooterBaseProps = SharedProps &
diff --git a/packages/mobile/src/page/PageHeader.tsx b/packages/mobile/src/page/PageHeader.tsx
index 91260e4164..6a1314529f 100644
--- a/packages/mobile/src/page/PageHeader.tsx
+++ b/packages/mobile/src/page/PageHeader.tsx
@@ -2,12 +2,13 @@ import React, { forwardRef, memo, useMemo } from 'react';
 import type { StyleProp, View, ViewStyle } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { pageHeaderHeight } from '@coinbase/cds-common/tokens/page';
-import type { PositionStyles, SharedProps } from '@coinbase/cds-common/types';
+import type { SharedProps } from '@coinbase/cds-common/types';
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, type BoxProps } from '../layout/Box';
 import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
+import type { PositionStyles } from '../styles/styleProps';
 import { Text } from '../typography/Text';
 
 export type PageHeaderBaseProps = SharedProps &
diff --git a/packages/mobile/src/page/__stories__/PageFooterInPage.stories.tsx b/packages/mobile/src/page/__stories__/PageFooterInPage.stories.tsx
index 209dc71b08..3787c8bd8e 100644
--- a/packages/mobile/src/page/__stories__/PageFooterInPage.stories.tsx
+++ b/packages/mobile/src/page/__stories__/PageFooterInPage.stories.tsx
@@ -43,11 +43,11 @@ const PageFooterInPageScreen = () => {
         <VStack
           alignContent="center"
           alignItems="center"
-          dangerouslySetBackground="#FADADD"
           gap={0}
           justifyContent="center"
           left={0}
           padding={10}
+          style={{ backgroundColor: '#FADADD' }}
         >
           <Text font="title1">Primary Content</Text>
         </VStack>
diff --git a/packages/mobile/src/page/__stories__/PageHeader.stories.tsx b/packages/mobile/src/page/__stories__/PageHeader.stories.tsx
index ece6b2daa7..9d95ea2526 100644
--- a/packages/mobile/src/page/__stories__/PageHeader.stories.tsx
+++ b/packages/mobile/src/page/__stories__/PageHeader.stories.tsx
@@ -38,7 +38,7 @@ const exampleProps = {
   ),
   intermediary1: <Text font="headline">Intermediary Content</Text>,
   intermediary2: (
-    <Box dangerouslySetBackground="red">
+    <Box style={{ backgroundColor: 'red' }}>
       <Text font="body">
         Hello there. This is a rather long text sentence since I do not have lorem ipsum handy.
         Hello there. This is a rather long text sentence since I do not have lorem ipsum handy.
diff --git a/packages/mobile/src/page/__stories__/PageHeaderInErrorEmptyState.stories.tsx b/packages/mobile/src/page/__stories__/PageHeaderInErrorEmptyState.stories.tsx
index cad188d261..96a7a24872 100644
--- a/packages/mobile/src/page/__stories__/PageHeaderInErrorEmptyState.stories.tsx
+++ b/packages/mobile/src/page/__stories__/PageHeaderInErrorEmptyState.stories.tsx
@@ -23,7 +23,7 @@ const PageHeaderInErrorEmptyState = () => {
     <ExampleScreen>
       <Example hideDivider height="100%" title="Error/Empty State">
         <VStack gap={0} width="100%">
-          <PageHeader background="bg" position="sticky" start={exampleProps.logoMark2} top="0" />
+          <PageHeader background="bg" start={exampleProps.logoMark2} top={0} />
           <Box background="bgPrimaryWash">
             <VStack
               alignContent="center"
diff --git a/packages/mobile/src/page/__stories__/PageHeaderInPage.stories.tsx b/packages/mobile/src/page/__stories__/PageHeaderInPage.stories.tsx
index a08e3d2981..b569178760 100644
--- a/packages/mobile/src/page/__stories__/PageHeaderInPage.stories.tsx
+++ b/packages/mobile/src/page/__stories__/PageHeaderInPage.stories.tsx
@@ -29,20 +29,19 @@ const PageHeaderInPage = () => {
           <PageHeader
             background="bg"
             end={<IconButton name="close" testID="header-back-button" />}
-            position="sticky"
             start={exampleProps.start}
             title={exampleProps.title}
-            top="0"
+            top={0}
           />
           <VStack
             alignContent="center"
             alignItems="center"
-            dangerouslySetBackground="#FADADD"
             flexGrow={1}
             flexShrink={1}
-            height="500px"
+            height={500}
             justifyContent="center"
             padding={10}
+            style={{ backgroundColor: '#FADADD' }}
           >
             <Text font="title1">Primary Content</Text>
           </VStack>
diff --git a/packages/mobile/src/stepper/DefaultStepperHeaderHorizontal.tsx b/packages/mobile/src/stepper/DefaultStepperHeaderHorizontal.tsx
index 6afa2475fd..b40840d8ed 100644
--- a/packages/mobile/src/stepper/DefaultStepperHeaderHorizontal.tsx
+++ b/packages/mobile/src/stepper/DefaultStepperHeaderHorizontal.tsx
@@ -1,17 +1,20 @@
-import { memo, useEffect, useMemo } from 'react';
-import { animated, useSpring } from '@react-spring/native';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { durations } from '@coinbase/cds-common/motion/tokens';
 
 import { HStack } from '../layout/HStack';
+import { mobileCurves } from '../motion/convertMotionConfig';
 import { Text } from '../typography/Text';
 
 import type { StepperHeaderComponent } from './Stepper';
 
-const AnimatedHStack = animated(HStack);
+const AnimatedHStack = Animated.createAnimatedComponent(HStack);
 
 export const DefaultStepperHeaderHorizontal: StepperHeaderComponent = memo(
   function DefaultStepperHeaderHorizontal({
     activeStep,
     complete,
+    disableAnimateOnMount,
     flatStepIds,
     style,
     paddingBottom = 1.5,
@@ -20,27 +23,41 @@ export const DefaultStepperHeaderHorizontal: StepperHeaderComponent = memo(
     fontFamily = font,
     ...props
   }) {
-    const [spring, springApi] = useSpring(
-      {
-        from: { opacity: 0 },
-        to: { opacity: 1 },
-        reset: true,
-      },
-      [],
-    );
+    const opacity = useSharedValue(disableAnimateOnMount ? 1 : 0);
+    const disableAnimateOnMountRef = useRef(disableAnimateOnMount);
+    const isInitialRender = useRef(true);
+
+    const [displayedStep, setDisplayedStep] = useState(activeStep);
+    const [displayedComplete, setDisplayedComplete] = useState(complete);
 
-    // TO DO: resetting the spring doesn't work like it does in react-spring on web
-    // need to look into this deeper and understand why there is a difference in behavior
     useEffect(() => {
-      springApi.start({
-        from: { opacity: 0 },
-        to: { opacity: 1 },
-        reset: true,
-      });
-    }, [springApi, activeStep]);
+      if (isInitialRender.current) {
+        isInitialRender.current = false;
+        setDisplayedStep(activeStep);
+        setDisplayedComplete(complete);
+        if (disableAnimateOnMountRef.current) return;
+        opacity.value = withTiming(1, { duration: durations.fast1, easing: mobileCurves.linear });
+        return;
+      }
+
+      // Fade out with old text, then swap text and fade in
+      opacity.value = withTiming(0, { duration: durations.fast1, easing: mobileCurves.linear });
+
+      const timeout = setTimeout(() => {
+        setDisplayedStep(activeStep);
+        setDisplayedComplete(complete);
+        opacity.value = withTiming(1, { duration: durations.fast1, easing: mobileCurves.linear });
+      }, durations.fast1 + durations.fast1);
+
+      return () => clearTimeout(timeout);
+    }, [activeStep, complete, opacity]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      opacity: opacity.value,
+    }));
 
-    const styles = useMemo(() => [style, spring] as any, [style, spring]);
-    const flatStepIndex = activeStep ? flatStepIds.indexOf(activeStep.id) : -1;
+    const styles = useMemo(() => [style, animatedStyle], [style, animatedStyle]);
+    const flatStepIndex = displayedStep ? flatStepIds.indexOf(displayedStep.id) : -1;
     const emptyText = ' '; // Simple space for React Native
 
     return (
@@ -52,7 +69,7 @@ export const DefaultStepperHeaderHorizontal: StepperHeaderComponent = memo(
         {...props}
       >
         <Text alignItems="center" display="flex" font="caption" fontFamily={fontFamily}>
-          {!activeStep || complete ? (
+          {!displayedStep || displayedComplete ? (
             emptyText
           ) : (
             <HStack gap={1}>
@@ -65,12 +82,12 @@ export const DefaultStepperHeaderHorizontal: StepperHeaderComponent = memo(
               >
                 {flatStepIndex + 1}/{flatStepIds.length}
               </Text>
-              {activeStep.label && typeof activeStep.label === 'string' ? (
+              {displayedStep.label && typeof displayedStep.label === 'string' ? (
                 <Text font={font} fontFamily={fontFamily} numberOfLines={1}>
-                  {activeStep.label}
+                  {displayedStep.label}
                 </Text>
               ) : (
-                activeStep.label
+                displayedStep.label
               )}
             </HStack>
           )}
diff --git a/packages/mobile/src/stepper/DefaultStepperProgressHorizontal.tsx b/packages/mobile/src/stepper/DefaultStepperProgressHorizontal.tsx
index 7110050e13..7d07a67213 100644
--- a/packages/mobile/src/stepper/DefaultStepperProgressHorizontal.tsx
+++ b/packages/mobile/src/stepper/DefaultStepperProgressHorizontal.tsx
@@ -1,11 +1,12 @@
-import { memo } from 'react';
-import { animated, to } from '@react-spring/native';
+import { memo, useCallback, useEffect } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import { Box } from '../layout/Box';
 
 import type { StepperProgressComponent } from './Stepper';
 
-const AnimatedBox = animated(Box);
+const AnimatedBox = Animated.createAnimatedComponent(Box);
 
 export const DefaultStepperProgressHorizontal: StepperProgressComponent = memo(
   function DefaultStepperProgressHorizontal({
@@ -19,7 +20,7 @@ export const DefaultStepperProgressHorizontal: StepperProgressComponent = memo(
     progress,
     complete,
     isDescendentActive,
-    progressSpringConfig,
+    progressTimingConfig,
     animate,
     disableAnimateOnMount,
     style,
@@ -33,6 +34,24 @@ export const DefaultStepperProgressHorizontal: StepperProgressComponent = memo(
     height = 4,
     ...props
   }) {
+    const containerWidth = useSharedValue(0);
+    const animatedProgress = useSharedValue(progress);
+
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        containerWidth.value = event.nativeEvent.layout.width;
+      },
+      [containerWidth],
+    );
+
+    useEffect(() => {
+      animatedProgress.value = withTiming(progress, progressTimingConfig);
+    }, [progress, progressTimingConfig, animatedProgress]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      width: animatedProgress.value * containerWidth.value,
+    }));
+
     return (
       <Box
         accessibilityElementsHidden
@@ -40,6 +59,7 @@ export const DefaultStepperProgressHorizontal: StepperProgressComponent = memo(
         borderRadius={borderRadius}
         flexGrow={1}
         height={height}
+        onLayout={handleLayout}
         style={style}
         {...props}
       >
@@ -57,7 +77,7 @@ export const DefaultStepperProgressHorizontal: StepperProgressComponent = memo(
           }
           borderRadius={borderRadius}
           height="100%"
-          width={to([progress], (width) => `${width * 100}%`)}
+          style={animatedStyle}
         />
       </Box>
     );
diff --git a/packages/mobile/src/stepper/DefaultStepperProgressVertical.tsx b/packages/mobile/src/stepper/DefaultStepperProgressVertical.tsx
index d582c81709..1530a96872 100644
--- a/packages/mobile/src/stepper/DefaultStepperProgressVertical.tsx
+++ b/packages/mobile/src/stepper/DefaultStepperProgressVertical.tsx
@@ -1,13 +1,13 @@
-import { memo, useCallback, useMemo } from 'react';
-import { useHasMounted } from '@coinbase/cds-common/hooks/useHasMounted';
+import { memo, useCallback, useEffect, useMemo } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { flattenSteps } from '@coinbase/cds-common/stepper/utils';
-import { animated, to, useSpring } from '@react-spring/native';
 
 import { Box } from '../layout/Box';
 
 import type { StepperProgressComponent, StepperValue } from './Stepper';
 
-const AnimatedBox = animated(Box);
+const AnimatedBox = Animated.createAnimatedComponent(Box);
 
 export const DefaultStepperProgressVertical: StepperProgressComponent = memo(
   function DefaultStepperProgressVertical({
@@ -23,9 +23,7 @@ export const DefaultStepperProgressVertical: StepperProgressComponent = memo(
     isDescendentActive,
     style,
     activeStepLabelElement,
-    progressSpringConfig,
-    animate = true,
-    disableAnimateOnMount,
+    progressTimingConfig,
     background = 'bgLine',
     defaultFill = 'bgLinePrimarySubtle',
     activeFill = 'bgLinePrimarySubtle',
@@ -36,7 +34,6 @@ export const DefaultStepperProgressVertical: StepperProgressComponent = memo(
     width = 2,
     ...props
   }) {
-    const hasMounted = useHasMounted();
     const isLastStep = flatStepIds[flatStepIds.length - 1] === step.id;
 
     // Count the total number of sub-steps in the current step's tree
@@ -56,35 +53,45 @@ export const DefaultStepperProgressVertical: StepperProgressComponent = memo(
       [],
     );
 
+    // Fractional fill for steps with sub-steps. For all other cases, return 1
+    // and let the cascade's `progress` prop control whether the bar is filled.
     const progressHeight = useMemo(() => {
       const totalSubSteps = countAllSubSteps(step.subSteps ?? []);
 
-      if (complete) return 1;
-      if (active && totalSubSteps === 0) return 1;
-      if (active && !isDescendentActive) return 0;
-      if (isDescendentActive) {
+      if (active && totalSubSteps > 0 && !isDescendentActive) return 0;
+      if (isDescendentActive && totalSubSteps > 0) {
         const activePosition = findSubStepPosition(step.subSteps ?? [], activeStepId);
         return activePosition / totalSubSteps;
       }
-      if (visited) return 1;
 
-      return 0;
+      return 1;
     }, [
       countAllSubSteps,
       step.subSteps,
-      complete,
       active,
       isDescendentActive,
-      visited,
       findSubStepPosition,
       activeStepId,
     ]);
 
-    const fillHeightSpring = useSpring({
-      height: progressHeight,
-      immediate: !animate || (disableAnimateOnMount && !hasMounted),
-      config: progressSpringConfig,
-    });
+    const containerHeight = useSharedValue(0);
+    const targetHeight = progress * progressHeight;
+    const animatedHeight = useSharedValue(targetHeight);
+
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        containerHeight.value = event.nativeEvent.layout.height;
+      },
+      [containerHeight],
+    );
+
+    useEffect(() => {
+      animatedHeight.value = withTiming(targetHeight, progressTimingConfig);
+    }, [targetHeight, progressTimingConfig, animatedHeight]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      height: animatedHeight.value * containerHeight.value,
+    }));
 
     if (depth > 0 || isLastStep) return null;
 
@@ -93,6 +100,7 @@ export const DefaultStepperProgressVertical: StepperProgressComponent = memo(
         background={background}
         flexGrow={1}
         minHeight={minHeight}
+        onLayout={handleLayout}
         position="relative"
         style={style}
         width={width}
@@ -110,8 +118,8 @@ export const DefaultStepperProgressVertical: StepperProgressComponent = memo(
                     ? visitedFill
                     : defaultFill
           }
-          height={to([progress, fillHeightSpring.height], (p, h) => `${p * h * 100}%`)}
           position="absolute"
+          style={animatedStyle}
           width="100%"
         />
       </Box>
diff --git a/packages/mobile/src/stepper/DefaultStepperStepHorizontal.tsx b/packages/mobile/src/stepper/DefaultStepperStepHorizontal.tsx
index 8e94ff1798..0609034e20 100644
--- a/packages/mobile/src/stepper/DefaultStepperStepHorizontal.tsx
+++ b/packages/mobile/src/stepper/DefaultStepperStepHorizontal.tsx
@@ -24,7 +24,7 @@ export const DefaultStepperStepHorizontal: StepperStepComponent = memo(
     styles,
     activeStepLabelElement,
     setActiveStepLabelElement,
-    progressSpringConfig,
+    progressTimingConfig,
     animate,
     disableAnimateOnMount,
     StepperStepComponent = DefaultStepperStepHorizontal,
@@ -75,7 +75,7 @@ export const DefaultStepperStepHorizontal: StepperStepComponent = memo(
               isDescendentActive={isDescendentActive}
               parentStep={parentStep}
               progress={progress}
-              progressSpringConfig={progressSpringConfig}
+              progressTimingConfig={progressTimingConfig}
               step={step}
               style={styles?.progress}
               visited={visited}
@@ -111,7 +111,7 @@ export const DefaultStepperStepHorizontal: StepperStepComponent = memo(
             style={styles?.substepContainer}
             visited={visited}
           >
-            {step.subSteps.map((subStep, index) => {
+            {step.subSteps.map((subStep) => {
               const RenderedStepComponent = subStep.Component ?? StepperStepComponent;
               const isDescendentActive = activeStepId
                 ? containsStep({
@@ -140,7 +140,7 @@ export const DefaultStepperStepHorizontal: StepperStepComponent = memo(
                     isDescendentActive={isDescendentActive}
                     parentStep={step}
                     progress={progress}
-                    progressSpringConfig={progressSpringConfig}
+                    progressTimingConfig={progressTimingConfig}
                     setActiveStepLabelElement={setActiveStepLabelElement}
                     step={subStep}
                     styles={styles}
diff --git a/packages/mobile/src/stepper/DefaultStepperStepVertical.tsx b/packages/mobile/src/stepper/DefaultStepperStepVertical.tsx
index ae544fc189..77aad211e6 100644
--- a/packages/mobile/src/stepper/DefaultStepperStepVertical.tsx
+++ b/packages/mobile/src/stepper/DefaultStepperStepVertical.tsx
@@ -27,7 +27,7 @@ export const DefaultStepperStepVertical: StepperStepComponent = memo(
     styles,
     activeStepLabelElement,
     setActiveStepLabelElement,
-    progressSpringConfig,
+    progressTimingConfig,
     animate,
     disableAnimateOnMount,
     StepperStepComponent = DefaultStepperStepVertical,
@@ -80,7 +80,7 @@ export const DefaultStepperStepVertical: StepperStepComponent = memo(
                 isDescendentActive={isDescendentActive}
                 parentStep={parentStep}
                 progress={progress}
-                progressSpringConfig={progressSpringConfig}
+                progressTimingConfig={progressTimingConfig}
                 step={step}
                 style={styles?.progress}
                 visited={visited}
@@ -146,7 +146,7 @@ export const DefaultStepperStepVertical: StepperStepComponent = memo(
                         isDescendentActive={isDescendentActive}
                         parentStep={step}
                         progress={progress}
-                        progressSpringConfig={progressSpringConfig}
+                        progressTimingConfig={progressTimingConfig}
                         setActiveStepLabelElement={setActiveStepLabelElement}
                         step={subStep}
                         styles={styles}
diff --git a/packages/mobile/src/stepper/Stepper.tsx b/packages/mobile/src/stepper/Stepper.tsx
index 4859003131..9eed77e131 100644
--- a/packages/mobile/src/stepper/Stepper.tsx
+++ b/packages/mobile/src/stepper/Stepper.tsx
@@ -1,20 +1,17 @@
-import React, { forwardRef, memo, useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { StyleProp, View, ViewStyle } from 'react-native';
+import type { WithTimingConfig } from 'react-native-reanimated';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
-import { useHasMounted } from '@coinbase/cds-common/hooks/useHasMounted';
-import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { durations } from '@coinbase/cds-common/motion/tokens';
 import { containsStep, flattenSteps, isStepVisited } from '@coinbase/cds-common/stepper/utils';
 import type { IconName } from '@coinbase/cds-common/types';
-import {
-  type SpringConfig,
-  type SpringValue as SpringValueType,
-  useSprings,
-} from '@react-spring/native';
+import type { SpringConfig } from '@react-spring/core';
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import type { IconProps } from '../icons/Icon';
 import { Box, type BoxBaseProps, type BoxProps } from '../layout/Box';
 import { VStack } from '../layout/VStack';
+import { mobileCurves } from '../motion/convertMotionConfig';
 
 import { DefaultStepperHeaderHorizontal } from './DefaultStepperHeaderHorizontal';
 import { DefaultStepperIconVertical } from './DefaultStepperIconVertical';
@@ -74,13 +71,13 @@ export type StepperStepProps<Metadata extends Record<string, unknown> = Record<s
   StepperSubcomponentProps<Metadata> &
     BoxProps & {
       /**
-       * An animated SpringValue between 0 and 1.
-       * You can use this to animate your own custom Progress subcomponent.
+       * A value between 0 and 1 representing the step's progress.
+       * Progress bar subcomponents animate to this value internally.
        */
-      progress: SpringValueType<number>;
+      progress: number;
       activeStepLabelElement: View | null;
       setActiveStepLabelElement: (element: View) => void;
-      progressSpringConfig?: SpringConfig;
+      progressTimingConfig?: WithTimingConfig;
       animate?: boolean;
       disableAnimateOnMount?: boolean;
       completedStepAccessibilityLabel?: string;
@@ -111,6 +108,7 @@ export type StepperHeaderProps<Metadata extends Record<string, unknown> = Record
     activeStep: StepperValue<Metadata> | null;
     flatStepIds: string[];
     complete?: boolean;
+    disableAnimateOnMount?: boolean;
     style?: StyleProp<ViewStyle>;
   };
 
@@ -130,9 +128,9 @@ export type StepperProgressProps<
   Metadata extends Record<string, unknown> = Record<string, unknown>,
 > = StepperSubcomponentProps<Metadata> &
   BoxProps & {
-    progress: SpringValueType<number>;
+    progress: number;
     activeStepLabelElement: View | null;
-    progressSpringConfig?: SpringConfig;
+    progressTimingConfig?: WithTimingConfig;
     animate?: boolean;
     disableAnimateOnMount?: boolean;
     defaultFill?: ThemeVars.Color;
@@ -216,9 +214,14 @@ export type StepperBaseProps<Metadata extends Record<string, unknown> = Record<s
     StepperIconComponent?: StepperIconComponent<Metadata> | null;
     /** An optional component to render in place of the default Header subcomponent. Set to null to render nothing in this slot. */
     StepperHeaderComponent?: StepperHeaderComponent<Metadata> | null;
-    /** The spring config to use for the progress spring. */
+    /** The timing config to use for the progress animation. */
+    progressTimingConfig?: WithTimingConfig;
+    /**
+     * @deprecated Stepper no longer uses react-spring for progress; this value is ignored but retained for migration only. Use {@link progressTimingConfig} instead. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
+     */
     progressSpringConfig?: SpringConfig;
-    /** Whether to animate the progress spring.
+    /** Whether to animate the progress bar.
      * @default true
      */
     animate?: boolean;
@@ -249,8 +252,22 @@ export type StepperProps<Metadata extends Record<string, unknown> = Record<strin
     };
 
 export const horizontalStepGap = 0.5;
+const cascadeStaggerMs = durations.slow2;
 
-export const defaultProgressSpringConfig = { friction: 0, tension: 100, clamp: true };
+export const defaultProgressTimingConfig: WithTimingConfig = {
+  duration: durations.slow2,
+  easing: mobileCurves.global,
+};
+
+/**
+ * @deprecated Use {@link defaultProgressTimingConfig}. Retained for migration only; Stepper no longer uses react-spring for progress. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+export const defaultProgressSpringConfig: SpringConfig = {
+  friction: 0,
+  tension: 100,
+  clamp: true,
+};
 
 type StepperComponent = <Metadata extends Record<string, unknown> = Record<string, unknown>>(
   props: StepperProps<Metadata> & { ref?: React.Ref<View> },
@@ -292,12 +309,11 @@ const StepperBase = memo(
         StepperHeaderComponent = direction === 'vertical'
           ? null
           : (DefaultStepperHeaderHorizontal as StepperHeaderComponent<Metadata>),
-        progressSpringConfig = defaultProgressSpringConfig,
+        progressTimingConfig = defaultProgressTimingConfig,
         animate = true,
         disableAnimateOnMount,
         ...props
       } = mergedProps;
-      const hasMounted = useHasMounted();
       const flatStepIds = useMemo(() => flattenSteps(steps).map((step) => step.id), [steps]);
 
       // Derive activeStep from activeStepId
@@ -342,91 +358,57 @@ const StepperBase = memo(
           : -1;
       }, [activeStepId, steps]);
 
-      const previousComplete = usePreviousValue(complete) ?? false;
-      const previousActiveStepIndex = usePreviousValue(activeStepIndex) ?? -1;
+      // The effective cascade target: when complete, fill all steps up to the last one.
+      // Otherwise, fill up to activeStepIndex.
+      const cascadeTarget = complete ? steps.length - 1 : activeStepIndex;
 
-      const [progressSprings, progressSpringsApi] = useSprings(steps.length, (index) => ({
-        from: { progress: complete ? 1 : 0 },
-        config: progressSpringConfig,
-      }));
+      // Cascade animation state: advances one step at a time toward cascadeTarget.
+      // When disableAnimateOnMount is false (default), start unfilled (-1) so the
+      // cascade animates bars one-at-a-time up to the target on mount.
+      const [filledStepIndex, setFilledStepIndex] = useState(() =>
+        disableAnimateOnMount ? cascadeTarget : -1,
+      );
+      const targetStepIndexRef = useRef(cascadeTarget);
 
       useEffect(() => {
-        // update the previous values for next render
-        let stepsToAnimate: number[] = [];
-        let isAnimatingForward = false;
-
-        // Case when going from not-complete to complete
-        if (Boolean(complete) !== previousComplete) {
-          if (complete) {
-            // Going to complete: animate remaining steps to filled.
-            // Use previousActiveStepIndex to determine which steps are already filled before the completion state update,
-            const lastFilledIndex = Math.max(activeStepIndex, previousActiveStepIndex);
-            stepsToAnimate = Array.from(
-              { length: steps.length - lastFilledIndex - 1 },
-              (_, i) => lastFilledIndex + 1 + i,
-            );
-            isAnimatingForward = true;
-          } else {
-            // Going from complete: animate from end down to activeStepIndex+1
-            stepsToAnimate = Array.from(
-              { length: steps.length - activeStepIndex - 1 },
-              (_, i) => steps.length - 1 - i,
-            );
-            isAnimatingForward = false;
-          }
-        }
+        targetStepIndexRef.current = cascadeTarget;
 
-        // Case for normal step navigation (e.g. step 1 => step 2)
-        else if (activeStepIndex !== previousActiveStepIndex) {
-          if (activeStepIndex > previousActiveStepIndex) {
-            // Forward: animate from previousActiveStepIndex+1 to activeStepIndex
-            stepsToAnimate = Array.from(
-              { length: activeStepIndex - previousActiveStepIndex },
-              (_, i) => previousActiveStepIndex + 1 + i,
-            );
-            isAnimatingForward = true;
-          } else {
-            // Backward: animate from previousActiveStepIndex down to activeStepIndex+1
-            stepsToAnimate = Array.from(
-              { length: previousActiveStepIndex - activeStepIndex },
-              (_, i) => previousActiveStepIndex - i,
-            );
-            isAnimatingForward = false;
-          }
+        if (!animate) {
+          setFilledStepIndex(cascadeTarget);
+          return;
         }
 
-        const animateNextStep = () => {
-          if (stepsToAnimate.length === 0) return;
-          const stepIndex = stepsToAnimate.shift();
-          if (stepIndex === undefined) return;
-
-          progressSpringsApi.start((index) =>
-            index === stepIndex
-              ? {
-                  progress: isAnimatingForward ? 1 : 0,
-                  config: progressSpringConfig,
-                  onRest: animateNextStep,
-                  immediate: !animate || (disableAnimateOnMount && !hasMounted),
-                }
-              : {},
-          );
-        };
-
-        // start the animation loop for relevant springs (stepsToAnimate)
-        animateNextStep();
-      }, [
-        progressSpringsApi,
-        complete,
-        steps.length,
-        steps,
-        activeStepIndex,
-        previousActiveStepIndex,
-        previousComplete,
-        progressSpringConfig,
-        animate,
-        disableAnimateOnMount,
-        hasMounted,
-      ]);
+        // Advance one step immediately to kick off the cascade
+        setFilledStepIndex((prev) => {
+          if (prev === cascadeTarget) return prev;
+          return prev < cascadeTarget ? prev + 1 : prev - 1;
+        });
+
+        // Continue advancing on a fixed interval for fluid, overlapping springs
+        const interval = setInterval(() => {
+          setFilledStepIndex((prev) => {
+            const target = targetStepIndexRef.current;
+            if (prev === target) return prev;
+            return prev < target ? prev + 1 : prev - 1;
+          });
+        }, cascadeStaggerMs);
+
+        return () => clearInterval(interval);
+      }, [cascadeTarget, animate]);
+
+      // Compute progress for each step: 1 if filled, 0 if not
+      const getStepProgress = useCallback(
+        (index: number) => {
+          if (!animate) {
+            if (complete) return 1;
+            if (activeStepIndex < 0) return 0;
+            return index <= activeStepIndex ? 1 : 0;
+          }
+          if (filledStepIndex < 0) return 0;
+          return index <= filledStepIndex ? 1 : 0;
+        },
+        [complete, animate, activeStepIndex, filledStepIndex],
+      );
 
       return (
         <VStack
@@ -440,6 +422,7 @@ const StepperBase = memo(
             <StepperHeaderComponent
               activeStep={activeStep}
               complete={complete}
+              disableAnimateOnMount={disableAnimateOnMount}
               flatStepIds={flatStepIds}
               style={styles?.header}
             />
@@ -450,42 +433,43 @@ const StepperBase = memo(
                 ? containsStep({ step, targetStepId: activeStepId })
                 : false;
               const RenderedStepComponent = step.Component ?? StepperStepComponent;
+
+              if (!RenderedStepComponent) return null;
+
               return (
-                RenderedStepComponent && (
-                  <RenderedStepComponent
-                    key={step.id}
-                    StepperIconComponent={StepperIconComponent}
-                    StepperLabelComponent={StepperLabelComponent}
-                    StepperProgressComponent={StepperProgressComponent}
-                    StepperStepComponent={StepperStepComponent}
-                    StepperSubstepContainerComponent={StepperSubstepContainerComponent}
-                    active={!complete && activeStepId ? step.id === activeStepId : false}
-                    activeStepId={activeStepId}
-                    activeStepLabelElement={activeStepLabelElement}
-                    animate={animate}
-                    complete={complete}
-                    completedStepAccessibilityLabel={completedStepAccessibilityLabel}
-                    depth={0}
-                    disableAnimateOnMount={disableAnimateOnMount}
-                    flatStepIds={flatStepIds}
-                    isDescendentActive={isDescendentActive}
-                    parentStep={null}
-                    progress={progressSprings[index].progress}
-                    progressSpringConfig={progressSpringConfig}
-                    setActiveStepLabelElement={setActiveStepLabelElement}
-                    step={step}
-                    styles={stepStyles}
-                    visited={
-                      activeStepId
-                        ? isStepVisited({
-                            step,
-                            activeStepId,
-                            flatStepIds,
-                          })
-                        : false
-                    }
-                  />
-                )
+                <RenderedStepComponent
+                  key={step.id}
+                  StepperIconComponent={StepperIconComponent}
+                  StepperLabelComponent={StepperLabelComponent}
+                  StepperProgressComponent={StepperProgressComponent}
+                  StepperStepComponent={StepperStepComponent}
+                  StepperSubstepContainerComponent={StepperSubstepContainerComponent}
+                  active={!complete && activeStepId ? step.id === activeStepId : false}
+                  activeStepId={activeStepId}
+                  activeStepLabelElement={activeStepLabelElement}
+                  animate={animate}
+                  complete={complete}
+                  completedStepAccessibilityLabel={completedStepAccessibilityLabel}
+                  depth={0}
+                  disableAnimateOnMount={disableAnimateOnMount}
+                  flatStepIds={flatStepIds}
+                  isDescendentActive={isDescendentActive}
+                  parentStep={null}
+                  progress={getStepProgress(index)}
+                  progressTimingConfig={progressTimingConfig}
+                  setActiveStepLabelElement={setActiveStepLabelElement}
+                  step={step}
+                  styles={stepStyles}
+                  visited={
+                    activeStepId
+                      ? isStepVisited({
+                          step,
+                          activeStepId,
+                          flatStepIds,
+                        })
+                      : false
+                  }
+                />
               );
             })}
           </Box>
diff --git a/packages/mobile/src/stepper/__stories__/StepperHorizontal.stories.tsx b/packages/mobile/src/stepper/__stories__/StepperHorizontal.stories.tsx
index 835f437ac8..1637559b47 100644
--- a/packages/mobile/src/stepper/__stories__/StepperHorizontal.stories.tsx
+++ b/packages/mobile/src/stepper/__stories__/StepperHorizontal.stories.tsx
@@ -3,6 +3,7 @@ import { loremIpsum } from '@coinbase/cds-common/internal/data/loremIpsum';
 import { useStepper } from '@coinbase/cds-common/stepper/useStepper';
 
 import { Button } from '../../buttons';
+import { Switch } from '../../controls/Switch';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Icon } from '../../icons/Icon';
 import { HStack, VStack } from '../../layout';
@@ -216,6 +217,29 @@ const NoActiveStep = () => {
   return <StepperHorizontalExample steps={basicSteps} title="No Active Step" />;
 };
 
+// ------------------------------------------------------------
+// Disable Animate on Mount
+// ------------------------------------------------------------
+const DisableAnimateOnMount = () => {
+  const [disableAnimateOnMount, setDisableAnimateOnMount] = useState(false);
+
+  return (
+    <VStack gap={2}>
+      <Switch
+        checked={disableAnimateOnMount}
+        onChange={() => setDisableAnimateOnMount((prev) => !prev)}
+      >
+        disableAnimateOnMount
+      </Switch>
+      <StepperHorizontalExample
+        defaultActiveStepId={basicSteps[2].id}
+        disableAnimateOnMount={disableAnimateOnMount}
+        steps={basicSteps}
+      />
+    </VStack>
+  );
+};
+
 // ------------------------------------------------------------
 // Custom Progress Component
 // ------------------------------------------------------------
@@ -264,6 +288,10 @@ const StepperHorizontalScreen = () => {
         <Stepper activeStepId={basicSteps[1].id} direction="horizontal" steps={basicSteps} />
       </Example>
 
+      <Example title="Disable Animate on Mount">
+        <DisableAnimateOnMount />
+      </Example>
+
       <Example title="No Label Text">
         <StepperHorizontalExample defaultActiveStepId={noLabelSteps[0].id} steps={noLabelSteps} />
       </Example>
diff --git a/packages/mobile/src/stepper/__stories__/StepperVertical.stories.tsx b/packages/mobile/src/stepper/__stories__/StepperVertical.stories.tsx
index caf2bb5179..aa067c3d6f 100644
--- a/packages/mobile/src/stepper/__stories__/StepperVertical.stories.tsx
+++ b/packages/mobile/src/stepper/__stories__/StepperVertical.stories.tsx
@@ -8,6 +8,7 @@ import {
 import { Button } from '../../buttons';
 import { ListCell } from '../../cells';
 import { Collapsible } from '../../collapsible';
+import { Switch } from '../../controls/Switch';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Icon } from '../../icons/Icon';
 import { Box, HStack, VStack } from '../../layout';
@@ -247,6 +248,36 @@ const InitialActiveStep = () => {
   return <Stepper activeStepId={steps[1].id} direction="vertical" steps={steps} />;
 };
 
+// ------------------------------------------------------------
+// Disable Animate on Mount
+// ------------------------------------------------------------
+const disableAnimateOnMountSteps: StepperValue[] = [
+  { id: 'first-step', label: 'First step' },
+  { id: 'second-step', label: 'Second step' },
+  { id: 'third-step', label: 'Third step' },
+  { id: 'final-step', label: 'Final step' },
+];
+
+const DisableAnimateOnMount = () => {
+  const [disableAnimateOnMount, setDisableAnimateOnMount] = useState(false);
+
+  return (
+    <VStack gap={2}>
+      <Switch
+        checked={disableAnimateOnMount}
+        onChange={() => setDisableAnimateOnMount((prev) => !prev)}
+      >
+        disableAnimateOnMount
+      </Switch>
+      <StepperVerticalExample
+        defaultActiveStepId={disableAnimateOnMountSteps[2].id}
+        disableAnimateOnMount={disableAnimateOnMount}
+        steps={disableAnimateOnMountSteps}
+      />
+    </VStack>
+  );
+};
+
 // ------------------------------------------------------------
 // Nested Steps
 // ------------------------------------------------------------
@@ -733,6 +764,10 @@ const StepperVerticalScreen = () => {
         <InitialActiveStep />
       </Example>
 
+      <Example title="Disable Animate on Mount">
+        <DisableAnimateOnMount />
+      </Example>
+
       <Example title="Nested Steps">
         <NestedSteps />
       </Example>
diff --git a/packages/mobile/src/sticky-footer/StickyFooter.tsx b/packages/mobile/src/sticky-footer/StickyFooter.tsx
index 8e5c68d452..fdea0efa70 100644
--- a/packages/mobile/src/sticky-footer/StickyFooter.tsx
+++ b/packages/mobile/src/sticky-footer/StickyFooter.tsx
@@ -1,13 +1,12 @@
 import React, { forwardRef, memo } from 'react';
 import { View } from 'react-native';
 
-import { useSafeBottomPadding } from '../hooks/useSafeBottomPadding';
 import { Box, type BoxProps } from '../layout';
 
 export type StickyFooterProps = BoxProps & {
   /**
    * Whether to apply a box shadow to the StickyFooter element.
-   * @deprecated Use elevation instead. This will be removed in a future major release.
+   * @deprecated Use `elevation` instead. This will be removed in a future major release.
    * @deprecationExpectedRemoval v8
    */
   elevated?: boolean;
diff --git a/packages/mobile/src/styles/__tests__/getStyles.test.ts b/packages/mobile/src/styles/__tests__/getStyles.test.ts
new file mode 100644
index 0000000000..c95b624328
--- /dev/null
+++ b/packages/mobile/src/styles/__tests__/getStyles.test.ts
@@ -0,0 +1,93 @@
+import type { Theme } from '../../core/theme';
+import { defaultTheme } from '../../themes/defaultTheme';
+import type { StyleProps } from '../styleProps';
+import { getStyles } from '../styleProps';
+
+const theme: Theme = {
+  ...defaultTheme,
+  activeColorScheme: 'light',
+  spectrum: defaultTheme.lightSpectrum!,
+  color: defaultTheme.lightColor!,
+};
+
+describe('getStyles', () => {
+  it('skips undefined values', () => {
+    const styleProps: StyleProps = { padding: 1, width: undefined };
+    const result = getStyles(styleProps, theme);
+    expect(result).toEqual({ padding: 8 });
+    expect(result).not.toHaveProperty('width');
+  });
+
+  it('passes through non-themed props as-is', () => {
+    const styleProps: StyleProps = {
+      width: 100,
+      height: '50%',
+      alignSelf: 'flex-start',
+    };
+    const result = getStyles(styleProps, theme);
+    expect(result).toEqual({
+      width: 100,
+      height: '50%',
+      alignSelf: 'flex-start',
+    });
+  });
+
+  it('resolves themed space props (e.g. padding) from theme', () => {
+    const styleProps: StyleProps = { padding: 1, paddingTop: 2 };
+    const result = getStyles(styleProps, theme);
+    expect(result).toEqual({ padding: 8, paddingTop: 16 });
+  });
+
+  it('resolves margin from theme with negated lookup', () => {
+    const styleProps: StyleProps = { margin: -1, marginTop: -2 };
+    const result = getStyles(styleProps, theme);
+    expect(result).toEqual({ margin: -8, marginTop: -16 });
+  });
+
+  it('resolves themed color props from theme', () => {
+    const styleProps: StyleProps = { color: 'fg', background: 'bgPrimary' };
+    const result = getStyles(styleProps, theme);
+    expect(result).toEqual({
+      color: theme.color.fg,
+      backgroundColor: theme.color.bgPrimary,
+    });
+  });
+
+  it('expands paddingX to paddingStart and paddingEnd', () => {
+    const styleProps: StyleProps = { paddingX: 1 };
+    const result = getStyles(styleProps, theme);
+    expect(result).toEqual({ paddingStart: 8, paddingEnd: 8 });
+  });
+
+  it('expands marginY to marginTop and marginBottom', () => {
+    const styleProps: StyleProps = { marginY: -2 };
+    const result = getStyles(styleProps, theme);
+    expect(result).toEqual({ marginTop: -16, marginBottom: -16 });
+  });
+
+  it('skips themed props when value is null', () => {
+    const styleProps = {
+      padding: 1,
+      margin: -2,
+      color: 'fg',
+    } as StyleProps & {
+      padding?: number | null;
+      margin?: number | null;
+      color?: keyof Theme['color'] | null;
+    };
+    const withNull = {
+      ...styleProps,
+      padding: null,
+      margin: null,
+      color: null,
+    };
+    const result = getStyles(withNull as unknown as StyleProps, theme);
+    expect(result).toEqual({});
+  });
+
+  it('passes through null for non-themed dimension props', () => {
+    const styleProps = { width: null, height: 100 } as StyleProps;
+    const result = getStyles(styleProps, theme);
+    expect(result).toEqual({ width: null, height: 100 });
+  });
+});
diff --git a/packages/mobile/src/styles/styleProps.ts b/packages/mobile/src/styles/styleProps.ts
index 101ac5c5b9..b1f7a4be90 100644
--- a/packages/mobile/src/styles/styleProps.ts
+++ b/packages/mobile/src/styles/styleProps.ts
@@ -1,11 +1,16 @@
-import type { TextStyle, ViewStyle } from 'react-native';
-import type { DimensionValue, Position } from '@coinbase/cds-common';
+import type { DimensionValue, TextStyle, ViewStyle } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { ElevationLevels } from '@coinbase/cds-common/types/ElevationLevels';
 import type { TypeOrNumber } from '@coinbase/cds-common/types/TypeOrNumber';
 
 import type { Theme } from '../core/theme';
 
+/** Position-related style props using React Native types. Use this instead of common's PositionStyles for mobile. */
+export type PositionStyles = Pick<
+  ViewStyle,
+  'position' | 'top' | 'bottom' | 'left' | 'right' | 'zIndex'
+>;
+
 type NegativeSpace = TypeOrNumber<'0' | `-${Exclude<ThemeVars.Space, 0>}`>;
 
 // TO DO: If possible, refactor DimensionValue to ViewStyle['width'] etc
@@ -42,8 +47,8 @@ export type StyleProps = {
   alignSelf?: ViewStyle['alignSelf'];
   flexDirection?: ViewStyle['flexDirection'];
   flexWrap?: ViewStyle['flexWrap'];
-  position?: Position;
-  // position?: ViewStyle['position'];
+  // position?: Position;
+  position?: ViewStyle['position'];
   zIndex?: ViewStyle['zIndex'];
   padding?: ThemeVars.Space;
   paddingX?: ThemeVars.Space;
@@ -67,12 +72,6 @@ export type StyleProps = {
   minHeight?: DimensionValue;
   maxWidth?: DimensionValue;
   maxHeight?: DimensionValue;
-  // width?: ViewStyle['width'];
-  // height?: ViewStyle['height'];
-  // minWidth?: ViewStyle['minWidth'];
-  // minHeight?: ViewStyle['minHeight'];
-  // maxWidth?: ViewStyle['maxWidth'];
-  // maxHeight?: ViewStyle['maxHeight'];
   aspectRatio?: ViewStyle['aspectRatio'];
   top?: DimensionValue;
   bottom?: DimensionValue;
@@ -142,7 +141,7 @@ export const getStyles = (styleProps: StyleProps, theme: Theme) => {
 
   for (const styleProp in styleProps) {
     const value = styleProps[styleProp as keyof StyleProps];
-    if (typeof value === 'undefined') continue;
+    if (value === undefined) continue;
 
     // If there are no stylePropAliases for this styleProp...
     if (typeof stylePropAliases[styleProp as keyof typeof stylePropAliases] === 'undefined') {
@@ -151,10 +150,10 @@ export const getStyles = (styleProps: StyleProps, theme: Theme) => {
         style[styleProp as keyof typeof style] = value as any;
       }
       // If it is themed and it is margin* prop
-      else if (styleProp.startsWith('margin')) {
+      else if (styleProp.startsWith('margin') && value !== null) {
         style[styleProp as keyof typeof style] = -(
           theme[themedStyleProps[styleProp as keyof typeof themedStyleProps]] as any
-        )[-value as any] as any;
+        )[-(value as any)] as any;
       }
       // If it is themed...
       else {
@@ -169,10 +168,10 @@ export const getStyles = (styleProps: StyleProps, theme: Theme) => {
           style[propAlias as keyof typeof style] = value as any;
         }
         // If it is themed and it is margin* prop
-        else if (styleProp.startsWith('margin')) {
+        else if (styleProp.startsWith('margin') && value !== null) {
           style[propAlias as keyof typeof style] = -(
             theme[themedStyleProps[styleProp as keyof typeof themedStyleProps]] as any
-          )[-value as any] as any;
+          )[-(value as number)] as any;
         }
         // If it is themed...
         else {
diff --git a/packages/mobile/src/system/AndroidNavigationBar.tsx b/packages/mobile/src/system/AndroidNavigationBar.tsx
index e333931754..3fa076dfef 100644
--- a/packages/mobile/src/system/AndroidNavigationBar.tsx
+++ b/packages/mobile/src/system/AndroidNavigationBar.tsx
@@ -35,6 +35,23 @@ export const useAndroidNavigationBarUpdater = ({
   }, [bg, statusBarStyle]);
 };
 
+/**
+ * Updates the **Android system navigation bar** (bottom bar) colors to match the active CDS theme.
+ *
+ * This component is **side-effect only** (renders `null`). When mounted, it sets:
+ * - **navigation bar background color** to the theme background (`theme.color.bg`)
+ * - **navigation bar icon brightness** (light/dark) based on the computed status bar style
+ *
+ * ### When to use
+ * - Your app wants the Android navigation bar to visually match the CDS theme (light/dark)
+ * - You intentionally want an opaque navigation bar that matches your app background (non edge-to-edge look).
+ *
+ * ### When NOT to use
+ * - Your app already manages system bars via another library/app-level integration.
+ * - You intentionally want to keep the OS default navigation bar styling.
+ * - You are using Android edge-to-edge defaults (transparent system bars / scrims) and want the platform to
+ *   manage navigation bar transparency + contrast automatically.
+ */
 export const AndroidNavigationBar = memo((props: AndroidNavigationBarProps) => {
   const updateAndroidNavigationBar = useAndroidNavigationBarUpdater(props);
   const hasRun = useRef(false);
diff --git a/packages/mobile/src/system/PressableOpacity.tsx b/packages/mobile/src/system/PressableOpacity.tsx
index 8b77888c72..324bfb2a89 100644
--- a/packages/mobile/src/system/PressableOpacity.tsx
+++ b/packages/mobile/src/system/PressableOpacity.tsx
@@ -18,7 +18,7 @@ export type PressableOpacityProps = Omit<
  */
 export const PressableOpacity = ({ children, ...props }: PressableOpacityProps) => {
   return (
-    <Pressable {...props} background="transparent" borderColor="transparent">
+    <Pressable background="transparent" borderColor="transparent" {...props}>
       {children}
     </Pressable>
   );
diff --git a/packages/mobile/src/system/ThemeProvider.tsx b/packages/mobile/src/system/ThemeProvider.tsx
index 46c0757ebf..f739a97d6e 100644
--- a/packages/mobile/src/system/ThemeProvider.tsx
+++ b/packages/mobile/src/system/ThemeProvider.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, memo, useContext, useMemo } from 'react';
 import type { ColorScheme } from '@coinbase/cds-common/core/theme';
 
 import type { Theme, ThemeConfig } from '../core/theme';
@@ -7,9 +7,27 @@ export type ThemeContextValue = Theme;
 
 export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
 
-// export type ThemeProviderProps = SystemProviderProps &
-//   ThemeManagerProps &
-//   FramerMotionProviderProps;
+// Not used for any theme optimizations in the mobile ThemeProvider, but exported for feature-parity with cds-web
+/**
+ * Diff two themes and return a new partial theme with only the differences.
+ */
+export const diffThemes = (theme: Theme, parentTheme?: Theme) => {
+  if (!parentTheme) return theme;
+  const themeDiff = {
+    id: theme.id,
+    activeColorScheme: theme.activeColorScheme,
+  } as Record<keyof Theme, any>;
+  (Object.keys(theme) as (keyof Theme)[]).forEach((key) => {
+    if (key === 'id' || key === 'activeColorScheme') return;
+    themeDiff[key] = {};
+    Object.keys(theme[key] ?? {}).forEach((value) => {
+      if ((theme[key] as any)?.[value] !== (parentTheme[key] as any)?.[value]) {
+        themeDiff[key][value] = (theme[key] as any)[value];
+      }
+    });
+  });
+  return themeDiff as Partial<Theme>;
+};
 
 export type ThemeProviderProps = {
   theme: ThemeConfig;
@@ -17,7 +35,7 @@ export type ThemeProviderProps = {
   children?: React.ReactNode;
 };
 
-export const ThemeProvider = ({ theme, activeColorScheme, children }: ThemeProviderProps) => {
+export const ThemeProvider = memo(({ theme, activeColorScheme, children }: ThemeProviderProps) => {
   const themeApi = useMemo(() => {
     const activeSpectrumKey = activeColorScheme === 'dark' ? 'darkSpectrum' : 'lightSpectrum';
     const activeColorKey = activeColorScheme === 'dark' ? 'darkColor' : 'lightColor';
@@ -28,22 +46,22 @@ export const ThemeProvider = ({ theme, activeColorScheme, children }: ThemeProvi
 
     if (!theme[activeColorKey])
       throw Error(
-        `ThemeProvider activeColorScheme is ${activeColorScheme} but no ${activeColorScheme} colors are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme`,
+        `ThemeProvider activeColorScheme is ${activeColorScheme} but no ${activeColorScheme} colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming`,
       );
 
     if (!theme[activeSpectrumKey])
       throw Error(
-        `ThemeProvider activeColorScheme is ${activeColorScheme} but no ${activeSpectrumKey} values are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme`,
+        `ThemeProvider activeColorScheme is ${activeColorScheme} but no ${activeSpectrumKey} values are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming`,
       );
 
     if (theme[inverseSpectrumKey] && !theme[inverseColorKey])
       throw Error(
-        `ThemeProvider theme has ${inverseSpectrumKey} values defined but no ${inverseColorKey} colors are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme`,
+        `ThemeProvider theme has ${inverseSpectrumKey} values defined but no ${inverseColorKey} colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming`,
       );
 
     if (theme[inverseColorKey] && !theme[inverseSpectrumKey])
       throw Error(
-        `ThemeProvider theme has ${inverseColorKey} colors defined but no ${inverseSpectrumKey} values are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme`,
+        `ThemeProvider theme has ${inverseColorKey} colors defined but no ${inverseSpectrumKey} values are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming`,
       );
 
     return {
@@ -56,14 +74,14 @@ export const ThemeProvider = ({ theme, activeColorScheme, children }: ThemeProvi
   }, [theme, activeColorScheme]);
 
   return <ThemeContext.Provider value={themeApi}>{children}</ThemeContext.Provider>;
-};
+});
 
 export type InvertedThemeProviderProps = {
   children?: React.ReactNode;
 };
 
 /** Falls back to the currently active colorScheme if the inverse colors are not defined in the theme.  */
-export const InvertedThemeProvider = ({ children }: InvertedThemeProviderProps) => {
+export const InvertedThemeProvider = memo(({ children }: InvertedThemeProviderProps) => {
   const context = useContext(ThemeContext);
   if (!context) throw Error('InvertedThemeProvider must be used within a ThemeProvider');
   const inverseColorScheme = context.activeColorScheme === 'dark' ? 'light' : 'dark';
@@ -75,4 +93,4 @@ export const InvertedThemeProvider = ({ children }: InvertedThemeProviderProps)
       {children}
     </ThemeProvider>
   );
-};
+});
diff --git a/packages/mobile/src/system/__figma__/AndroidNavigationBar.figma.tsx b/packages/mobile/src/system/__figma__/AndroidNavigationBar.figma.tsx
deleted file mode 100644
index a7b0b7cc47..0000000000
--- a/packages/mobile/src/system/__figma__/AndroidNavigationBar.figma.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { figma } from '@figma/code-connect';
-
-import { AndroidNavigationBar } from '../AndroidNavigationBar';
-
-figma.connect(
-  AndroidNavigationBar,
-  'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10414%3A896',
-  {
-    imports: [
-      "import { AndroidNavigationBar } from '@coinbase/cds-mobile/system/AndroidNavigationBar'",
-    ],
-    props: {
-      showsearch27799: figma.boolean('show search'),
-      showhelpcenter176314: figma.boolean('show help center'),
-      showsecondarycta24034: figma.boolean('show secondary cta'),
-      shownotification24028: figma.boolean('show notification'),
-      type156900: figma.instance('type'),
-      showpagetitle80: figma.boolean('show page title'),
-      showtabs24024: figma.boolean('show tabs'),
-      showprimarycta24032: figma.boolean('show primary cta'),
-      showbackarrow24022: figma.boolean('show back arrow'),
-      device: figma.enum('device', {
-        desktop: 'desktop',
-        tablet: 'tablet',
-        'responsive mobile': 'responsive-mobile',
-      }),
-    },
-    example: () => <AndroidNavigationBar />,
-  },
-);
diff --git a/packages/mobile/src/system/__stories__/AndroidNavigationBar.stories.tsx b/packages/mobile/src/system/__stories__/AndroidNavigationBar.stories.tsx
new file mode 100644
index 0000000000..85e210f36b
--- /dev/null
+++ b/packages/mobile/src/system/__stories__/AndroidNavigationBar.stories.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { Button } from '../../buttons';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
+import { AndroidNavigationBar } from '../AndroidNavigationBar';
+
+const ThemeDemo = ({ colorScheme }: { colorScheme: 'light' | 'dark' }) => {
+  const theme = useTheme();
+
+  return (
+    <VStack background="bg" gap={2} padding={2}>
+      <AndroidNavigationBar />
+      <Text font="title3">Active Color Scheme: {theme.activeColorScheme}</Text>
+      <Text color="fgMuted" font="body">
+        The Android navigation bar should match the theme background color.
+      </Text>
+      <VStack gap={1}>
+        <Button variant="primary">Primary Button</Button>
+        <Button variant="secondary">Secondary Button</Button>
+      </VStack>
+    </VStack>
+  );
+};
+
+const AndroidNavigationBarScreen = () => {
+  return (
+    <ExampleScreen>
+      <Example title="About AndroidNavigationBar">
+        <VStack gap={2} padding={2}>
+          <Text font="body">
+            AndroidNavigationBar is a side-effect only component that renders null. When mounted, it
+            updates the Android system navigation bar (bottom bar) colors to match the active CDS
+            theme.
+          </Text>
+          <Text color="fgMuted" font="caption">
+            Note: Only works on Android API 26+ (Android 8.0+). On iOS or older Android versions,
+            the component has no effect.
+          </Text>
+        </VStack>
+      </Example>
+
+      <Example title="Light Theme">
+        <ThemeDemo colorScheme="light" />
+      </Example>
+    </ExampleScreen>
+  );
+};
+
+export default AndroidNavigationBarScreen;
diff --git a/packages/mobile/src/system/__stories__/Palette.stories.tsx b/packages/mobile/src/system/__stories__/Palette.stories.tsx
index a848dcbe20..a155305b7d 100644
--- a/packages/mobile/src/system/__stories__/Palette.stories.tsx
+++ b/packages/mobile/src/system/__stories__/Palette.stories.tsx
@@ -18,9 +18,9 @@ const Palette = ({ elevation }: { elevation?: ElevationLevels }) => {
           <Box
             key={name}
             alignItems="center"
-            dangerouslySetBackground={theme.color[name as keyof typeof theme.color]}
             height={100}
             justifyContent="center"
+            style={{ backgroundColor: theme.color[name as keyof typeof theme.color] }}
             width="50%"
           >
             <VStack background="bg">
diff --git a/packages/mobile/src/system/__stories__/Pressable.stories.tsx b/packages/mobile/src/system/__stories__/Pressable.stories.tsx
index 0d9e6b8fb4..9ab3cc2011 100644
--- a/packages/mobile/src/system/__stories__/Pressable.stories.tsx
+++ b/packages/mobile/src/system/__stories__/Pressable.stories.tsx
@@ -102,7 +102,7 @@ const PressableScreen = () => {
                 accessibilityRole="button"
                 background={color as ThemeVars.Color}
               >
-                <Text dangerouslySetColor={textColor} font="body" padding={1}>
+                <Text font="body" padding={1} style={{ color: textColor }}>
                   {color}
                 </Text>
               </Pressable>
@@ -123,7 +123,7 @@ const PressableScreen = () => {
                 accessibilityRole="button"
                 background={color as ThemeVars.Color}
               >
-                <Text dangerouslySetColor={textColor} font="body" padding={1}>
+                <Text font="body" padding={1} style={{ color: textColor }}>
                   {color}
                 </Text>
               </Pressable>
diff --git a/packages/mobile/src/system/__stories__/Spectrum.stories.tsx b/packages/mobile/src/system/__stories__/Spectrum.stories.tsx
index 4c058521ea..0a81478269 100644
--- a/packages/mobile/src/system/__stories__/Spectrum.stories.tsx
+++ b/packages/mobile/src/system/__stories__/Spectrum.stories.tsx
@@ -34,8 +34,8 @@ const SpectrumScreen = () => {
                 const background = `rgb(${theme.spectrum[paletteValue]})`;
                 const foreground = getAccessibleColor({ background });
                 return (
-                  <VStack key={paletteValue} dangerouslySetBackground={background}>
-                    <Text align="center" dangerouslySetColor={foreground} font="caption">
+                  <VStack key={paletteValue} style={{ backgroundColor: background }}>
+                    <Text align="center" font="caption" style={{ color: foreground }}>
                       {paletteValue}
                     </Text>
                   </VStack>
diff --git a/packages/mobile/src/system/__tests__/StatusBar.test.tsx b/packages/mobile/src/system/__tests__/StatusBar.test.tsx
index e37a34d835..2ea44071ac 100644
--- a/packages/mobile/src/system/__tests__/StatusBar.test.tsx
+++ b/packages/mobile/src/system/__tests__/StatusBar.test.tsx
@@ -1,20 +1,10 @@
-import { StatusBar as RNStatusBar } from 'react-native';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import { defaultTheme } from '../../themes/defaultTheme';
 import { DefaultThemeProvider } from '../../utils/testHelpers';
-import { useStatusBarStyle, useStatusBarUpdater } from '../StatusBar';
+import { useStatusBarStyle } from '../StatusBar';
 import { ThemeProvider } from '../ThemeProvider';
 
-jest.mock('react-native/Libraries/Components/StatusBar/StatusBar', () => ({
-  ...jest.requireActual<Record<string, unknown>>(
-    'react-native/Libraries/Components/StatusBar/StatusBar',
-  ),
-  setBarStyle: jest.fn(),
-  setBackgroundColor: jest.fn(),
-  setTranslucent: jest.fn(),
-}));
-
 const MockDarkMode: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <ThemeProvider activeColorScheme="dark" theme={defaultTheme}>
     {children}
@@ -58,37 +48,3 @@ describe('useStatusBarStyle', () => {
     expect(result.current).toBe('light-content');
   });
 });
-
-describe('useStatusBarUpdater', () => {
-  it('correctly updates React Native StatusBar bar style', () => {
-    const { result } = renderHook(() => useStatusBarUpdater(), {
-      wrapper: DefaultThemeProvider,
-    });
-    result.current();
-    expect(RNStatusBar.setBarStyle).toHaveBeenCalledWith('dark-content', true);
-  });
-
-  it('does not call setBackgroundColor or setTranslucent on iOS', () => {
-    const { result } = renderHook(() => useStatusBarUpdater(), {
-      wrapper: DefaultThemeProvider,
-    });
-    result.current();
-    expect(RNStatusBar.setBarStyle).toHaveBeenCalledWith('dark-content', true);
-    expect(RNStatusBar.setBackgroundColor).not.toHaveBeenCalled();
-    expect(RNStatusBar.setTranslucent).not.toHaveBeenCalled();
-  });
-
-  it('does call setBackgroundColor or setTranslucent on Android', () => {
-    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-      ...jest.requireActual<Record<string, unknown>>('react-native/Libraries/Utilities/Platform'),
-      OS: 'android',
-    }));
-    const { result } = renderHook(() => useStatusBarUpdater(), {
-      wrapper: DefaultThemeProvider,
-    });
-    result.current();
-    expect(RNStatusBar.setBarStyle).toHaveBeenCalledWith('dark-content', true);
-    expect(RNStatusBar.setBackgroundColor).toHaveBeenCalled();
-    expect(RNStatusBar.setTranslucent).toHaveBeenCalled();
-  });
-});
diff --git a/packages/mobile/src/system/__tests__/useAndroidNavigationBarUpdater.test.tsx b/packages/mobile/src/system/__tests__/useAndroidNavigationBarUpdater.test.tsx
deleted file mode 100644
index 9136f723ae..0000000000
--- a/packages/mobile/src/system/__tests__/useAndroidNavigationBarUpdater.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import changeNavigationBarColor from 'react-native-navigation-bar-color';
-import { renderHook } from '@testing-library/react-hooks';
-
-import { defaultTheme } from '../../themes/defaultTheme';
-import { useAndroidNavigationBarUpdater } from '../AndroidNavigationBar';
-import { ThemeProvider } from '../ThemeProvider';
-
-const LightModeProvider = ({ children }: { children: React.ReactNode }) => (
-  <ThemeProvider activeColorScheme="light" theme={defaultTheme}>
-    {children}
-  </ThemeProvider>
-);
-
-jest.useFakeTimers();
-jest.mock('react-native-navigation-bar-color');
-const mockPlatform = (OS: 'ios' | 'android', Version?: number) => {
-  jest.runAllTimers();
-  jest.resetModules();
-  jest.doMock('react-native/Libraries/Utilities/Platform', () => ({ OS, Version }));
-};
-
-describe('useAndroidNavigationBarUpdater', () => {
-  it('does not fire for iOS', () => {
-    mockPlatform('ios');
-    const { result } = renderHook(() => useAndroidNavigationBarUpdater(), {
-      wrapper: LightModeProvider,
-    });
-    result.current();
-    expect(changeNavigationBarColor).not.toHaveBeenCalled();
-  });
-
-  it('correctly fires for android version', () => {
-    mockPlatform('android', 26);
-
-    const { result } = renderHook(() => useAndroidNavigationBarUpdater(), {
-      wrapper: LightModeProvider,
-    });
-    result.current();
-    expect(changeNavigationBarColor).toHaveBeenCalled();
-  });
-});
diff --git a/packages/mobile/src/tabs/TabLabel.tsx b/packages/mobile/src/tabs/TabLabel.tsx
index 923b7fe2c4..3a4f51eb02 100644
--- a/packages/mobile/src/tabs/TabLabel.tsx
+++ b/packages/mobile/src/tabs/TabLabel.tsx
@@ -80,12 +80,12 @@ export const TabLabel = memo(
       <HStack alignItems="center">
         {shouldMeasureElement ? (
           <View>
-            <TextElement {...props} color={color} style={dynamicStyles} />
+            <TextElement color={color} style={dynamicStyles} {...props} />
             {/* This element is used to ensure the element width doesn't change when we change font-weight */}
-            <Text {...props} aria-hidden font="title3" style={styles.hiddenElement} />
+            <Text aria-hidden font="title3" style={styles.hiddenElement} {...props} />
           </View>
         ) : (
-          <TextElement {...props} color={color} style={dynamicStyles} />
+          <TextElement color={color} style={dynamicStyles} {...props} />
         )}
         <Animated.View style={dotStyles.container}>
           <Animated.View style={dotStyles.inner}>
diff --git a/packages/mobile/src/tabs/Tabs.tsx b/packages/mobile/src/tabs/Tabs.tsx
index b1e5e56731..b5453581cc 100644
--- a/packages/mobile/src/tabs/Tabs.tsx
+++ b/packages/mobile/src/tabs/Tabs.tsx
@@ -35,7 +35,9 @@ type TabContainerProps = {
 
 const TabContainer = ({ id, registerRef, ...props }: TabContainerProps) => {
   const refCallback = useCallback(
-    (ref: View | null) => ref && registerRef(id, ref),
+    (ref: View | null) => {
+      if (ref) registerRef(id, ref);
+    },
     [id, registerRef],
   );
   return <View ref={refCallback} {...props} />;
@@ -249,6 +251,7 @@ export const TabsActiveIndicator = ({
 
   if (previousActiveTabRect.current !== activeTabRect) {
     previousActiveTabRect.current = activeTabRect;
+    // TODO: writing to shared value during render causes a reanimated warning which we have to suppress in jest setup
     animatedTabRect.value = isFirstRenderWithWidth
       ? newActiveTabRect
       : withSpring(newActiveTabRect, tabsSpringConfig);
diff --git a/packages/mobile/src/tabs/__stories__/SegmentedTabs.stories.tsx b/packages/mobile/src/tabs/__stories__/SegmentedTabs.stories.tsx
index 2475ded20a..a4e815c841 100644
--- a/packages/mobile/src/tabs/__stories__/SegmentedTabs.stories.tsx
+++ b/packages/mobile/src/tabs/__stories__/SegmentedTabs.stories.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import { Pressable, ScrollView } from 'react-native';
 import {
   interpolateColor,
@@ -240,7 +240,6 @@ const SegmentedTabsScreen = () => (
       padding={3}
       tabs={basicSegments}
       title="With Padding"
-      width="fit-content"
     />
     <SegmentedTabsExample
       borderRadius={300}
@@ -290,7 +289,6 @@ const IconLabelsExample = () => {
       }}
       tabs={iconSegments}
       title="Icon Labels"
-      width="fit-content"
     />
   );
 };
diff --git a/packages/mobile/src/tabs/__tests__/SegmentedTab.test.tsx b/packages/mobile/src/tabs/__tests__/SegmentedTab.test.tsx
index 1a1505f5b3..2813f22f11 100644
--- a/packages/mobile/src/tabs/__tests__/SegmentedTab.test.tsx
+++ b/packages/mobile/src/tabs/__tests__/SegmentedTab.test.tsx
@@ -61,11 +61,6 @@ describe('SegmentedTab', () => {
     expect(screen.getByText('Buy')).toBeTruthy();
     expect(screen.getByText('Buy')).toHaveAnimatedStyle({
       color: `rgb(${defaultTheme.lightSpectrum.gray100})`,
-      fontFamily: 'Inter_600SemiBold',
-      fontSize: 16,
-      fontWeight: '600',
-      lineHeight: 24,
-      textAlign: 'left',
     });
   });
 
@@ -80,11 +75,6 @@ describe('SegmentedTab', () => {
     jest.advanceTimersByTime(300);
     expect(screen.getByTestId(`${TEST_ID}-label`)).toHaveAnimatedStyle({
       color: `rgb(${defaultTheme.lightSpectrum.gray0})`,
-      fontFamily: 'Inter_600SemiBold',
-      fontSize: 16,
-      fontWeight: '600',
-      lineHeight: 24,
-      textAlign: 'left',
     });
   });
 
diff --git a/packages/mobile/src/tabs/__tests__/SegmentedTabs.test.tsx b/packages/mobile/src/tabs/__tests__/SegmentedTabs.test.tsx
index 5b461814c5..95557c4658 100644
--- a/packages/mobile/src/tabs/__tests__/SegmentedTabs.test.tsx
+++ b/packages/mobile/src/tabs/__tests__/SegmentedTabs.test.tsx
@@ -42,6 +42,9 @@ const exampleProps: SegmentedTabsProps = {
   tabs,
   activeTab: tabs[0],
   onChange: jest.fn(),
+  // Reanimated's Jest matcher can throw when a style array contains `undefined`.
+  // Providing an explicit indicator style keeps the test environment stable.
+  styles: { activeIndicator: {} },
 };
 
 const mockApi = {
@@ -62,6 +65,7 @@ describe('SegmentedTabs', () => {
     jest.runOnlyPendingTimers();
     jest.useRealTimers();
   });
+
   it('passes a11y', () => {
     render(
       <DefaultThemeProvider>
@@ -91,7 +95,6 @@ describe('SegmentedTabs', () => {
     jest.advanceTimersByTime(300);
     expect(screen.getByTestId(`${TEST_ID}-active-indicator`)).toHaveAnimatedStyle({
       width: 68,
-      height: 40,
       transform: [{ translateX: 0 }, { translateY: 0 }],
     });
   });
@@ -131,7 +134,6 @@ describe('SegmentedTabs', () => {
 
     expect(screen.getByTestId(`${TEST_ID}-active-indicator`)).toHaveAnimatedStyle({
       width: 68,
-      height: 40,
       transform: [{ translateX: 68 }, { translateY: 0 }],
     });
   });
@@ -210,7 +212,6 @@ describe('SegmentedTabs', () => {
 
     expect(screen.getByTestId(`${TEST_ID}-active-indicator`)).toHaveAnimatedStyle({
       width: 68,
-      height: 40,
       transform: [{ translateX: 20 }, { translateY: 0 }],
     });
   });
@@ -244,7 +245,6 @@ describe('SegmentedTabs', () => {
 
     expect(screen.getByTestId(`${TEST_ID}-active-indicator`)).toHaveAnimatedStyle({
       width: 68,
-      height: 40,
       transform: [{ translateX: 0 }, { translateY: 8 }],
     });
   });
@@ -278,7 +278,6 @@ describe('SegmentedTabs', () => {
 
     expect(screen.getByTestId(`${TEST_ID}-active-indicator`)).toHaveAnimatedStyle({
       width: 68,
-      height: 40,
       transform: [{ translateX: 20 }, { translateY: 8 }],
     });
   });
diff --git a/packages/mobile/src/tabs/__tests__/TabIndicator.test.tsx b/packages/mobile/src/tabs/__tests__/TabIndicator.test.tsx
index feba9fdfee..8c07becfc6 100644
--- a/packages/mobile/src/tabs/__tests__/TabIndicator.test.tsx
+++ b/packages/mobile/src/tabs/__tests__/TabIndicator.test.tsx
@@ -57,7 +57,7 @@ describe('TabIndicator', () => {
 
   it('renders with ref', () => {
     const TEST_ID = 'tabIndicator';
-    const ref = { current: undefined } as unknown as React.RefObject<View>;
+    const ref = { current: undefined } as unknown as React.RefObject<View | null>;
     render(
       <DefaultThemeProvider>
         <TabIndicator ref={ref} testID={TEST_ID} width={100} x={0} />
diff --git a/packages/mobile/src/tabs/hooks/__tests__/useDotAnimation.test.ts b/packages/mobile/src/tabs/hooks/__tests__/useDotAnimation.test.ts
index d19f5831ce..8dca5051d5 100644
--- a/packages/mobile/src/tabs/hooks/__tests__/useDotAnimation.test.ts
+++ b/packages/mobile/src/tabs/hooks/__tests__/useDotAnimation.test.ts
@@ -1,6 +1,6 @@
 import { act } from 'react';
 import { Animated } from 'react-native';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import { useDotAnimation } from '../useDotAnimation';
 
diff --git a/packages/mobile/src/tabs/hooks/useDotAnimation.ts b/packages/mobile/src/tabs/hooks/useDotAnimation.ts
index 4036efaf20..7210e9cf59 100644
--- a/packages/mobile/src/tabs/hooks/useDotAnimation.ts
+++ b/packages/mobile/src/tabs/hooks/useDotAnimation.ts
@@ -6,10 +6,28 @@ import {
   dotHidden,
   dotVisible,
 } from '@coinbase/cds-common/animation/dot';
-import { getDotSize } from '@coinbase/cds-common/tokens/dot';
 
 import { convertMotionConfig } from '../../animation/convertMotionConfig';
 
+/**
+ * Fixed widths to use to achieve an animated in/out effect on the Dot component
+ */
+const dotSizeTokens = { s: 28, m: 36, l: 48 } as const;
+/**
+ * Returns the appropriate dot container width based on the notification count.
+ * Width increases to accommodate more digits (1-digit, 2-digit, 3+ digits).
+ *
+ * @param count - The notification count to determine width for
+ * @returns The pixel width for the dot container
+ */
+const getDotSize = (count?: number) => {
+  if (!count || count < 10) return dotSizeTokens.s;
+  if (count >= 10 && count < 100) return dotSizeTokens.m;
+  if (count >= 100) return dotSizeTokens.l;
+
+  return dotSizeTokens.s;
+};
+
 // opacity animation
 const opacityInConfig = convertMotionConfig({
   ...animateDotOpacityConfig,
@@ -34,6 +52,36 @@ const scaleOutConfig = convertMotionConfig({
   fromValue: getDotSize(),
 });
 
+/**
+ * Hook that provides animated values and animation functions for dot badge transitions.
+ *
+ * Used to animate the appearance/disappearance of notification dot badges in tab labels.
+ * Runs parallel opacity (fade) and width (scale) animations for smooth enter/exit effects.
+ *
+ * @returns Object containing:
+ * - `opacity` - Animated.Value controlling the dot's opacity (0 = hidden, 1 = visible)
+ * - `width` - Animated.Value controlling the dot container's width (0 = collapsed, getDotSize(count) = expanded)
+ * - `animateIn` - Triggers the enter animation when a dot badge should appear
+ * - `animateOut` - Triggers the exit animation when a dot badge should disappear
+ *
+ * @example
+ * ```tsx
+ * const { opacity, width, animateIn, animateOut } = useDotAnimation();
+ *
+ * useEffect(() => {
+ *   if (count > 0) animateIn(count);
+ *   else animateOut(count);
+ * }, [count]);
+ *
+ * return (
+ *   <Animated.View style={{ width }}>
+ *     <Animated.View style={{ opacity }}>
+ *       <DotCount count={count} />
+ *     </Animated.View>
+ *   </Animated.View>
+ * );
+ * ```
+ */
 export const useDotAnimation = () => {
   const opacity = useRef(new Animated.Value(dotHidden)).current;
   const width = useRef(new Animated.Value(dotHidden)).current;
diff --git a/packages/mobile/src/tag/Tag.tsx b/packages/mobile/src/tag/Tag.tsx
index dd605f5936..bbff84a634 100644
--- a/packages/mobile/src/tag/Tag.tsx
+++ b/packages/mobile/src/tag/Tag.tsx
@@ -106,12 +106,12 @@ export const Tag = memo(
         alignItems={alignItems}
         background="bg"
         borderRadius={tagBorderRadiusMap[intent]}
-        dangerouslySetBackground={backgroundColor}
         flexDirection={flexDirection}
         gap={gap}
         justifyContent={justifyContent}
         paddingX={paddingX ?? tagHorizontalSpacing[intent]}
         paddingY={paddingY}
+        style={{ backgroundColor }}
         testID={testID}
         {...props}
       >
@@ -122,13 +122,13 @@ export const Tag = memo(
         ) : null}
 
         <Text
-          dangerouslySetColor={color}
           font={font ?? tagFontMap[intent]}
           fontFamily={fontFamily}
           fontSize={fontSize}
           fontWeight={fontWeight}
           lineHeight={lineHeight}
           numberOfLines={1}
+          style={{ color }}
           testID={`${testID}--text`}
         >
           {children}
diff --git a/packages/mobile/src/tour/DefaultTourMask.tsx b/packages/mobile/src/tour/DefaultTourMask.tsx
index 4e21452439..e343c07759 100644
--- a/packages/mobile/src/tour/DefaultTourMask.tsx
+++ b/packages/mobile/src/tour/DefaultTourMask.tsx
@@ -1,7 +1,9 @@
 import React, { memo, useEffect, useMemo, useState } from 'react';
+import { Platform } from 'react-native';
 import { Defs, Mask, Rect as NativeRect, Svg } from 'react-native-svg';
 import { defaultRect, type Rect } from '@coinbase/cds-common/types/Rect';
 
+import { useDimensions } from '../hooks/useDimensions';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout';
 
@@ -11,6 +13,7 @@ export const DefaultTourMask = memo(
   ({ activeTourStepTarget, padding, borderRadius = 12 }: TourMaskComponentProps) => {
     const [rect, setRect] = useState<Rect>(defaultRect);
     const theme = useTheme();
+    const { statusBarHeight } = useDimensions();
     const overlayFillRgba = theme.color.bgOverlay;
     const defaultPadding = theme.space[2];
 
@@ -27,10 +30,19 @@ export const DefaultTourMask = memo(
     );
 
     useEffect(() => {
-      activeTourStepTarget?.measureInWindow((x, y, width, height) =>
-        setRect({ x, y, width, height }),
-      );
-    }, [activeTourStepTarget]);
+      activeTourStepTarget?.measureInWindow((x, y, width, height) => {
+        // On Android, measureInWindow returns coordinates relative to the app's visible area.
+        // The Modal's coordinate system starts from the screen top (y=0 at very top of display).
+        // In edge-to-edge mode (statusBarHeight > 0), the app extends behind the status bar,
+        // and measureInWindow returns y relative to below the status bar. We need to ADD
+        // statusBarHeight to convert to screen coordinates for the Modal.
+        // In non-edge-to-edge mode (statusBarHeight === 0), measureInWindow returns y from
+        // screen top, but the Modal still starts from screen top, so no adjustment is needed.
+        const adjustedY = Platform.OS === 'ios' ? y : y + statusBarHeight;
+
+        setRect({ x, y: adjustedY, width, height });
+      });
+    }, [activeTourStepTarget, statusBarHeight]);
 
     return (
       <Box height="100%" width="100%">
diff --git a/packages/mobile/src/tour/Tour.tsx b/packages/mobile/src/tour/Tour.tsx
index 73bb5cd584..e0b8bd3809 100644
--- a/packages/mobile/src/tour/Tour.tsx
+++ b/packages/mobile/src/tour/Tour.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import { Modal, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
+import { Modal, Platform, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
 import type { SharedProps } from '@coinbase/cds-common';
 import {
   OverlayContentContext,
@@ -26,6 +26,7 @@ import {
 import { animated, config as springConfig, useSpring } from '@react-spring/native';
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
+import { useDimensions } from '../hooks/useDimensions';
 import { useTheme } from '../hooks/useTheme';
 
 import { DefaultTourMask } from './DefaultTourMask';
@@ -146,6 +147,7 @@ const TourComponent = <TourStepId extends string = string>(_props: TourProps<Tou
     testID,
   } = mergedProps;
   const theme = useTheme();
+  const { statusBarHeight } = useDimensions();
   const defaultTourStepOffset = theme.space[3];
   const defaultTourStepShiftPadding = theme.space[4];
 
@@ -200,7 +202,7 @@ const TourComponent = <TourStepId extends string = string>(_props: TourProps<Tou
     [animationApi, onChange],
   );
 
-  const api = useTour<TourStepId>({ steps, activeTourStep, onChange: handleChange });
+  const api = useTour<TourStepId, View>({ steps, activeTourStep, onChange: handleChange });
   const { activeTourStepTarget, setActiveTourStepTarget } = api;
 
   // Component Lifecycle & Side Effects
@@ -220,9 +222,18 @@ const TourComponent = <TourStepId extends string = string>(_props: TourProps<Tou
   const handleActiveTourStepTargetChange = useCallback(
     (target: View | null) => {
       target?.measureInWindow((x, y, width, height) => {
+        // On Android, measureInWindow returns coordinates relative to the app's visible area.
+        // The Modal's coordinate system starts from the screen top (y=0 at very top of display).
+        // In edge-to-edge mode (statusBarHeight > 0), the app extends behind the status bar,
+        // and measureInWindow returns y relative to below the status bar. We need to ADD
+        // statusBarHeight to convert to screen coordinates for the Modal.
+        // In non-edge-to-edge mode (statusBarHeight === 0), measureInWindow returns y from
+        // screen top, but the Modal still starts from screen top, so no adjustment is needed.
+        const adjustedY = Platform.OS === 'ios' ? y : y + statusBarHeight;
+
         refs.setReference({
           measure: (callback: (x: number, y: number, width: number, height: number) => void) => {
-            callback(x, y, width, height);
+            callback(x, adjustedY, width, height);
             void animationApi.start({ to: { opacity: 1 }, config: springConfig.slow });
           },
         });
@@ -230,7 +241,7 @@ const TourComponent = <TourStepId extends string = string>(_props: TourProps<Tou
 
       setActiveTourStepTarget(target);
     },
-    [animationApi, refs, setActiveTourStepTarget],
+    [animationApi, refs, setActiveTourStepTarget, statusBarHeight],
   );
 
   return (
@@ -255,7 +266,7 @@ const TourComponent = <TourStepId extends string = string>(_props: TourProps<Tou
             {!(activeTourStep.hideOverlay ?? hideOverlay) && !!activeTourStepTarget && (
               <animated.View style={maskStyles} testID="tour-mask">
                 <TourMaskComponent
-                  activeTourStepTarget={activeTourStepTarget as View}
+                  activeTourStepTarget={activeTourStepTarget}
                   borderRadius={activeTourStep.tourMaskBorderRadius ?? tourMaskBorderRadius}
                   padding={activeTourStep.tourMaskPadding ?? tourMaskPadding}
                 />
diff --git a/packages/mobile/src/tour/TourStep.tsx b/packages/mobile/src/tour/TourStep.tsx
index 7ddaece703..ad38975e9a 100644
--- a/packages/mobile/src/tour/TourStep.tsx
+++ b/packages/mobile/src/tour/TourStep.tsx
@@ -17,7 +17,11 @@ type TourStepProps = {
 export const TourStep = ({ id, children, ...props }: TourStepProps) => {
   const { activeTourStep, setActiveTourStepTarget } = useTourContext();
   const refCallback = useCallback(
-    (ref: View) => activeTourStep?.id === id && ref && setActiveTourStepTarget(ref),
+    (ref: View | null) => {
+      if (activeTourStep?.id === id && ref) {
+        setActiveTourStepTarget(ref);
+      }
+    },
     [activeTourStep, id, setActiveTourStepTarget],
   );
   return (
diff --git a/packages/mobile/src/tour/__stories__/Tour.stories.tsx b/packages/mobile/src/tour/__stories__/Tour.stories.tsx
index 2b413a93d7..df81e55583 100644
--- a/packages/mobile/src/tour/__stories__/Tour.stories.tsx
+++ b/packages/mobile/src/tour/__stories__/Tour.stories.tsx
@@ -21,9 +21,9 @@ const TourExamples = <TourStepId extends string>({
   step4Ref,
   ids,
 }: {
-  step2Ref: React.RefObject<View>;
-  step3Ref: React.RefObject<View>;
-  step4Ref: React.RefObject<View>;
+  step2Ref: React.RefObject<View | null>;
+  step3Ref: React.RefObject<View | null>;
+  step4Ref: React.RefObject<View | null>;
   ids: TourStepId[];
 }) => {
   const { startTour } = useTourContext();
@@ -85,8 +85,8 @@ const StepOne = () => {
 };
 
 const scrollIntoView = async (
-  scrollViewRef: React.RefObject<ScrollView>,
-  elementRef: React.RefObject<View>,
+  scrollViewRef: React.RefObject<ScrollView | null>,
+  elementRef: React.RefObject<View | null>,
 ) => {
   const scrollView = scrollViewRef.current;
   if (!scrollView) return;
diff --git a/packages/mobile/src/tour/__tests__/Tour.test.tsx b/packages/mobile/src/tour/__tests__/Tour.test.tsx
index e8976345c4..839a83a3ca 100644
--- a/packages/mobile/src/tour/__tests__/Tour.test.tsx
+++ b/packages/mobile/src/tour/__tests__/Tour.test.tsx
@@ -3,10 +3,16 @@ import { Button, Text, View } from 'react-native';
 import { useTourContext } from '@coinbase/cds-common/tour/TourContext';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 
+import { useDimensions } from '../../hooks/useDimensions';
 import { DefaultThemeProvider } from '../../utils/testHelpers';
 import { Tour, type TourProps } from '../Tour';
 import { TourStep } from '../TourStep';
 
+jest.mock('../../hooks/useDimensions');
+const mockUseDimensions = (mocks: ReturnType<typeof useDimensions>) => {
+  (useDimensions as jest.Mock).mockReturnValue(mocks);
+};
+
 const StepOne = () => {
   const { goNextTourStep } = useTourContext();
 
@@ -52,6 +58,14 @@ const exampleProps: TourProps = {
 };
 
 describe('Tour', () => {
+  beforeEach(() => {
+    mockUseDimensions({
+      screenHeight: 844,
+      screenWidth: 390,
+      statusBarHeight: 47,
+    });
+  });
+
   it('passes accessibility', async () => {
     render(
       <DefaultThemeProvider>
diff --git a/packages/mobile/src/typography/Text.tsx b/packages/mobile/src/typography/Text.tsx
index 0a58d183b2..59d92595a4 100644
--- a/packages/mobile/src/typography/Text.tsx
+++ b/packages/mobile/src/typography/Text.tsx
@@ -60,9 +60,15 @@ export type TextBaseProps = StyleProps & {
    * @default false
    */
   noWrap?: boolean;
-  /** @danger This is a migration escape hatch. It is not intended to be used normally. */
+  /**
+   * @deprecated Use `style` or the `color` style prop to set custom text colors. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
   dangerouslySetColor?: TextStyle['color'];
-  /** @danger This is a migration escape hatch. It is not intended to be used normally. */
+  /**
+   * @deprecated Use `style` or the `background` style prop to set custom text background colors. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
   dangerouslySetBackground?: TextStyle['backgroundColor'];
   /**
    * @deprecated Do not use this prop, it is a migration escape hatch. This will be removed in a future major release.
@@ -90,6 +96,8 @@ const styles = StyleSheet.create({
   },
 });
 
+const HEADER_FONTS = new Set(['display1', 'display2', 'display3', 'title1', 'title2']);
+
 export const Text = memo(
   forwardRef<NativeText, TextProps>(
     (
@@ -176,6 +184,7 @@ export const Text = memo(
         flexGrow,
         opacity,
         renderEmptyNode = true,
+        accessibilityRole = HEADER_FONTS.has(font) ? 'header' : undefined,
         ...props
       },
       ref,
@@ -372,9 +381,11 @@ export const Text = memo(
       return (
         <Component
           ref={ref}
+          accessibilityRole={accessibilityRole}
           ellipsizeMode={ellipsize}
           numberOfLines={computedNumberOfLines}
-          style={memoizedStyles}
+          // TODO https://linear.app/coinbase/issue/CDS-1518/audit-potentially-harmful-reactnative-animated-pattern
+          style={memoizedStyles as StyleProp<TextStyle>}
           testID={testID}
           {...props}
         >
diff --git a/packages/mobile/src/typography/TextBody.tsx b/packages/mobile/src/typography/TextBody.tsx
index 6a7b58da4e..88784b044f 100644
--- a/packages/mobile/src/typography/TextBody.tsx
+++ b/packages/mobile/src/typography/TextBody.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="body"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextBodyBaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="body"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextBodyProps = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="body"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextBody = memo(
   forwardRef<NativeText, TextBodyProps>(({ font = 'body', ...props }, ref) => (
     <Text ref={ref} font={font} {...props} />
diff --git a/packages/mobile/src/typography/TextCaption.tsx b/packages/mobile/src/typography/TextCaption.tsx
index f41aced2f3..45ecf00653 100644
--- a/packages/mobile/src/typography/TextCaption.tsx
+++ b/packages/mobile/src/typography/TextCaption.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="caption"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextCaptionBaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="caption"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextCaptionProps = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="caption"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextCaption = memo(
   forwardRef<NativeText, TextCaptionProps>(({ font = 'caption', ...props }, ref) => (
     <Text ref={ref} font={font} {...props} />
diff --git a/packages/mobile/src/typography/TextDisplay1.tsx b/packages/mobile/src/typography/TextDisplay1.tsx
index 6fdaedc810..2e7faca203 100644
--- a/packages/mobile/src/typography/TextDisplay1.tsx
+++ b/packages/mobile/src/typography/TextDisplay1.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="display1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextDisplay1BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="display1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextDisplay1Props = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="display1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextDisplay1 = memo(
   forwardRef<NativeText, TextDisplay1Props>(
     ({ accessibilityRole = 'header', font = 'display1', ...props }, ref) => (
diff --git a/packages/mobile/src/typography/TextDisplay2.tsx b/packages/mobile/src/typography/TextDisplay2.tsx
index d0f06dc745..fa3cc37e56 100644
--- a/packages/mobile/src/typography/TextDisplay2.tsx
+++ b/packages/mobile/src/typography/TextDisplay2.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="display2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextDisplay2BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="display2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextDisplay2Props = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="display2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextDisplay2 = memo(
   forwardRef<NativeText, TextDisplay2Props>(
     ({ accessibilityRole = 'header', font = 'display2', ...props }, ref) => (
diff --git a/packages/mobile/src/typography/TextDisplay3.tsx b/packages/mobile/src/typography/TextDisplay3.tsx
index 4ed5184b6e..76a353e08f 100644
--- a/packages/mobile/src/typography/TextDisplay3.tsx
+++ b/packages/mobile/src/typography/TextDisplay3.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="display3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextDisplay3BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="display3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextDisplay3Props = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="display3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextDisplay3 = memo(
   forwardRef<NativeText, TextDisplay3Props>(
     ({ accessibilityRole = 'header', font = 'display3', ...props }, ref) => (
diff --git a/packages/mobile/src/typography/TextHeadline.tsx b/packages/mobile/src/typography/TextHeadline.tsx
index cb7622b3e9..d6adaf333f 100644
--- a/packages/mobile/src/typography/TextHeadline.tsx
+++ b/packages/mobile/src/typography/TextHeadline.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="headline"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextHeadlineBaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="headline"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextHeadlineProps = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="headline"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextHeadline = memo(
   forwardRef<NativeText, TextHeadlineProps>(({ font = 'headline', ...props }, ref) => (
     <Text ref={ref} font={font} {...props} />
diff --git a/packages/mobile/src/typography/TextInherited.tsx b/packages/mobile/src/typography/TextInherited.tsx
index dc2994c3e4..4caf1a5457 100644
--- a/packages/mobile/src/typography/TextInherited.tsx
+++ b/packages/mobile/src/typography/TextInherited.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="inherit"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextInheritedBaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="inherit"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextInheritedProps = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="inherit"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextInherited = memo(
   forwardRef<NativeText, TextInheritedProps>(({ font = 'inherit', ...props }, ref) => (
     <Text ref={ref} font={font} {...props} />
diff --git a/packages/mobile/src/typography/TextLabel1.tsx b/packages/mobile/src/typography/TextLabel1.tsx
index 3679c7290e..1109425446 100644
--- a/packages/mobile/src/typography/TextLabel1.tsx
+++ b/packages/mobile/src/typography/TextLabel1.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="label1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextLabel1BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="label1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextLabel1Props = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="label1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextLabel1 = memo(
   forwardRef<NativeText, TextLabel1Props>(({ font = 'label1', ...props }, ref) => (
     <Text ref={ref} font={font} {...props} />
diff --git a/packages/mobile/src/typography/TextLabel2.tsx b/packages/mobile/src/typography/TextLabel2.tsx
index 007095fc11..8ef01ac486 100644
--- a/packages/mobile/src/typography/TextLabel2.tsx
+++ b/packages/mobile/src/typography/TextLabel2.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="label2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextLabel2BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="label2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextLabel2Props = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="label2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextLabel2 = memo(
   forwardRef<NativeText, TextLabel2Props>(({ font = 'label2', ...props }, ref) => (
     <Text ref={ref} font={font} {...props} />
diff --git a/packages/mobile/src/typography/TextLegal.tsx b/packages/mobile/src/typography/TextLegal.tsx
index 79bf152f41..8abd316515 100644
--- a/packages/mobile/src/typography/TextLegal.tsx
+++ b/packages/mobile/src/typography/TextLegal.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="legal"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextLegalBaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="legal"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextLegalProps = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="legal"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextLegal = memo(
   forwardRef<NativeText, TextLegalProps>(({ font = 'legal', ...props }, ref) => (
     <Text ref={ref} font={font} {...props} />
diff --git a/packages/mobile/src/typography/TextTitle1.tsx b/packages/mobile/src/typography/TextTitle1.tsx
index e674a9ae90..e47a91ead1 100644
--- a/packages/mobile/src/typography/TextTitle1.tsx
+++ b/packages/mobile/src/typography/TextTitle1.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="title1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle1BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="title1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle1Props = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="title1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextTitle1 = memo(
   forwardRef<NativeText, TextTitle1Props>(
     ({ accessibilityRole = 'header', font = 'title1', ...props }, ref) => (
diff --git a/packages/mobile/src/typography/TextTitle2.tsx b/packages/mobile/src/typography/TextTitle2.tsx
index eed58710e0..b57b96b7ce 100644
--- a/packages/mobile/src/typography/TextTitle2.tsx
+++ b/packages/mobile/src/typography/TextTitle2.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="title2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle2BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="title2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle2Props = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="title2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextTitle2 = memo(
   forwardRef<NativeText, TextTitle2Props>(
     ({ accessibilityRole = 'header', font = 'title2', ...props }, ref) => (
diff --git a/packages/mobile/src/typography/TextTitle3.tsx b/packages/mobile/src/typography/TextTitle3.tsx
index e179427bfc..9348ee8639 100644
--- a/packages/mobile/src/typography/TextTitle3.tsx
+++ b/packages/mobile/src/typography/TextTitle3.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="title3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle3BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="title3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle3Props = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="title3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextTitle3 = memo(
   forwardRef<NativeText, TextTitle3Props>(({ font = 'title3', ...props }, ref) => (
     <Text ref={ref} font={font} {...props} />
diff --git a/packages/mobile/src/typography/TextTitle4.tsx b/packages/mobile/src/typography/TextTitle4.tsx
index a7741f0d25..53dfbe80d9 100644
--- a/packages/mobile/src/typography/TextTitle4.tsx
+++ b/packages/mobile/src/typography/TextTitle4.tsx
@@ -3,10 +3,22 @@ import type { Text as NativeText } from 'react-native';
 
 import { Text, type TextBaseProps, type TextProps } from './Text';
 
+/**
+ * @deprecated Use `Text` with `font="title4"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle4BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="title4"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle4Props = TextProps;
 
+/**
+ * @deprecated Use `Text` with `font="title4"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextTitle4 = memo(
   forwardRef<NativeText, TextTitle4Props>(({ font = 'title4', ...props }, ref) => (
     <Text ref={ref} font={font} {...props} />
diff --git a/packages/mobile/src/typography/__stories__/Link.stories.tsx b/packages/mobile/src/typography/__stories__/Link.stories.tsx
index 7e70074e9e..35d7fcc099 100644
--- a/packages/mobile/src/typography/__stories__/Link.stories.tsx
+++ b/packages/mobile/src/typography/__stories__/Link.stories.tsx
@@ -5,7 +5,6 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { useWebBrowserOpener } from '../../hooks/useWebBrowserOpener';
 import { Link } from '../Link';
 import { Text } from '../Text';
-import { TextLegal } from '../TextLegal';
 
 const typographies = [
   'display1',
@@ -191,11 +190,12 @@ const LinkScreen = function LinkScreen() {
       <Example inline>
         <Text font="headline">Nested link in text</Text>
         {/** refer to this blog about this best practice: https://www.yeti.co/blog/accessibility-first-in-react-native */}
-        <TextLegal
+        <Text
           // suppressHighlighting is used to prevent the text from being highlighted when the link is pressed for non-screen reader users
           suppressHighlighting
           accessibilityLabel="Consider a case where you have a block of text with an inline link. Like so. You may want to write your code like this. Tap to go to coinbase.com."
           accessibilityRole="link"
+          font="legal"
           onPress={async () => {
             try {
               const screenReaderEnabled = await AccessibilityInfo.isScreenReaderEnabled();
@@ -211,7 +211,7 @@ const LinkScreen = function LinkScreen() {
           Consider a case where you have a block of text with an inline link.{' '}
           <Link to="https://www.coinbase.com/">Like so.</Link> You may want to write your code like
           this.
-        </TextLegal>
+        </Text>
       </Example>
       <Example inline>
         <Text font="headline">Multiple nested link in text</Text>
diff --git a/packages/mobile/src/typography/__stories__/Text.stories.tsx b/packages/mobile/src/typography/__stories__/Text.stories.tsx
index 82fa5831d2..c888a98ee0 100644
--- a/packages/mobile/src/typography/__stories__/Text.stories.tsx
+++ b/packages/mobile/src/typography/__stories__/Text.stories.tsx
@@ -1,52 +1,66 @@
 import React from 'react';
 
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
-import { TextBody } from '../TextBody';
-import { TextCaption } from '../TextCaption';
-import { TextDisplay1 } from '../TextDisplay1';
-import { TextDisplay2 } from '../TextDisplay2';
-import { TextDisplay3 } from '../TextDisplay3';
-import { TextHeadline } from '../TextHeadline';
-import { TextLabel1 } from '../TextLabel1';
-import { TextLabel2 } from '../TextLabel2';
-import { TextLegal } from '../TextLegal';
-import { TextTitle1 } from '../TextTitle1';
-import { TextTitle2 } from '../TextTitle2';
-import { TextTitle3 } from '../TextTitle3';
-import { TextTitle4 } from '../TextTitle4';
+import { Text } from '../Text';
 
 const TextScreen = () => {
   return (
     <ExampleScreen>
       <Example title="Default">
-        <TextDisplay1>Display1</TextDisplay1>
-        <TextDisplay2>Display2</TextDisplay2>
-        <TextDisplay3>Display3</TextDisplay3>
-        <TextTitle1>Title1</TextTitle1>
-        <TextTitle2>Title2</TextTitle2>
-        <TextTitle3>Title3</TextTitle3>
-        <TextTitle4>Title4</TextTitle4>
-        <TextLabel1>Label1</TextLabel1>
-        <TextLabel2>Label2</TextLabel2>
-        <TextHeadline>Headline</TextHeadline>
-        <TextBody>Body</TextBody>
-        <TextCaption>Caption</TextCaption>
-        <TextLegal>Legal</TextLegal>
+        <Text font="display1">Display1</Text>
+        <Text font="display2">Display2</Text>
+        <Text font="display3">Display3</Text>
+        <Text font="title1">Title1</Text>
+        <Text font="title2">Title2</Text>
+        <Text font="title3">Title3</Text>
+        <Text font="title4">Title4</Text>
+        <Text font="label1">Label1</Text>
+        <Text font="label2">Label2</Text>
+        <Text font="headline">Headline</Text>
+        <Text font="body">Body</Text>
+        <Text font="caption">Caption</Text>
+        <Text font="legal">Legal</Text>
       </Example>
       <Example title="Mono">
-        <TextDisplay1 mono>Display1</TextDisplay1>
-        <TextDisplay2 mono>Display2</TextDisplay2>
-        <TextDisplay3 mono>Display3</TextDisplay3>
-        <TextTitle1 mono>Title1</TextTitle1>
-        <TextTitle2 mono>Title2</TextTitle2>
-        <TextTitle3 mono>Title3</TextTitle3>
-        <TextTitle4 mono>Title4</TextTitle4>
-        <TextLabel1 mono>Label1</TextLabel1>
-        <TextLabel2 mono>Label2</TextLabel2>
-        <TextHeadline mono>Headline</TextHeadline>
-        <TextBody mono>Body</TextBody>
-        <TextCaption mono>Caption</TextCaption>
-        <TextLegal mono>Legal</TextLegal>
+        <Text mono font="display1">
+          Display1
+        </Text>
+        <Text mono font="display2">
+          Display2
+        </Text>
+        <Text mono font="display3">
+          Display3
+        </Text>
+        <Text mono font="title1">
+          Title1
+        </Text>
+        <Text mono font="title2">
+          Title2
+        </Text>
+        <Text mono font="title3">
+          Title3
+        </Text>
+        <Text mono font="title4">
+          Title4
+        </Text>
+        <Text mono font="label1">
+          Label1
+        </Text>
+        <Text mono font="label2">
+          Label2
+        </Text>
+        <Text mono font="headline">
+          Headline
+        </Text>
+        <Text mono font="body">
+          Body
+        </Text>
+        <Text mono font="caption">
+          Caption
+        </Text>
+        <Text mono font="legal">
+          Legal
+        </Text>
       </Example>
     </ExampleScreen>
   );
diff --git a/packages/mobile/src/typography/__tests__/Link.test.tsx b/packages/mobile/src/typography/__tests__/Link.test.tsx
index 28473b7d05..39b2f5affe 100644
--- a/packages/mobile/src/typography/__tests__/Link.test.tsx
+++ b/packages/mobile/src/typography/__tests__/Link.test.tsx
@@ -1,9 +1,12 @@
-import TestRenderer from 'react-test-renderer';
 import { fireEvent, render, screen } from '@testing-library/react-native';
 
+import { useWebBrowserOpener } from '../../hooks/useWebBrowserOpener';
 import { DefaultThemeProvider } from '../../utils/testHelpers';
 import { Link, type LinkProps } from '../Link';
 
+jest.mock('../../hooks/useWebBrowserOpener');
+const mockUseWebBrowserOpener = useWebBrowserOpener as jest.Mock;
+
 const TEST_ID = 'link';
 const URL = 'www.coinbase.com';
 const variants = [
@@ -24,6 +27,10 @@ const variants = [
 ] as LinkProps['font'][];
 
 describe('Link', () => {
+  beforeEach(() => {
+    mockUseWebBrowserOpener.mockReturnValue(jest.fn());
+  });
+
   it('passes a11y', () => {
     render(
       <DefaultThemeProvider>
@@ -89,40 +96,58 @@ describe('Link', () => {
     expect(spy).toHaveBeenCalled();
   });
 
-  it('to prop works as expected', async () => {
-    const linkRenderer = TestRenderer.create(
+  it('opens URL when pressed', () => {
+    const mockOpenUrl = jest.fn();
+    mockUseWebBrowserOpener.mockReturnValue(mockOpenUrl);
+
+    render(
       <DefaultThemeProvider>
         <Link testID={TEST_ID} to={URL}>
           Child
         </Link>
       </DefaultThemeProvider>,
     );
-    const linkInstance = await linkRenderer.root.findByProps({ testID: TEST_ID });
-    expect(linkInstance.props.to).toEqual(URL);
+
+    fireEvent.press(screen.getByTestId(TEST_ID));
+
+    expect(mockOpenUrl).toHaveBeenCalledWith(URL, expect.any(Object));
   });
 
-  it('can set forceOpenOutsideApp to true', async () => {
-    const linkRenderer = TestRenderer.create(
+  it('passes forceOpenOutsideApp option to browser opener', () => {
+    const mockOpenUrl = jest.fn();
+    mockUseWebBrowserOpener.mockReturnValue(mockOpenUrl);
+
+    render(
       <DefaultThemeProvider>
         <Link forceOpenOutsideApp testID={TEST_ID} to={URL}>
           Child
         </Link>
       </DefaultThemeProvider>,
     );
-    const link = await linkRenderer.root.findByProps({ testID: TEST_ID });
-    expect(link.props.forceOpenOutsideApp).toBe(true);
+
+    fireEvent.press(screen.getByTestId(TEST_ID));
+
+    expect(mockOpenUrl).toHaveBeenCalledWith(
+      URL,
+      expect.objectContaining({ forceOpenOutsideApp: true }),
+    );
   });
 
-  it('can set readerMode to true', async () => {
-    const linkRenderer = TestRenderer.create(
+  it('passes readerMode option to browser opener', () => {
+    const mockOpenUrl = jest.fn();
+    mockUseWebBrowserOpener.mockReturnValue(mockOpenUrl);
+
+    render(
       <DefaultThemeProvider>
         <Link readerMode testID={TEST_ID} to={URL}>
           Child
         </Link>
       </DefaultThemeProvider>,
     );
-    const link = await linkRenderer.root.findByProps({ testID: TEST_ID });
-    expect(link.props.readerMode).toBe(true);
+
+    fireEvent.press(screen.getByTestId(TEST_ID));
+
+    expect(mockOpenUrl).toHaveBeenCalledWith(URL, expect.objectContaining({ readerMode: true }));
   });
 
   it('removes text style when inherited', () => {
diff --git a/packages/mobile/src/utils/testHelpers.tsx b/packages/mobile/src/utils/testHelpers.tsx
index 26171df19f..3a9308400d 100644
--- a/packages/mobile/src/utils/testHelpers.tsx
+++ b/packages/mobile/src/utils/testHelpers.tsx
@@ -29,3 +29,33 @@ export const DefaultThemeProvider = ({
     </ThemeProvider>
   );
 };
+
+export function flattenStyle(style: unknown): Array<Record<string, unknown>> {
+  if (!style) return [];
+  if (Array.isArray(style)) return style.flatMap(flattenStyle);
+  if (typeof style === 'object') return [style as Record<string, unknown>];
+  return [];
+}
+
+export function treeHasStyleProp(
+  tree: unknown,
+  predicate: (style: Record<string, unknown>) => boolean,
+): boolean {
+  if (!tree) return false;
+
+  if (Array.isArray(tree)) {
+    return tree.some((node) => treeHasStyleProp(node, predicate));
+  }
+
+  if (typeof tree !== 'object') return false;
+
+  const node = tree as {
+    props?: { style?: unknown };
+    children?: unknown[];
+  };
+
+  const styles = flattenStyle(node.props?.style);
+  if (styles.some(predicate)) return true;
+
+  return (node.children ?? []).some((child) => treeHasStyleProp(child, predicate));
+}
diff --git a/packages/mobile/src/visualizations/ProgressBar.tsx b/packages/mobile/src/visualizations/ProgressBar.tsx
index 5787665d2d..307164eadf 100644
--- a/packages/mobile/src/visualizations/ProgressBar.tsx
+++ b/packages/mobile/src/visualizations/ProgressBar.tsx
@@ -157,7 +157,10 @@ export const ProgressBar = memo(
           flexShrink={0}
           height="100%"
           justifyContent="center"
-          style={progressStyle}
+          style={[
+            { backgroundColor: !disabled ? theme.color[color] : theme.color.bgLineHeavy },
+            progressStyle,
+          ]}
           testID="cds-progress-bar"
           width="100%"
         />
diff --git a/packages/mobile/src/visualizations/ProgressCircle.tsx b/packages/mobile/src/visualizations/ProgressCircle.tsx
index 0e35fced43..68e85a7689 100644
--- a/packages/mobile/src/visualizations/ProgressCircle.tsx
+++ b/packages/mobile/src/visualizations/ProgressCircle.tsx
@@ -4,7 +4,7 @@ import type { CircleProps } from 'react-native-svg';
 import { Circle, G, Svg } from 'react-native-svg';
 import type { SharedProps, ThemeVars } from '@coinbase/cds-common';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
-import { getCircumference, getRadius } from '@coinbase/cds-common/utils/circle';
+import { getCenter, getCircumference, getRadius } from '@coinbase/cds-common/utils/circle';
 import { getProgressCircleParams } from '@coinbase/cds-common/visualizations/getProgressCircleParams';
 import { getProgressSize } from '@coinbase/cds-common/visualizations/getProgressSize';
 import { isTest } from '@coinbase/cds-utils';
diff --git a/packages/mobile/src/visualizations/VisualizationContainer.tsx b/packages/mobile/src/visualizations/VisualizationContainer.tsx
index aeace396c0..11cc01ead4 100644
--- a/packages/mobile/src/visualizations/VisualizationContainer.tsx
+++ b/packages/mobile/src/visualizations/VisualizationContainer.tsx
@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import type { DimensionValue } from '@coinbase/cds-common/types';
+import type { DimensionValue } from 'react-native';
 import { useVisualizationDimensions } from '@coinbase/cds-common/visualizations/useVisualizationDimensions';
 
 import { useLayout } from '../hooks/useLayout';
@@ -27,7 +27,7 @@ export const VisualizationContainer: React.FC<VisualizationContainerProps> = mem
   ({ width, height, children }) => {
     const [{ width: layoutWidth, height: layoutHeight }, onLayout] = useLayout();
 
-    const dimensions = useVisualizationDimensions({
+    const dimensions = useVisualizationDimensions<DimensionValue>({
       userDefinedWidth: width,
       userDefinedHeight: height,
       calculatedWidth: layoutWidth,
diff --git a/packages/mobile-visualization/src/chart/gradient/__tests__/Gradient.test.tsx b/packages/mobile/src/visualizations/__tests__/Gradient.test.tsx
similarity index 91%
rename from packages/mobile-visualization/src/chart/gradient/__tests__/Gradient.test.tsx
rename to packages/mobile/src/visualizations/__tests__/Gradient.test.tsx
index 7a7c7100f2..367279fa80 100644
--- a/packages/mobile-visualization/src/chart/gradient/__tests__/Gradient.test.tsx
+++ b/packages/mobile/src/visualizations/__tests__/Gradient.test.tsx
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react-native';
 import { scaleLinear } from 'd3-scale';
 
-import { Gradient } from '../Gradient';
+import { Gradient } from '../chart/gradient/Gradient';
 
 jest.mock('@shopify/react-native-skia', () => ({
   LinearGradient: jest.fn(() => null),
@@ -12,12 +12,12 @@ jest.mock('@shopify/react-native-skia', () => ({
 
 jest.mock('react-native-reanimated', () => jest.requireActual('react-native-reanimated/mock'));
 
-jest.mock('../../ChartProvider', () => ({
+jest.mock('../chart/ChartProvider', () => ({
   useCartesianChartContext: jest.fn(),
 }));
 
 const { LinearGradient } = jest.requireMock('@shopify/react-native-skia');
-const { useCartesianChartContext } = jest.requireMock('../../ChartProvider');
+const { useCartesianChartContext } = jest.requireMock('../chart/ChartProvider');
 
 beforeEach(() => {
   LinearGradient.mockClear();
diff --git a/packages/mobile/src/visualizations/__tests__/ProgressBar.test.tsx b/packages/mobile/src/visualizations/__tests__/ProgressBar.test.tsx
index d8db07d081..32631e572a 100644
--- a/packages/mobile/src/visualizations/__tests__/ProgressBar.test.tsx
+++ b/packages/mobile/src/visualizations/__tests__/ProgressBar.test.tsx
@@ -1,5 +1,4 @@
 import React, { act } from 'react';
-import type { ReactTestInstance } from 'react-test-renderer';
 import type { UseCounterParams } from '@coinbase/cds-common/visualizations/useCounter';
 import { fireEvent, render, screen } from '@testing-library/react-native';
 
@@ -16,7 +15,7 @@ jest.mock('@coinbase/cds-common/visualizations/useCounter', () => ({
   useCounter: ({ endNum }: UseCounterParams) => endNum,
 }));
 
-function fireTextEvent(floatLabel: ReactTestInstance) {
+function fireTextEvent(floatLabel: Parameters<typeof fireEvent>[0]) {
   fireEvent(floatLabel, 'layout', {
     nativeEvent: {
       layout: {
@@ -31,7 +30,7 @@ function fireTextEvent(floatLabel: ReactTestInstance) {
   });
 }
 
-function fireTextContainerEvent(floatLabelContainer: ReactTestInstance) {
+function fireTextContainerEvent(floatLabelContainer: Parameters<typeof fireEvent>[0]) {
   fireEvent(floatLabelContainer, 'layout', {
     nativeEvent: {
       layout: {
@@ -54,7 +53,7 @@ describe('ProgressBar test', () => {
   it('places bar label in correct position if it flows off the left container and passes a11y', async () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBarWithFloatLabel label={0} progress={0} testID="mock-progress-bar">
             <ProgressBar progress={0} />
           </ProgressBarWithFloatLabel>
@@ -78,7 +77,7 @@ describe('ProgressBar test', () => {
   it('places bar label in correct position in middle', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBarWithFloatLabel label={50} progress={0.5} testID="mock-progress-bar">
             <ProgressBar progress={0.5} />
           </ProgressBarWithFloatLabel>
@@ -104,7 +103,7 @@ describe('ProgressBar test', () => {
   it('renders fixed labels in correct position', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBarWithFixedLabels
             endLabel={50}
             labelPlacement="above"
@@ -126,7 +125,7 @@ describe('ProgressBar test', () => {
   it('has correct bar width', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBar color="bgPositive" progress={0.77} testID="mock-progress-bar" />
         </Box>
       </DefaultThemeProvider>,
@@ -146,7 +145,7 @@ describe('ProgressBar test', () => {
   it('has correct bar height', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBar progress={0.77} testID="mock-progress-bar" weight="heavy" />
         </Box>
       </DefaultThemeProvider>,
@@ -164,7 +163,7 @@ describe('ProgressBar test', () => {
   it('handles disabled state for just ProgressBar correctly & passes a11y', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBar disabled progress={0.77} testID="mock-progress-bar" />
         </Box>
       </DefaultThemeProvider>,
@@ -185,7 +184,7 @@ describe('ProgressBar test', () => {
   it('handles disabled state correctly for fixed labels', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBarWithFixedLabels
             disabled
             endLabel={77}
@@ -212,7 +211,7 @@ describe('ProgressBar test', () => {
 
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBar
             onAnimationEnd={onAnimationEnd}
             onAnimationStart={onAnimationStart}
@@ -243,7 +242,7 @@ describe('ProgressBar test', () => {
 
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBar
             onAnimationEnd={onAnimationEnd}
             onAnimationStart={onAnimationStart}
@@ -271,7 +270,7 @@ describe('ProgressBar test', () => {
   it('applies custom styles correctly', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBar
             progress={0.5}
             style={{ padding: 10 }}
@@ -300,7 +299,7 @@ describe('ProgressBar test', () => {
   it('applies custom styles to ProgressBarWithFixedLabels', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBarWithFixedLabels
             endLabel={100}
             labelPlacement="above"
@@ -329,7 +328,7 @@ describe('ProgressBar test', () => {
   it('applies custom styles to ProgressBarWithFloatLabel', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBarWithFloatLabel
             label={50}
             labelPlacement="above"
@@ -359,7 +358,7 @@ describe('ProgressBar test', () => {
   it('rounds accessibilityValue.now to the nearest integer', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBar progress={0.777} testID="mock-progress-bar" />
         </Box>
       </DefaultThemeProvider>,
@@ -378,7 +377,7 @@ describe('ProgressBar test', () => {
   it('skips mount animation when disableAnimateOnMount is true for ProgressBar', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBar disableAnimateOnMount progress={0.5} testID="mock-progress-bar" />
         </Box>
       </DefaultThemeProvider>,
@@ -397,7 +396,7 @@ describe('ProgressBar test', () => {
   it('starts at animation start position when disableAnimateOnMount is not set', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBar progress={0.5} testID="mock-progress-bar" />
         </Box>
       </DefaultThemeProvider>,
@@ -416,7 +415,7 @@ describe('ProgressBar test', () => {
   it('skips mount animation when disableAnimateOnMount is true for ProgressBarWithFixedLabels', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBarWithFixedLabels
             disableAnimateOnMount
             endLabel={50}
@@ -438,7 +437,7 @@ describe('ProgressBar test', () => {
   it('skips mount animation when disableAnimateOnMount is true for ProgressBarWithFloatLabel', () => {
     render(
       <DefaultThemeProvider>
-        <Box width="200">
+        <Box width={200}>
           <ProgressBarWithFloatLabel
             disableAnimateOnMount
             label={50}
diff --git a/packages/mobile-visualization/src/chart/CartesianChart.tsx b/packages/mobile/src/visualizations/chart/CartesianChart.tsx
similarity index 94%
rename from packages/mobile-visualization/src/chart/CartesianChart.tsx
rename to packages/mobile/src/visualizations/chart/CartesianChart.tsx
index 767f356086..1db17476b5 100644
--- a/packages/mobile-visualization/src/chart/CartesianChart.tsx
+++ b/packages/mobile/src/visualizations/chart/CartesianChart.tsx
@@ -1,11 +1,11 @@
-import React, { forwardRef, memo, useCallback, useMemo } from 'react';
-import { type StyleProp, type View, type ViewStyle } from 'react-native';
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { type LayoutChangeEvent, type StyleProp, type View, type ViewStyle } from 'react-native';
 import type { Rect } from '@coinbase/cds-common/types';
-import { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
-import type { BoxBaseProps, BoxProps } from '@coinbase/cds-mobile/layout';
-import { Box } from '@coinbase/cds-mobile/layout';
 import { Canvas, Skia, type SkTypefaceFontProvider } from '@shopify/react-native-skia';
 
+import type { BoxBaseProps, BoxProps } from '../../layout';
+import { Box } from '../../layout';
+
 import {
   ScrubberAccessibilityView,
   type ScrubberAccessibilityViewProps,
@@ -68,6 +68,35 @@ const ChartCanvas = memo(
   },
 );
 
+function useChartLayout(): [Rect, (event: LayoutChangeEvent) => void] {
+  const [containerLayout, setContainerLayout] = useState<Rect>({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+  });
+  const containerLayoutRafRef = useRef<number | null>(null);
+
+  const onContainerLayout = useCallback((event: LayoutChangeEvent) => {
+    const layout = event.nativeEvent.layout;
+    if (containerLayoutRafRef.current !== null) cancelAnimationFrame(containerLayoutRafRef.current);
+    containerLayoutRafRef.current = requestAnimationFrame(() => {
+      containerLayoutRafRef.current = null;
+      setContainerLayout(layout);
+    });
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (containerLayoutRafRef.current !== null) {
+        cancelAnimationFrame(containerLayoutRafRef.current);
+      }
+    };
+  }, []);
+
+  return [containerLayout, onContainerLayout];
+}
+
 export type CartesianChartBaseProps = Omit<BoxBaseProps, 'fontFamily'> &
   Pick<ScrubberProviderProps, 'enableScrubbing' | 'onScrubberPositionChange'> & {
     /**
@@ -201,7 +230,7 @@ export const CartesianChart = memo(
       },
       ref,
     ) => {
-      const [containerLayout, onContainerLayout] = useLayout();
+      const [containerLayout, onContainerLayout] = useChartLayout();
 
       const chartWidth = containerLayout.width;
       const chartHeight = containerLayout.height;
diff --git a/packages/mobile-visualization/src/chart/ChartContextBridge.tsx b/packages/mobile/src/visualizations/chart/ChartContextBridge.tsx
similarity index 83%
rename from packages/mobile-visualization/src/chart/ChartContextBridge.tsx
rename to packages/mobile/src/visualizations/chart/ChartContextBridge.tsx
index 89db490bf8..b057269767 100644
--- a/packages/mobile-visualization/src/chart/ChartContextBridge.tsx
+++ b/packages/mobile/src/visualizations/chart/ChartContextBridge.tsx
@@ -4,9 +4,21 @@
  * https://github.com/pmndrs/its-fine/blob/598b81f02778c22ed21121c2b1a786bdefb14e23/src/index.tsx
  */
 
-import * as React from 'react';
+import {
+  Component,
+  type Context,
+  createContext,
+  type FC,
+  type PropsWithChildren,
+  type ReactNode,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+} from 'react';
 import type ReactReconciler from 'react-reconciler';
-import { ThemeContext } from '@coinbase/cds-mobile/system/ThemeProvider';
+
+import { ThemeContext } from '../../system/ThemeProvider';
 
 import { ScrubberContext } from './utils/context';
 import { CartesianChartContext } from './ChartProvider';
@@ -16,11 +28,7 @@ import { CartesianChartContext } from './ChartProvider';
  * Only these contexts will be made available inside the chart's Skia tree.
  * This improves performance by avoiding the overhead of rendering every bridged context.
  */
-const BRIDGED_CONTEXTS: React.Context<any>[] = [
-  ThemeContext,
-  CartesianChartContext,
-  ScrubberContext,
-];
+const BRIDGED_CONTEXTS: Context<any>[] = [ThemeContext, CartesianChartContext, ScrubberContext];
 
 /**
  * Represents a react-internal tree node.
@@ -55,7 +63,7 @@ function traverseTreeNode<T = any>(
 /**
  * Wraps context to hide React development warnings about using contexts between renderers.
  */
-function wrapContext<T>(context: React.Context<T>): React.Context<T> {
+function wrapContext<T>(context: Context<T>): Context<T> {
   try {
     return Object.defineProperties(context, {
       _currentRenderer: {
@@ -89,12 +97,12 @@ console.error = function (...args: any[]) {
   return error.apply(this, args);
 };
 
-const TreeNodeContext = wrapContext(React.createContext<TreeNode>(null!));
+const TreeNodeContext = wrapContext(createContext<TreeNode>(null!));
 
 /**
  * A react-internal tree node provider that binds React children to the React tree for chart context bridging.
  */
-export class ChartBridgeProvider extends React.Component<{ children?: React.ReactNode }> {
+export class ChartBridgeProvider extends Component<{ children?: ReactNode }> {
   private _reactInternals!: TreeNode;
 
   render() {
@@ -110,12 +118,12 @@ export class ChartBridgeProvider extends React.Component<{ children?: React.Reac
  * Returns the current react-internal tree node.
  */
 function useTreeNode(): TreeNode<null> | undefined {
-  const root = React.useContext(TreeNodeContext);
+  const root = useContext(TreeNodeContext);
   if (root === null)
     throw new Error('useTreeNode must be called within a <ChartBridgeProvider />!');
 
-  const id = React.useId();
-  const treeNode = React.useMemo(() => {
+  const id = useId();
+  const treeNode = useMemo(() => {
     for (const maybeNode of [root, root?.alternate]) {
       if (!maybeNode) continue;
       const node = traverseTreeNode<null>(maybeNode, false, (node) => {
@@ -132,8 +140,8 @@ function useTreeNode(): TreeNode<null> | undefined {
   return treeNode;
 }
 
-export type ContextMap = Map<React.Context<any>, any> & {
-  get<T>(context: React.Context<T>): T | undefined;
+export type ContextMap = Map<Context<any>, any> & {
+  get<T>(context: Context<T>): T | undefined;
 };
 
 /**
@@ -141,7 +149,7 @@ export type ContextMap = Map<React.Context<any>, any> & {
  */
 function useContextMap(): ContextMap {
   const treeNode = useTreeNode();
-  const [contextMap] = React.useState(() => new Map<React.Context<any>, any>());
+  const [contextMap] = useState(() => new Map<Context<any>, any>());
 
   // Collect live context
   contextMap.clear();
@@ -159,7 +167,7 @@ function useContextMap(): ContextMap {
         !contextMap.has(context)
       ) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        contextMap.set(context, React.useContext(wrapContext(context)));
+        contextMap.set(context, useContext(wrapContext(context)));
       }
     }
 
@@ -172,7 +180,7 @@ function useContextMap(): ContextMap {
 /**
  * Represents a chart context bridge provider component.
  */
-export type ChartContextBridge = React.FC<React.PropsWithChildren<object>>;
+export type ChartContextBridge = FC<PropsWithChildren<object>>;
 
 /**
  * Returns a ChartContextBridge of live context providers to pierce Context across renderers.
@@ -182,7 +190,7 @@ export function useChartContextBridge(): ChartContextBridge {
   const contextMap = useContextMap();
 
   // Flatten context and their memoized values into a `ChartContextBridge` provider
-  return React.useMemo(
+  return useMemo(
     () =>
       Array.from(contextMap.keys()).reduce(
         (Prev, context) => (props) => (
diff --git a/packages/mobile-visualization/src/chart/ChartProvider.tsx b/packages/mobile/src/visualizations/chart/ChartProvider.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/ChartProvider.tsx
rename to packages/mobile/src/visualizations/chart/ChartProvider.tsx
diff --git a/packages/mobile-visualization/src/chart/Path.tsx b/packages/mobile/src/visualizations/chart/Path.tsx
similarity index 96%
rename from packages/mobile-visualization/src/chart/Path.tsx
rename to packages/mobile/src/visualizations/chart/Path.tsx
index 37dacc4d13..cdb92c76f4 100644
--- a/packages/mobile-visualization/src/chart/Path.tsx
+++ b/packages/mobile/src/visualizations/chart/Path.tsx
@@ -1,5 +1,5 @@
-import { memo, useEffect, useMemo, useRef } from 'react';
-import { useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
+import { memo, useEffect, useMemo } from 'react';
+import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import type { Rect } from '@coinbase/cds-common/types';
 import {
   type AnimatedProp,
@@ -120,6 +120,7 @@ export type PathProps = PathBaseProps &
     transition?: Transition;
     /**
      * The SVG path data string.
+     * @note d only supports transitions for string values, not animated values.
      */
     d?: AnimatedProp<string | undefined>;
     /**
@@ -255,15 +256,9 @@ export const Path = memo<PathProps>((props) => {
   }, [animate, transitions?.enterOpacity]);
   const animateEnterOpacity = Boolean(enterOpacityTransition);
   const enterOpacity = useSharedValue(animateEnterOpacity ? 0 : 1);
-  const hasAnimatedEnterOpacity = useRef(false);
 
   useEffect(() => {
-    if (hasAnimatedEnterOpacity.current) {
-      return;
-    }
-
     if (!animateEnterOpacity) {
-      hasAnimatedEnterOpacity.current = true;
       enterOpacity.value = 1;
       return;
     }
@@ -274,11 +269,9 @@ export const Path = memo<PathProps>((props) => {
 
     if (enterOpacityTransition === undefined || enterOpacityTransition === null) {
       enterOpacity.value = 1;
-      hasAnimatedEnterOpacity.current = true;
       return;
     }
 
-    hasAnimatedEnterOpacity.current = true;
     enterOpacity.value = buildTransition(1, enterOpacityTransition);
   }, [animateEnterOpacity, isReady, enterOpacityTransition, enterOpacity]);
 
@@ -401,7 +394,6 @@ export const Path = memo<PathProps>((props) => {
       strokeWidth={strokeWidth}
       transitions={{
         enter: enterTransition,
-        enterOpacity: enterOpacityTransition,
         update: updateTransition,
       }}
     >
diff --git a/packages/mobile-visualization/src/chart/PeriodSelector.tsx b/packages/mobile/src/visualizations/chart/PeriodSelector.tsx
similarity index 93%
rename from packages/mobile-visualization/src/chart/PeriodSelector.tsx
rename to packages/mobile/src/visualizations/chart/PeriodSelector.tsx
index 4873dc7f06..07bf334d08 100644
--- a/packages/mobile-visualization/src/chart/PeriodSelector.tsx
+++ b/packages/mobile/src/visualizations/chart/PeriodSelector.tsx
@@ -1,16 +1,17 @@
 import React, { forwardRef, memo, useMemo } from 'react';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+
+import { useTheme } from '../../hooks/useTheme';
 import {
   SegmentedTabs,
   type SegmentedTabsProps,
   type TabComponent,
   type TabsActiveIndicatorProps,
-} from '@coinbase/cds-mobile/tabs';
-import { SegmentedTab, type SegmentedTabProps } from '@coinbase/cds-mobile/tabs/SegmentedTab';
-import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs';
-import { Text, type TextBaseProps } from '@coinbase/cds-mobile/typography';
+} from '../../tabs';
+import { SegmentedTab, type SegmentedTabProps } from '../../tabs/SegmentedTab';
+import { tabsSpringConfig } from '../../tabs/Tabs';
+import { Text, type TextBaseProps } from '../../typography';
 
 // Animated active indicator to support smooth transition of background color
 export const PeriodSelectorActiveIndicator = ({
diff --git a/packages/mobile-visualization/src/chart/__stories__/CartesianChart.stories.tsx b/packages/mobile/src/visualizations/chart/__stories__/CartesianChart.stories.tsx
similarity index 94%
rename from packages/mobile-visualization/src/chart/__stories__/CartesianChart.stories.tsx
rename to packages/mobile/src/visualizations/chart/__stories__/CartesianChart.stories.tsx
index abad603bd2..e5cfe88d8d 100644
--- a/packages/mobile-visualization/src/chart/__stories__/CartesianChart.stories.tsx
+++ b/packages/mobile/src/visualizations/chart/__stories__/CartesianChart.stories.tsx
@@ -1,13 +1,13 @@
 import { memo, useCallback, useMemo, useState } from 'react';
-import { Image, ScrollView, StyleSheet } from 'react-native';
+import { Image, StyleSheet } from 'react-native';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
-import { Text } from '@coinbase/cds-mobile/typography';
 import { Circle, Group, Skia } from '@shopify/react-native-skia';
 
+import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
+import { useTheme } from '../../../hooks/useTheme';
+import { Box, HStack, VStack } from '../../../layout';
+import { Text } from '../../../typography';
 import { Area } from '../area/Area';
 import { XAxis, YAxis } from '../axis';
 import { BarPlot } from '../bar/BarPlot';
@@ -524,28 +524,26 @@ const ScatterplotWithCustomLabels = memo(() => {
 
 const ChartStories = () => {
   return (
-    <ScrollView>
-      <ExampleScreen>
-        <Example title="Line Styles">
-          <LineStyles />
-        </Example>
-        <Example title="Multiple Types">
-          <MultipleChart />
-        </Example>
-        <Example title="Earnings History">
-          <EarningsHistory />
-        </Example>
-        <Example title="Price With Volume">
-          <PriceWithVolume />
-        </Example>
-        <Example title="Trading Trends">
-          <TradingTrends />
-        </Example>
-        <Example title="Scatterplot with Custom Labels">
-          <ScatterplotWithCustomLabels />
-        </Example>
-      </ExampleScreen>
-    </ScrollView>
+    <ExampleScreen>
+      <Example title="Line Styles">
+        <LineStyles />
+      </Example>
+      <Example title="Multiple Types">
+        <MultipleChart />
+      </Example>
+      <Example title="Earnings History">
+        <EarningsHistory />
+      </Example>
+      <Example title="Price With Volume">
+        <PriceWithVolume />
+      </Example>
+      <Example title="Trading Trends">
+        <TradingTrends />
+      </Example>
+      <Example title="Scatterplot with Custom Labels">
+        <ScatterplotWithCustomLabels />
+      </Example>
+    </ExampleScreen>
   );
 };
 
diff --git a/packages/mobile-visualization/src/chart/__stories__/ChartAccessibility.stories.tsx b/packages/mobile/src/visualizations/chart/__stories__/ChartAccessibility.stories.tsx
similarity index 97%
rename from packages/mobile-visualization/src/chart/__stories__/ChartAccessibility.stories.tsx
rename to packages/mobile/src/visualizations/chart/__stories__/ChartAccessibility.stories.tsx
index 09cc7603c1..924f94d4c8 100644
--- a/packages/mobile-visualization/src/chart/__stories__/ChartAccessibility.stories.tsx
+++ b/packages/mobile/src/visualizations/chart/__stories__/ChartAccessibility.stories.tsx
@@ -4,17 +4,17 @@ import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
-import { useTheme } from '@coinbase/cds-mobile';
-import { IconButton } from '@coinbase/cds-mobile/buttons';
-import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
-import { RemoteImage } from '@coinbase/cds-mobile/media';
-import { SectionHeader } from '@coinbase/cds-mobile/section-header/SectionHeader';
-import { type TabComponent, type TabsActiveIndicatorProps } from '@coinbase/cds-mobile/tabs';
-import { SegmentedTab, type SegmentedTabProps } from '@coinbase/cds-mobile/tabs/SegmentedTab';
-import { Text } from '@coinbase/cds-mobile/typography';
 import { FontWeight, Skia, type SkTextStyle, TextAlign } from '@shopify/react-native-skia';
 
+import { IconButton } from '../../../buttons';
+import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
+import { useTheme } from '../../../index';
+import { HStack, VStack } from '../../../layout';
+import { RemoteImage } from '../../../media';
+import { SectionHeader } from '../../../section-header/SectionHeader';
+import { type TabComponent, type TabsActiveIndicatorProps } from '../../../tabs';
+import { SegmentedTab, type SegmentedTabProps } from '../../../tabs/SegmentedTab';
+import { Text } from '../../../typography';
 import { XAxis, YAxis } from '../axis';
 import { BarChart } from '../bar/BarChart';
 import { BarPlot } from '../bar/BarPlot';
@@ -660,7 +660,7 @@ function ExampleNavigator() {
           <Text color="fgMuted" font="label2">
             Swipe to navigate chart segments.
           </Text>
-          <Box padding={1}>{currentExample.component}</Box>
+          <Example>{currentExample.component}</Example>
         </VStack>
       </VStack>
     </ExampleScreen>
diff --git a/packages/mobile-visualization/src/chart/__stories__/ChartTransitions.stories.tsx b/packages/mobile/src/visualizations/chart/__stories__/ChartTransitions.stories.tsx
similarity index 97%
rename from packages/mobile-visualization/src/chart/__stories__/ChartTransitions.stories.tsx
rename to packages/mobile/src/visualizations/chart/__stories__/ChartTransitions.stories.tsx
index fc3d35206f..4631d6bc35 100644
--- a/packages/mobile-visualization/src/chart/__stories__/ChartTransitions.stories.tsx
+++ b/packages/mobile/src/visualizations/chart/__stories__/ChartTransitions.stories.tsx
@@ -1,11 +1,11 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTheme } from '@coinbase/cds-mobile';
-import { Button } from '@coinbase/cds-mobile/buttons/Button';
-import { IconButton } from '@coinbase/cds-mobile/buttons/IconButton';
-import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
-import { Text } from '@coinbase/cds-mobile/typography';
 
+import { Button } from '../../../buttons/Button';
+import { IconButton } from '../../../buttons/IconButton';
+import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
+import { useTheme } from '../../../hooks/useTheme';
+import { Box, HStack, VStack } from '../../../layout';
+import { Text } from '../../../typography';
 import { AreaChart } from '../area/AreaChart';
 import type { BarProps } from '../bar/Bar';
 import { BarChart } from '../bar/BarChart';
@@ -596,7 +596,7 @@ function ExampleNavigator() {
             variant="secondary"
           />
         </HStack>
-        <Box key={currentIndex}>{currentExample.component}</Box>
+        <Example key={currentIndex}>{currentExample.component}</Example>
       </VStack>
     </ExampleScreen>
   );
diff --git a/packages/mobile-visualization/src/chart/__stories__/PeriodSelector.stories.tsx b/packages/mobile/src/visualizations/chart/__stories__/PeriodSelector.stories.tsx
similarity index 92%
rename from packages/mobile-visualization/src/chart/__stories__/PeriodSelector.stories.tsx
rename to packages/mobile/src/visualizations/chart/__stories__/PeriodSelector.stories.tsx
index 2cfb07603c..8fa8f36117 100644
--- a/packages/mobile-visualization/src/chart/__stories__/PeriodSelector.stories.tsx
+++ b/packages/mobile/src/visualizations/chart/__stories__/PeriodSelector.stories.tsx
@@ -10,16 +10,16 @@ import {
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
-import { IconButton } from '@coinbase/cds-mobile/buttons';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Icon, type IconProps } from '@coinbase/cds-mobile/icons';
-import { HStack } from '@coinbase/cds-mobile/layout';
-import { type TabComponent, type TabsActiveIndicatorProps } from '@coinbase/cds-mobile/tabs';
-import { SegmentedTab, type SegmentedTabProps } from '@coinbase/cds-mobile/tabs/SegmentedTab';
-import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs';
-import { Text } from '@coinbase/cds-mobile/typography';
 
+import { IconButton } from '../../../buttons';
+import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
+import { useTheme } from '../../../hooks/useTheme';
+import { Icon, type IconProps } from '../../../icons';
+import { HStack } from '../../../layout';
+import { type TabComponent, type TabsActiveIndicatorProps } from '../../../tabs';
+import { SegmentedTab, type SegmentedTabProps } from '../../../tabs/SegmentedTab';
+import { tabsSpringConfig } from '../../../tabs/Tabs';
+import { Text } from '../../../typography';
 import {
   LiveTabLabel,
   type LiveTabLabelProps,
@@ -56,7 +56,7 @@ const MinWidthPeriodSelectorExample = () => {
       gap={0.5}
       onChange={(tab) => setActiveTab(tab)}
       tabs={tabs}
-      width="fit-content"
+      width={null}
     />
   );
 };
@@ -75,7 +75,7 @@ const PaddedPeriodSelectorExample = () => {
       onChange={(tab) => setActiveTab(tab)}
       padding={3}
       tabs={tabs}
-      width="fit-content"
+      width={null}
     />
   );
 };
@@ -148,7 +148,7 @@ const TooManyPeriodsSelectorExample = () => {
           justifyContent="flex-start"
           onChange={setActiveTab}
           tabs={tabs}
-          width="fit-content"
+          width={null}
         />
       </ScrollView>
       <IconButton
@@ -200,7 +200,7 @@ const BTCTab: TabComponent = memo(
     // For string labels, wrap with custom BTC color when active
     const wrappedLabel =
       typeof label === 'string' ? (
-        <Text dangerouslySetColor={isActive ? btcColor : theme.color.fg} font="label1">
+        <Text font="label1" style={{ color: isActive ? btcColor : theme.color.fg }}>
           {label}
         </Text>
       ) : (
@@ -341,7 +341,7 @@ function IconsPeriodSelectorExample() {
         activeIndicator: { borderRadius: theme.borderRadius[200] },
       }}
       tabs={tabs}
-      width="fit-content"
+      width={null}
     />
   );
 }
diff --git a/packages/mobile-visualization/src/chart/area/Area.tsx b/packages/mobile/src/visualizations/chart/area/Area.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/area/Area.tsx
rename to packages/mobile/src/visualizations/chart/area/Area.tsx
diff --git a/packages/mobile-visualization/src/chart/area/AreaChart.tsx b/packages/mobile/src/visualizations/chart/area/AreaChart.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/area/AreaChart.tsx
rename to packages/mobile/src/visualizations/chart/area/AreaChart.tsx
index d9b42a6716..5318fea569 100644
--- a/packages/mobile-visualization/src/chart/area/AreaChart.tsx
+++ b/packages/mobile/src/visualizations/chart/area/AreaChart.tsx
@@ -205,12 +205,12 @@ export const AreaChart = memo(
 
       return (
         <CartesianChart
-          {...chartProps}
           ref={ref}
           inset={inset}
           series={seriesToRender}
           xAxis={xAxisConfig}
           yAxis={yAxisConfig}
+          {...chartProps}
         >
           {showXAxis && <XAxis axisId={xAxisId} {...xAxisVisualProps} />}
           {showYAxis && <YAxis axisId={yAxisId} {...yAxisVisualProps} />}
diff --git a/packages/mobile-visualization/src/chart/area/DottedArea.tsx b/packages/mobile/src/visualizations/chart/area/DottedArea.tsx
similarity index 97%
rename from packages/mobile-visualization/src/chart/area/DottedArea.tsx
rename to packages/mobile/src/visualizations/chart/area/DottedArea.tsx
index d16025d010..8645a322a7 100644
--- a/packages/mobile-visualization/src/chart/area/DottedArea.tsx
+++ b/packages/mobile/src/visualizations/chart/area/DottedArea.tsx
@@ -1,7 +1,7 @@
 import { memo, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Group, Skia } from '@shopify/react-native-skia';
+import { Group } from '@shopify/react-native-skia';
 
+import { useTheme } from '../../../hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Gradient } from '../gradient';
 import { Path, type PathProps } from '../Path';
diff --git a/packages/mobile-visualization/src/chart/area/GradientArea.tsx b/packages/mobile/src/visualizations/chart/area/GradientArea.tsx
similarity index 97%
rename from packages/mobile-visualization/src/chart/area/GradientArea.tsx
rename to packages/mobile/src/visualizations/chart/area/GradientArea.tsx
index 23e66de37f..6d306a2ccf 100644
--- a/packages/mobile-visualization/src/chart/area/GradientArea.tsx
+++ b/packages/mobile/src/visualizations/chart/area/GradientArea.tsx
@@ -1,6 +1,6 @@
 import { memo, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 
+import { useTheme } from '../../../hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Gradient } from '../gradient';
 import { Path, type PathProps } from '../Path';
diff --git a/packages/mobile-visualization/src/chart/area/SolidArea.tsx b/packages/mobile/src/visualizations/chart/area/SolidArea.tsx
similarity index 95%
rename from packages/mobile-visualization/src/chart/area/SolidArea.tsx
rename to packages/mobile/src/visualizations/chart/area/SolidArea.tsx
index d44281bfa5..2accb85d25 100644
--- a/packages/mobile-visualization/src/chart/area/SolidArea.tsx
+++ b/packages/mobile/src/visualizations/chart/area/SolidArea.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 
+import { useTheme } from '../../../hooks/useTheme';
 import { Gradient } from '../gradient';
 import { Path, type PathProps } from '../Path';
 
diff --git a/packages/mobile-visualization/src/chart/area/__stories__/AreaChart.stories.tsx b/packages/mobile/src/visualizations/chart/area/__stories__/AreaChart.stories.tsx
similarity index 97%
rename from packages/mobile-visualization/src/chart/area/__stories__/AreaChart.stories.tsx
rename to packages/mobile/src/visualizations/chart/area/__stories__/AreaChart.stories.tsx
index 24a72c59b4..5374e9628c 100644
--- a/packages/mobile-visualization/src/chart/area/__stories__/AreaChart.stories.tsx
+++ b/packages/mobile/src/visualizations/chart/area/__stories__/AreaChart.stories.tsx
@@ -1,10 +1,10 @@
 import { memo, useCallback, useState } from 'react';
 import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
-import { Button } from '@coinbase/cds-mobile/buttons/Button';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box, VStack } from '@coinbase/cds-mobile/layout';
 
+import { Button } from '../../../../buttons/Button';
+import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
+import { useTheme } from '../../../../hooks/useTheme';
+import { Box, VStack } from '../../../../layout';
 import {
   DefaultReferenceLineLabel,
   DottedLine,
diff --git a/packages/mobile-visualization/src/chart/area/index.ts b/packages/mobile/src/visualizations/chart/area/index.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/area/index.ts
rename to packages/mobile/src/visualizations/chart/area/index.ts
diff --git a/packages/mobile-visualization/src/chart/axis/Axis.tsx b/packages/mobile/src/visualizations/chart/axis/Axis.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/axis/Axis.tsx
rename to packages/mobile/src/visualizations/chart/axis/Axis.tsx
diff --git a/packages/mobile-visualization/src/chart/axis/DefaultAxisTickLabel.tsx b/packages/mobile/src/visualizations/chart/axis/DefaultAxisTickLabel.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/axis/DefaultAxisTickLabel.tsx
rename to packages/mobile/src/visualizations/chart/axis/DefaultAxisTickLabel.tsx
diff --git a/packages/mobile-visualization/src/chart/axis/XAxis.tsx b/packages/mobile/src/visualizations/chart/axis/XAxis.tsx
similarity index 99%
rename from packages/mobile-visualization/src/chart/axis/XAxis.tsx
rename to packages/mobile/src/visualizations/chart/axis/XAxis.tsx
index 5b791a8e13..495bd6c468 100644
--- a/packages/mobile-visualization/src/chart/axis/XAxis.tsx
+++ b/packages/mobile/src/visualizations/chart/axis/XAxis.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback, useEffect, useId, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { Group } from '@shopify/react-native-skia';
 
+import { useTheme } from '../../../hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DottedLine } from '../line/DottedLine';
 import { SolidLine } from '../line/SolidLine';
diff --git a/packages/mobile-visualization/src/chart/axis/YAxis.tsx b/packages/mobile/src/visualizations/chart/axis/YAxis.tsx
similarity index 99%
rename from packages/mobile-visualization/src/chart/axis/YAxis.tsx
rename to packages/mobile/src/visualizations/chart/axis/YAxis.tsx
index 14d3e1635b..b5429d67a8 100644
--- a/packages/mobile-visualization/src/chart/axis/YAxis.tsx
+++ b/packages/mobile/src/visualizations/chart/axis/YAxis.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback, useEffect, useId, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { Group, vec } from '@shopify/react-native-skia';
 
+import { useTheme } from '../../../hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DottedLine } from '../line/DottedLine';
 import { SolidLine } from '../line/SolidLine';
diff --git a/packages/mobile-visualization/src/chart/axis/__stories__/Axis.stories.tsx b/packages/mobile/src/visualizations/chart/axis/__stories__/Axis.stories.tsx
similarity index 98%
rename from packages/mobile-visualization/src/chart/axis/__stories__/Axis.stories.tsx
rename to packages/mobile/src/visualizations/chart/axis/__stories__/Axis.stories.tsx
index 9477a00dd5..04cf90291f 100644
--- a/packages/mobile-visualization/src/chart/axis/__stories__/Axis.stories.tsx
+++ b/packages/mobile/src/visualizations/chart/axis/__stories__/Axis.stories.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 
+import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
+import { useTheme } from '../../../../hooks/useTheme';
 import { BarChart, BarPlot } from '../../bar';
 import { CartesianChart } from '../../CartesianChart';
 import { LineChart, SolidLine, type SolidLineProps } from '../../line';
diff --git a/packages/mobile-visualization/src/chart/axis/index.ts b/packages/mobile/src/visualizations/chart/axis/index.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/axis/index.ts
rename to packages/mobile/src/visualizations/chart/axis/index.ts
diff --git a/packages/mobile-visualization/src/chart/bar/Bar.tsx b/packages/mobile/src/visualizations/chart/bar/Bar.tsx
similarity index 98%
rename from packages/mobile-visualization/src/chart/bar/Bar.tsx
rename to packages/mobile/src/visualizations/chart/bar/Bar.tsx
index 8fed6b9d54..b1d13e5e6f 100644
--- a/packages/mobile-visualization/src/chart/bar/Bar.tsx
+++ b/packages/mobile/src/visualizations/chart/bar/Bar.tsx
@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import type { Rect } from '@coinbase/cds-common';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 
+import { useTheme } from '../../../hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import { type BarTransition, getBarPath, type Transition } from '../utils';
 
diff --git a/packages/mobile-visualization/src/chart/bar/BarChart.tsx b/packages/mobile/src/visualizations/chart/bar/BarChart.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/bar/BarChart.tsx
rename to packages/mobile/src/visualizations/chart/bar/BarChart.tsx
index c842564fe3..2b6df90990 100644
--- a/packages/mobile-visualization/src/chart/bar/BarChart.tsx
+++ b/packages/mobile/src/visualizations/chart/bar/BarChart.tsx
@@ -202,12 +202,12 @@ export const BarChart = memo(
 
       return (
         <CartesianChart
-          {...chartProps}
           ref={ref}
           inset={inset}
           series={series}
           xAxis={xAxisConfig}
           yAxis={yAxisConfig}
+          {...chartProps}
         >
           {showXAxis && <XAxis axisId={xAxisId} {...xAxisVisualProps} />}
           {showYAxis && <YAxis axisId={yAxisId} {...yAxisVisualProps} />}
diff --git a/packages/mobile-visualization/src/chart/bar/BarPlot.tsx b/packages/mobile/src/visualizations/chart/bar/BarPlot.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/bar/BarPlot.tsx
rename to packages/mobile/src/visualizations/chart/bar/BarPlot.tsx
diff --git a/packages/mobile-visualization/src/chart/bar/BarStack.tsx b/packages/mobile/src/visualizations/chart/bar/BarStack.tsx
similarity index 99%
rename from packages/mobile-visualization/src/chart/bar/BarStack.tsx
rename to packages/mobile/src/visualizations/chart/bar/BarStack.tsx
index 890c114a50..6304194329 100644
--- a/packages/mobile-visualization/src/chart/bar/BarStack.tsx
+++ b/packages/mobile/src/visualizations/chart/bar/BarStack.tsx
@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import type { Rect } from '@coinbase/cds-common';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 
+import { useTheme } from '../../../hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import type { ChartScaleFunction, Series } from '../utils';
 import { EPSILON, getBars, getBaselinePx, getStackOrigin } from '../utils/bar';
diff --git a/packages/mobile-visualization/src/chart/bar/BarStackGroup.tsx b/packages/mobile/src/visualizations/chart/bar/BarStackGroup.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/bar/BarStackGroup.tsx
rename to packages/mobile/src/visualizations/chart/bar/BarStackGroup.tsx
index 5579c6e1fe..d3107c626b 100644
--- a/packages/mobile-visualization/src/chart/bar/BarStackGroup.tsx
+++ b/packages/mobile/src/visualizations/chart/bar/BarStackGroup.tsx
@@ -118,7 +118,6 @@ export const BarStackGroup = memo<BarStackGroupProps>(
 
     return orderedConfigs.map(({ categoryIndex, indexPos, thickness }) => (
       <BarStack
-        {...props}
         key={`stack-${stackIndex}-category-${categoryIndex}`}
         categoryIndex={categoryIndex}
         indexPos={indexPos}
@@ -129,6 +128,7 @@ export const BarStackGroup = memo<BarStackGroupProps>(
         valueScale={valueScaleComputed}
         xAxisId={xAxisId}
         yAxisId={yAxisId}
+        {...props}
       />
     ));
   },
diff --git a/packages/mobile-visualization/src/chart/bar/DefaultBar.tsx b/packages/mobile/src/visualizations/chart/bar/DefaultBar.tsx
similarity index 98%
rename from packages/mobile-visualization/src/chart/bar/DefaultBar.tsx
rename to packages/mobile/src/visualizations/chart/bar/DefaultBar.tsx
index 420f9228e4..4be2e49ef9 100644
--- a/packages/mobile-visualization/src/chart/bar/DefaultBar.tsx
+++ b/packages/mobile/src/visualizations/chart/bar/DefaultBar.tsx
@@ -1,6 +1,6 @@
 import { memo, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 
+import { useTheme } from '../../../hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Path } from '../Path';
 import {
diff --git a/packages/mobile-visualization/src/chart/bar/DefaultBarStack.tsx b/packages/mobile/src/visualizations/chart/bar/DefaultBarStack.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/bar/DefaultBarStack.tsx
rename to packages/mobile/src/visualizations/chart/bar/DefaultBarStack.tsx
diff --git a/packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx b/packages/mobile/src/visualizations/chart/bar/PercentageBarChart.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/bar/PercentageBarChart.tsx
rename to packages/mobile/src/visualizations/chart/bar/PercentageBarChart.tsx
diff --git a/packages/mobile-visualization/src/chart/bar/__stories__/BarChart.stories.tsx b/packages/mobile/src/visualizations/chart/bar/__stories__/BarChart.stories.tsx
similarity index 98%
rename from packages/mobile-visualization/src/chart/bar/__stories__/BarChart.stories.tsx
rename to packages/mobile/src/visualizations/chart/bar/__stories__/BarChart.stories.tsx
index c5f28a3186..59789709f2 100644
--- a/packages/mobile-visualization/src/chart/bar/__stories__/BarChart.stories.tsx
+++ b/packages/mobile/src/visualizations/chart/bar/__stories__/BarChart.stories.tsx
@@ -2,13 +2,13 @@ import { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';
 import { useDerivedValue } from 'react-native-reanimated';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
-import { Button, IconButton } from '@coinbase/cds-mobile/buttons';
-import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
-import { Text } from '@coinbase/cds-mobile/typography';
 import { Line as SkiaLine, Rect } from '@shopify/react-native-skia';
 
+import { Button, IconButton } from '../../../../buttons';
+import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
+import { useTheme } from '../../../../hooks/useTheme';
+import { HStack, VStack } from '../../../../layout';
+import { Text } from '../../../../typography';
 import { XAxis, YAxis } from '../../axis';
 import { CartesianChart, type CartesianChartProps } from '../../CartesianChart';
 import { useCartesianChartContext } from '../../ChartProvider';
@@ -228,8 +228,6 @@ const MultipleYAxes = () => {
 
 const initialData = [45, 52, 38, 45, 19, 23, 32];
 
-const MyCustomLine = memo(({ animate, ...props }: SolidLineProps) => <SolidLine {...props} />);
-
 const UpdatingChartValues = () => {
   const [data, setData] = useState(initialData);
 
@@ -305,7 +303,7 @@ const UpdatingChartValues = () => {
           domain: { max: 250 },
         }}
       >
-        <ReferenceLine LineComponent={MyCustomLine} dataY={0} />
+        <ReferenceLine LineComponent={SolidLine} dataY={0} />
       </BarChart>
       <Button
         onPress={() => setData((data) => (data[0] > 200 ? initialData : data.map((d) => d + 50)))}
@@ -1383,7 +1381,7 @@ function ExampleNavigator() {
   }, [examples.length]);
 
   return (
-    <ExampleScreen paddingX={0}>
+    <ExampleScreen>
       <VStack gap={4}>
         <HStack alignItems="center" justifyContent="space-between" padding={2}>
           <IconButton
@@ -1407,7 +1405,7 @@ function ExampleNavigator() {
             variant="secondary"
           />
         </HStack>
-        <Box padding={1}>{currentExample.component}</Box>
+        <Example>{currentExample.component}</Example>
       </VStack>
     </ExampleScreen>
   );
diff --git a/packages/mobile-visualization/src/chart/bar/__stories__/PercentageBarChart.stories.tsx b/packages/mobile/src/visualizations/chart/bar/__stories__/PercentageBarChart.stories.tsx
similarity index 99%
rename from packages/mobile-visualization/src/chart/bar/__stories__/PercentageBarChart.stories.tsx
rename to packages/mobile/src/visualizations/chart/bar/__stories__/PercentageBarChart.stories.tsx
index 50e0fd2540..50da4ce6f8 100644
--- a/packages/mobile-visualization/src/chart/bar/__stories__/PercentageBarChart.stories.tsx
+++ b/packages/mobile/src/visualizations/chart/bar/__stories__/PercentageBarChart.stories.tsx
@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { IconButton } from '@coinbase/cds-mobile/buttons';
 import { Switch } from '@coinbase/cds-mobile/controls';
-import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
 import { RollingNumber } from '@coinbase/cds-mobile/numbers';
@@ -764,7 +764,7 @@ function ExampleNavigator() {
             variant="secondary"
           />
         </HStack>
-        <Box padding={1}>{currentExample.component}</Box>
+        <Example>{currentExample.component}</Example>
       </VStack>
     </ExampleScreen>
   );
diff --git a/packages/mobile-visualization/src/chart/bar/__tests__/PercentageBarChart.test.tsx b/packages/mobile/src/visualizations/chart/bar/__tests__/PercentageBarChart.test.tsx
similarity index 97%
rename from packages/mobile-visualization/src/chart/bar/__tests__/PercentageBarChart.test.tsx
rename to packages/mobile/src/visualizations/chart/bar/__tests__/PercentageBarChart.test.tsx
index 49ef24016d..c25f5c2525 100644
--- a/packages/mobile-visualization/src/chart/bar/__tests__/PercentageBarChart.test.tsx
+++ b/packages/mobile/src/visualizations/chart/bar/__tests__/PercentageBarChart.test.tsx
@@ -1,6 +1,6 @@
-import { DefaultThemeProvider } from '@coinbase/cds-mobile/utils/testHelpers';
 import { render, screen, within } from '@testing-library/react-native';
 
+import { DefaultThemeProvider } from '../../../../utils/testHelpers';
 import { PercentageBarChart } from '../PercentageBarChart';
 
 type MockSkPath = {
diff --git a/packages/mobile-visualization/src/chart/bar/index.ts b/packages/mobile/src/visualizations/chart/bar/index.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/bar/index.ts
rename to packages/mobile/src/visualizations/chart/bar/index.ts
diff --git a/packages/mobile-visualization/src/chart/gradient/Gradient.tsx b/packages/mobile/src/visualizations/chart/gradient/Gradient.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/gradient/Gradient.tsx
rename to packages/mobile/src/visualizations/chart/gradient/Gradient.tsx
diff --git a/packages/mobile-visualization/src/chart/gradient/index.ts b/packages/mobile/src/visualizations/chart/gradient/index.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/gradient/index.ts
rename to packages/mobile/src/visualizations/chart/gradient/index.ts
diff --git a/packages/mobile/src/visualizations/chart/index.ts b/packages/mobile/src/visualizations/chart/index.ts
new file mode 100644
index 0000000000..40620f86c0
--- /dev/null
+++ b/packages/mobile/src/visualizations/chart/index.ts
@@ -0,0 +1,17 @@
+// codegen:start {preset: barrel, include: [./*.tsx, ./*/index.ts]}
+export * from './area';
+export * from './axis';
+export * from './bar';
+export * from './CartesianChart';
+export * from './ChartContextBridge';
+export * from './ChartProvider';
+export * from './gradient';
+export * from './legend';
+export * from './line';
+export * from './Path';
+export * from './PeriodSelector';
+export * from './point';
+export * from './scrubber';
+export * from './text';
+export * from './utils';
+// codegen:end
diff --git a/packages/mobile-visualization/src/chart/legend/DefaultLegendEntry.tsx b/packages/mobile/src/visualizations/chart/legend/DefaultLegendEntry.tsx
similarity index 88%
rename from packages/mobile-visualization/src/chart/legend/DefaultLegendEntry.tsx
rename to packages/mobile/src/visualizations/chart/legend/DefaultLegendEntry.tsx
index e20665a6f7..81d4d99584 100644
--- a/packages/mobile-visualization/src/chart/legend/DefaultLegendEntry.tsx
+++ b/packages/mobile/src/visualizations/chart/legend/DefaultLegendEntry.tsx
@@ -1,7 +1,8 @@
 import { memo } from 'react';
 import { StyleSheet } from 'react-native';
-import { HStack, type HStackProps } from '@coinbase/cds-mobile/layout';
-import { Text } from '@coinbase/cds-mobile/typography/Text';
+
+import { HStack, type HStackProps } from '../../../layout';
+import { Text } from '../../../typography/Text';
 
 import { DefaultLegendShape } from './DefaultLegendShape';
 import type { LegendEntryProps } from './Legend';
diff --git a/packages/mobile-visualization/src/chart/legend/DefaultLegendShape.tsx b/packages/mobile/src/visualizations/chart/legend/DefaultLegendShape.tsx
similarity index 92%
rename from packages/mobile-visualization/src/chart/legend/DefaultLegendShape.tsx
rename to packages/mobile/src/visualizations/chart/legend/DefaultLegendShape.tsx
index e8913e4dbd..c43ba6f1af 100644
--- a/packages/mobile-visualization/src/chart/legend/DefaultLegendShape.tsx
+++ b/packages/mobile/src/visualizations/chart/legend/DefaultLegendShape.tsx
@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
-import { useTheme } from '@coinbase/cds-mobile';
-import { Box, type BoxProps } from '@coinbase/cds-mobile/layout';
 
+import { useTheme } from '../../../index';
+import { Box, type BoxProps } from '../../../layout';
 import type { LegendShape, LegendShapeVariant } from '../utils/chart';
 
 import type { LegendShapeProps } from './Legend';
diff --git a/packages/mobile-visualization/src/chart/legend/Legend.tsx b/packages/mobile/src/visualizations/chart/legend/Legend.tsx
similarity index 98%
rename from packages/mobile-visualization/src/chart/legend/Legend.tsx
rename to packages/mobile/src/visualizations/chart/legend/Legend.tsx
index 72373612fd..c1e50d945d 100644
--- a/packages/mobile-visualization/src/chart/legend/Legend.tsx
+++ b/packages/mobile/src/visualizations/chart/legend/Legend.tsx
@@ -1,7 +1,7 @@
 import { forwardRef, memo, useMemo } from 'react';
 import type { StyleProp, View, ViewStyle } from 'react-native';
-import { Box, type BoxBaseProps, type BoxProps } from '@coinbase/cds-mobile/layout';
 
+import { Box, type BoxBaseProps, type BoxProps } from '../../../layout';
 import { useCartesianChartContext } from '../ChartProvider';
 import type { LegendShape } from '../utils';
 
diff --git a/packages/mobile-visualization/src/chart/legend/__stories__/Legend.stories.tsx b/packages/mobile/src/visualizations/chart/legend/__stories__/Legend.stories.tsx
similarity index 92%
rename from packages/mobile-visualization/src/chart/legend/__stories__/Legend.stories.tsx
rename to packages/mobile/src/visualizations/chart/legend/__stories__/Legend.stories.tsx
index 5890ad80b5..f9ec31ea71 100644
--- a/packages/mobile-visualization/src/chart/legend/__stories__/Legend.stories.tsx
+++ b/packages/mobile/src/visualizations/chart/legend/__stories__/Legend.stories.tsx
@@ -1,13 +1,11 @@
 import { memo, useCallback, useMemo, useState } from 'react';
-import { ScrollView } from 'react-native';
-import { Chip } from '@coinbase/cds-mobile/chips';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
-import { TextLabel1, TextLabel2 } from '@coinbase/cds-mobile/typography';
-import { Text } from '@coinbase/cds-mobile/typography/Text';
 import { Canvas, Group, Path as SkiaPath, Skia } from '@shopify/react-native-skia';
 
+import { Chip } from '../../../../chips';
+import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
+import { useTheme } from '../../../../hooks/useTheme';
+import { Box, HStack, VStack } from '../../../../layout';
+import { Text } from '../../../../typography/Text';
 import { XAxis, YAxis } from '../../axis';
 import type { BarComponentProps } from '../../bar';
 import { BarChart, BarPlot, DefaultBar } from '../../bar';
@@ -274,8 +272,8 @@ const DynamicData = () => {
       return (
         <HStack gap={1} style={{ alignItems: 'center' }}>
           <DefaultLegendShape color={color} shape={shape} />
-          <TextLabel2>{label}</TextLabel2>
-          <TextLabel1>{formattedValue}</TextLabel1>
+          <Text font="label2">{label}</Text>
+          <Text font="label1">{formattedValue}</Text>
         </HStack>
       );
     },
@@ -377,7 +375,9 @@ const Interactive = () => {
       >
         <HStack gap={1} style={{ alignItems: 'center' }}>
           <DefaultLegendShape color={`rgb(${color50})`} />
-          <TextLabel2 color={isEmphasized ? 'bg' : 'fg'}>{label}</TextLabel2>
+          <Text color={isEmphasized ? 'bg' : 'fg'} font="label2">
+            {label}
+          </Text>
         </HStack>
       </Chip>
     );
@@ -594,34 +594,32 @@ const LegendShapes = () => {
 
 const LegendStories = () => {
   return (
-    <ScrollView>
-      <ExampleScreen>
-        <Example title="Shapes">
-          <Shapes />
-        </Example>
-        <Example title="Basic Legend">
-          <BasicLegend />
-        </Example>
-        <Example title="Position">
-          <Position />
-        </Example>
-        <Example title="Shape Variants">
-          <ShapeVariants />
-        </Example>
-        <Example title="Dynamic Data">
-          <DynamicData />
-        </Example>
-        <Example title="Interactive Legend">
-          <Interactive />
-        </Example>
-        <Example title="Legend Shapes">
-          <LegendShapes />
-        </Example>
-        <Example title="Accessible Legend">
-          <Accessible />
-        </Example>
-      </ExampleScreen>
-    </ScrollView>
+    <ExampleScreen>
+      <Example title="Shapes">
+        <Shapes />
+      </Example>
+      <Example title="Basic Legend">
+        <BasicLegend />
+      </Example>
+      <Example title="Position">
+        <Position />
+      </Example>
+      <Example title="Shape Variants">
+        <ShapeVariants />
+      </Example>
+      <Example title="Dynamic Data">
+        <DynamicData />
+      </Example>
+      <Example title="Interactive Legend">
+        <Interactive />
+      </Example>
+      <Example title="Legend Shapes">
+        <LegendShapes />
+      </Example>
+      <Example title="Accessible Legend">
+        <Accessible />
+      </Example>
+    </ExampleScreen>
   );
 };
 
diff --git a/packages/mobile-visualization/src/chart/legend/index.ts b/packages/mobile/src/visualizations/chart/legend/index.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/legend/index.ts
rename to packages/mobile/src/visualizations/chart/legend/index.ts
diff --git a/packages/mobile-visualization/src/chart/line/DefaultReferenceLineLabel.tsx b/packages/mobile/src/visualizations/chart/line/DefaultReferenceLineLabel.tsx
similarity index 97%
rename from packages/mobile-visualization/src/chart/line/DefaultReferenceLineLabel.tsx
rename to packages/mobile/src/visualizations/chart/line/DefaultReferenceLineLabel.tsx
index 3e99964e07..79f195ad00 100644
--- a/packages/mobile-visualization/src/chart/line/DefaultReferenceLineLabel.tsx
+++ b/packages/mobile/src/visualizations/chart/line/DefaultReferenceLineLabel.tsx
@@ -1,6 +1,6 @@
 import { memo, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile';
 
+import { useTheme } from '../../../index';
 import { useCartesianChartContext } from '../ChartProvider';
 import { ChartText } from '../text';
 import { type ChartInset, getChartInset } from '../utils';
diff --git a/packages/mobile-visualization/src/chart/line/DottedLine.tsx b/packages/mobile/src/visualizations/chart/line/DottedLine.tsx
similarity index 96%
rename from packages/mobile-visualization/src/chart/line/DottedLine.tsx
rename to packages/mobile/src/visualizations/chart/line/DottedLine.tsx
index 7a1d638757..9953a348ac 100644
--- a/packages/mobile-visualization/src/chart/line/DottedLine.tsx
+++ b/packages/mobile/src/visualizations/chart/line/DottedLine.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { DashPathEffect } from '@shopify/react-native-skia';
 
+import { useTheme } from '../../../hooks/useTheme';
 import { Gradient } from '../gradient';
 import { Path, type PathProps } from '../Path';
 
diff --git a/packages/mobile-visualization/src/chart/line/Line.tsx b/packages/mobile/src/visualizations/chart/line/Line.tsx
similarity index 99%
rename from packages/mobile-visualization/src/chart/line/Line.tsx
rename to packages/mobile/src/visualizations/chart/line/Line.tsx
index 25022a8905..4f7138b650 100644
--- a/packages/mobile-visualization/src/chart/line/Line.tsx
+++ b/packages/mobile/src/visualizations/chart/line/Line.tsx
@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile';
 import { type AnimatedProp, Group } from '@shopify/react-native-skia';
 
+import { useTheme } from '../../../index';
 import { Area, type AreaComponent } from '../area/Area';
 import { useCartesianChartContext } from '../ChartProvider';
 import type { PathProps } from '../Path';
diff --git a/packages/mobile-visualization/src/chart/line/LineChart.tsx b/packages/mobile/src/visualizations/chart/line/LineChart.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/line/LineChart.tsx
rename to packages/mobile/src/visualizations/chart/line/LineChart.tsx
index 52b4e2d0f0..527104c430 100644
--- a/packages/mobile-visualization/src/chart/line/LineChart.tsx
+++ b/packages/mobile/src/visualizations/chart/line/LineChart.tsx
@@ -202,7 +202,6 @@ export const LineChart = memo(
 
       return (
         <CartesianChart
-          {...chartProps}
           ref={ref}
           inset={inset}
           layout={layout}
@@ -210,6 +209,7 @@ export const LineChart = memo(
           series={chartSeries}
           xAxis={xAxisConfig}
           yAxis={yAxisConfig}
+          {...chartProps}
         >
           {/* Render axes first for grid lines to appear behind everything else */}
           {showXAxis && <XAxis axisId={xAxisId} {...xAxisVisualProps} />}
diff --git a/packages/mobile-visualization/src/chart/line/ReferenceLine.tsx b/packages/mobile/src/visualizations/chart/line/ReferenceLine.tsx
similarity index 98%
rename from packages/mobile-visualization/src/chart/line/ReferenceLine.tsx
rename to packages/mobile/src/visualizations/chart/line/ReferenceLine.tsx
index 5d1bff7622..93664bda3a 100644
--- a/packages/mobile-visualization/src/chart/line/ReferenceLine.tsx
+++ b/packages/mobile/src/visualizations/chart/line/ReferenceLine.tsx
@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import { useDerivedValue } from 'react-native-reanimated';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import type { AnimatedProp } from '@shopify/react-native-skia';
 
+import { useTheme } from '../../../hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import type {
   ChartTextChildren,
@@ -40,7 +40,7 @@ export type ReferenceLineLabelComponentProps = Pick<
   | 'paragraphAlignment'
 > & {
   /**
-   * Bounds inset for label to prevent cutoff at chart edges.
+   * Bounds inset for the label to prevent cutoff at chart edges.
    * Can be a number (applied to all sides) or a ChartInset object.
    * @default { top: 4, bottom: 20, left: 12, right: 12 } when elevated is true, otherwise undefined
    */
diff --git a/packages/mobile-visualization/src/chart/line/SolidLine.tsx b/packages/mobile/src/visualizations/chart/line/SolidLine.tsx
similarity index 95%
rename from packages/mobile-visualization/src/chart/line/SolidLine.tsx
rename to packages/mobile/src/visualizations/chart/line/SolidLine.tsx
index c471a18c55..afe48f3593 100644
--- a/packages/mobile-visualization/src/chart/line/SolidLine.tsx
+++ b/packages/mobile/src/visualizations/chart/line/SolidLine.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 
+import { useTheme } from '../../../hooks/useTheme';
 import { Gradient } from '../gradient';
 import { Path, type PathProps } from '../Path';
 
diff --git a/packages/mobile-visualization/src/chart/line/__stories__/LineChart.stories.tsx b/packages/mobile/src/visualizations/chart/line/__stories__/LineChart.stories.tsx
similarity index 98%
rename from packages/mobile-visualization/src/chart/line/__stories__/LineChart.stories.tsx
rename to packages/mobile/src/visualizations/chart/line/__stories__/LineChart.stories.tsx
index a2a66f4a0a..91e1022ea3 100644
--- a/packages/mobile-visualization/src/chart/line/__stories__/LineChart.stories.tsx
+++ b/packages/mobile/src/visualizations/chart/line/__stories__/LineChart.stories.tsx
@@ -14,19 +14,6 @@ import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualiz
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
 import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
-import { useTheme } from '@coinbase/cds-mobile';
-import { DataCard } from '@coinbase/cds-mobile/alpha/data-card/DataCard';
-import { Button, IconButton } from '@coinbase/cds-mobile/buttons';
-import { ListCell } from '@coinbase/cds-mobile/cells';
-import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { Box, type BoxBaseProps, HStack, VStack } from '@coinbase/cds-mobile/layout';
-import { Avatar, RemoteImage } from '@coinbase/cds-mobile/media';
-import { NavigationTitleSelect } from '@coinbase/cds-mobile/navigation';
-import { SectionHeader } from '@coinbase/cds-mobile/section-header/SectionHeader';
-import { Pressable } from '@coinbase/cds-mobile/system';
-import { type TabComponent, type TabsActiveIndicatorProps } from '@coinbase/cds-mobile/tabs';
-import { SegmentedTab, type SegmentedTabProps } from '@coinbase/cds-mobile/tabs/SegmentedTab';
-import { Text } from '@coinbase/cds-mobile/typography';
 import {
   Circle,
   FontWeight,
@@ -36,6 +23,19 @@ import {
   TextAlign,
 } from '@shopify/react-native-skia';
 
+import { DataCard } from '../../../../alpha/data-card/DataCard';
+import { Button, IconButton } from '../../../../buttons';
+import { ListCell } from '../../../../cells';
+import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
+import { useTheme } from '../../../../index';
+import { Box, type BoxBaseProps, HStack, VStack } from '../../../../layout';
+import { Avatar, RemoteImage } from '../../../../media';
+import { NavigationTitleSelect } from '../../../../navigation';
+import { SectionHeader } from '../../../../section-header/SectionHeader';
+import { Pressable } from '../../../../system';
+import { type TabComponent, type TabsActiveIndicatorProps } from '../../../../tabs';
+import { SegmentedTab, type SegmentedTabProps } from '../../../../tabs/SegmentedTab';
+import { Text } from '../../../../typography';
 import { Area, DottedArea, type DottedAreaProps } from '../../area';
 import { DefaultAxisTickLabel, XAxis, YAxis } from '../../axis';
 import { CartesianChart } from '../../CartesianChart';
@@ -62,12 +62,13 @@ import {
   type DottedLineProps,
   Line,
   LineChart,
+  type LineChartProps,
   ReferenceLine,
   SolidLine,
   type SolidLineProps,
 } from '..';
 
-function MultipleLine() {
+function MultipleLine(props: LineChartProps) {
   const theme = useTheme();
   const pages = useMemo(
     () => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'],
@@ -125,6 +126,7 @@ function MultipleLine() {
         showGrid: true,
         tickLabelFormatter: numberFormatter,
       }}
+      {...props}
     >
       <Scrubber />
     </LineChart>
@@ -1863,7 +1865,7 @@ function DataCardWithLineChart() {
         thumbnail={exampleThumbnail}
         title="Line Chart with Tag"
         titleAccessory={
-          <Text dangerouslySetColor={`rgb(${spectrum.green70})`} font="label1">
+          <Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
             ↗ 25.25%
           </Text>
         }
@@ -1886,7 +1888,7 @@ function DataCardWithLineChart() {
         thumbnail={exampleThumbnail}
         title="Actionable Line Chart"
         titleAccessory={
-          <Text dangerouslySetColor={`rgb(${spectrum.green70})`} font="label1">
+          <Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
             ↗ 8.5%
           </Text>
         }
@@ -1916,7 +1918,7 @@ function DataCardWithLineChart() {
         }
         title="Card with Line Chart"
         titleAccessory={
-          <Text dangerouslySetColor={`rgb(${spectrum.green70})`} font="label1">
+          <Text font="label1" style={{ color: `rgb(${spectrum.green70})` }}>
             ↗ 25.25%
           </Text>
         }
@@ -1995,6 +1997,10 @@ function ExampleNavigator() {
         title: 'Multiple Lines',
         component: <MultipleLine />,
       },
+      {
+        title: 'Multiple Lines No Animations',
+        component: <MultipleLine animate={false} />,
+      },
       {
         title: 'Data Format',
         component: <DataFormat />,
@@ -2246,7 +2252,7 @@ function ExampleNavigator() {
             variant="secondary"
           />
         </HStack>
-        <Box padding={1}>{currentExample.component}</Box>
+        <Example>{currentExample.component}</Example>
       </VStack>
     </ExampleScreen>
   );
diff --git a/packages/mobile-visualization/src/chart/line/__stories__/ReferenceLine.stories.tsx b/packages/mobile/src/visualizations/chart/line/__stories__/ReferenceLine.stories.tsx
similarity index 97%
rename from packages/mobile-visualization/src/chart/line/__stories__/ReferenceLine.stories.tsx
rename to packages/mobile/src/visualizations/chart/line/__stories__/ReferenceLine.stories.tsx
index 94203d3197..c70f86470c 100644
--- a/packages/mobile-visualization/src/chart/line/__stories__/ReferenceLine.stories.tsx
+++ b/packages/mobile/src/visualizations/chart/line/__stories__/ReferenceLine.stories.tsx
@@ -1,10 +1,10 @@
 import { memo, useCallback, useMemo } from 'react';
 import { useDerivedValue, withTiming } from 'react-native-reanimated';
 import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
-import { useTheme } from '@coinbase/cds-mobile';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { VStack } from '@coinbase/cds-mobile/layout';
 
+import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
+import { useTheme } from '../../../../index';
+import { VStack } from '../../../../layout';
 import { useCartesianChartContext } from '../../ChartProvider';
 import { Scrubber } from '../../scrubber';
 import { getPointOnSerializableScale, useScrubberContext } from '../../utils';
diff --git a/packages/mobile-visualization/src/chart/line/index.ts b/packages/mobile/src/visualizations/chart/line/index.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/line/index.ts
rename to packages/mobile/src/visualizations/chart/line/index.ts
diff --git a/packages/mobile-visualization/src/chart/point/DefaultPointLabel.tsx b/packages/mobile/src/visualizations/chart/point/DefaultPointLabel.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/point/DefaultPointLabel.tsx
rename to packages/mobile/src/visualizations/chart/point/DefaultPointLabel.tsx
index e978f7524b..c93c3e4488 100644
--- a/packages/mobile-visualization/src/chart/point/DefaultPointLabel.tsx
+++ b/packages/mobile/src/visualizations/chart/point/DefaultPointLabel.tsx
@@ -26,11 +26,11 @@ export const DefaultPointLabel = memo<DefaultPointLabelProps>(
 
     return (
       <ChartText
-        {...props}
         horizontalAlignment={horizontalAlignment}
         verticalAlignment={verticalAlignment}
         x={labelCoordinates.x}
         y={labelCoordinates.y}
+        {...props}
       >
         {children}
       </ChartText>
diff --git a/packages/mobile-visualization/src/chart/point/Point.tsx b/packages/mobile/src/visualizations/chart/point/Point.tsx
similarity index 99%
rename from packages/mobile-visualization/src/chart/point/Point.tsx
rename to packages/mobile/src/visualizations/chart/point/Point.tsx
index 55ea47e4e8..22fb894281 100644
--- a/packages/mobile-visualization/src/chart/point/Point.tsx
+++ b/packages/mobile/src/visualizations/chart/point/Point.tsx
@@ -1,9 +1,9 @@
 import { type ComponentType, memo, useEffect, useMemo } from 'react';
 import { cancelAnimation, useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { Circle, type Color, Group, interpolateColors } from '@shopify/react-native-skia';
 
+import { useTheme } from '../../../hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import type { ChartTextChildren, ChartTextProps } from '../text/ChartText';
 import { type PointLabelPosition, projectPoint } from '../utils';
diff --git a/packages/mobile-visualization/src/chart/point/index.ts b/packages/mobile/src/visualizations/chart/point/index.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/point/index.ts
rename to packages/mobile/src/visualizations/chart/point/index.ts
diff --git a/packages/mobile-visualization/src/chart/scrubber/DefaultScrubberBeacon.tsx b/packages/mobile/src/visualizations/chart/scrubber/DefaultScrubberBeacon.tsx
similarity index 99%
rename from packages/mobile-visualization/src/chart/scrubber/DefaultScrubberBeacon.tsx
rename to packages/mobile/src/visualizations/chart/scrubber/DefaultScrubberBeacon.tsx
index 0f05bc9cd8..a020cb1544 100644
--- a/packages/mobile-visualization/src/chart/scrubber/DefaultScrubberBeacon.tsx
+++ b/packages/mobile/src/visualizations/chart/scrubber/DefaultScrubberBeacon.tsx
@@ -10,9 +10,9 @@ import {
   withSequence,
   withTiming,
 } from 'react-native-reanimated';
-import { useTheme } from '@coinbase/cds-mobile';
 import { Circle, Group } from '@shopify/react-native-skia';
 
+import { useTheme } from '../../../index';
 import { useCartesianChartContext } from '../ChartProvider';
 import { unwrapAnimatedValue } from '../utils';
 import { projectPointWithSerializableScale } from '../utils/point';
diff --git a/packages/mobile-visualization/src/chart/scrubber/DefaultScrubberBeaconLabel.tsx b/packages/mobile/src/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.tsx
similarity index 96%
rename from packages/mobile-visualization/src/chart/scrubber/DefaultScrubberBeaconLabel.tsx
rename to packages/mobile/src/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.tsx
index 6f3234bea1..51b4b636c9 100644
--- a/packages/mobile-visualization/src/chart/scrubber/DefaultScrubberBeaconLabel.tsx
+++ b/packages/mobile/src/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile';
 
+import { useTheme } from '../../../index';
 import { ChartText, type ChartTextProps } from '../text';
 
 import type { ScrubberBeaconLabelProps } from './Scrubber';
diff --git a/packages/mobile-visualization/src/chart/scrubber/DefaultScrubberLabel.tsx b/packages/mobile/src/visualizations/chart/scrubber/DefaultScrubberLabel.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/scrubber/DefaultScrubberLabel.tsx
rename to packages/mobile/src/visualizations/chart/scrubber/DefaultScrubberLabel.tsx
diff --git a/packages/mobile-visualization/src/chart/scrubber/Scrubber.tsx b/packages/mobile/src/visualizations/chart/scrubber/Scrubber.tsx
similarity index 98%
rename from packages/mobile-visualization/src/chart/scrubber/Scrubber.tsx
rename to packages/mobile/src/visualizations/chart/scrubber/Scrubber.tsx
index 21e1e121e0..7535cafdf1 100644
--- a/packages/mobile-visualization/src/chart/scrubber/Scrubber.tsx
+++ b/packages/mobile/src/visualizations/chart/scrubber/Scrubber.tsx
@@ -12,9 +12,15 @@ import {
   useDerivedValue,
   useSharedValue,
 } from 'react-native-reanimated';
-import { useTheme } from '@coinbase/cds-mobile';
-import { type AnimatedProp, Group, Rect, type SkParagraph } from '@shopify/react-native-skia';
-
+import {
+  type AnimatedProp,
+  Group,
+  Paint,
+  Rect,
+  type SkParagraph,
+} from '@shopify/react-native-skia';
+
+import { useTheme } from '../../../index';
 import { useCartesianChartContext } from '../ChartProvider';
 import {
   ReferenceLine,
@@ -434,7 +440,7 @@ export const Scrubber = memo(
       if (!isReady) return;
 
       return (
-        <Group opacity={scrubberOpacity}>
+        <Group layer={<Paint opacity={scrubberOpacity} />}>
           {!hideOverlay && (
             <Rect
               color={theme.color.bg}
diff --git a/packages/mobile-visualization/src/chart/scrubber/ScrubberAccessibilityView.tsx b/packages/mobile/src/visualizations/chart/scrubber/ScrubberAccessibilityView.tsx
similarity index 98%
rename from packages/mobile-visualization/src/chart/scrubber/ScrubberAccessibilityView.tsx
rename to packages/mobile/src/visualizations/chart/scrubber/ScrubberAccessibilityView.tsx
index ed9c73f5a9..059d00fa37 100644
--- a/packages/mobile-visualization/src/chart/scrubber/ScrubberAccessibilityView.tsx
+++ b/packages/mobile/src/visualizations/chart/scrubber/ScrubberAccessibilityView.tsx
@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 import type { Rect } from '@coinbase/cds-common/types';
-import { useScreenReaderStatus } from '@coinbase/cds-mobile/hooks/useScreenReaderStatus';
 
+import { useScreenReaderStatus } from '../../../hooks/useScreenReaderStatus';
 import { useCartesianChartContext } from '../ChartProvider';
 import { useScrubberContext } from '../utils';
 import type { AxisConfig } from '../utils/axis';
diff --git a/packages/mobile-visualization/src/chart/scrubber/ScrubberBeaconGroup.tsx b/packages/mobile/src/visualizations/chart/scrubber/ScrubberBeaconGroup.tsx
similarity index 99%
rename from packages/mobile-visualization/src/chart/scrubber/ScrubberBeaconGroup.tsx
rename to packages/mobile/src/visualizations/chart/scrubber/ScrubberBeaconGroup.tsx
index 239408eb86..781ef90335 100644
--- a/packages/mobile-visualization/src/chart/scrubber/ScrubberBeaconGroup.tsx
+++ b/packages/mobile/src/visualizations/chart/scrubber/ScrubberBeaconGroup.tsx
@@ -2,8 +2,8 @@ import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from 'rea
 import type { SharedValue } from 'react-native-reanimated';
 import { useDerivedValue } from 'react-native-reanimated';
 import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
-import { useTheme } from '@coinbase/cds-mobile';
 
+import { useTheme } from '../../../index';
 import { useCartesianChartContext } from '../ChartProvider';
 import { evaluateGradientAtValue, getGradientStops, useScrubberContext } from '../utils';
 import { convertToSerializableScale } from '../utils/scale';
diff --git a/packages/mobile-visualization/src/chart/scrubber/ScrubberBeaconLabelGroup.tsx b/packages/mobile/src/visualizations/chart/scrubber/ScrubberBeaconLabelGroup.tsx
similarity index 82%
rename from packages/mobile-visualization/src/chart/scrubber/ScrubberBeaconLabelGroup.tsx
rename to packages/mobile/src/visualizations/chart/scrubber/ScrubberBeaconLabelGroup.tsx
index 0e49c8be5e..5047d3ae4c 100644
--- a/packages/mobile-visualization/src/chart/scrubber/ScrubberBeaconLabelGroup.tsx
+++ b/packages/mobile/src/visualizations/chart/scrubber/ScrubberBeaconLabelGroup.tsx
@@ -64,13 +64,29 @@ const PositionedLabel = memo<{
 
     const idleAnimatedY = useSharedValue<number | null>(null);
     useAnimatedReaction(
-      () => ({ y: targetY.value, idle: unwrapAnimatedValue(isIdle) }),
+      () => {
+        const position = positions.value[index];
+        return {
+          y: position !== null && position !== undefined ? position.y : null,
+          idle: unwrapAnimatedValue(isIdle),
+          position,
+        };
+      },
       (current, previous) => {
+        if (current.position === null || current.position === undefined) {
+          idleAnimatedY.value = null;
+          return;
+        }
+        // Do not spring from placeholder targetY (0 while no position) when the label first lays out.
+        if (previous?.position === null || previous?.position === undefined) {
+          idleAnimatedY.value = current.y!;
+          return;
+        }
         // Only animate idle-to-idle updates, immediately set the value for other changes.
-        if (previous?.idle && current.idle) {
-          idleAnimatedY.value = buildTransition(current.y, updateTransition);
+        if (previous.idle && current.idle) {
+          idleAnimatedY.value = buildTransition(current.y!, updateTransition);
         } else {
-          idleAnimatedY.value = current.y;
+          idleAnimatedY.value = current.y!;
         }
       },
       [updateTransition],
@@ -271,25 +287,34 @@ export const ScrubberBeaconLabelGroup = memo<ScrubberBeaconLabelGroupProps>(
         return null;
       });
 
-      const maxLabelHeight = Math.max(...Object.values(labelDimensions).map((dim) => dim.height));
-
-      const maxLabelWidth = Math.max(...Object.values(labelDimensions).map((dim) => dim.width));
+      const measuredHeights = Object.values(labelDimensions).map((dim) => dim.height);
+      const maxLabelHeight =
+        measuredHeights.length > 0 ? Math.max(...measuredHeights) : drawingArea.height;
 
       const validPositions = desiredPositions.filter((pos) => pos !== null);
 
-      // Convert to LabelDimension format expected by utility
-      const dimensions = validPositions.map((pos) => {
-        const trackedDimensions = labelDimensions[pos.seriesId];
-        return {
-          seriesId: pos.seriesId,
-          width: trackedDimensions?.width ?? maxLabelWidth,
-          height: trackedDimensions?.height ?? maxLabelHeight,
-          preferredX: pos.x,
-          preferredY: pos.desiredY,
-        };
-      });
+      // Only stack labels that have measured bounds
+      const dimensions = validPositions
+        .map((pos) => {
+          const trackedDimensions = labelDimensions[pos.seriesId];
+          if (
+            trackedDimensions == null ||
+            trackedDimensions.width <= 0 ||
+            trackedDimensions.height <= 0
+          ) {
+            return null;
+          }
+          return {
+            seriesId: pos.seriesId,
+            width: trackedDimensions.width,
+            height: trackedDimensions.height,
+            preferredX: pos.x,
+            preferredY: pos.desiredY,
+          };
+        })
+        .filter((dim): dim is NonNullable<typeof dim> => dim !== null);
 
-      // Calculate Y positions with collision resolution for valid positions only
+      // Calculate Y positions with collision resolution for measured labels only
       const yPositions = calculateLabelYPositions(
         dimensions,
         drawingArea,
@@ -297,9 +322,17 @@ export const ScrubberBeaconLabelGroup = memo<ScrubberBeaconLabelGroupProps>(
         labelMinGap,
       );
 
-      // Return all positions (including null ones)
+      // Return all positions (including null ones). Hide a slot until that series has layout sizes.
       return desiredPositions.map((pos) => {
         if (!pos) return null;
+        const trackedDimensions = labelDimensions[pos.seriesId];
+        if (
+          trackedDimensions == null ||
+          trackedDimensions.width <= 0 ||
+          trackedDimensions.height <= 0
+        ) {
+          return null;
+        }
         return {
           seriesId: pos.seriesId,
           x: pos.x,
diff --git a/packages/mobile-visualization/src/chart/scrubber/ScrubberProvider.tsx b/packages/mobile/src/visualizations/chart/scrubber/ScrubberProvider.tsx
similarity index 99%
rename from packages/mobile-visualization/src/chart/scrubber/ScrubberProvider.tsx
rename to packages/mobile/src/visualizations/chart/scrubber/ScrubberProvider.tsx
index 0989ae598d..be0be769f3 100644
--- a/packages/mobile-visualization/src/chart/scrubber/ScrubberProvider.tsx
+++ b/packages/mobile/src/visualizations/chart/scrubber/ScrubberProvider.tsx
@@ -2,8 +2,8 @@ import React, { useCallback, useMemo } from 'react';
 import { Platform } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
-import { Haptics } from '@coinbase/cds-mobile/utils/haptics';
 
+import { Haptics } from '../../../utils/haptics';
 import { useCartesianChartContext } from '../ChartProvider';
 import { invertSerializableScale, ScrubberContext, type ScrubberContextValue } from '../utils';
 import { getPointOnSerializableScale } from '../utils/point';
diff --git a/packages/mobile-visualization/src/chart/scrubber/__stories__/Scrubber.stories.tsx b/packages/mobile/src/visualizations/chart/scrubber/__stories__/Scrubber.stories.tsx
similarity index 98%
rename from packages/mobile-visualization/src/chart/scrubber/__stories__/Scrubber.stories.tsx
rename to packages/mobile/src/visualizations/chart/scrubber/__stories__/Scrubber.stories.tsx
index 4f3a63f782..55f001f3d4 100644
--- a/packages/mobile-visualization/src/chart/scrubber/__stories__/Scrubber.stories.tsx
+++ b/packages/mobile/src/visualizations/chart/scrubber/__stories__/Scrubber.stories.tsx
@@ -1,13 +1,13 @@
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { useDerivedValue } from 'react-native-reanimated';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
-import { useTheme } from '@coinbase/cds-mobile';
-import { Button, IconButton } from '@coinbase/cds-mobile/buttons';
-import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
-import { Text } from '@coinbase/cds-mobile/typography';
 import { FontWeight, Skia, type SkTextStyle, TextAlign } from '@shopify/react-native-skia';
 
+import { Button, IconButton } from '../../../../buttons';
+import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
+import { useTheme } from '../../../../index';
+import { Box, HStack, VStack } from '../../../../layout';
+import { Text } from '../../../../typography';
 import { useCartesianChartContext } from '../../ChartProvider';
 import { LineChart, SolidLine } from '../../line';
 import {
@@ -1040,7 +1040,7 @@ const ExampleNavigator = () => {
             variant="secondary"
           />
         </HStack>
-        <Box padding={1}>{currentExample.component}</Box>
+        <Example>{currentExample.component}</Example>
       </VStack>
     </ExampleScreen>
   );
diff --git a/packages/mobile-visualization/src/chart/scrubber/index.ts b/packages/mobile/src/visualizations/chart/scrubber/index.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/scrubber/index.ts
rename to packages/mobile/src/visualizations/chart/scrubber/index.ts
diff --git a/packages/mobile-visualization/src/chart/text/ChartText.tsx b/packages/mobile/src/visualizations/chart/text/ChartText.tsx
similarity index 97%
rename from packages/mobile-visualization/src/chart/text/ChartText.tsx
rename to packages/mobile/src/visualizations/chart/text/ChartText.tsx
index 4d556750ca..bd55c87b2c 100644
--- a/packages/mobile-visualization/src/chart/text/ChartText.tsx
+++ b/packages/mobile/src/visualizations/chart/text/ChartText.tsx
@@ -2,8 +2,6 @@ import { memo, useMemo } from 'react';
 import { runOnJS, useAnimatedReaction, useDerivedValue } from 'react-native-reanimated';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { Rect } from '@coinbase/cds-common/types';
-import type { Theme } from '@coinbase/cds-mobile/core/theme';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import {
   type AnimatedProp,
   type Color,
@@ -21,6 +19,8 @@ import {
   type Transforms3d,
 } from '@shopify/react-native-skia';
 
+import type { Theme } from '../../../core/theme';
+import { useTheme } from '../../../hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import { type ChartInset, getChartInset, getColorWithOpacity, unwrapAnimatedValue } from '../utils';
 
@@ -465,16 +465,16 @@ export const ChartText = memo<ChartTextProps>(
       switch (paragraphAlignment) {
         case TextAlign.Center:
           // For center-aligned text, account for half the width
-          minOffset = Math.min(...rects.map((rect) => rect.x - rect.width / 2));
+          minOffset = Math.min(...rects.map((rect) => rect.left - rect.width / 2));
           break;
         case TextAlign.Right:
         case TextAlign.End:
           // For right-aligned text, account for the full width
-          minOffset = Math.min(...rects.map((rect) => rect.x - rect.width));
+          minOffset = Math.min(...rects.map((rect) => rect.left - rect.width));
           break;
         default:
           // For left-aligned text, use the x position directly
-          minOffset = Math.min(...rects.map((rect) => rect.x));
+          minOffset = Math.min(...rects.map((rect) => rect.left));
           break;
       }
 
diff --git a/packages/mobile-visualization/src/chart/text/ChartTextGroup.tsx b/packages/mobile/src/visualizations/chart/text/ChartTextGroup.tsx
similarity index 100%
rename from packages/mobile-visualization/src/chart/text/ChartTextGroup.tsx
rename to packages/mobile/src/visualizations/chart/text/ChartTextGroup.tsx
diff --git a/packages/mobile-visualization/src/chart/text/index.ts b/packages/mobile/src/visualizations/chart/text/index.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/text/index.ts
rename to packages/mobile/src/visualizations/chart/text/index.ts
diff --git a/packages/mobile-visualization/src/chart/utils/__tests__/axis.test.ts b/packages/mobile/src/visualizations/chart/utils/__tests__/axis.test.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/__tests__/axis.test.ts
rename to packages/mobile/src/visualizations/chart/utils/__tests__/axis.test.ts
diff --git a/packages/mobile-visualization/src/chart/utils/__tests__/bar.test.ts b/packages/mobile/src/visualizations/chart/utils/__tests__/bar.test.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/__tests__/bar.test.ts
rename to packages/mobile/src/visualizations/chart/utils/__tests__/bar.test.ts
diff --git a/packages/mobile-visualization/src/chart/utils/__tests__/chart.test.ts b/packages/mobile/src/visualizations/chart/utils/__tests__/chart.test.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/__tests__/chart.test.ts
rename to packages/mobile/src/visualizations/chart/utils/__tests__/chart.test.ts
diff --git a/packages/mobile-visualization/src/chart/utils/__tests__/gradient.test.ts b/packages/mobile/src/visualizations/chart/utils/__tests__/gradient.test.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/__tests__/gradient.test.ts
rename to packages/mobile/src/visualizations/chart/utils/__tests__/gradient.test.ts
diff --git a/packages/mobile-visualization/src/chart/utils/__tests__/path.test.ts b/packages/mobile/src/visualizations/chart/utils/__tests__/path.test.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/__tests__/path.test.ts
rename to packages/mobile/src/visualizations/chart/utils/__tests__/path.test.ts
diff --git a/packages/mobile-visualization/src/chart/utils/__tests__/point.test.ts b/packages/mobile/src/visualizations/chart/utils/__tests__/point.test.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/__tests__/point.test.ts
rename to packages/mobile/src/visualizations/chart/utils/__tests__/point.test.ts
diff --git a/packages/mobile-visualization/src/chart/utils/__tests__/scale.test.ts b/packages/mobile/src/visualizations/chart/utils/__tests__/scale.test.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/__tests__/scale.test.ts
rename to packages/mobile/src/visualizations/chart/utils/__tests__/scale.test.ts
diff --git a/packages/mobile-visualization/src/chart/utils/__tests__/scrubber.test.ts b/packages/mobile/src/visualizations/chart/utils/__tests__/scrubber.test.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/__tests__/scrubber.test.ts
rename to packages/mobile/src/visualizations/chart/utils/__tests__/scrubber.test.ts
diff --git a/packages/mobile-visualization/src/chart/utils/__tests__/transition.test.ts b/packages/mobile/src/visualizations/chart/utils/__tests__/transition.test.ts
similarity index 97%
rename from packages/mobile-visualization/src/chart/utils/__tests__/transition.test.ts
rename to packages/mobile/src/visualizations/chart/utils/__tests__/transition.test.ts
index 378a128c60..61a2e1bb51 100644
--- a/packages/mobile-visualization/src/chart/utils/__tests__/transition.test.ts
+++ b/packages/mobile/src/visualizations/chart/utils/__tests__/transition.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import {
   buildTransition,
@@ -228,7 +228,7 @@ describe('useInterpolator', () => {
 
     // Update value
     value.value = 0.5;
-    rerender();
+    rerender(undefined);
 
     expect(result.current).toBeDefined();
   });
@@ -279,7 +279,7 @@ describe('usePathTransition', () => {
   });
 
   it('should handle path updates', () => {
-    const { result, rerender } = renderHook(
+    const { result, rerender } = renderHook<ReturnType<typeof usePathTransition>, { path: string }>(
       ({ path }) =>
         usePathTransition({
           currentPath: path,
@@ -321,7 +321,7 @@ describe('usePathTransition', () => {
     const nextPath = 'M0,0L30,30';
 
     const { result, rerender } = renderHook(
-      ({ path }) =>
+      ({ path }: { path: string }) =>
         usePathTransition({
           currentPath: path,
           transitions: { update: null },
@@ -364,7 +364,7 @@ describe('usePathTransition', () => {
     const path1 = 'M0,0L10,10';
     const path2 = 'M0,0L20,20';
 
-    const { result, rerender } = renderHook(
+    const { result, rerender } = renderHook<ReturnType<typeof usePathTransition>, { path: string }>(
       ({ path }) =>
         usePathTransition({
           currentPath: path,
diff --git a/packages/mobile-visualization/src/chart/utils/axis.ts b/packages/mobile/src/visualizations/chart/utils/axis.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/axis.ts
rename to packages/mobile/src/visualizations/chart/utils/axis.ts
diff --git a/packages/mobile-visualization/src/chart/utils/bar.ts b/packages/mobile/src/visualizations/chart/utils/bar.ts
similarity index 99%
rename from packages/mobile-visualization/src/chart/utils/bar.ts
rename to packages/mobile/src/visualizations/chart/utils/bar.ts
index bc69979e21..3848b7fc90 100644
--- a/packages/mobile-visualization/src/chart/utils/bar.ts
+++ b/packages/mobile/src/visualizations/chart/utils/bar.ts
@@ -4,7 +4,6 @@ import type { BarBaseProps, BarComponent } from '../bar/Bar';
 import type { BarSeries } from '../bar/BarStack';
 
 import { defaultAxisId as fallbackAxisId } from './axis';
-import type { Series } from './chart';
 import type { CartesianChartLayout } from './context';
 import type { GradientDefinition, GradientStop } from './gradient';
 import { evaluateGradientAtValue } from './gradient';
diff --git a/packages/mobile-visualization/src/chart/utils/chart.ts b/packages/mobile/src/visualizations/chart/utils/chart.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/chart.ts
rename to packages/mobile/src/visualizations/chart/utils/chart.ts
diff --git a/packages/mobile-visualization/src/chart/utils/context.ts b/packages/mobile/src/visualizations/chart/utils/context.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/context.ts
rename to packages/mobile/src/visualizations/chart/utils/context.ts
diff --git a/packages/mobile-visualization/src/chart/utils/gradient.ts b/packages/mobile/src/visualizations/chart/utils/gradient.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/gradient.ts
rename to packages/mobile/src/visualizations/chart/utils/gradient.ts
diff --git a/packages/mobile-visualization/src/chart/utils/index.ts b/packages/mobile/src/visualizations/chart/utils/index.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/index.ts
rename to packages/mobile/src/visualizations/chart/utils/index.ts
diff --git a/packages/mobile-visualization/src/chart/utils/path.ts b/packages/mobile/src/visualizations/chart/utils/path.ts
similarity index 98%
rename from packages/mobile-visualization/src/chart/utils/path.ts
rename to packages/mobile/src/visualizations/chart/utils/path.ts
index a12983bbc4..2c6e5f16c1 100644
--- a/packages/mobile-visualization/src/chart/utils/path.ts
+++ b/packages/mobile/src/visualizations/chart/utils/path.ts
@@ -355,6 +355,9 @@ export const getBarPath = (
  *   2  // 2px radius dots
  * );
  * ```
+ *
+ * @deprecated Prefer a shader for dotted areas instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
  */
 export const getDottedAreaPath = (
   bounds: { x: number; y: number; width: number; height: number },
diff --git a/packages/mobile-visualization/src/chart/utils/point.ts b/packages/mobile/src/visualizations/chart/utils/point.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/point.ts
rename to packages/mobile/src/visualizations/chart/utils/point.ts
diff --git a/packages/mobile-visualization/src/chart/utils/scale.ts b/packages/mobile/src/visualizations/chart/utils/scale.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/scale.ts
rename to packages/mobile/src/visualizations/chart/utils/scale.ts
diff --git a/packages/mobile-visualization/src/chart/utils/scrubber.ts b/packages/mobile/src/visualizations/chart/utils/scrubber.ts
similarity index 100%
rename from packages/mobile-visualization/src/chart/utils/scrubber.ts
rename to packages/mobile/src/visualizations/chart/utils/scrubber.ts
diff --git a/packages/mobile-visualization/src/chart/utils/transition.ts b/packages/mobile/src/visualizations/chart/utils/transition.ts
similarity index 77%
rename from packages/mobile-visualization/src/chart/utils/transition.ts
rename to packages/mobile/src/visualizations/chart/utils/transition.ts
index fdf6555881..c202738aec 100644
--- a/packages/mobile-visualization/src/chart/utils/transition.ts
+++ b/packages/mobile/src/visualizations/chart/utils/transition.ts
@@ -271,47 +271,75 @@ export const usePathTransition = ({
   const normalizedEndShared = useSharedValue(initialSkiaPath);
   const fallbackPathShared = useSharedValue(initialSkiaPath);
   const result = useSharedValue(initialSkiaPath);
+  const animationFrameRef = useRef<number | null>(null);
 
   useEffect(() => {
-    if (targetPathRef.current !== currentPath) {
-      let fromPath = targetPathRef.current;
-      if (interpolatorRef.current) {
-        const p = Math.min(Math.max(progress.value, 0), 1);
-        fromPath = interpolatorRef.current(p);
-      }
-
-      targetPathRef.current = currentPath;
-
-      const { enter, update } = transitionRef.current;
-      const activeTransition = isFirstAnimation.current && enter !== undefined ? enter : update;
-
-      isFirstAnimation.current = false;
-
-      if (activeTransition === null) {
-        const targetPath = Skia.Path.MakeFromSVGString(currentPath) ?? Skia.Path.Make();
-        interpolatorRef.current = null;
-        normalizedStartShared.value = targetPath;
-        normalizedEndShared.value = targetPath;
-        fallbackPathShared.value = targetPath;
-        progress.value = 1;
-        result.value = targetPath;
-        notifyChange(result);
-        return;
-      }
-
-      const pathInterpolator = interpolatePath(fromPath, currentPath);
-      interpolatorRef.current = pathInterpolator;
-
-      normalizedStartShared.value =
-        Skia.Path.MakeFromSVGString(pathInterpolator(pathInterpolationEpsilon)) ?? Skia.Path.Make();
-      normalizedEndShared.value =
-        Skia.Path.MakeFromSVGString(pathInterpolator(1 - pathInterpolationEpsilon)) ??
-        Skia.Path.Make();
-      fallbackPathShared.value = Skia.Path.MakeFromSVGString(currentPath) ?? Skia.Path.Make();
+    if (targetPathRef.current === currentPath) {
+      return;
+    }
+
+    let fromPath = targetPathRef.current;
+    if (interpolatorRef.current) {
+      const p = Math.min(Math.max(progress.value, 0), 1);
+      fromPath = interpolatorRef.current(p);
+    }
+
+    targetPathRef.current = currentPath;
 
+    const { enter, update } = transitionRef.current;
+    const isFirstAnim = isFirstAnimation.current;
+    const activeTransition = isFirstAnim && enter !== undefined ? enter : update;
+
+    isFirstAnimation.current = false;
+
+    if (activeTransition === null) {
+      const targetPath = Skia.Path.MakeFromSVGString(currentPath) ?? Skia.Path.Make();
+      interpolatorRef.current = null;
+      normalizedStartShared.value = targetPath;
+      normalizedEndShared.value = targetPath;
+      fallbackPathShared.value = targetPath;
+      progress.value = 1;
+      result.value = targetPath;
+      notifyChange(result);
+      return;
+    }
+
+    const pathInterpolator = interpolatePath(fromPath, currentPath);
+    interpolatorRef.current = pathInterpolator;
+
+    normalizedStartShared.value =
+      Skia.Path.MakeFromSVGString(pathInterpolator(pathInterpolationEpsilon)) ?? Skia.Path.Make();
+    normalizedEndShared.value =
+      Skia.Path.MakeFromSVGString(pathInterpolator(1 - pathInterpolationEpsilon)) ??
+      Skia.Path.Make();
+    fallbackPathShared.value = Skia.Path.MakeFromSVGString(currentPath) ?? Skia.Path.Make();
+
+    const kickoff = () => {
       progress.value = 0;
       progress.value = buildTransition(1, activeTransition);
+    };
+
+    // Initial enter: defer the kickoff one frame. In Reanimated v4 / worklets
+    // v0.5.2, valueSetter's rAF chain doesn't advance for animation builders
+    // assigned during the first React commit — the animation is set up but
+    // never ticks. Deferring to the next frame puts us in the "warm" state
+    // that updates already enjoy, and the rAF chain runs.
+    if (isFirstAnim) {
+      animationFrameRef.current = requestAnimationFrame(kickoff);
+      return;
     }
+
+    // Cancel any deferred initial kickoff that hasn't fired yet so its stale
+    // enter transition doesn't overwrite this update animation.
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+
+    // Subsequent kickoff (data update or post-layout-settle re-render) — runs
+    // synchronously since the cold-state window only applies to the very first
+    // React commit.
+    kickoff();
   }, [
     currentPath,
     progress,
diff --git a/packages/mobile/src/visualizations/index.ts b/packages/mobile/src/visualizations/index.ts
index a581697264..0a59aaaaf8 100644
--- a/packages/mobile/src/visualizations/index.ts
+++ b/packages/mobile/src/visualizations/index.ts
@@ -1,6 +1,8 @@
+export * from './chart';
 export * from './DefaultProgressCircleContent';
 export * from './getProgressBarLabelParts';
 export * from './ProgressBar';
 export * from './ProgressBarWithFixedLabels';
 export * from './ProgressBarWithFloatLabel';
 export * from './ProgressCircle';
+export * from './sparkline';
diff --git a/packages/mobile-visualization/src/sparkline/Counter.tsx b/packages/mobile/src/visualizations/sparkline/Counter.tsx
similarity index 86%
rename from packages/mobile-visualization/src/sparkline/Counter.tsx
rename to packages/mobile/src/visualizations/sparkline/Counter.tsx
index 28186a2939..9094879f76 100644
--- a/packages/mobile-visualization/src/sparkline/Counter.tsx
+++ b/packages/mobile/src/visualizations/sparkline/Counter.tsx
@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useCounter } from '@coinbase/cds-common/visualizations/useCounter';
-import { Box } from '@coinbase/cds-mobile/layout';
-import type { CounterBaseProps } from '@coinbase/cds-mobile/visualizations/Counter';
+
+import { Box } from '../../layout';
+import type { CounterBaseProps } from '../Counter';
 
 const styles = StyleSheet.create({
   hidden: {
diff --git a/packages/mobile-visualization/src/sparkline/Sparkline.tsx b/packages/mobile/src/visualizations/sparkline/Sparkline.tsx
similarity index 99%
rename from packages/mobile-visualization/src/sparkline/Sparkline.tsx
rename to packages/mobile/src/visualizations/sparkline/Sparkline.tsx
index 66a3dec026..acf0beb732 100644
--- a/packages/mobile-visualization/src/sparkline/Sparkline.tsx
+++ b/packages/mobile/src/visualizations/sparkline/Sparkline.tsx
@@ -6,9 +6,10 @@ import type { ElementChildren, SharedProps } from '@coinbase/cds-common/types';
 import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
 import { getSparklineRange } from '@coinbase/cds-common/visualizations/getSparklineRange';
 import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { generateRandomId } from '@coinbase/cds-utils';
 
+import { useTheme } from '../../hooks/useTheme';
+
 import { generateSparklineAreaWithId } from './generateSparklineWithId';
 import type { SparklineAreaBaseProps } from './SparklineArea';
 import { SparklineAreaPattern } from './SparklineAreaPattern';
diff --git a/packages/mobile-visualization/src/sparkline/SparklineArea.tsx b/packages/mobile/src/visualizations/sparkline/SparklineArea.tsx
similarity index 100%
rename from packages/mobile-visualization/src/sparkline/SparklineArea.tsx
rename to packages/mobile/src/visualizations/sparkline/SparklineArea.tsx
diff --git a/packages/mobile-visualization/src/sparkline/SparklineAreaPattern.tsx b/packages/mobile/src/visualizations/sparkline/SparklineAreaPattern.tsx
similarity index 93%
rename from packages/mobile-visualization/src/sparkline/SparklineAreaPattern.tsx
rename to packages/mobile/src/visualizations/sparkline/SparklineAreaPattern.tsx
index 13973bb508..30e9e61b40 100644
--- a/packages/mobile-visualization/src/sparkline/SparklineAreaPattern.tsx
+++ b/packages/mobile/src/visualizations/sparkline/SparklineAreaPattern.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { Circle, G, Pattern, Rect } from 'react-native-svg';
 import { useSparklineAreaOpacity } from '@coinbase/cds-common/visualizations/useSparklineAreaOpacity';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+
+import { useTheme } from '../../hooks/useTheme';
 
 export type SparklineAreaPatternBaseProps = {
   color: string;
diff --git a/packages/mobile-visualization/src/sparkline/SparklineGradient.tsx b/packages/mobile/src/visualizations/sparkline/SparklineGradient.tsx
similarity index 97%
rename from packages/mobile-visualization/src/sparkline/SparklineGradient.tsx
rename to packages/mobile/src/visualizations/sparkline/SparklineGradient.tsx
index 1c07139634..6016d2fbd7 100644
--- a/packages/mobile-visualization/src/sparkline/SparklineGradient.tsx
+++ b/packages/mobile/src/visualizations/sparkline/SparklineGradient.tsx
@@ -4,9 +4,10 @@ import { getAccessibleForegroundGradient } from '@coinbase/cds-common/color/getA
 import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
 import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
 import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { generateRandomId } from '@coinbase/cds-utils';
 
+import { useTheme } from '../../hooks/useTheme';
+
 import { generateSparklineAreaWithId } from './generateSparklineWithId';
 import type { SparklineBaseProps } from './Sparkline';
 import { SparklineAreaPattern } from './SparklineAreaPattern';
diff --git a/packages/mobile-visualization/src/sparkline/__figma__/Sparkline.figma.tsx b/packages/mobile/src/visualizations/sparkline/__figma__/Sparkline.figma.tsx
similarity index 89%
rename from packages/mobile-visualization/src/sparkline/__figma__/Sparkline.figma.tsx
rename to packages/mobile/src/visualizations/sparkline/__figma__/Sparkline.figma.tsx
index f5b0c4e639..2e3887046d 100644
--- a/packages/mobile-visualization/src/sparkline/__figma__/Sparkline.figma.tsx
+++ b/packages/mobile/src/visualizations/sparkline/__figma__/Sparkline.figma.tsx
@@ -9,7 +9,7 @@ figma.connect(
   'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=320%3A15040',
   {
     imports: [
-      "import { Sparkline } from '@coinbase/cds-mobile-visualization'",
+      "import { Sparkline } from '@coinbase/cds-mobile/visualizations/sparkline'",
       "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath'",
     ],
     example: function Example() {
diff --git a/packages/mobile-visualization/src/sparkline/__stories__/Sparkline.stories.tsx b/packages/mobile/src/visualizations/sparkline/__stories__/Sparkline.stories.tsx
similarity index 88%
rename from packages/mobile-visualization/src/sparkline/__stories__/Sparkline.stories.tsx
rename to packages/mobile/src/visualizations/sparkline/__stories__/Sparkline.stories.tsx
index 27c7dfe3ae..e50ffc1d09 100644
--- a/packages/mobile-visualization/src/sparkline/__stories__/Sparkline.stories.tsx
+++ b/packages/mobile/src/visualizations/sparkline/__stories__/Sparkline.stories.tsx
@@ -5,14 +5,14 @@ import { prices, pricesWithScalingFactor } from '@coinbase/cds-common/internal/d
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
 import { useSparklineArea } from '@coinbase/cds-common/visualizations/useSparklineArea';
 import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';
-import { Cell } from '@coinbase/cds-mobile/cells/Cell';
-import { CellMedia } from '@coinbase/cds-mobile/cells/CellMedia';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { HStack } from '@coinbase/cds-mobile/layout/HStack';
-import { VStack } from '@coinbase/cds-mobile/layout/VStack';
-import { Text } from '@coinbase/cds-mobile/typography';
 
+import { Cell } from '../../../cells/Cell';
+import { CellMedia } from '../../../cells/CellMedia';
+import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
+import { useTheme } from '../../../hooks/useTheme';
+import { HStack } from '../../../layout/HStack';
+import { VStack } from '../../../layout/VStack';
+import { Text } from '../../../typography';
 import { Sparkline } from '../Sparkline';
 import { SparklineArea } from '../SparklineArea';
 
diff --git a/packages/mobile-visualization/src/sparkline/__stories__/SparklineGradient.stories.tsx b/packages/mobile/src/visualizations/sparkline/__stories__/SparklineGradient.stories.tsx
similarity index 91%
rename from packages/mobile-visualization/src/sparkline/__stories__/SparklineGradient.stories.tsx
rename to packages/mobile/src/visualizations/sparkline/__stories__/SparklineGradient.stories.tsx
index c66614b4da..05bf74f8e9 100644
--- a/packages/mobile-visualization/src/sparkline/__stories__/SparklineGradient.stories.tsx
+++ b/packages/mobile/src/visualizations/sparkline/__stories__/SparklineGradient.stories.tsx
@@ -5,13 +5,13 @@ import { prices, pricesWithScalingFactor } from '@coinbase/cds-common/internal/d
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
 import { useSparklineArea } from '@coinbase/cds-common/visualizations/useSparklineArea';
 import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';
-import { Cell } from '@coinbase/cds-mobile/cells/Cell';
-import { CellMedia } from '@coinbase/cds-mobile/cells/CellMedia';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { VStack } from '@coinbase/cds-mobile/layout';
-import { Text } from '@coinbase/cds-mobile/typography';
 
+import { Cell } from '../../../cells/Cell';
+import { CellMedia } from '../../../cells/CellMedia';
+import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
+import { useTheme } from '../../../hooks/useTheme';
+import { VStack } from '../../../layout';
+import { Text } from '../../../typography';
 import { SparklineArea } from '../SparklineArea';
 import { SparklineGradient } from '../SparklineGradient';
 
diff --git a/packages/mobile-visualization/src/sparkline/generateSparklineWithId.ts b/packages/mobile/src/visualizations/sparkline/generateSparklineWithId.ts
similarity index 100%
rename from packages/mobile-visualization/src/sparkline/generateSparklineWithId.ts
rename to packages/mobile/src/visualizations/sparkline/generateSparklineWithId.ts
diff --git a/packages/mobile/src/visualizations/sparkline/index.ts b/packages/mobile/src/visualizations/sparkline/index.ts
new file mode 100644
index 0000000000..5eab72d409
--- /dev/null
+++ b/packages/mobile/src/visualizations/sparkline/index.ts
@@ -0,0 +1,5 @@
+export * from './Sparkline';
+export * from './sparkline-interactive/SparklineInteractive';
+export * from './sparkline-interactive-header/SparklineInteractiveHeader';
+export * from './SparklineArea';
+export * from './SparklineGradient';
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx
similarity index 99%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx
index a7a67c73a2..e5b945fd18 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx
@@ -7,7 +7,8 @@ import type {
   SparklineInteractiveHeaderSignVariant,
   SparklineInteractiveHeaderVariant,
 } from '@coinbase/cds-common/types';
-import { HStack, VStack } from '@coinbase/cds-mobile/layout';
+
+import { HStack, VStack } from '../../../layout';
 
 import { useSparklineInteractiveHeaderStyles } from './useSparklineInteractiveHeaderStyles';
 
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx
similarity index 98%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx
index 5ab1de8746..f408b9b8fe 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx
@@ -9,8 +9,8 @@ figma.connect(
   'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14931&m=dev',
   {
     imports: [
-      "import { SparklineInteractiveHeader } from '@coinbase/cds-mobile-visualization'",
-      "import { SparklineInteractive } from '@coinbase/cds-mobile-visualization'",
+      "import { SparklineInteractiveHeader } from '@coinbase/cds-mobile/visualizations/sparkline'",
+      "import { SparklineInteractive } from '@coinbase/cds-mobile/visualizations/sparkline'",
     ],
     props: {
       compact: figma.boolean('compact'),
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx
similarity index 98%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx
index de9a8c7ef9..40f0b40732 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx
@@ -6,12 +6,12 @@ import {
   type SparklinePeriod,
 } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import type { ChartData, ChartDataPoint, ChartScrubParams } from '@coinbase/cds-common/types';
-import { IconButton } from '@coinbase/cds-mobile/buttons';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { Icon } from '@coinbase/cds-mobile/icons';
-import { Box, HStack } from '@coinbase/cds-mobile/layout';
-import { Text } from '@coinbase/cds-mobile/typography';
 
+import { IconButton } from '../../../../buttons';
+import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
+import { Icon } from '../../../../icons';
+import { Box, HStack } from '../../../../layout';
+import { Text } from '../../../../typography';
 import {
   SparklineInteractive,
   type SparklineInteractiveBaseProps,
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx
similarity index 96%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx
index c289df293e..3cf1b9990c 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx
@@ -1,6 +1,6 @@
-import { DefaultThemeProvider } from '@coinbase/cds-mobile/utils/testHelpers';
 import { render, screen } from '@testing-library/react-native';
 
+import { DefaultThemeProvider } from '../../../../utils/testHelpers';
 import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
 
 const defaultSubHead = {
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive-header/__tests__/useSparklineInteractiveHeaderStyles.test.ts b/packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/__tests__/useSparklineInteractiveHeaderStyles.test.ts
similarity index 90%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive-header/__tests__/useSparklineInteractiveHeaderStyles.test.ts
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/__tests__/useSparklineInteractiveHeaderStyles.test.ts
index 8d28faf187..a7380578bf 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive-header/__tests__/useSparklineInteractiveHeaderStyles.test.ts
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/__tests__/useSparklineInteractiveHeaderStyles.test.ts
@@ -1,8 +1,8 @@
 import type { StyleProp, TextStyle } from 'react-native';
-import { defaultTheme } from '@coinbase/cds-mobile/themes/defaultTheme';
-import { DefaultThemeProvider } from '@coinbase/cds-mobile/utils/testHelpers';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
+import { defaultTheme } from '../../../../themes/defaultTheme';
+import { DefaultThemeProvider } from '../../../../utils/testHelpers';
 import { useSparklineInteractiveHeaderStyles } from '../useSparklineInteractiveHeaderStyles';
 
 const getStyleValue = (styles: StyleProp<TextStyle>, styleProp: keyof TextStyle) =>
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.ts b/packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.ts
similarity index 90%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.ts
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.ts
index b1f88e1b7f..60b3096677 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.ts
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.ts
@@ -2,8 +2,9 @@ import { useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import type { StyleProp, TextStyle } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { getAdjustedFontScale } from '@coinbase/cds-mobile/utils/getAdjustedFontScale';
+
+import { useTheme } from '../../../hooks/useTheme';
+import { getAdjustedFontScale } from '../../../utils/getAdjustedFontScale';
 
 import type { SparklineInteractiveSubHead } from './SparklineInteractiveHeader';
 
@@ -128,16 +129,15 @@ export function useSparklineInteractiveHeaderStyles() {
       subHead: (
         color: SparklineInteractiveSubHeadIconColor,
         useFullWidth = true,
-      ): StyleProp<TextStyle> =>
-        [
-          typography.label1,
-          styles.tabularNumbers,
-          ...(useFullWidth ? [styles.fullWidth] : [{ width: 'auto' }]),
-          styles.inputReset,
-          {
-            color: theme.color[variantColorMap[color]],
-          },
-        ] as TextStyle,
+      ): StyleProp<TextStyle> => [
+        typography.label1,
+        styles.tabularNumbers,
+        ...(useFullWidth ? [styles.fullWidth] : [{ width: 'auto' as const }]),
+        styles.inputReset,
+        {
+          color: theme.color[variantColorMap[color]],
+        },
+      ],
       subHeadAccessory: (): StyleProp<TextStyle> => [
         typography.label2,
         styles.inputReset,
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineAccessibleView.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineAccessibleView.tsx
similarity index 100%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineAccessibleView.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineAccessibleView.tsx
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractive.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractive.tsx
similarity index 98%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractive.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractive.tsx
index 9d5ca57d31..5b9f938442 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractive.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractive.tsx
@@ -15,14 +15,15 @@ import { minMax } from '@coinbase/cds-common/utils/chart';
 import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
 import { useSparklineCoordinates } from '@coinbase/cds-common/visualizations/useSparklineCoordinates';
 import { chartFallbackNegative, chartFallbackPositive } from '@coinbase/cds-lottie-files';
-import { Lottie } from '@coinbase/cds-mobile/animation';
-import { useScreenReaderStatus } from '@coinbase/cds-mobile/hooks/useScreenReaderStatus';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box } from '@coinbase/cds-mobile/layout';
 import { emptyArray, noop } from '@coinbase/cds-utils';
 import isEqual from 'lodash/isEqual';
 import isObject from 'lodash/isObject';
 
+import { Lottie } from '../../../animation';
+import { useScreenReaderStatus } from '../../../hooks/useScreenReaderStatus';
+import { useTheme } from '../../../hooks/useTheme';
+import { Box } from '../../../layout';
+
 import { SparklineAccessibleView } from './SparklineAccessibleView';
 import { SparklineInteractiveHoverDate } from './SparklineInteractiveHoverDate';
 import { SparklineInteractiveLineVertical } from './SparklineInteractiveLineVertical';
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.tsx
similarity index 100%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.tsx
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.tsx
similarity index 98%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.tsx
index 89f727222a..027dc6c6da 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.tsx
@@ -1,7 +1,8 @@
 import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
 import { Animated, StyleSheet, TextInput } from 'react-native';
 import type { ChartScrubParams } from '@coinbase/cds-common/types/Chart';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+
+import { useTheme } from '../../../hooks/useTheme';
 
 import type { SparklineInteractiveBaseProps } from './SparklineInteractive';
 import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.tsx
similarity index 98%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.tsx
index f4813b761d..417faa6bf8 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.tsx
@@ -3,7 +3,8 @@ import { Animated as RNAnimated, StyleSheet } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { Line, Svg } from 'react-native-svg';
 import { maskOpacity } from '@coinbase/cds-common/tokens/sparkline';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+
+import { useTheme } from '../../../hooks/useTheme';
 
 import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
 import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.tsx
similarity index 92%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.tsx
index 0b4720f21c..76867e783e 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.tsx
@@ -3,11 +3,12 @@ import { Animated, StyleSheet } from 'react-native';
 import type { ViewStyle } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { useDateLookup } from '@coinbase/cds-common/visualizations/useDateLookup';
-import { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { TextLabel2 } from '@coinbase/cds-mobile/typography';
 import times from 'lodash/times';
 
+import { useLayout } from '../../../hooks/useLayout';
+import { useTheme } from '../../../hooks/useTheme';
+import { Text } from '../../../typography';
+
 import type { ChartFormatDate, ChartGetMarker } from './SparklineInteractive';
 import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
 
@@ -39,15 +40,16 @@ const SparklineInteractiveMarkerDate: React.FunctionComponent<
   }, [label.width, label.x]);
 
   return (
-    <TextLabel2
+    <Text
       align="center"
       color="fgMuted"
+      font="label2"
       onLayout={onLayout}
       paddingTop={3}
       style={styles.label}
     >
       {getFormattedDate(x)}
-    </TextLabel2>
+    </Text>
   );
 });
 
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveMinMax.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveMinMax.tsx
similarity index 91%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveMinMax.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveMinMax.tsx
index 4f11b15def..e62aa9e279 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveMinMax.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveMinMax.tsx
@@ -2,9 +2,10 @@ import React, { memo, useCallback, useMemo, useRef } from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import type { LayoutChangeEvent } from 'react-native';
 import type { ChartDataPoint, ChartFormatAmount, ChartXFunction } from '@coinbase/cds-common/types';
-import { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { TextLabel2 } from '@coinbase/cds-mobile/typography';
+
+import { useLayout } from '../../../hooks/useLayout';
+import { useTheme } from '../../../hooks/useTheme';
+import { Text } from '../../../typography';
 
 import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
 import { useMinMaxTransform } from './useMinMaxTransform';
@@ -68,9 +69,9 @@ const SparklineInteractiveMinMaxContent: React.FunctionComponent<
 
   return (
     <Animated.View pointerEvents="none" style={rootStyle}>
-      <TextLabel2 color="fgMuted" onLayout={onLayout} padding={0} style={textLabelStyle}>
+      <Text color="fgMuted" font="label2" onLayout={onLayout} padding={0} style={textLabelStyle}>
         {children}
-      </TextLabel2>
+      </Text>
     </Animated.View>
   );
 });
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractivePanGestureHandler.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractivePanGestureHandler.tsx
similarity index 98%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractivePanGestureHandler.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractivePanGestureHandler.tsx
index f49a5c41f9..2273ffd54c 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractivePanGestureHandler.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractivePanGestureHandler.tsx
@@ -3,9 +3,10 @@ import { Animated as RNAnimated, Platform, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS } from 'react-native-reanimated';
 import type { ChartGetMarker, ChartScrubParams } from '@coinbase/cds-common/types/Chart';
-import { Haptics } from '@coinbase/cds-mobile/utils/haptics';
 import { noop } from '@coinbase/cds-utils';
 
+import { Haptics } from '../../../utils/haptics';
+
 import { type SparklineInteractiveProps } from './SparklineInteractive';
 import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
 import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractivePaths.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractivePaths.tsx
similarity index 100%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractivePaths.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractivePaths.tsx
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.tsx
similarity index 87%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.tsx
index d0f4f2e9e6..2bbc1b2fc0 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.tsx
@@ -3,14 +3,15 @@ import { ScrollView, StyleSheet } from 'react-native';
 import type { LayoutChangeEvent } from 'react-native';
 import { periodLabelMap } from '@coinbase/cds-common/tokens/sparkline';
 import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
-import { useHorizontallyScrollingPressables } from '@coinbase/cds-mobile/hooks/useHorizontallyScrollingPressables';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box } from '@coinbase/cds-mobile/layout/Box';
-import { HStack } from '@coinbase/cds-mobile/layout/HStack';
-import { OverflowGradient } from '@coinbase/cds-mobile/layout/OverflowGradient';
-import { Pressable } from '@coinbase/cds-mobile/system/Pressable';
-import { TextLabel1 } from '@coinbase/cds-mobile/typography';
-import { Haptics } from '@coinbase/cds-mobile/utils/haptics';
+
+import { useHorizontallyScrollingPressables } from '../../../hooks/useHorizontallyScrollingPressables';
+import { useTheme } from '../../../hooks/useTheme';
+import { Box } from '../../../layout/Box';
+import { HStack } from '../../../layout/HStack';
+import { OverflowGradient } from '../../../layout/OverflowGradient';
+import { Pressable } from '../../../system/Pressable';
+import { Text } from '../../../typography';
+import { Haptics } from '../../../utils/haptics';
 
 import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
 
@@ -84,9 +85,9 @@ function SparklineInteractivePeriodWithGeneric<Period extends string>({
         borderRadius={1000}
         onPress={handleOnPress}
       >
-        <TextLabel1 paddingX={2} paddingY={1} style={textStyle}>
+        <Text font="label1" paddingX={2} paddingY={1} style={textStyle}>
           {period.label}
-        </TextLabel1>
+        </Text>
       </Pressable>
     </Box>
   );
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveProvider.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveProvider.tsx
similarity index 99%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveProvider.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveProvider.tsx
index 86d4e6236a..eed5afb63b 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveProvider.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveProvider.tsx
@@ -46,7 +46,7 @@ type SparklineInteractiveContextInterface = {
 const SparklineInteractiveContext = createContext<SparklineInteractiveContextInterface>({
   isFallbackVisible: true,
   markerXPosition: makeMutable(0),
-  markerGestureState: makeMutable(0),
+  markerGestureState: makeMutable<0 | 1>(0),
   showFallback: noop,
   hideFallback: noop,
   chartOpacity: new Animated.Value(0),
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx
similarity index 98%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx
index 19cb09dd65..56334e01f9 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx
@@ -5,10 +5,11 @@ import type { ChartDataPoint, ChartTimeseries } from '@coinbase/cds-common/types
 import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
 import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
 import { useTimeseriesPaths } from '@coinbase/cds-common/visualizations/useTimeseriesPaths';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import * as interpolate from 'd3-interpolate-path';
 import type { Area, Line } from 'd3-shape';
 
+import { useTheme } from '../../../hooks/useTheme';
+
 import { useInterruptiblePathAnimation } from './useInterruptiblePathAnimation';
 
 export type TimeseriesPathOnRenderParams = {
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx
similarity index 95%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx
index f1100bce79..2d069f433b 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx
@@ -7,7 +7,9 @@ figma.connect(
   SparklineInteractive,
   'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=320-14858&m=dev',
   {
-    imports: ["import { SparklineInteractive } from '@coinbase/cds-mobile-visualization'"],
+    imports: [
+      "import { SparklineInteractive } from '@coinbase/cds-mobile/visualizations/sparkline'",
+    ],
     props: {
       compact: figma.boolean('compact'),
       disableScrubbing: figma.boolean('scrubbing', {
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx
similarity index 98%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx
index f5bf3c99df..2947398027 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx
@@ -7,10 +7,10 @@ import {
   strokeColor,
 } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import type { ChartData, ChartDataPoint, ChartScrubParams } from '@coinbase/cds-common/types';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { Box } from '@coinbase/cds-mobile/layout';
-import { Text } from '@coinbase/cds-mobile/typography';
 
+import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
+import { Box } from '../../../../layout';
+import { Text } from '../../../../typography';
 import {
   SparklineInteractiveHeader,
   type SparklineInteractiveHeaderRef,
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx
similarity index 97%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx
index 71c132e8df..a62268a88c 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
-import { DefaultThemeProvider } from '@coinbase/cds-mobile/utils/testHelpers';
 import { render, screen } from '@testing-library/react-native';
 
+import { DefaultThemeProvider } from '../../../../utils/testHelpers';
 import { SparklineInteractiveHeader } from '../..';
 import { SparklineInteractive } from '../SparklineInteractive';
 
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractiveHoverDate.test.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractiveHoverDate.test.tsx
similarity index 94%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractiveHoverDate.test.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractiveHoverDate.test.tsx
index b1b837278b..79a91ca2b0 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractiveHoverDate.test.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractiveHoverDate.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Animated } from 'react-native';
-import { DefaultThemeProvider } from '@coinbase/cds-mobile/utils/testHelpers';
 import { render } from '@testing-library/react-native';
 
+import { DefaultThemeProvider } from '../../../../utils/testHelpers';
 import {
   setTransform,
   SparklineInteractiveHoverDate,
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractivePanGestureHandler.test.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractivePanGestureHandler.test.tsx
similarity index 92%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractivePanGestureHandler.test.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractivePanGestureHandler.test.tsx
index f69dd4b778..b2e946eeac 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractivePanGestureHandler.test.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractivePanGestureHandler.test.tsx
@@ -1,7 +1,7 @@
 import { Text } from 'react-native';
-import { DefaultThemeProvider } from '@coinbase/cds-mobile/utils/testHelpers';
 import { render, screen } from '@testing-library/react-native';
 
+import { DefaultThemeProvider } from '../../../../utils/testHelpers';
 import { SparklineInteractivePanGestureHandler } from '../SparklineInteractivePanGestureHandler';
 
 describe('SparklineInteractivePanGestureHandler.test', () => {
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx
similarity index 94%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx
index 8a457b1405..da4ddaf406 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx
@@ -1,6 +1,6 @@
-import { DefaultThemeProvider } from '@coinbase/cds-mobile/utils/testHelpers';
 import { fireEvent, render, screen } from '@testing-library/react-native';
 
+import { DefaultThemeProvider } from '../../../../utils/testHelpers';
 import { SparklineInteractivePeriodSelector } from '../SparklineInteractivePeriodSelector';
 
 const periods = [
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractiveTimeseriesPaths.test.tsx b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractiveTimeseriesPaths.test.tsx
similarity index 91%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractiveTimeseriesPaths.test.tsx
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractiveTimeseriesPaths.test.tsx
index f1ef895b69..e684ba7e9e 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractiveTimeseriesPaths.test.tsx
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractiveTimeseriesPaths.test.tsx
@@ -1,7 +1,7 @@
 import type { ChartTimeseries } from '@coinbase/cds-common';
-import { DefaultThemeProvider } from '@coinbase/cds-mobile/utils/testHelpers';
 import { render } from '@testing-library/react-native';
 
+import { DefaultThemeProvider } from '../../../../utils/testHelpers';
 import { SparklineInteractiveTimeseriesPaths } from '../SparklineInteractiveTimeseriesPaths';
 
 describe('SparklineInteractiveTimeseriesPaths.test', () => {
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/useMinMaxTransform.test.ts b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/useMinMaxTransform.test.ts
similarity index 86%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/useMinMaxTransform.test.ts
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/useMinMaxTransform.test.ts
index 5048b438f1..0a628218e7 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/__tests__/useMinMaxTransform.test.ts
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/__tests__/useMinMaxTransform.test.ts
@@ -1,7 +1,7 @@
 import { Animated } from 'react-native';
-import { DefaultThemeProvider } from '@coinbase/cds-mobile/utils/testHelpers';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
+import { DefaultThemeProvider } from '../../../../utils/testHelpers';
 import { useMinMaxTransform } from '../useMinMaxTransform';
 
 jest.useFakeTimers();
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.ts b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.ts
similarity index 94%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.ts
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.ts
index 273266cce7..9989cb6ea2 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.ts
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.ts
@@ -1,5 +1,5 @@
 import { Animated } from 'react-native';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import { useInterruptiblePathAnimation } from './useInterruptiblePathAnimation';
 
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/useInterruptiblePathAnimation.ts b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/useInterruptiblePathAnimation.ts
similarity index 100%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/useInterruptiblePathAnimation.ts
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/useInterruptiblePathAnimation.ts
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/useMinMaxTransform.ts b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/useMinMaxTransform.ts
similarity index 97%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/useMinMaxTransform.ts
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/useMinMaxTransform.ts
index 6ddc2c5d7a..042c7eb389 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/useMinMaxTransform.ts
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/useMinMaxTransform.ts
@@ -2,7 +2,8 @@ import { useEffect } from 'react';
 import { Animated } from 'react-native';
 import type { LayoutRectangle } from 'react-native';
 import { durations } from '@coinbase/cds-common/motion/tokens';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+
+import { useTheme } from '../../../hooks/useTheme';
 
 import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
 import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/useOpacityAnimation.ts b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/useOpacityAnimation.ts
similarity index 100%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/useOpacityAnimation.ts
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/useOpacityAnimation.ts
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts
similarity index 96%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts
index 913fa95f8b..7a3f4efbf6 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts
@@ -5,7 +5,8 @@ import {
   chartCompactHeight,
   chartHeight as chartHeightToken,
 } from '@coinbase/cds-common/tokens/sparkline';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+
+import { useTheme } from '../../../hooks/useTheme';
 
 import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
 
diff --git a/packages/mobile-visualization/src/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.ts b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.ts
similarity index 93%
rename from packages/mobile-visualization/src/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.ts
rename to packages/mobile/src/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.ts
index a20066a0c2..a29d317042 100644
--- a/packages/mobile-visualization/src/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.ts
+++ b/packages/mobile/src/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.ts
@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { borderWidth, lineDashArray, lineOpacity } from '@coinbase/cds-common/tokens/sparkline';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+
+import { useTheme } from '../../../hooks/useTheme';
 
 const staticLineProps = {
   x1: 0,
diff --git a/packages/ui-mobile-playground/CHANGELOG.md b/packages/ui-mobile-playground/CHANGELOG.md
deleted file mode 100644
index 79d34ff184..0000000000
--- a/packages/ui-mobile-playground/CHANGELOG.md
+++ /dev/null
@@ -1,191 +0,0 @@
-# @coinbase/ui-mobile-playground
-
-> [NPM registry](https://www.npmjs.com/package/@coinbase/ui-mobile-playground)
-
-All notable changes to this project will be documented in this file.
-
-`@coinbase/ui-mobile-playground` adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-<!-- template-start -->
-
-## 4.21.0 (5/13/2026 PST)
-
-#### 🚀 Updates
-
-- Feat: add illustration theming via applyTheme prop. [[#672](https://github.com/coinbase/cds/pull/672)]
-
-## 4.20.0 (4/27/2026 PST)
-
-#### 🚀 Updates
-
-- Update icon svg map. [[#645](https://github.com/coinbase/cds/pull/645)]
-
-## 4.19.0 (4/20/2026 PST)
-
-#### 🚀 Updates
-
-- Update icon svg map. [[#629](https://github.com/coinbase/cds/pull/629)]
-
-## 4.18.0 (4/13/2026 PST)
-
-#### 🚀 Updates
-
-- Add route for PercentageBarChart. [[#550](https://github.com/coinbase/cds/pull/550)]
-
-## 4.17.0 (4/9/2026 PST)
-
-#### 🚀 Updates
-
-- Update svg map for latest icon release.
-
-## 4.16.0 (3/30/2026 PST)
-
-#### 🚀 Updates
-
-- Add mobile component config route. [[#507](https://github.com/coinbase/cds/pull/507)]
-
-## 4.15.2 (3/27/2026 PST)
-
-#### 🐞 Fixes
-
-- Fit lint errors. [[#528](https://github.com/coinbase/cds/pull/528)]
-
-## 4.15.1 (3/26/2026 PST)
-
-#### 🐞 Fixes
-
-- Remove detox dependency. [[#517](https://github.com/coinbase/cds/pull/517)]
-
-## 4.15.0 (3/23/2026 PST)
-
-#### 🚀 Updates
-
-- Add custom modal padding route. [[#534](https://github.com/coinbase/cds/pull/534)]
-
-## 4.14.0 (3/18/2026 PST)
-
-#### 🚀 Updates
-
-- Add a route for new Calendar component. [[#139](https://github.com/coinbase/cds/pull/139)]
-
-## 4.13.0 (3/17/2026 PST)
-
-#### 🚀 Updates
-
-- Update svg map for new illustrations. [[#511](https://github.com/coinbase/cds/pull/511)]
-
-## 4.12.0 (3/11/2026 PST)
-
-#### 🚀 Updates
-
-- Update mobile routes. [[#492](https://github.com/coinbase/cds/pull/492)]
-
-## 4.11.0 (3/10/2026 PST)
-
-#### 🚀 Updates
-
-- Add new route for Fallback component. [[#388](https://github.com/coinbase/cds/pull/388)]
-
-## 4.10.0 (3/9/2026 PST)
-
-#### 🚀 Updates
-
-- Update icons. [[#486](https://github.com/coinbase/cds/pull/486)]
-
-## 4.9.0 (2/20/2026 PST)
-
-#### 🚀 Updates
-
-- Add new mobile routes. [[#400](https://github.com/coinbase/cds/pull/400)]
-
-## 4.8.0 (2/6/2026 PST)
-
-#### 🚀 Updates
-
-- Add new tray design. [[#349](https://github.com/coinbase/cds/pull/349)]
-
-## 4.7.0 (2/4/2026 PST)
-
-#### 🚀 Updates
-
-- Added routes for MediaCard, MessagingCard, and alpha DataCard. [[#329](https://github.com/coinbase/cds/pull/329)]
-
-## 4.6.0 (2/4/2026 PST)
-
-#### 🚀 Updates
-
-- Add new screen. [[#366](https://github.com/coinbase/cds/pull/366)]
-
-## 4.5.12 (1/13/2026 PST)
-
-#### 🐞 Fixes
-
-- Regenerate routes. [[#302](https://github.com/coinbase/cds/pull/302)]
-
-## 4.5.11 (12/22/2025 PST)
-
-#### 🐞 Fixes
-
-- Chore: update icon svg map. [[#275](https://github.com/coinbase/cds/pull/275)]
-
-## 4.5.10 (12/11/2025 PST)
-
-#### 🐞 Fixes
-
-- Update svg map. [[#232](https://github.com/coinbase/cds/pull/232)]
-
-## 4.5.9 (12/2/2025 PST)
-
-#### 🐞 Fixes
-
-- Regenerate routes. [[#200](https://github.com/coinbase/cds/pull/200)]
-
-## 4.5.8 (12/1/2025 PST)
-
-#### 🐞 Fixes
-
-- Chore: QOL improvements for searching/navigating example component routes. [[#199](https://github.com/coinbase/cds/pull/199)]
-
-## 4.5.7 (11/19/2025 PST)
-
-#### 🐞 Fixes
-
-- Update icon map. [[#177](https://github.com/coinbase/cds/pull/177)]
-
-#### 📘 Misc
-
-- Update icon svg map. [[#138](https://github.com/coinbase/cds/pull/138)]
-
-## 4.5.6 (11/4/2025 PST)
-
-This is an artificial version bump with no new change.
-
-## 4.5.5 (10/27/2025 PST)
-
-This is an artificial version bump with no new change.
-
-## 4.5.4 (10/6/2025 PST)
-
-This is an artificial version bump with no new change.
-
-## 4.5.3 (10/3/2025 PST)
-
-#### 🐞 Fixes
-
-- Update icon map.
-
-## 4.5.2 (10/2/2025 PST)
-
-#### 🐞 Fixes
-
-- Chore: add clear error message when icon is missing from icon<>svg map file.
-
-## 4.5.1 (10/1/2025 PST)
-
-#### 🐞 Fixes
-
-- Update links for new repo. [[#42](https://github.com/coinbase/cds/pull/42)]
-
-## 4.5.0 (9/18/2025 PST)
-
-- Prepare for open source release.
diff --git a/packages/ui-mobile-playground/README.md b/packages/ui-mobile-playground/README.md
deleted file mode 100644
index 4eac3d2435..0000000000
--- a/packages/ui-mobile-playground/README.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# @coinbase/ui-mobile-playground
-
-This package contains the Mobile Playground UI that renders our storybook mobile components.
-
-## Releasing UI Mobile Playground
-
-1. Commit your changes & open a PR
-
-2. Bump the package version and update the changelog
-
-```shell
-yarn bump-version ui-mobile-playground
-```
-
-- When prompted, do the following:
-  - Type of change?: Select what makes the most sense
-  - Changelog message?: Short and sweet description :)
-  - PR number?: Copy/paste your PR number
-  - Skip the rest (press enter to use defaults)
-
-3. Commit and push the changes to your existing PR. Get reviews & merge.
-
-<!-- 4. TODO: add a step to check deployment status -->
-
-5. After the deploy has succeeded, verify that the new package was published at the [production Coinbase NPM registry](https://npmjs.com/package/@coinbase/ui/repos/tree/General/cb-npm-master). It usually takes about 10 min or so for the package to be uploaded. Look for the version number at the bottom of the artifact list in the [package directory](https://npmjs.com/package/@coinbase/ui/repos/tree/General/cb-npm-master/@coinbase/ui-mobile-playground/-/@coinbase/ui-mobile-playground-1.0.0-rc.1.tgz).
diff --git a/packages/ui-mobile-playground/deploy.yml b/packages/ui-mobile-playground/deploy.yml
deleted file mode 100644
index 3107158924..0000000000
--- a/packages/ui-mobile-playground/deploy.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-engine: Node
-build_name: package-ui-mobile-playground
-continuous: true
diff --git a/packages/ui-mobile-playground/docker-compose.yml b/packages/ui-mobile-playground/docker-compose.yml
deleted file mode 100644
index b12d94768b..0000000000
--- a/packages/ui-mobile-playground/docker-compose.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-version: '3'
-services:
-  app:
-    build:
-      context: ../../
-      dockerfile: packages/ui-mobile-playground/publish.Dockerfile
diff --git a/packages/ui-mobile-playground/package.json b/packages/ui-mobile-playground/package.json
deleted file mode 100644
index bc3a47f0ff..0000000000
--- a/packages/ui-mobile-playground/package.json
+++ /dev/null
@@ -1,61 +0,0 @@
-{
-  "name": "@coinbase/ui-mobile-playground",
-  "version": "4.21.0",
-  "description": "Mobile UI Components in a Playground",
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:coinbase/cds.git",
-    "directory": "packages/ui-mobile-playground"
-  },
-  "routes": "./esm/routes.js",
-  "type": "module",
-  "main": "./esm/index.js",
-  "types": "./dts/index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./dts/index.d.ts",
-      "default": "./esm/index.js"
-    },
-    "./components": {
-      "types": "./dts/components/index.d.ts",
-      "default": "./esm/components/index.js"
-    },
-    "./*": {
-      "types": "./dts/*.d.ts",
-      "default": "./esm/*.js"
-    }
-  },
-  "sideEffects": false,
-  "files": [
-    "dts",
-    "esm",
-    "src",
-    "CHANGELOG"
-  ],
-  "peerDependencies": {
-    "@coinbase/cds-common": "workspace:^",
-    "@coinbase/cds-mobile": "workspace:^",
-    "@coinbase/cds-mobile-visualization": "workspace:^",
-    "@react-navigation/elements": "^1.3.17",
-    "@react-navigation/native": "^6.1.6",
-    "@react-navigation/stack": "^6.3.16",
-    "react": "^18.3.1",
-    "react-native": "^0.74.5",
-    "react-native-safe-area-context": "^4.10.5"
-  },
-  "dependencies": {
-    "lodash": "^4.17.21"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
-    "@react-navigation/elements": "^1.3.17",
-    "@react-navigation/native": "^6.1.6",
-    "@react-navigation/stack": "^6.3.16",
-    "@types/react": "^18.3.12",
-    "react-native-safe-area-context": "4.10.5"
-  }
-}
diff --git a/packages/ui-mobile-playground/publish.Dockerfile b/packages/ui-mobile-playground/publish.Dockerfile
deleted file mode 100644
index 4389fd0b20..0000000000
--- a/packages/ui-mobile-playground/publish.Dockerfile
+++ /dev/null
@@ -1,20 +0,0 @@
-FROM 652969937640.dkr.ecr.us-east-1.amazonaws.com/containers/node:v22-ub22
-
-RUN apt-get update && apt-get install
-
-WORKDIR /repo
-
-COPY . .
-
-# Install dependencies
-RUN yarn --immutable
-
-# Build the package with nx
-RUN yarn nx run ui-mobile-playground:typecheck:prod
-RUN yarn nx run ui-mobile-playground:build:prod
-
-# Prepare the package for publish
-RUN cd /repo/packages/ui-mobile-playground && yarn pack
-RUN mv /repo/packages/ui-mobile-playground /shared
-
-WORKDIR /shared
diff --git a/packages/ui-mobile-playground/scripts/generateIconSvgMap.ts b/packages/ui-mobile-playground/scripts/generateIconSvgMap.ts
deleted file mode 100644
index eb4f3e3d87..0000000000
--- a/packages/ui-mobile-playground/scripts/generateIconSvgMap.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-
-const svgOutputPath = path.join(process.cwd(), 'packages', 'icons', 'src', 'svgs');
-const nativeMapOutputPath = path.join(
-  process.cwd(),
-  'packages',
-  'ui-mobile-playground',
-  'src',
-  '__generated__',
-  'iconSvgMap.ts',
-);
-
-/**
- * Generates a React Native SVG map file that reads each SVG file content
- * and exports a map keyed by `${name}-${size}-${state}` with content strings.
- */
-export const generateSvgMap = (): void => {
-  console.log('Generating React Native SVG map...');
-
-  // Read all SVG files from the output directory
-  const svgFiles: string[] = fs
-    .readdirSync(svgOutputPath)
-    .filter((file: string) => file.endsWith('.svg'))
-    .sort((a: string, b: string) => a.localeCompare(b));
-
-  if (svgFiles.length === 0) {
-    console.log('No SVG files found, skipping SVG map generation');
-    return;
-  }
-
-  const mapEntries: string[] = [];
-
-  for (const file of svgFiles) {
-    const base: string = file.replace(/\.svg$/, '');
-    const svgFilePath: string = path.join(svgOutputPath, file);
-
-    // Read the SVG file content as string
-    const svgContent: string = fs.readFileSync(svgFilePath, 'utf8');
-
-    // Escape quotes and newlines for JavaScript string literal
-    const escapedContent: string = svgContent
-      .replace(/\\/g, '\\\\')
-      .replace(/"/g, '\\"')
-      .replace(/\n/g, '\\n')
-      .replace(/\r/g, '\\r');
-
-    mapEntries.push(`  '${base}': { content: "${escapedContent}" },`);
-  }
-
-  const header: string = `/**
- * DO NOT MODIFY
- * This file is generated by ui-mobile-playground/scripts/generateIconSvgMap.ts
- * 
- * Why this exists:
- * - Provides a static map of icon names to their SVG content for rendering Icons directly with react-native-svg components
- *
- * What this provides:
- * - A static map of iconName-12|16|24|32-active|inactive → { content: "svg-string" }
- *
- * Usage:
- * - Access SVG string content via: svgMap['icon-name-12-active'].content
- */`;
-
-  const content: string = `${header}
-
-export const svgMap: Record<string, SvgMapEntry> = {
-${mapEntries.join('\n')}
-} as const;
-
-export type SvgMapEntry = { content: string };
-export type SvgMap = Record<string, SvgMapEntry>;
-export type SvgKey = keyof typeof svgMap;
-
-export default svgMap;
-`;
-
-  // Ensure the output directory exists
-  const outputDir: string = path.dirname(nativeMapOutputPath);
-  if (!fs.existsSync(outputDir)) {
-    fs.mkdirSync(outputDir, { recursive: true });
-  }
-
-  // Write the file
-  fs.writeFileSync(nativeMapOutputPath, content, 'utf8');
-
-  console.log(
-    `Generated React Native SVG map with ${svgFiles.length} entries -> ${path.relative(
-      process.cwd(),
-      nativeMapOutputPath,
-    )}`,
-  );
-};
-
-generateSvgMap();
diff --git a/packages/ui-mobile-playground/src/components/Playground.tsx b/packages/ui-mobile-playground/src/components/Playground.tsx
deleted file mode 100644
index ed7709f263..0000000000
--- a/packages/ui-mobile-playground/src/components/Playground.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { memo, useMemo } from 'react';
-import type { ColorScheme } from '@coinbase/cds-common/core/theme';
-import type { StackNavigationOptions } from '@react-navigation/stack';
-import { createStackNavigator, HeaderStyleInterpolators } from '@react-navigation/stack';
-
-import { ExamplesListScreen } from './ExamplesListScreen';
-import { ExamplesSearchProvider } from './ExamplesSearchProvider';
-import { IconSheetScreen } from './IconSheetScreen';
-import type { PlaygroundRoute } from './PlaygroundRoute';
-import { createStaticRoute, initialRouteKey, searchRouteKey } from './staticRoutes';
-import { transformRouteToNavComponent } from './transformRouteToNavComponent';
-import { useExampleNavigatorProps } from './useExampleNavigatorProps';
-
-const Stack = createStackNavigator();
-
-type PlaygroundProps = {
-  routes?: PlaygroundRoute[];
-  listScreenTitle?: string;
-  setColorScheme?: React.Dispatch<React.SetStateAction<ColorScheme>>;
-};
-
-const PlaygroundContent = memo(
-  ({ routes = [], listScreenTitle, setColorScheme }: PlaygroundProps) => {
-    const navigatorProps = useExampleNavigatorProps({ setColorScheme });
-
-    const routeKeys = useMemo(() => {
-      return routes.map(({ key }) => key);
-    }, [routes]);
-
-    const { key: listScreenKey, ...listScreenProps } = useMemo(() => {
-      let options: StackNavigationOptions = {};
-
-      if (listScreenTitle) {
-        options = { ...options, title: listScreenTitle };
-      }
-
-      return {
-        ...transformRouteToNavComponent({
-          route: createStaticRoute(initialRouteKey, ExamplesListScreen),
-          options,
-        }),
-        initialParams: { routeKeys },
-      };
-    }, [listScreenTitle, routeKeys]);
-
-    const { key: searchScreenKey, ...searchScreenProps } = useMemo(() => {
-      return {
-        ...transformRouteToNavComponent({
-          route: createStaticRoute(searchRouteKey, ExamplesListScreen),
-        }),
-        initialParams: { routeKeys },
-      };
-    }, [routeKeys]);
-
-    const exampleScreens = useMemo(
-      () =>
-        [...routes].map((route) => {
-          const { key, ...routeProps } = transformRouteToNavComponent({
-            route,
-          });
-          return <Stack.Screen key={key} {...routeProps} />;
-        }),
-      [routes],
-    );
-
-    return (
-      <Stack.Navigator {...navigatorProps}>
-        <Stack.Screen key={listScreenKey} {...listScreenProps} />
-        <Stack.Screen key={searchScreenKey} {...searchScreenProps} />
-        <Stack.Screen
-          key="IconSheet"
-          component={IconSheetScreen}
-          initialParams={routeKeys}
-          name="DebugIconSheet"
-          options={{
-            title: 'Icon Sheet',
-            headerStyleInterpolator: HeaderStyleInterpolators.forFade,
-          }}
-        />
-        {exampleScreens}
-      </Stack.Navigator>
-    );
-  },
-);
-
-export const Playground = memo((props: PlaygroundProps) => {
-  return (
-    <ExamplesSearchProvider>
-      <PlaygroundContent {...props} />
-    </ExamplesSearchProvider>
-  );
-});
diff --git a/packages/ui-mobile-playground/src/components/PlaygroundRoute.ts b/packages/ui-mobile-playground/src/components/PlaygroundRoute.ts
deleted file mode 100644
index c755cd8b1d..0000000000
--- a/packages/ui-mobile-playground/src/components/PlaygroundRoute.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type PlaygroundRoute = {
-  key: string;
-  getComponent: () => React.ComponentType<React.PropsWithChildren<unknown>>;
-};
diff --git a/packages/ui-mobile-playground/src/components/index.ts b/packages/ui-mobile-playground/src/components/index.ts
deleted file mode 100644
index 469667aff6..0000000000
--- a/packages/ui-mobile-playground/src/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Playground';
diff --git a/packages/ui-mobile-playground/src/components/staticRoutes.ts b/packages/ui-mobile-playground/src/components/staticRoutes.ts
deleted file mode 100644
index 65757231c5..0000000000
--- a/packages/ui-mobile-playground/src/components/staticRoutes.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { keyToRouteName } from './keyToRouteName';
-
-export const initialRouteKey = 'Examples';
-export const searchRouteKey = 'Search';
-
-export const initialRouteName = keyToRouteName(initialRouteKey);
-export const searchRouteName = keyToRouteName(searchRouteKey);
-
-export const createStaticRoute = (key: string, component: () => JSX.Element) => ({
-  key,
-  getComponent: () => component,
-});
diff --git a/packages/ui-mobile-playground/src/components/transformRouteToNavComponent.ts b/packages/ui-mobile-playground/src/components/transformRouteToNavComponent.ts
deleted file mode 100644
index 4ad45254c2..0000000000
--- a/packages/ui-mobile-playground/src/components/transformRouteToNavComponent.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { StackNavigationOptions } from '@react-navigation/stack';
-import { HeaderStyleInterpolators } from '@react-navigation/stack';
-
-import { keyToRouteName } from './keyToRouteName';
-import type { PlaygroundRoute } from './PlaygroundRoute';
-
-const titleOverrides: Record<string, string> = {
-  Examples: 'CDS',
-  Text: 'Text (all)',
-};
-
-type TransformRouteToNavComponentParams = {
-  route: PlaygroundRoute;
-  options?: StackNavigationOptions | undefined;
-};
-
-export function transformRouteToNavComponent({
-  route: { key, getComponent },
-  options = {},
-}: TransformRouteToNavComponentParams) {
-  return {
-    key,
-    name: keyToRouteName(key),
-    getComponent,
-    options: {
-      title: titleOverrides[key] ?? key,
-      headerStyleInterpolator: HeaderStyleInterpolators.forFade,
-      ...options,
-    },
-  } as const;
-}
diff --git a/packages/ui-mobile-playground/src/components/useExampleNavigatorProps.tsx b/packages/ui-mobile-playground/src/components/useExampleNavigatorProps.tsx
deleted file mode 100644
index 3c4fb60f83..0000000000
--- a/packages/ui-mobile-playground/src/components/useExampleNavigatorProps.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-import type { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { ColorScheme } from '@coinbase/cds-common/core/theme';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
-import { IconButton } from '@coinbase/cds-mobile/buttons/IconButton';
-import { TextInput } from '@coinbase/cds-mobile/controls/TextInput';
-import { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box } from '@coinbase/cds-mobile/layout/Box';
-import { HStack } from '@coinbase/cds-mobile/layout/HStack';
-import { Spacer } from '@coinbase/cds-mobile/layout/Spacer';
-import { TextHeadline } from '@coinbase/cds-mobile/typography/TextHeadline';
-import type { StackHeaderProps, StackNavigationOptions } from '@react-navigation/stack';
-
-import { SearchFilterContext, SetSearchFilterContext } from './ExamplesSearchProvider';
-import { initialRouteName, searchRouteName } from './staticRoutes';
-
-type UseExampleNavigatorPropsOptions = {
-  setColorScheme?: React.Dispatch<React.SetStateAction<ColorScheme>>;
-};
-
-const iconButtonHeight = interactableHeight.regular;
-
-export function useExampleNavigatorProps({ setColorScheme }: UseExampleNavigatorPropsOptions) {
-  const theme = useTheme();
-  const { top } = useSafeAreaInsets();
-  const [headerSize, onLayout] = useLayout();
-  const searchFilter = useContext(SearchFilterContext);
-  const setFilter = useContext(SetSearchFilterContext);
-
-  const style = useMemo(() => ({ marginTop: top }), [top]);
-
-  const header = useMemo(() => {
-    return ({ navigation, route, options }: StackHeaderProps) => {
-      const isFocused = navigation.isFocused();
-      const canGoBack = navigation.canGoBack();
-      const goBack = () => {
-        navigation.goBack();
-      };
-      const goBackFromSearch = () => {
-        setFilter('');
-        navigation.goBack();
-      };
-      const goToSearch = () => navigation.navigate(searchRouteName);
-      const routeName = route.name;
-      const titleForScene = options.title;
-      const isSearch = routeName === searchRouteName;
-      const showBackButton = isFocused && canGoBack && !isSearch;
-      const showSearch = routeName === initialRouteName;
-
-      const iconButtonPlaceholder = <Box height={iconButtonHeight} />;
-
-      const leftHeaderButton = showSearch ? (
-        <Box marginX={-1}>
-          <IconButton
-            transparent
-            accessibilityLabel="Search for component"
-            name="search"
-            onPress={goToSearch}
-          />
-        </Box>
-      ) : showBackButton ? (
-        <Box marginX={-1}>
-          <IconButton
-            transparent
-            accessibilityLabel="Go back"
-            name="backArrow"
-            onPress={goBack}
-            testID="nav-back-button"
-          />
-        </Box>
-      ) : (
-        iconButtonPlaceholder
-      );
-
-      const handleSearch = (e: NativeSyntheticEvent<TextInputChangeEventData>) =>
-        setFilter(e.nativeEvent.text);
-
-      const toggleDark = () => setColorScheme?.((s) => (s === 'dark' ? 'light' : 'dark'));
-
-      const rightHeaderButton = isSearch ? (
-        iconButtonPlaceholder
-      ) : (
-        <Box marginX={-1}>
-          <IconButton
-            transparent
-            accessibilityLabel="Toggle dark mode"
-            name={theme.activeColorScheme === 'dark' ? 'moon' : 'light'}
-            onPress={toggleDark}
-          />
-        </Box>
-      );
-
-      return (
-        <Box animated background="bg" onLayout={onLayout} style={style}>
-          <HStack alignItems="center" justifyContent="center" paddingX={2} paddingY={1}>
-            {leftHeaderButton}
-            <Spacer />
-            <Box
-              alignItems="center"
-              pointerEvents={isSearch ? undefined : 'none'}
-              position="absolute"
-              width="100%"
-            >
-              {isSearch ? (
-                <TextInput
-                  accessibilityHint="Search for component"
-                  accessibilityLabel="Search for component"
-                  label=""
-                  onChange={handleSearch}
-                  placeholder="Search"
-                  start={
-                    <IconButton
-                      transparent
-                      accessibilityLabel="Go back from search"
-                      name="backArrow"
-                      onPress={goBackFromSearch}
-                    />
-                  }
-                  value={searchFilter}
-                />
-              ) : (
-                <TextHeadline align="center">{titleForScene}</TextHeadline>
-              )}
-            </Box>
-            <Spacer />
-            {rightHeaderButton}
-          </HStack>
-        </Box>
-      );
-    };
-  }, [onLayout, searchFilter, setFilter, style, theme.activeColorScheme, setColorScheme]);
-
-  return useMemo(() => {
-    const screenOptions: StackNavigationOptions = {
-      headerBackAllowFontScaling: false,
-      headerBackTitleVisible: false,
-      headerTitleAllowFontScaling: false,
-      headerStyle: {
-        backgroundColor: theme.color.bg,
-        borderWidth: 0,
-        shadowColor: 'transparent',
-        height: headerSize.height,
-      },
-      header,
-      gestureDirection: 'horizontal',
-    };
-
-    return {
-      initialRouteName,
-      screenOptions,
-    };
-  }, [header, headerSize.height, theme.color.bg]);
-}
diff --git a/packages/ui-mobile-playground/src/index.ts b/packages/ui-mobile-playground/src/index.ts
deleted file mode 100644
index 07635cbbc8..0000000000
--- a/packages/ui-mobile-playground/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components';
diff --git a/packages/ui-mobile-playground/src/routes.ts b/packages/ui-mobile-playground/src/routes.ts
deleted file mode 100644
index 762674f8ca..0000000000
--- a/packages/ui-mobile-playground/src/routes.ts
+++ /dev/null
@@ -1,915 +0,0 @@
-/**
- * DO NOT MODIFY
- * Generated from scripts/codegen/main.ts
- */
-export const routes = [
-  {
-    key: 'Accordion',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/accordion/__stories__/Accordion.stories').default,
-  },
-  {
-    key: 'AlertBasic',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/AlertBasic.stories').default,
-  },
-  {
-    key: 'AlertLongTitle',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/AlertLongTitle.stories').default,
-  },
-  {
-    key: 'AlertOverModal',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/AlertOverModal.stories').default,
-  },
-  {
-    key: 'AlertPortal',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/AlertPortal.stories').default,
-  },
-  {
-    key: 'AlertSingleAction',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/AlertSingleAction.stories').default,
-  },
-  {
-    key: 'AlertVerticalActions',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/AlertVerticalActions.stories').default,
-  },
-  {
-    key: 'AlphaSelect',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/alpha/select/__stories__/AlphaSelect.stories').default,
-  },
-  {
-    key: 'AlphaSelectChip',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/alpha/select-chip/__stories__/AlphaSelectChip.stories').default,
-  },
-  {
-    key: 'AlphaTabbedChips',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/alpha/tabbed-chips/__stories__/AlphaTabbedChips.stories')
-        .default,
-  },
-  {
-    key: 'AnimatedCaret',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/motion/__stories__/AnimatedCaret.stories').default,
-  },
-  {
-    key: 'AreaChart',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/area/__stories__/AreaChart.stories')
-        .default,
-  },
-  {
-    key: 'Avatar',
-    getComponent: () => require('@coinbase/cds-mobile/media/__stories__/Avatar.stories').default,
-  },
-  {
-    key: 'AvatarButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/buttons/__stories__/AvatarButton.stories').default,
-  },
-  {
-    key: 'Axis',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/axis/__stories__/Axis.stories').default,
-  },
-  {
-    key: 'Banner',
-    getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/Banner.stories').default,
-  },
-  {
-    key: 'BannerActions',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/banner/__stories__/BannerActions.stories').default,
-  },
-  {
-    key: 'BannerLayout',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/banner/__stories__/BannerLayout.stories').default,
-  },
-  {
-    key: 'BarChart',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/bar/__stories__/BarChart.stories').default,
-  },
-  {
-    key: 'Box',
-    getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Box.stories').default,
-  },
-  {
-    key: 'BrowserBar',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/BrowserBar.stories').default,
-  },
-  {
-    key: 'BrowserBarSearchInput',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/BrowserBarSearchInput.stories').default,
-  },
-  {
-    key: 'Button',
-    getComponent: () => require('@coinbase/cds-mobile/buttons/__stories__/Button.stories').default,
-  },
-  {
-    key: 'ButtonGroup',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/buttons/__stories__/ButtonGroup.stories').default,
-  },
-  {
-    key: 'Calendar',
-    getComponent: () => require('@coinbase/cds-mobile/dates/__stories__/Calendar.stories').default,
-  },
-  {
-    key: 'Card',
-    getComponent: () => require('@coinbase/cds-mobile/cards/__stories__/Card.stories').default,
-  },
-  {
-    key: 'Carousel',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/carousel/__stories__/Carousel.stories').default,
-  },
-  {
-    key: 'CarouselMedia',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/media/__stories__/CarouselMedia.stories').default,
-  },
-  {
-    key: 'CartesianChart',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/__stories__/CartesianChart.stories')
-        .default,
-  },
-  {
-    key: 'ChartAccessibility',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/__stories__/ChartAccessibility.stories')
-        .default,
-  },
-  {
-    key: 'ChartTransitions',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/__stories__/ChartTransitions.stories')
-        .default,
-  },
-  {
-    key: 'Checkbox',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/Checkbox.stories').default,
-  },
-  {
-    key: 'CheckboxCell',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/CheckboxCell.stories').default,
-  },
-  {
-    key: 'Chip',
-    getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/Chip.stories').default,
-  },
-  {
-    key: 'Coachmark',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/coachmark/__stories__/Coachmark.stories').default,
-  },
-  {
-    key: 'Collapsible',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/collapsible/__stories__/Collapsible.stories').default,
-  },
-  {
-    key: 'Combobox',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/alpha/combobox/__stories__/Combobox.stories').default,
-  },
-  {
-    key: 'ComponentConfigProvider',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/ComponentConfigProvider.stories').default,
-  },
-  {
-    key: 'ComponentConfigProviderCustom',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/ComponentConfigProviderCustom.stories')
-        .default,
-  },
-  {
-    key: 'ContainedAssetCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cards/__stories__/ContainedAssetCard.stories').default,
-  },
-  {
-    key: 'ContentCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cards/__stories__/ContentCard.stories').default,
-  },
-  {
-    key: 'ContentCell',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cells/__stories__/ContentCell.stories').default,
-  },
-  {
-    key: 'ContentCellFallback',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cells/__stories__/ContentCellFallback.stories').default,
-  },
-  {
-    key: 'ControlGroup',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/ControlGroup.stories').default,
-  },
-  {
-    key: 'DataCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/alpha/data-card/__stories__/DataCard.stories').default,
-  },
-  {
-    key: 'DateInput',
-    getComponent: () => require('@coinbase/cds-mobile/dates/__stories__/DateInput.stories').default,
-  },
-  {
-    key: 'DatePicker',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/dates/__stories__/DatePicker.stories').default,
-  },
-  {
-    key: 'Divider',
-    getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Divider.stories').default,
-  },
-  {
-    key: 'Dot',
-    getComponent: () => require('@coinbase/cds-mobile/dots/__stories__/Dot.stories').default,
-  },
-  {
-    key: 'DotMisc',
-    getComponent: () => require('@coinbase/cds-mobile/dots/__stories__/DotMisc.stories').default,
-  },
-  {
-    key: 'DrawerBottom',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerBottom.stories').default,
-  },
-  {
-    key: 'DrawerFallback',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerFallback.stories').default,
-  },
-  {
-    key: 'DrawerLeft',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerLeft.stories').default,
-  },
-  {
-    key: 'DrawerMisc',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerMisc.stories').default,
-  },
-  {
-    key: 'DrawerReduceMotion',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerReduceMotion.stories').default,
-  },
-  {
-    key: 'DrawerRight',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerRight.stories').default,
-  },
-  {
-    key: 'DrawerScrollable',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerScrollable.stories').default,
-  },
-  {
-    key: 'DrawerTop',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/DrawerTop.stories').default,
-  },
-  {
-    key: 'Fallback',
-    getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Fallback.stories').default,
-  },
-  {
-    key: 'FloatingAssetCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cards/__stories__/FloatingAssetCard.stories').default,
-  },
-  {
-    key: 'Frontier',
-    getComponent: () => require('@coinbase/cds-mobile/system/__stories__/Frontier.stories').default,
-  },
-  {
-    key: 'Group',
-    getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Group.stories').default,
-  },
-  {
-    key: 'HeroSquare',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/illustrations/__stories__/HeroSquare.stories').default,
-  },
-  {
-    key: 'HintMotion',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/motion/__stories__/HintMotion.stories').default,
-  },
-  {
-    key: 'IconButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/buttons/__stories__/IconButton.stories').default,
-  },
-  {
-    key: 'IconCounterButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/buttons/__stories__/IconCounterButton.stories').default,
-  },
-  {
-    key: 'InputChip',
-    getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/InputChip.stories').default,
-  },
-  {
-    key: 'InputIcon',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/InputIcon.stories').default,
-  },
-  {
-    key: 'InputIconButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/InputIconButton.stories').default,
-  },
-  {
-    key: 'InputStack',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/InputStack.stories').default,
-  },
-  {
-    key: 'Legend',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/legend/__stories__/Legend.stories').default,
-  },
-  {
-    key: 'LinearGradient',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/gradients/__stories__/LinearGradient.stories').default,
-  },
-  {
-    key: 'LineChart',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/line/__stories__/LineChart.stories')
-        .default,
-  },
-  {
-    key: 'Link',
-    getComponent: () => require('@coinbase/cds-mobile/typography/__stories__/Link.stories').default,
-  },
-  {
-    key: 'ListCell',
-    getComponent: () => require('@coinbase/cds-mobile/cells/__stories__/ListCell.stories').default,
-  },
-  {
-    key: 'ListCellFallback',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cells/__stories__/ListCellFallback.stories').default,
-  },
-  {
-    key: 'Logo',
-    getComponent: () => require('@coinbase/cds-mobile/icons/__stories__/Logo.stories').default,
-  },
-  {
-    key: 'Lottie',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/animation/__stories__/Lottie.stories').default,
-  },
-  {
-    key: 'LottieStatusAnimation',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/animation/__stories__/LottieStatusAnimation.stories').default,
-  },
-  {
-    key: 'MediaCard',
-    getComponent: () => require('@coinbase/cds-mobile/cards/__stories__/MediaCard.stories').default,
-  },
-  {
-    key: 'MediaChip',
-    getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/MediaChip.stories').default,
-  },
-  {
-    key: 'MessagingCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cards/__stories__/MessagingCard.stories').default,
-  },
-  {
-    key: 'ModalBackButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/ModalBackButton.stories').default,
-  },
-  {
-    key: 'ModalBasic',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/ModalBasic.stories').default,
-  },
-  {
-    key: 'ModalCustomPadding',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/ModalCustomPadding.stories').default,
-  },
-  {
-    key: 'ModalLong',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/ModalLong.stories').default,
-  },
-  {
-    key: 'ModalPortal',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/ModalPortal.stories').default,
-  },
-  {
-    key: 'MultiContentModule',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/multi-content-module/__stories__/MultiContentModule.stories')
-        .default,
-  },
-  {
-    key: 'NavBarIconButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/NavBarIconButton.stories').default,
-  },
-  {
-    key: 'NavigationSubtitle',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/NavigationSubtitle.stories').default,
-  },
-  {
-    key: 'NavigationTitle',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/NavigationTitle.stories').default,
-  },
-  {
-    key: 'NavigationTitleSelect',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/NavigationTitleSelect.stories').default,
-  },
-  {
-    key: 'NudgeCard',
-    getComponent: () => require('@coinbase/cds-mobile/cards/__stories__/NudgeCard.stories').default,
-  },
-  {
-    key: 'Numpad',
-    getComponent: () => require('@coinbase/cds-mobile/numpad/__stories__/Numpad.stories').default,
-  },
-  {
-    key: 'Overlay',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/Overlay.stories').default,
-  },
-  {
-    key: 'PageFooter',
-    getComponent: () => require('@coinbase/cds-mobile/page/__stories__/PageFooter.stories').default,
-  },
-  {
-    key: 'PageFooterInPage',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/page/__stories__/PageFooterInPage.stories').default,
-  },
-  {
-    key: 'PageHeader',
-    getComponent: () => require('@coinbase/cds-mobile/page/__stories__/PageHeader.stories').default,
-  },
-  {
-    key: 'PageHeaderInErrorEmptyState',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/page/__stories__/PageHeaderInErrorEmptyState.stories').default,
-  },
-  {
-    key: 'PageHeaderInPage',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/page/__stories__/PageHeaderInPage.stories').default,
-  },
-  {
-    key: 'Palette',
-    getComponent: () => require('@coinbase/cds-mobile/system/__stories__/Palette.stories').default,
-  },
-  {
-    key: 'PatternDisclosureHighFrictionBenefit',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/PatternDisclosureHighFrictionBenefit.stories')
-        .default,
-  },
-  {
-    key: 'PatternDisclosureHighFrictionRisk',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/PatternDisclosureHighFrictionRisk.stories')
-        .default,
-  },
-  {
-    key: 'PatternDisclosureLowFriction',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/PatternDisclosureLowFriction.stories')
-        .default,
-  },
-  {
-    key: 'PatternDisclosureMedFriction',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/PatternDisclosureMedFriction.stories')
-        .default,
-  },
-  {
-    key: 'PatternError',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/PatternError.stories').default,
-  },
-  {
-    key: 'PercentageBarChart',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/bar/__stories__/PercentageBarChart.stories')
-        .default,
-  },
-  {
-    key: 'PeriodSelector',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/__stories__/PeriodSelector.stories')
-        .default,
-  },
-  {
-    key: 'Pictogram',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/illustrations/__stories__/Pictogram.stories').default,
-  },
-  {
-    key: 'Pressable',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/Pressable.stories').default,
-  },
-  {
-    key: 'PressableOpacity',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/PressableOpacity.stories').default,
-  },
-  {
-    key: 'ProgressBar',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/visualizations/__stories__/ProgressBar.stories').default,
-  },
-  {
-    key: 'ProgressCircle',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/visualizations/__stories__/ProgressCircle.stories').default,
-  },
-  {
-    key: 'RadioCell',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/RadioCell.stories').default,
-  },
-  {
-    key: 'RadioGroup',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/RadioGroup.stories').default,
-  },
-  {
-    key: 'ReferenceLine',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/line/__stories__/ReferenceLine.stories')
-        .default,
-  },
-  {
-    key: 'RemoteImage',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/media/__stories__/RemoteImage.stories').default,
-  },
-  {
-    key: 'RemoteImageGroup',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/media/__stories__/RemoteImageGroup.stories').default,
-  },
-  {
-    key: 'RollingNumber',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/numbers/__stories__/RollingNumber.stories').default,
-  },
-  {
-    key: 'Scrubber',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/chart/scrubber/__stories__/Scrubber.stories')
-        .default,
-  },
-  {
-    key: 'SearchInput',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/SearchInput.stories').default,
-  },
-  {
-    key: 'SectionHeader',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/section-header/__stories__/SectionHeader.stories').default,
-  },
-  {
-    key: 'SegmentedTabs',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/tabs/__stories__/SegmentedTabs.stories').default,
-  },
-  {
-    key: 'Select',
-    getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/Select.stories').default,
-  },
-  {
-    key: 'SelectChip',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/chips/__stories__/SelectChip.stories').default,
-  },
-  {
-    key: 'SelectOption',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/SelectOption.stories').default,
-  },
-  {
-    key: 'SlideButton',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/buttons/__stories__/SlideButton.stories').default,
-  },
-  {
-    key: 'Spacer',
-    getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Spacer.stories').default,
-  },
-  {
-    key: 'Sparkline',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/sparkline/__stories__/Sparkline.stories').default,
-  },
-  {
-    key: 'SparklineGradient',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/sparkline/__stories__/SparklineGradient.stories')
-        .default,
-  },
-  {
-    key: 'SparklineInteractive',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories')
-        .default,
-  },
-  {
-    key: 'SparklineInteractiveHeader',
-    getComponent: () =>
-      require('@coinbase/cds-mobile-visualization/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories')
-        .default,
-  },
-  {
-    key: 'Spectrum',
-    getComponent: () => require('@coinbase/cds-mobile/system/__stories__/Spectrum.stories').default,
-  },
-  {
-    key: 'Spinner',
-    getComponent: () => require('@coinbase/cds-mobile/loaders/__stories__/Spinner.stories').default,
-  },
-  {
-    key: 'SpotIcon',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/illustrations/__stories__/SpotIcon.stories').default,
-  },
-  {
-    key: 'SpotRectangle',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/illustrations/__stories__/SpotRectangle.stories').default,
-  },
-  {
-    key: 'SpotSquare',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/illustrations/__stories__/SpotSquare.stories').default,
-  },
-  {
-    key: 'ThemedIllustrations',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/illustrations/__stories__/ThemedIllustrations.stories').default,
-  },
-  {
-    key: 'StepperHorizontal',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/stepper/__stories__/StepperHorizontal.stories').default,
-  },
-  {
-    key: 'StepperVertical',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/stepper/__stories__/StepperVertical.stories').default,
-  },
-  {
-    key: 'StickyFooter',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/sticky-footer/__stories__/StickyFooter.stories').default,
-  },
-  {
-    key: 'StickyFooterWithTray',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/sticky-footer/__stories__/StickyFooterWithTray.stories')
-        .default,
-  },
-  {
-    key: 'Switch',
-    getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/Switch.stories').default,
-  },
-  {
-    key: 'TabbedChips',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/chips/__stories__/TabbedChips.stories').default,
-  },
-  {
-    key: 'TabIndicator',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/tabs/__stories__/TabIndicator.stories').default,
-  },
-  {
-    key: 'TabLabel',
-    getComponent: () => require('@coinbase/cds-mobile/tabs/__stories__/TabLabel.stories').default,
-  },
-  {
-    key: 'TabNavigation',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/tabs/__stories__/TabNavigation.stories').default,
-  },
-  {
-    key: 'Tabs',
-    getComponent: () => require('@coinbase/cds-mobile/tabs/__stories__/Tabs.stories').default,
-  },
-  {
-    key: 'Tag',
-    getComponent: () => require('@coinbase/cds-mobile/tag/__stories__/Tag.stories').default,
-  },
-  {
-    key: 'Text',
-    getComponent: () => require('@coinbase/cds-mobile/typography/__stories__/Text.stories').default,
-  },
-  {
-    key: 'TextBody',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextBody.stories').default,
-  },
-  {
-    key: 'TextCaption',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextCaption.stories').default,
-  },
-  {
-    key: 'TextCore',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextCore.stories').default,
-  },
-  {
-    key: 'TextDisplay1',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextDisplay1.stories').default,
-  },
-  {
-    key: 'TextDisplay2',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextDisplay2.stories').default,
-  },
-  {
-    key: 'TextDisplay3',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextDisplay3.stories').default,
-  },
-  {
-    key: 'TextHeadline',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextHeadline.stories').default,
-  },
-  {
-    key: 'TextInput',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/controls/__stories__/TextInput.stories').default,
-  },
-  {
-    key: 'TextLabel1',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextLabel1.stories').default,
-  },
-  {
-    key: 'TextLabel2',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextLabel2.stories').default,
-  },
-  {
-    key: 'TextLegal',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextLegal.stories').default,
-  },
-  {
-    key: 'TextTitle1',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextTitle1.stories').default,
-  },
-  {
-    key: 'TextTitle2',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextTitle2.stories').default,
-  },
-  {
-    key: 'TextTitle3',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextTitle3.stories').default,
-  },
-  {
-    key: 'TextTitle4',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/typography/__stories__/TextTitle4.stories').default,
-  },
-  {
-    key: 'ThemeProvider',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/system/__stories__/ThemeProvider.stories').default,
-  },
-  {
-    key: 'Toast',
-    getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/Toast.stories').default,
-  },
-  {
-    key: 'TooltipV2',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TooltipV2.stories').default,
-  },
-  {
-    key: 'TopNavBar',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/navigation/__stories__/TopNavBar.stories').default,
-  },
-  {
-    key: 'Tour',
-    getComponent: () => require('@coinbase/cds-mobile/tour/__stories__/Tour.stories').default,
-  },
-  {
-    key: 'TrayAction',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayAction.stories').default,
-  },
-  {
-    key: 'TrayBasic',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayBasic.stories').default,
-  },
-  {
-    key: 'TrayFallback',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayFallback.stories').default,
-  },
-  {
-    key: 'TrayFeedCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayFeedCard.stories').default,
-  },
-  {
-    key: 'TrayInformational',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayInformational.stories').default,
-  },
-  {
-    key: 'TrayMessaging',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayMessaging.stories').default,
-  },
-  {
-    key: 'TrayMisc',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayMisc.stories').default,
-  },
-  {
-    key: 'TrayNavigation',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayNavigation.stories').default,
-  },
-  {
-    key: 'TrayPromotional',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayPromotional.stories').default,
-  },
-  {
-    key: 'TrayRedesign',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayRedesign.stories').default,
-  },
-  {
-    key: 'TrayReduceMotion',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayReduceMotion.stories').default,
-  },
-  {
-    key: 'TrayScrollable',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayScrollable.stories').default,
-  },
-  {
-    key: 'TrayTall',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayTall.stories').default,
-  },
-  {
-    key: 'TrayWithTitle',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/overlays/__stories__/TrayWithTitle.stories').default,
-  },
-  {
-    key: 'UpsellCard',
-    getComponent: () =>
-      require('@coinbase/cds-mobile/cards/__stories__/UpsellCard.stories').default,
-  },
-];
diff --git a/packages/ui-mobile-playground/tsconfig.json b/packages/ui-mobile-playground/tsconfig.json
deleted file mode 100644
index a2b8cbe0f5..0000000000
--- a/packages/ui-mobile-playground/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "extends": "../../tsconfig.project.json",
-  "compilerOptions": {
-    "declarationDir": "dts",
-    "rootDir": "src"
-  },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [],
-  "references": [
-    {
-      "path": "../../packages/common"
-    },
-    {
-      "path": "../../packages/mobile"
-    },
-    {
-      "path": "../../packages/mobile-visualization"
-    }
-  ]
-}
diff --git a/packages/utils/CHANGELOG.md b/packages/utils/CHANGELOG.md
index 2637f9f793..0bb6d2f808 100644
--- a/packages/utils/CHANGELOG.md
+++ b/packages/utils/CHANGELOG.md
@@ -12,6 +12,12 @@ All notable changes to this project will be documented in this file.
 
 #### 📘 Misc
 
+- Temporary unreleased changes - undo prior to CDS 9 release.
+
+## Unreleased
+
+#### 📘 Misc
+
 - Chore: Updated numerous deprecation annotation messages.
 
 ## 2.3.5 (12/17/2025 PST)
diff --git a/packages/utils/package.json b/packages/utils/package.json
index e118e45dea..28da6e5f50 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -35,7 +35,7 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1"
   }
 }
diff --git a/packages/utils/src/object.ts b/packages/utils/src/object.ts
index 16e4a9a88e..46d3df2294 100644
--- a/packages/utils/src/object.ts
+++ b/packages/utils/src/object.ts
@@ -1,11 +1,5 @@
 import type { AnyObject, StringKey } from './types';
 
-/**
- * @deprecated Do not use. This will be removed in a future major release.
- * @deprecationExpectedRemoval v2
- */
-export const emptyObject = {};
-
 export function entries<T extends Record<string, unknown>>(item: T) {
   return Object.entries(item) as [keyof T, T[keyof T]][];
 }
@@ -61,5 +55,5 @@ export function merge<
   BaseObj extends AnyObject | Readonly<AnyObject>,
   ConditionalObj extends AnyObject | Readonly<AnyObject>,
 >(baseObj: BaseObj, objToMerge: ConditionalObj | undefined | false) {
-  return { ...baseObj, ...(objToMerge ?? emptyObject) };
+  return { ...baseObj, ...(objToMerge ?? {}) };
 }
diff --git a/packages/web-visualization/CHANGELOG.md b/packages/web-visualization/CHANGELOG.md
index 017b8396a0..52994ad594 100644
--- a/packages/web-visualization/CHANGELOG.md
+++ b/packages/web-visualization/CHANGELOG.md
@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 4.0.0 (5/20/2026 PST)
+
+- **DEPRECATED** This package has been deprecated. Please import all visualization/chat components from the cds-web package.
+
+#### 💥 Breaking
+
+- Visualization/chart components have been migrated to cds-web and re-exported for backwards compatibility. As a result, deep import paths will not resolve correctly on this version. Please import from the barrel file modules instead or migrate to the same components in cds-web.
+
 ## 3.8.0 (5/8/2026 PST)
 
 #### 🚀 Updates
diff --git a/packages/web-visualization/package.json b/packages/web-visualization/package.json
index eb5be5bdf6..3f19bdafe1 100644
--- a/packages/web-visualization/package.json
+++ b/packages/web-visualization/package.json
@@ -1,7 +1,8 @@
 {
   "name": "@coinbase/cds-web-visualization",
-  "version": "3.8.0",
+  "version": "4.0.0",
   "description": "Coinbase Design System - Web Sparkline",
+  "deprecated": "Use @coinbase/cds-web/visualizations/chart and @coinbase/cds-web/visualizations/sparkline instead.",
   "repository": {
     "type": "git",
     "url": "git@github.com:coinbase/cds.git",
@@ -43,8 +44,8 @@
     "@coinbase/cds-utils": "workspace:^",
     "@coinbase/cds-web": "workspace:^",
     "framer-motion": "^10.18.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18.0.0 || ~19.1.2",
+    "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
     "d3-color": "^3.1.0",
@@ -57,15 +58,18 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1",
     "@coinbase/cds-common": "workspace:^",
     "@coinbase/cds-lottie-files": "workspace:^",
     "@coinbase/cds-utils": "workspace:^",
     "@coinbase/cds-web": "workspace:^",
     "@linaria/core": "^3.0.0-beta.22",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "framer-motion": "^10.18.0"
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
+    "framer-motion": "^10.18.0",
+    "react": "19.1.2",
+    "react-dom": "19.1.2"
   }
 }
diff --git a/packages/web-visualization/src/chart/index.ts b/packages/web-visualization/src/chart/index.ts
index 7fa7b37e08..ac6ce80819 100644
--- a/packages/web-visualization/src/chart/index.ts
+++ b/packages/web-visualization/src/chart/index.ts
@@ -1,16 +1 @@
-// codegen:start {preset: barrel, include: [./*.tsx, ./*/index.ts]}
-export * from './area/index';
-export * from './axis/index';
-export * from './bar/index';
-export * from './CartesianChart';
-export * from './ChartProvider';
-export * from './gradient/index';
-export * from './legend/index';
-export * from './line/index';
-export * from './Path';
-export * from './PeriodSelector';
-export * from './point/index';
-export * from './scrubber/index';
-export * from './text/index';
-export * from './utils/index';
-// codegen:end
+export * from '@coinbase/cds-web/visualizations/chart';
diff --git a/packages/web-visualization/src/index.ts b/packages/web-visualization/src/index.ts
index 21bfe928b2..c8fa7f668d 100644
--- a/packages/web-visualization/src/index.ts
+++ b/packages/web-visualization/src/index.ts
@@ -1,4 +1,2 @@
-// codegen:start {preset: barrel, include: ./*/index.ts}
 export * from './chart';
 export * from './sparkline';
-// codegen:end
diff --git a/packages/web-visualization/src/sparkline/index.ts b/packages/web-visualization/src/sparkline/index.ts
index 5eab72d409..ba3ff3d326 100644
--- a/packages/web-visualization/src/sparkline/index.ts
+++ b/packages/web-visualization/src/sparkline/index.ts
@@ -1,5 +1 @@
-export * from './Sparkline';
-export * from './sparkline-interactive/SparklineInteractive';
-export * from './sparkline-interactive-header/SparklineInteractiveHeader';
-export * from './SparklineArea';
-export * from './SparklineGradient';
+export * from '@coinbase/cds-web/visualizations/sparkline';
diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
index e7333e6c98..dc2d985321 100644
--- a/packages/web/CHANGELOG.md
+++ b/packages/web/CHANGELOG.md
@@ -8,6 +8,25 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.0.0 (5/20/2026 PST)
+
+CDS 9 is here!!
+
+For more details and to help upgrading from CDS 8 using our automated migration tool, see our official [upgrade guide](https://cds.coinbase.com/guides/v9-upgrade-guide)!
+
+#### 💥 Breaking
+
+- Nested ThemeProviders will not inject the full set of CSS variables by default. You can opt in to the old behavior by setting the `isolated` prop to `false`.
+- Removed remaining instances of fixed height/width values across all components which may cause subtle layout shifts in your app.
+- Some component props’ types have narrowed in response to React 19 upgrade.
+- Read our upgrade guilde for more details!
+
+#### 🚀 Updates
+
+- React 19 support! React 18 is still supported for backwards compatibility.
+- Migrated full set of components from web-visualization package to new `visualizations/chart` and `visualizations/sparkline` sub-paths.
+- Read our upgrade guilde for more details!
+
 ## 8.75.2 (5/19/2026 PST)
 
 #### 🐞 Fixes
diff --git a/packages/web/babel.config.cjs b/packages/web/babel.config.cjs
index d0d6a3df6e..716b0af62f 100644
--- a/packages/web/babel.config.cjs
+++ b/packages/web/babel.config.cjs
@@ -25,6 +25,7 @@ module.exports = {
       },
     ],
   ],
+  // NOTE: To enable the React Compiler, install babel-plugin-react-compiler and react-compiler-runtime
   // plugins: [
   //   [
   //     'babel-plugin-react-compiler',
diff --git a/packages/web/package.json b/packages/web/package.json
index 404803982e..1ac9fe8aeb 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.75.2",
+  "version": "9.0.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -180,6 +180,14 @@
       "types": "./dts/typography/index.d.ts",
       "default": "./esm/typography/index.js"
     },
+    "./visualizations/chart": {
+      "types": "./dts/visualizations/chart/index.d.ts",
+      "default": "./esm/visualizations/chart/index.js"
+    },
+    "./visualizations/sparkline": {
+      "types": "./dts/visualizations/sparkline/index.d.ts",
+      "default": "./esm/visualizations/sparkline/index.js"
+    },
     "./visualizations": {
       "types": "./dts/visualizations/index.d.ts",
       "default": "./esm/visualizations/index.js"
@@ -203,8 +211,8 @@
   ],
   "peerDependencies": {
     "framer-motion": "^10.18.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18.0.0 || ~19.1.2",
+    "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
     "@coinbase/cds-common": "workspace:^",
@@ -215,35 +223,40 @@
     "@floating-ui/react-dom": "^2.1.1",
     "@popperjs/core": "^2.9.0",
     "@react-spring/web": "^9.7.4",
+    "d3-color": "^3.1.0",
     "d3-interpolate": "^3.0.1",
     "d3-interpolate-path": "^2.3.0",
     "d3-selection": "^3.0.0",
+    "d3-transition": "^3.0.1",
     "fuse.js": "^7.1.0",
     "lodash": "^4.17.21",
     "lottie-web": "^5.13.0",
     "react-popper": "^2.2.4",
-    "react-use-measure": "^2",
+    "react-use-measure": "^2.1.7",
     "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1",
     "@coinbase/cds-web-utils": "workspace:^",
     "@linaria/core": "^3.0.0-beta.22",
     "@linaria/shaker": "^3.0.0-beta.22",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^6.5.17-alpha.0",
+    "@storybook/react": "^9.1.2",
     "@storybook/testing-library": "^0.2.2",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.0.4",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
     "csstype": "^3.1.3",
     "framer-motion": "^10.18.0",
     "glob": "^10.3.10",
+    "react": "19.1.2",
+    "react-dom": "19.1.2",
     "storybook-addon-performance": "^0.16.1",
     "typescript": "~5.9.2",
-    "vite": "^7.1.2",
     "zx": "^8.1.9"
   }
 }
diff --git a/packages/web/src/AccessibilityAnnouncer/__stories__/AccessibilityAnnouncer.stories.tsx b/packages/web/src/AccessibilityAnnouncer/__stories__/AccessibilityAnnouncer.stories.tsx
index c1f8d51bb7..2f95cba1a3 100644
--- a/packages/web/src/AccessibilityAnnouncer/__stories__/AccessibilityAnnouncer.stories.tsx
+++ b/packages/web/src/AccessibilityAnnouncer/__stories__/AccessibilityAnnouncer.stories.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import type { ComponentStoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '../../buttons';
 import { VStack } from '../../layout/VStack';
@@ -35,18 +35,18 @@ const MockAppScreen = ({ message, ...rest }: AccessibilityAnnouncerProps) => {
   );
 };
 
-export default {
+const meta = {
   title: 'Components/AccessibilityAnnouncer',
   component: MockAppScreen,
   args: { message: DEFAULT_MESSAGE },
-};
+} satisfies Meta<typeof MockAppScreen>;
 
-export const Default: ComponentStoryObj<typeof MockAppScreen> = {
-  ...MockAppScreen,
-};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
 
-export const Assertive: ComponentStoryObj<typeof MockAppScreen> = {
-  ...MockAppScreen,
+export const Assertive: Story = {
   args: {
     politeness: 'assertive',
     message:
diff --git a/packages/web/src/accordion/AccordionItem.tsx b/packages/web/src/accordion/AccordionItem.tsx
index cb949c2ef6..5d84cd7c5a 100644
--- a/packages/web/src/accordion/AccordionItem.tsx
+++ b/packages/web/src/accordion/AccordionItem.tsx
@@ -9,8 +9,8 @@ import { AccordionPanel, type AccordionPanelBaseProps } from './AccordionPanel';
 
 export type AccordionItemBaseProps = Omit<AccordionHeaderBaseProps, 'collapsed'> &
   Pick<AccordionPanelBaseProps, 'maxHeight' | 'children'> & {
-    headerRef?: React.RefObject<HTMLButtonElement>;
-    panelRef?: React.RefObject<HTMLDivElement>;
+    headerRef?: React.RefObject<HTMLButtonElement | null>;
+    panelRef?: React.RefObject<HTMLDivElement | null>;
     style?: React.CSSProperties;
   };
 
diff --git a/packages/web/src/alpha/combobox/DefaultComboboxControl.tsx b/packages/web/src/alpha/combobox/DefaultComboboxControl.tsx
index 7e8449c017..03424d610b 100644
--- a/packages/web/src/alpha/combobox/DefaultComboboxControl.tsx
+++ b/packages/web/src/alpha/combobox/DefaultComboboxControl.tsx
@@ -99,8 +99,11 @@ export const DefaultComboboxControl = memo(
                 }}
                 placeholder={typeof placeholder === 'string' ? placeholder : undefined}
                 style={{
-                  padding: 0,
-                  height: !hasValue ? (compact ? 40 : 48) : undefined,
+                  // unset default padding to let DefaultSelectControl handle layout/spacing
+                  paddingLeft: 0,
+                  paddingRight: 0,
+                  paddingTop: 0,
+                  paddingBottom: 0,
                   minWidth: 0,
                   flexGrow: 1,
                   width: '100%',
@@ -139,8 +142,6 @@ export const DefaultComboboxControl = memo(
           },
           controlValueNode: {
             ...props.styles?.controlValueNode,
-            paddingTop: hasValue ? (compact ? 'var(--space-1)' : 'var(--space-1_5)') : 0,
-            paddingBottom: hasValue ? (compact ? 'var(--space-1)' : 'var(--space-1_5)') : 0,
           },
         }}
         tabIndex={shouldShowSearchInput ? -1 : 0}
diff --git a/packages/web/src/alpha/combobox/__tests__/Combobox.test.tsx b/packages/web/src/alpha/combobox/__tests__/Combobox.test.tsx
index 3788d80c6a..cbc36507d6 100644
--- a/packages/web/src/alpha/combobox/__tests__/Combobox.test.tsx
+++ b/packages/web/src/alpha/combobox/__tests__/Combobox.test.tsx
@@ -118,7 +118,12 @@ describe('Combobox', () => {
         </DefaultThemeProvider>,
       );
 
-      expect(screen.getByRole('textbox')).toHaveStyle({ padding: '0px' });
+      expect(screen.getByRole('textbox')).toHaveStyle({
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+      });
     });
 
     it('filters options based on search text', async () => {
diff --git a/packages/web/src/alpha/data-card/__stories__/DataCard.stories.tsx b/packages/web/src/alpha/data-card/__stories__/DataCard.stories.tsx
index 7242dac7ed..4f1d43ba69 100644
--- a/packages/web/src/alpha/data-card/__stories__/DataCard.stories.tsx
+++ b/packages/web/src/alpha/data-card/__stories__/DataCard.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { type JSX, useRef } from 'react';
 import { ethBackground } from '@coinbase/cds-common/internal/data/assets';
 import {
   ProgressBar,
@@ -38,7 +38,7 @@ export const BasicExamples = (): JSX.Element => {
         thumbnail={exampleThumbnail}
         title="Progress Bar Card"
         titleAccessory={
-          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+          <Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
             ↗ 25.25%
           </Text>
         }
@@ -106,7 +106,7 @@ export const Features = (): JSX.Element => {
         thumbnail={exampleThumbnail}
         title="High Progress"
         titleAccessory={
-          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+          <Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
             ↗ 25.25%
           </Text>
         }
@@ -181,7 +181,7 @@ export const Interactive = (): JSX.Element => {
         thumbnail={exampleThumbnail}
         title="Progress Bar with Button"
         titleAccessory={
-          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+          <Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
             ↗ 8.5%
           </Text>
         }
@@ -207,7 +207,7 @@ export const Interactive = (): JSX.Element => {
         thumbnail={exampleThumbnail}
         title="Progress Circle with Link"
         titleAccessory={
-          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+          <Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
             ↗ 8.5%
           </Text>
         }
@@ -315,7 +315,7 @@ export const MultipleCards = (): JSX.Element => {
         thumbnail={exampleThumbnail}
         title="Card 2"
         titleAccessory={
-          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+          <Text font="label1" style={{ color: 'rgb(var(--green70))' }}>
             ↗ 25.25%
           </Text>
         }
diff --git a/packages/web/src/alpha/select/DefaultSelectControl.tsx b/packages/web/src/alpha/select/DefaultSelectControl.tsx
index 2c93074c3f..265f70e20d 100644
--- a/packages/web/src/alpha/select/DefaultSelectControl.tsx
+++ b/packages/web/src/alpha/select/DefaultSelectControl.tsx
@@ -7,6 +7,7 @@ import { HelperText } from '../../controls/HelperText';
 import { InputLabel } from '../../controls/InputLabel';
 import { InputStack } from '../../controls/InputStack';
 import { cx } from '../../cx';
+import { useTheme } from '../../hooks/useTheme';
 import { HStack } from '../../layout/HStack';
 import { VStack } from '../../layout/VStack';
 import { AnimatedCaret } from '../../motion/AnimatedCaret';
@@ -21,12 +22,6 @@ import {
   type SelectType,
 } from './Select';
 
-// The height is smaller for the inside label variant since the label takes
-// up space above the input.
-const LABEL_VARIANT_INSIDE_HEIGHT = 32;
-const COMPACT_HEIGHT = 40;
-const DEFAULT_HEIGHT = 56;
-
 const noFocusOutlineCss = css`
   &:focus,
   &:focus-visible,
@@ -105,7 +100,10 @@ const DefaultSelectControlComponent = memo(
       type ValueType = Type extends 'multi'
         ? SelectOptionValue | SelectOptionValue[] | null
         : SelectOptionValue | null;
+      const theme = useTheme();
       const isMultiSelect = type === 'multi';
+      // horizontal/inline label is used for compact selesct exepct for multi-selects
+      // multi-selects render their label outside of the control unless labelVariant is set to 'inside'
       const shouldShowCompactLabel = compact && label && !isMultiSelect;
       const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
       // Map of options to their values
@@ -242,13 +240,12 @@ const DefaultSelectControlComponent = memo(
 
       const labelNode = useMemo(
         () =>
-          labelVariant === 'inside' ? (
+          // labelVariant has no effect when compact is true
+          labelVariant === 'inside' && !compact ? (
             <Pressable noScaleOnPress onClick={() => setOpen((s) => !s)} tabIndex={-1}>
               <InputLabel
                 className={classNames?.controlLabelNode}
                 color="fg"
-                paddingBottom={0}
-                paddingStart={2}
                 style={styles?.controlLabelNode}
               >
                 {label}
@@ -258,6 +255,8 @@ const DefaultSelectControlComponent = memo(
             <InputLabel
               className={classNames?.controlLabelNode}
               color="fg"
+              // remove default vertical padding when label is the compact/inline version
+              paddingY={shouldShowCompactLabel ? 0 : 0.5}
               style={styles?.controlLabelNode}
             >
               {label}
@@ -265,7 +264,15 @@ const DefaultSelectControlComponent = memo(
           ) : (
             label
           ),
-        [labelVariant, classNames?.controlLabelNode, styles?.controlLabelNode, label, setOpen],
+        [
+          labelVariant,
+          compact,
+          classNames?.controlLabelNode,
+          styles?.controlLabelNode,
+          label,
+          shouldShowCompactLabel,
+          setOpen,
+        ],
       );
 
       const valueNode = useMemo(() => {
@@ -360,17 +367,9 @@ const DefaultSelectControlComponent = memo(
             flexGrow={1}
             flexShrink={1}
             focusable={false}
-            minHeight={
-              labelVariant === 'inside'
-                ? LABEL_VARIANT_INSIDE_HEIGHT
-                : compact
-                  ? COMPACT_HEIGHT
-                  : DEFAULT_HEIGHT
-            }
             minWidth={0}
             onClick={() => setOpen((s) => !s)}
             onKeyDown={onKeyDown}
-            paddingStart={1}
             role={role}
             style={styles?.controlInputNode}
             tabIndex={tabIndex}
@@ -382,14 +381,14 @@ const DefaultSelectControlComponent = memo(
                 height="100%"
                 justifyContent="center"
                 minWidth={0}
-                paddingX={1}
+                paddingEnd={2}
                 style={styles?.controlStartNode}
               >
                 {startNode}
               </HStack>
             )}
             {shouldShowCompactLabel ? (
-              <HStack alignItems="center" paddingX={1}>
+              <HStack alignItems="center" paddingEnd={1}>
                 {labelNode}
               </HStack>
             ) : null}
@@ -413,8 +412,6 @@ const DefaultSelectControlComponent = memo(
                 justifyContent="flex-start"
                 minWidth={0}
                 overflow="hidden"
-                paddingX={1}
-                paddingY={labelVariant === 'inside' && !isMultiSelect ? 0 : compact ? 1 : 1.5}
                 style={styles?.controlValueNode}
               >
                 {valueNode}
@@ -433,8 +430,6 @@ const DefaultSelectControlComponent = memo(
           classNames?.controlStartNode,
           classNames?.controlValueNode,
           disabled,
-          labelVariant,
-          compact,
           styles?.controlInputNode,
           styles?.controlStartNode,
           styles?.controlValueNode,
@@ -444,7 +439,6 @@ const DefaultSelectControlComponent = memo(
           shouldShowCompactLabel,
           labelNode,
           align,
-          isMultiSelect,
           valueNode,
           contentNode,
           setOpen,
@@ -460,8 +454,7 @@ const DefaultSelectControlComponent = memo(
               flexGrow={1}
               height="100%"
               justifyContent={labelVariant === 'inside' ? 'flex-end' : undefined}
-              paddingX={2}
-              paddingY={compact ? 1 : 1.5}
+              paddingStart={2}
               style={styles?.controlEndNode}
             >
               {customEndNode ? (
@@ -478,7 +471,6 @@ const DefaultSelectControlComponent = memo(
         [
           classNames?.controlEndNode,
           labelVariant,
-          compact,
           styles?.controlEndNode,
           customEndNode,
           open,
@@ -487,6 +479,18 @@ const DefaultSelectControlComponent = memo(
         ],
       );
 
+      const inputStackStyles: Record<string, React.CSSProperties> = useMemo(
+        () => ({
+          input: {
+            paddingTop: compact || labelVariant === 'inside' ? theme.space[1] : theme.space[2],
+            paddingBottom: compact ? theme.space[1] : theme.space[2],
+            paddingLeft: theme.space[2],
+            paddingRight: theme.space[2],
+          },
+        }),
+        [compact, theme.space, labelVariant],
+      );
+
       return (
         <InputStack
           ref={ref}
@@ -499,6 +503,7 @@ const DefaultSelectControlComponent = memo(
           inputNode={inputNode}
           labelNode={shouldShowCompactLabel ? null : labelNode}
           labelVariant={labelVariant}
+          styles={inputStackStyles}
           variant={variant}
           {...props}
         />
diff --git a/packages/web/src/alpha/select/DefaultSelectDropdown.tsx b/packages/web/src/alpha/select/DefaultSelectDropdown.tsx
index 3a8068c5f0..528b02e566 100644
--- a/packages/web/src/alpha/select/DefaultSelectDropdown.tsx
+++ b/packages/web/src/alpha/select/DefaultSelectDropdown.tsx
@@ -16,6 +16,10 @@ import { DefaultSelectOptionGroup } from './DefaultSelectOptionGroup';
 import type { SelectDropdownProps, SelectOption, SelectOptionCustomUI, SelectType } from './Select';
 import { defaultAccessibilityRoles, isSelectOptionGroup } from './Select';
 
+// intentional design decision to set max height to this value
+// will cut off an option midway to afford scrolling action
+const DEFAULT_SELECT_DROPDOWN_MAX_HEIGHT = 252;
+
 const initialStyle = { opacity: 0, y: 0 };
 const animateStyle = { opacity: 1, y: 4 };
 
@@ -59,6 +63,7 @@ const DefaultSelectDropdownComponent = memo(
         SelectOptionGroupComponent = DefaultSelectOptionGroup,
         accessibilityLabel = 'Select dropdown',
         accessibilityRoles = defaultAccessibilityRoles,
+        maxHeight = DEFAULT_SELECT_DROPDOWN_MAX_HEIGHT,
         ...props
       }: SelectDropdownProps<Type, SelectOptionValue>,
       ref: React.Ref<HTMLDivElement>,
@@ -264,7 +269,7 @@ const DefaultSelectDropdownComponent = memo(
       useEffect(() => {
         if (!controlRef.current) return;
         const resizeObserver = new ResizeObserver((entries) => {
-          setContainerWidth(entries[0].contentRect.width);
+          setContainerWidth(entries[0].target.getBoundingClientRect().width);
         });
         resizeObserver.observe(controlRef.current);
         return () => resizeObserver.disconnect();
@@ -304,7 +309,7 @@ const DefaultSelectDropdownComponent = memo(
                     borderRadius={400}
                     elevation={2}
                     flexDirection="column"
-                    maxHeight={252}
+                    maxHeight={maxHeight}
                     overflow="auto"
                   >
                     {shouldShowSelectAll && (
diff --git a/packages/web/src/alpha/select/DefaultSelectOption.tsx b/packages/web/src/alpha/select/DefaultSelectOption.tsx
index 69ccd05db0..f1b3e75d76 100644
--- a/packages/web/src/alpha/select/DefaultSelectOption.tsx
+++ b/packages/web/src/alpha/select/DefaultSelectOption.tsx
@@ -42,7 +42,7 @@ const selectOptionCss = css`
       position: absolute;
       inset: 0;
       border-radius: var(--bookendRadius);
-      border: 2px solid var(--color-bgLinePrimary);
+      border: var(--borderWidth-200) solid var(--color-bgLinePrimary);
     }
 
     &:first-child::after {
@@ -158,7 +158,6 @@ const DefaultSelectOptionComponent = memo(
             end={end}
             innerSpacing={selectCellSpacingConfig.innerSpacing}
             media={media}
-            minHeight={compact ? 40 : 56}
             outerSpacing={selectCellSpacingConfig.outerSpacing}
             priority="end"
             selected={selected}
diff --git a/packages/web/src/alpha/select/DefaultSelectOptionGroup.tsx b/packages/web/src/alpha/select/DefaultSelectOptionGroup.tsx
index 613cf46ada..19a67e6243 100644
--- a/packages/web/src/alpha/select/DefaultSelectOptionGroup.tsx
+++ b/packages/web/src/alpha/select/DefaultSelectOptionGroup.tsx
@@ -2,11 +2,10 @@ import { memo, useCallback, useId, useMemo } from 'react';
 
 import { Checkbox } from '../../controls/Checkbox';
 import { Radio } from '../../controls/Radio';
-import { cx } from '../../cx';
 import { VStack } from '../../layout';
 import { Text } from '../../typography/Text';
 
-import type { SelectOptionGroupProps, SelectOptionProps, SelectType } from './Select';
+import type { SelectOptionGroupProps, SelectType } from './Select';
 
 const DefaultSelectOptionGroupComponent = memo(
   <Type extends SelectType = 'single', SelectOptionValue extends string = string>({
diff --git a/packages/web/src/alpha/select/Select.tsx b/packages/web/src/alpha/select/Select.tsx
index 91b6fda3b6..4f28a65895 100644
--- a/packages/web/src/alpha/select/Select.tsx
+++ b/packages/web/src/alpha/select/Select.tsx
@@ -296,7 +296,7 @@ const SelectBase = memo(
 
       return (
         <Box
-          ref={containerRef as React.RefObject<HTMLDivElement>}
+          ref={containerRef as React.RefObject<HTMLDivElement | null>}
           className={cx(classNames?.root, className)}
           data-testid={testID}
           style={rootStyles}
diff --git a/packages/web/src/alpha/select/types.ts b/packages/web/src/alpha/select/types.ts
index 547a6aaea0..850dd99c84 100644
--- a/packages/web/src/alpha/select/types.ts
+++ b/packages/web/src/alpha/select/types.ts
@@ -2,6 +2,7 @@ import type React from 'react';
 import type { SharedAccessibilityProps } from '@coinbase/cds-common';
 
 import type { CellBaseProps } from '../../cells/Cell';
+import type { CellAccessoryProps } from '../../cells/CellAccessory';
 import type { InputStackBaseProps } from '../../controls/InputStack';
 import type { AriaHasPopupType } from '../../hooks/useA11yControlledVisibility';
 import type { BoxDefaultElement, BoxProps } from '../../layout/Box';
@@ -142,7 +143,7 @@ export type SelectOptionGroupProps<
   /** Accessibility role for options */
   accessibilityRole?: string;
   /** Accessory element to display with options */
-  accessory?: React.ReactElement;
+  accessory?: React.ReactElement<CellAccessoryProps>;
   /** Media element to display with options */
   media?: React.ReactElement;
   /** End element to display with options */
@@ -282,6 +283,10 @@ export type SelectDropdownProps<
     setOpen: (open: boolean | ((open: boolean) => boolean)) => void;
     /** Label displayed above the dropdown */
     label?: React.ReactNode;
+    /** Maximum height of the dropdown container
+     * @default 252
+     */
+    maxHeight?: number;
     /** Whether the dropdown is disabled */
     disabled?: boolean;
     /** Label for the "Select All" option in multi-select mode */
diff --git a/packages/web/src/animation/LottieStatusAnimation.tsx b/packages/web/src/animation/LottieStatusAnimation.tsx
index fba777638e..d3be770f60 100644
--- a/packages/web/src/animation/LottieStatusAnimation.tsx
+++ b/packages/web/src/animation/LottieStatusAnimation.tsx
@@ -1,7 +1,6 @@
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { lottieStatusToAccessibilityLabel } from '@coinbase/cds-common/lottie/statusToAccessibilityLabel';
 import { useStatusAnimationPoller } from '@coinbase/cds-common/lottie/useStatusAnimationPoller';
-import type { DimensionValue } from '@coinbase/cds-common/types/DimensionStyles';
 import type { LottiePlayer } from '@coinbase/cds-common/types/LottiePlayer';
 import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
@@ -19,11 +18,11 @@ type LottieStatusAnimationBaseProps = {
 };
 
 type LottieStatusAnimationPropsWithWidth = {
-  width: DimensionValue;
+  width: React.CSSProperties['width'];
 } & LottieStatusAnimationBaseProps;
 
 type LottieStatusAnimationPropsWithHeight = {
-  height: DimensionValue;
+  height: React.CSSProperties['height'];
 } & LottieStatusAnimationBaseProps;
 
 export type LottieStatusAnimationProps = (
@@ -41,7 +40,7 @@ export const LottieStatusAnimation = memo(
     ...otherProps
   }: LottieStatusAnimationProps) => {
     const [, forceUpdate] = useState(0);
-    const lottie = useRef<LottiePlayerRef>();
+    const lottie = useRef<LottiePlayerRef>(undefined);
 
     const handlePolling = useStatusAnimationPoller({
       status,
diff --git a/packages/web/src/animation/__tests__/useLottieHandlers.test.ts b/packages/web/src/animation/__tests__/useLottieHandlers.test.ts
index 7a51897043..d1e1eaf528 100644
--- a/packages/web/src/animation/__tests__/useLottieHandlers.test.ts
+++ b/packages/web/src/animation/__tests__/useLottieHandlers.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useLottieHandlers } from '../useLottieHandlers';
 
diff --git a/packages/web/src/animation/__tests__/useLottieListeners.test.ts b/packages/web/src/animation/__tests__/useLottieListeners.test.ts
index f157f555a7..5c3983b339 100644
--- a/packages/web/src/animation/__tests__/useLottieListeners.test.ts
+++ b/packages/web/src/animation/__tests__/useLottieListeners.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import type { LottieAnimationRef, LottieListener } from '../types';
 import { useLottieListeners } from '../useLottieListeners';
diff --git a/packages/web/src/animation/useLottieLoader.ts b/packages/web/src/animation/useLottieLoader.ts
index 3712b256f6..995d7f9137 100644
--- a/packages/web/src/animation/useLottieLoader.ts
+++ b/packages/web/src/animation/useLottieLoader.ts
@@ -19,7 +19,7 @@ export const useLottieLoader = <Marker extends string, Source extends LottieSour
   const sourceHeight = source.h;
 
   const containerRef = useRef<HTMLDivElement>(null);
-  const animationRef: LottieAnimationRef = useRef();
+  const animationRef: LottieAnimationRef = useRef(undefined);
   const [, setAnimationLoaded] = useState(false);
 
   const preserveAspectRatio = useMemo(() => {
diff --git a/packages/web/src/banner/Banner.tsx b/packages/web/src/banner/Banner.tsx
index 34f5af8523..6017ae8124 100644
--- a/packages/web/src/banner/Banner.tsx
+++ b/packages/web/src/banner/Banner.tsx
@@ -19,11 +19,13 @@ import type {
 import { css } from '@linaria/core';
 
 import { Collapsible } from '../collapsible';
+import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons/Icon';
 import { Box, HStack, type HStackDefaultElement, type HStackProps, VStack } from '../layout';
 import type { ResponsiveProps, StaticStyleProps } from '../styles/styleProps';
 import { Pressable } from '../system/Pressable';
+import type { StylesAndClassNames } from '../types';
 import type { LinkDefaultElement, LinkProps } from '../typography/Link';
 import { Link } from '../typography/Link';
 import { Text } from '../typography/Text';
@@ -38,6 +40,29 @@ export const contentResponsiveConfig: ResponsiveProps<StaticStyleProps>['flexDir
   desktop: 'row',
 } as const;
 
+/**
+ * Static class names for Banner component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export const bannerClassNames = {
+  /** Persistent outer wrapper around both dismissible and non-dismissible variants. */
+  root: 'cds-Banner',
+  /** Main content container (`HStack`) for banner body. */
+  content: 'cds-Banner-content',
+  /** Start icon wrapper. */
+  start: 'cds-Banner-start',
+  /** Right-side body wrapper containing middle content and actions. */
+  body: 'cds-Banner-body',
+  /** Middle content wrapper containing title/message/label region. */
+  middle: 'cds-Banner-middle',
+  /** Label text element. */
+  label: 'cds-Banner-label',
+  /** Actions row element. */
+  actions: 'cds-Banner-actions',
+  /** Dismiss button wrapper element. */
+  dismiss: 'cds-Banner-dismiss',
+} as const;
+
 export type BannerBaseProps = SharedProps & {
   /** Sets the variant of the banner - which is responsible for foreground and background color assignment */
   variant: BannerVariant;
@@ -88,6 +113,7 @@ export type BannerBaseProps = SharedProps & {
 };
 
 export type BannerProps = BannerBaseProps &
+  StylesAndClassNames<typeof bannerClassNames> &
   Omit<HStackProps<HStackDefaultElement>, 'children' | 'title'>;
 
 export const Banner = memo(
@@ -120,6 +146,8 @@ export const Banner = memo(
       marginStart,
       marginEnd,
       width = '100%',
+      classNames,
+      styles,
       ...props
     } = mergedProps;
     const [isCollapsed, setIsCollapsed] = useState(false);
@@ -199,117 +227,143 @@ export const Banner = memo(
     );
 
     const content = (
-      <Box
-        position="relative"
-        width={width}
-        {...(!showDismiss && marginStyles)}
-        height="fit-content"
+      <HStack
+        ref={ref}
+        background={background}
+        borderRadius={borderRadius}
+        className={cx(bannerClassNames.content, className, classNames?.content)}
+        flexGrow={1}
+        gap={1}
+        minWidth={bannerMinWidth}
+        paddingX={styleVariant === 'contextual' ? 2 : 3}
+        paddingY={2}
+        style={{ ...style, ...styles?.content }}
+        testID={testID}
+        {...props}
       >
-        <HStack
-          ref={ref}
-          background={background}
-          borderRadius={borderRadius}
-          className={className}
+        {/** Start */}
+        <Box
+          className={cx(bannerClassNames.start, classNames?.start)}
+          paddingX={0.5}
+          paddingY={0.25}
+          style={styles?.start}
+        >
+          <Icon
+            accessibilityLabel={startIconAccessibilityLabel}
+            active={startIconActive}
+            color={iconColor}
+            name={startIcon}
+            size="s"
+            testID={`${testID}-icon`}
+          />
+        </Box>
+        <VStack
+          className={cx(bannerClassNames.body, classNames?.body)}
+          flexDirection={contentResponsiveConfig}
           flexGrow={1}
-          gap={1}
-          minWidth={bannerMinWidth}
-          paddingX={styleVariant === 'contextual' ? 2 : 3}
-          paddingY={2}
-          style={style}
-          testID={testID}
-          {...props}
+          gap={2}
+          justifyContent="space-between"
+          style={styles?.body}
+          testID={`${testID}-inner-end-box`}
         >
-          {/** Start */}
-          <Box paddingX={0.5} paddingY={0.25}>
-            <Icon
-              accessibilityLabel={startIconAccessibilityLabel}
-              active={startIconActive}
-              color={iconColor}
-              name={startIcon}
-              size="s"
-              testID={`${testID}-icon`}
-            />
-          </Box>
+          {/** Middle */}
           <VStack
-            flexDirection={contentResponsiveConfig}
-            flexGrow={1}
+            className={cx(bannerClassNames.middle, classNames?.middle)}
             gap={2}
-            justifyContent="space-between"
-            testID={`${testID}-inner-end-box`}
+            style={styles?.middle}
+            testID={`${testID}-content-box`}
           >
-            {/** Middle */}
-            <VStack gap={2} testID={`${testID}-content-box`}>
-              <VStack gap={0.5}>
-                {typeof title === 'string' ? (
-                  <Text color={textColor} font="label1" id={titleId} numberOfLines={2}>
-                    {title}
-                  </Text>
-                ) : (
-                  title
-                )}
-                {typeof children === 'string' ? (
-                  <Text color={textColor} font="label2" numberOfLines={numberOfLines}>
-                    {children}
-                  </Text>
-                ) : (
-                  children
-                )}
-              </VStack>
-              {typeof label === 'string' ? (
-                <Text color="fgMuted" font="legal" numberOfLines={2}>
-                  {label}
+            <VStack gap={0.5}>
+              {typeof title === 'string' ? (
+                <Text color={textColor} font="label1" id={titleId} numberOfLines={2}>
+                  {title}
+                </Text>
+              ) : (
+                title
+              )}
+              {typeof children === 'string' ? (
+                <Text color={textColor} font="label2" numberOfLines={numberOfLines}>
+                  {children}
                 </Text>
               ) : (
-                label
+                children
               )}
             </VStack>
-            {/** Actions */}
-            {(!!clonedPrimaryAction || !!clonedSecondaryAction) && (
-              <HStack
-                alignItems="center"
-                className={actionContainerCss}
-                gap={2}
-                testID={`${testID}-action`}
+            {typeof label === 'string' ? (
+              <Text
+                className={cx(bannerClassNames.label, classNames?.label)}
+                color="fgMuted"
+                font="legal"
+                numberOfLines={2}
+                style={styles?.label}
               >
-                {clonedPrimaryAction}
-                {clonedSecondaryAction}
-              </HStack>
+                {label}
+              </Text>
+            ) : (
+              label
             )}
           </VStack>
-          {/** Dismissable action */}
-          {showDismiss && (
-            <Box alignItems="flex-start" padding={0.5}>
-              <Pressable
-                accessibilityLabel={closeAccessibilityLabel}
-                background="transparent"
-                borderRadius={1000}
-                onClick={handleOnDismiss}
-                role="button"
-                testID={`${testID}-dismiss-btn`}
-              >
-                <Icon color={iconButtonColor} name="close" size="s" />
-              </Pressable>
-            </Box>
+          {/** Actions */}
+          {(!!clonedPrimaryAction || !!clonedSecondaryAction) && (
+            <HStack
+              alignItems="center"
+              className={cx(actionContainerCss, bannerClassNames.actions, classNames?.actions)}
+              gap={2}
+              style={styles?.actions}
+              testID={`${testID}-action`}
+            >
+              {clonedPrimaryAction}
+              {clonedSecondaryAction}
+            </HStack>
           )}
-        </HStack>
-        {styleVariant === 'global' && !showDismiss && borderBox}
-      </Box>
+        </VStack>
+        {/** Dismissable action */}
+        {showDismiss && (
+          <Box
+            alignItems="flex-start"
+            className={cx(bannerClassNames.dismiss, classNames?.dismiss)}
+            padding={0.5}
+            style={styles?.dismiss}
+          >
+            <Pressable
+              accessibilityLabel={closeAccessibilityLabel}
+              background="transparent"
+              borderRadius={1000}
+              onClick={handleOnDismiss}
+              role="button"
+              testID={`${testID}-dismiss-btn`}
+            >
+              <Icon color={iconButtonColor} name="close" size="s" />
+            </Pressable>
+          </Box>
+        )}
+      </HStack>
     );
 
-    return showDismiss ? (
-      <Box display="block" height="fit-content" position="relative" width={width} {...marginStyles}>
-        <Collapsible
-          accessibilityLabelledBy={accessibilityLabelledBy}
-          collapsed={isCollapsed}
-          id={`${titleId}--controller`}
-          testID={`${testID}-collapsible`}
-        >
-          {content}
-        </Collapsible>
+    return (
+      <Box
+        className={cx(bannerClassNames.root, classNames?.root)}
+        display="block"
+        height="fit-content"
+        position="relative"
+        {...marginStyles}
+        style={styles?.root}
+        width={width}
+      >
+        {showDismiss ? (
+          <Collapsible
+            accessibilityLabelledBy={accessibilityLabelledBy}
+            collapsed={isCollapsed}
+            id={`${titleId}--controller`}
+            testID={`${testID}-collapsible`}
+          >
+            {content}
+          </Collapsible>
+        ) : (
+          content
+        )}
         {styleVariant === 'global' && borderBox}
       </Box>
-    ) : (
-      content
     );
   }),
 );
diff --git a/packages/web/src/banner/__tests__/Banner.test.tsx b/packages/web/src/banner/__tests__/Banner.test.tsx
index eaa850aedc..e802874829 100644
--- a/packages/web/src/banner/__tests__/Banner.test.tsx
+++ b/packages/web/src/banner/__tests__/Banner.test.tsx
@@ -97,6 +97,56 @@ describe('Banner', () => {
     expect(screen.getByTestId(TEST_ID)).toHaveStyle(customCss);
   });
 
+  it('applies classNames/styles root and content slots', () => {
+    render(
+      <DefaultThemeProvider>
+        <Banner
+          classNames={{ content: 'test-banner-content', root: 'test-banner-root' }}
+          startIcon="cashUSD"
+          styles={{ root: { borderTopWidth: 3 } }}
+          testID={TEST_ID}
+          title="Banner title"
+          variant="warning"
+        >
+          Banner Content
+        </Banner>
+      </DefaultThemeProvider>,
+    );
+
+    expect(screen.getByTestId(TEST_ID).className).toContain('test-banner-content');
+    expect(screen.getByTestId(TEST_ID).className).toContain('cds-Banner-content');
+    expect(screen.getByTestId(TEST_ID).parentElement?.className).toContain('test-banner-root');
+    expect(screen.getByTestId(TEST_ID).parentElement?.className).toContain('cds-Banner');
+  });
+
+  it('keeps a stable top-level wrapper regardless of dismiss state', () => {
+    const { container, rerender } = render(
+      <DefaultThemeProvider>
+        <Banner startIcon="cashUSD" testID={TEST_ID} title="Banner title" variant="warning">
+          Banner Content
+        </Banner>
+      </DefaultThemeProvider>,
+    );
+
+    expect(container.firstElementChild?.tagName).toBe('DIV');
+
+    rerender(
+      <DefaultThemeProvider>
+        <Banner
+          showDismiss
+          startIcon="cashUSD"
+          testID={TEST_ID}
+          title="Banner title"
+          variant="warning"
+        >
+          Banner Content
+        </Banner>
+      </DefaultThemeProvider>,
+    );
+
+    expect(container.firstElementChild?.tagName).toBe('DIV');
+  });
+
   it('renders warning banner correctly', () => {
     render(
       <DefaultThemeProvider>
diff --git a/packages/web/src/buttons/AvatarButton.tsx b/packages/web/src/buttons/AvatarButton.tsx
index d9869a09c5..c99eb998ce 100644
--- a/packages/web/src/buttons/AvatarButton.tsx
+++ b/packages/web/src/buttons/AvatarButton.tsx
@@ -1,5 +1,4 @@
-import React, { forwardRef, memo, useMemo } from 'react';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
+import React, { forwardRef, memo } from 'react';
 import { css } from '@linaria/core';
 
 import type { Polymorphic } from '../core/polymorphism';
@@ -12,11 +11,100 @@ import type { ButtonBaseProps } from './Button';
 
 export const avatarButtonDefaultElement = 'button';
 
+type DeprecatedAvatarButtonBorderProps = {
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderBottomLeftRadius?: PressableBaseProps['borderBottomLeftRadius'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderBottomRightRadius?: PressableBaseProps['borderBottomRightRadius'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderTopLeftRadius?: PressableBaseProps['borderTopLeftRadius'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderTopRightRadius?: PressableBaseProps['borderTopRightRadius'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderRadius?: PressableBaseProps['borderRadius'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderWidth?: PressableBaseProps['borderWidth'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderTopWidth?: PressableBaseProps['borderTopWidth'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderEndWidth?: PressableBaseProps['borderEndWidth'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderBottomWidth?: PressableBaseProps['borderBottomWidth'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderStartWidth?: PressableBaseProps['borderStartWidth'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  bordered?: PressableBaseProps['bordered'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderedBottom?: PressableBaseProps['borderedBottom'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderedEnd?: PressableBaseProps['borderedEnd'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderedHorizontal?: PressableBaseProps['borderedHorizontal'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderedStart?: PressableBaseProps['borderedStart'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderedTop?: PressableBaseProps['borderedTop'];
+  /**
+   * @deprecated Border props on `AvatarButton` have no effect. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
+  borderedVertical?: PressableBaseProps['borderedVertical'];
+};
+
 export type AvatarButtonDefaultElement = typeof avatarButtonDefaultElement;
 
 export type AvatarButtonBaseProps = Polymorphic.ExtendableProps<
   Omit<PressableBaseProps, 'children'>,
-  Pick<ButtonBaseProps, 'compact'> &
+  DeprecatedAvatarButtonBorderProps &
+    Pick<ButtonBaseProps, 'compact'> &
     Pick<
       AvatarBaseProps,
       'alt' | 'src' | 'colorScheme' | 'shape' | 'borderColor' | 'name' | 'selected'
@@ -37,8 +125,6 @@ const baseCss = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--interactable-height);
-  height: var(--interactable-height);
   min-width: unset;
 `;
 
@@ -58,35 +144,31 @@ export const AvatarButton: AvatarButtonComponent = memo(
         compact,
         colorScheme,
         shape,
+        borderColor,
         selected,
         name,
         ...props
       } = mergedProps;
       const Component = (as ?? avatarButtonDefaultElement) satisfies React.ElementType;
 
-      const height = compact ? interactableHeight.compact : interactableHeight.regular;
-      const styles = useMemo(
-        () => ({ '--interactable-height': `${height}px` }) as React.CSSProperties,
-        [height],
-      );
-
       return (
         <Pressable
           ref={ref}
           aria-label={accessibilityLabel}
           as={Component}
           background="transparent"
+          borderWidth={0} // remove Pressable's default transparent border
           className={cx(baseCss, className)}
-          style={styles}
           {...props}
         >
           <Avatar
             alt={alt}
+            borderColor={borderColor}
             colorScheme={colorScheme}
-            dangerouslySetSize={height}
             name={name}
             selected={selected}
             shape={shape}
+            size={compact ? 'xl' : 'xxxl'}
             src={src}
           />
         </Pressable>
diff --git a/packages/web/src/buttons/Button.tsx b/packages/web/src/buttons/Button.tsx
index 01a23c4bdf..8c3aba4bd5 100644
--- a/packages/web/src/buttons/Button.tsx
+++ b/packages/web/src/buttons/Button.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, memo } from 'react';
+import React, { forwardRef, memo, useMemo } from 'react';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
 import type {
   ButtonVariant,
@@ -11,6 +11,8 @@ import { css } from '@linaria/core';
 import type { Polymorphic } from '../core/polymorphism';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
+import { useResolveResponsiveProp } from '../hooks/useResolveResponsiveProp';
+import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Pressable, type PressableBaseProps } from '../system/Pressable';
 import { Text } from '../typography/Text';
@@ -18,8 +20,6 @@ import { ProgressCircle } from '../visualizations';
 
 const COMPONENT_STATIC_CLASSNAME = 'cds-Button';
 
-const DEFAULT_MIN_WIDTH = 100;
-
 /** @deprecated Use progressCircleSize instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
@@ -30,6 +30,7 @@ const defaultProgressCircleSize = 24;
 const baseCss = css`
   text-decoration: none;
   display: inline-flex;
+  height: fit-content;
   text-align: center;
   vertical-align: middle;
   align-items: center;
@@ -96,18 +97,8 @@ const middleNodeCss = css`
   position: relative;
 `;
 
-const flushSpaceCss = css`
+const flushCss = css`
   min-width: unset;
-  margin-inline-start: var(--space-2);
-  margin-inline-end: var(--space-2);
-`;
-
-const flushStartCss = css`
-  margin-inline-start: calc(var(--space-2) * -1);
-`;
-
-const flushEndCss = css`
-  margin-inline-end: calc(var(--space-2) * -1);
 `;
 
 export const buttonDefaultElement = 'button';
@@ -209,18 +200,19 @@ export const Button: ButtonComponent = memo(
         background,
         color,
         className,
-        // TO DO: get rid of this height and interactableHeight (mobile and web both)
-        height = compact ? 40 : 56,
         borderColor,
-        borderWidth = 100,
+        borderWidth = 0, // remove Pressable's default transparent border
         borderRadius = compact ? 700 : 900,
         accessibilityLabel,
         padding,
         paddingX = padding ?? (compact ? 2 : 4),
+        paddingY = padding ?? (compact ? 1 : 2),
         margin = 0,
-        minWidth = compact ? 'auto' : DEFAULT_MIN_WIDTH,
+        minWidth = 'auto',
+        style,
         ...props
       } = mergedProps;
+      const theme = useTheme();
       const Component = (as ?? buttonDefaultElement) satisfies React.ElementType;
       const iconSize = compact ? 's' : 'm';
       const hasIcon = Boolean(startIcon ?? endIcon);
@@ -232,6 +224,19 @@ export const Button: ButtonComponent = memo(
       const backgroundValue = background ?? variantStyle.background;
       const borderColorValue = borderColor ?? variantStyle.borderColor;
 
+      const resolvedPaddingX = useResolveResponsiveProp(paddingX);
+
+      const pressableStyle = useMemo(() => {
+        if (!flush || !resolvedPaddingX) return style;
+        const paddingPx = theme.space[resolvedPaddingX];
+        return {
+          ...style,
+          ...(flush === 'start'
+            ? { marginInlineStart: -paddingPx, marginInlineEnd: paddingPx }
+            : { marginInlineStart: paddingPx, marginInlineEnd: -paddingPx }),
+        };
+      }, [flush, resolvedPaddingX, theme.space, style]);
+
       return (
         <Pressable
           ref={ref}
@@ -247,9 +252,7 @@ export const Button: ButtonComponent = memo(
             numberOfLines && unsetNoWrapCss,
             hasIcon && iconCss,
             block && blockCss,
-            flush && flushSpaceCss,
-            flush === 'start' && flushStartCss,
-            flush === 'end' && flushEndCss,
+            flush && flushCss,
             className,
           )}
           color={colorValue}
@@ -258,13 +261,14 @@ export const Button: ButtonComponent = memo(
           data-flush={flush}
           data-transparent={transparent}
           data-variant={variant}
-          height={height}
           loading={loading}
           margin={margin}
           minWidth={minWidth}
           noScaleOnPress={noScaleOnPress}
           padding={padding}
           paddingX={paddingX}
+          paddingY={paddingY}
+          style={pressableStyle}
           transparentWhileInactive={transparent}
           {...props}
         >
diff --git a/packages/web/src/buttons/IconButton.tsx b/packages/web/src/buttons/IconButton.tsx
index 5ec6f5f43d..ed214f580e 100644
--- a/packages/web/src/buttons/IconButton.tsx
+++ b/packages/web/src/buttons/IconButton.tsx
@@ -6,6 +6,7 @@ import { css } from '@linaria/core';
 import type { Polymorphic } from '../core/polymorphism';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
+import { useResolveResponsiveProp } from '../hooks/useResolveResponsiveProp';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Pressable, type PressableBaseProps } from '../system/Pressable';
@@ -62,18 +63,9 @@ type IconButtonComponent = (<AsComponent extends React.ElementType = IconButtonD
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
-const flushSpaceCss = css`
-  min-width: unset;
-  padding-inline-start: var(--space-2);
-  padding-inline-end: var(--space-2);
-`;
-
-const flushStartCss = css`
-  margin-inline-start: calc(var(--space-2) * -1);
-`;
-
-const flushEndCss = css`
-  margin-inline-end: calc(var(--space-2) * -1);
+const baseCss = css`
+  width: fit-content;
+  height: fit-content;
 `;
 
 export const IconButton: IconButtonComponent = memo(
@@ -92,13 +84,12 @@ export const IconButton: IconButtonComponent = memo(
         color,
         borderColor,
         borderRadius = 1000,
-        borderWidth = 100,
+        borderWidth = 0, // remove Pressable's default transparent border
         alignItems = 'center',
         justifyContent = 'center',
-        // TO DO: fix this when removing interactableHeight
-        height = compact ? 40 : 56,
-        width = compact ? 40 : 56,
         className,
+        style,
+        padding = compact ? 1.5 : 2,
         name,
         iconSize = compact ? 's' : 'm',
         active,
@@ -115,6 +106,20 @@ export const IconButton: IconButtonComponent = memo(
       const theme = useTheme();
 
       const iconSizeValue = theme.iconSize[iconSize];
+      const spinnerSize = iconSizeValue / 10;
+
+      const resolvedPadding = useResolveResponsiveProp(padding);
+
+      const pressableStyle = useMemo(() => {
+        if (!flush || !resolvedPadding) return style;
+        const negativeMargin = -theme.space[resolvedPadding];
+        return {
+          ...style,
+          ...(flush === 'start'
+            ? { marginInlineStart: negativeMargin }
+            : { marginInlineEnd: negativeMargin }),
+        };
+      }, [flush, resolvedPadding, theme.space, style]);
 
       const variantMap = transparent ? transparentVariants : variants;
       const variantStyle = variantMap[variant];
@@ -134,24 +139,17 @@ export const IconButton: IconButtonComponent = memo(
           borderColor={borderColorValue}
           borderRadius={borderRadius}
           borderWidth={borderWidth}
-          className={cx(
-            iconButtonClassNames.root,
-            flush && flushSpaceCss,
-            flush === 'start' && flushStartCss,
-            flush === 'end' && flushEndCss,
-            classNames?.root,
-            className,
-          )}
+          className={cx(iconButtonClassNames.root, baseCss, classNames?.root, className)}
           color={colorValue}
           data-compact={compact}
           data-flush={flush}
           data-transparent={transparent}
           data-variant={variant}
-          height={height}
           justifyContent={justifyContent}
           loading={loading}
+          padding={padding}
+          style={pressableStyle}
           transparentWhileInactive={transparent}
-          width={width}
           {...props}
         >
           {loading ? (
diff --git a/packages/web/src/buttons/IconCounterButton.tsx b/packages/web/src/buttons/IconCounterButton.tsx
index 782d5f9cdf..75dd865f59 100644
--- a/packages/web/src/buttons/IconCounterButton.tsx
+++ b/packages/web/src/buttons/IconCounterButton.tsx
@@ -4,6 +4,7 @@ import type { IconSize, ValidateProps } from '@coinbase/cds-common/types';
 import { formatCount } from '@coinbase/cds-common/utils/formatCount';
 import type { IconName } from '@coinbase/cds-icons';
 
+import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
@@ -13,11 +14,6 @@ import { Text } from '../typography/Text';
 export type IconCounterButtonBaseProps = {
   /** Name of the icon or a ReactNode */
   icon: Exclude<React.ReactNode, 'string'> | IconName;
-  /**
-   * @deprecated Use `size` instead. This will be removed in a future major release.
-   * @deprecationExpectedRemoval v8
-   */
-  iconSize?: IconSize;
   /** Size for given icon. */
   size?: IconSize;
   /** Whether the icon is active */
@@ -26,14 +22,32 @@ export type IconCounterButtonBaseProps = {
   count?: number;
   /** Color of the icon */
   color?: ThemeVars.Color;
-  /** @danger This is a migration escape hatch. It is not intended to be used normally. */
+  /**
+   * @deprecated Use `styles.icon`, `classNames.icon`, or `color` to customize icon color. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
+   */
   dangerouslySetColor?: string;
   /** Background color of the overlay (element being interacted with). */
   background?: ThemeVars.Color;
 };
 
 export type IconCounterButtonProps = IconCounterButtonBaseProps &
-  Omit<PressableProps<PressableDefaultElement>, 'background'>;
+  Omit<PressableProps<PressableDefaultElement>, 'background'> & {
+    /** Custom inline styles for individual elements of the IconCounterButton component */
+    styles?: {
+      /** Root Pressable element */
+      root?: React.CSSProperties;
+      /** Icon element rendered when `icon` is an icon name */
+      icon?: React.CSSProperties;
+    };
+    /** Custom class names for individual elements of the IconCounterButton component */
+    classNames?: {
+      /** Root Pressable element */
+      root?: string;
+      /** Icon element rendered when `icon` is an icon name */
+      icon?: string;
+    };
+  };
 
 export const IconCounterButton = memo(
   forwardRef(function IconCounterButton(
@@ -43,19 +57,24 @@ export const IconCounterButton = memo(
     const mergedProps = useComponentConfig('IconCounterButton', _props);
     const {
       icon,
-      iconSize = 's',
-      size = iconSize,
+      size = 's',
       active,
       count = 0,
       color = 'fg',
       dangerouslySetColor,
       background = 'transparent',
+      styles,
+      classNames,
+      className,
+      style,
       ...props
     } = mergedProps;
     return (
       <Pressable
         ref={ref}
         background={background}
+        className={cx(className, classNames?.root)}
+        style={{ ...style, ...styles?.root }}
         {...(props satisfies ValidateProps<
           typeof props,
           Omit<IconCounterButtonProps, keyof PressableProps<PressableDefaultElement>>
@@ -65,10 +84,12 @@ export const IconCounterButton = memo(
           {typeof icon === 'string' ? (
             <Icon
               active={active}
+              className={classNames?.icon}
               color={color}
               dangerouslySetColor={dangerouslySetColor}
               name={icon as IconName}
               size={size}
+              style={styles?.icon}
             />
           ) : (
             icon
diff --git a/packages/web/src/buttons/Tile.tsx b/packages/web/src/buttons/Tile.tsx
index d25a0eba1d..cbb60114b4 100644
--- a/packages/web/src/buttons/Tile.tsx
+++ b/packages/web/src/buttons/Tile.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import React, { type JSX, memo, useCallback, useMemo, useState } from 'react';
 import { css } from '@linaria/core';
 
 import { DotCount } from '../dots/DotCount';
diff --git a/packages/web/src/buttons/__stories__/Button.stories.tsx b/packages/web/src/buttons/__stories__/Button.stories.tsx
index 64e8262280..1b4e09fb93 100644
--- a/packages/web/src/buttons/__stories__/Button.stories.tsx
+++ b/packages/web/src/buttons/__stories__/Button.stories.tsx
@@ -11,14 +11,15 @@ export default {
 };
 
 const buttonStories: Omit<ButtonBaseProps, 'children'>[] = [
-  { variant: 'foregroundMuted' },
   { variant: 'secondary' },
   { variant: 'tertiary' },
   { variant: 'positive' },
   { variant: 'negative' },
+  { variant: 'inverse' },
   { variant: 'secondary', transparent: true },
   { variant: 'positive', transparent: true },
   { variant: 'negative', transparent: true },
+  { variant: 'inverse', transparent: true },
   { block: true },
   { compact: true },
   { compact: true, block: true },
diff --git a/packages/web/src/buttons/__stories__/IconButton.stories.tsx b/packages/web/src/buttons/__stories__/IconButton.stories.tsx
index 5481478d46..4db80d64ff 100644
--- a/packages/web/src/buttons/__stories__/IconButton.stories.tsx
+++ b/packages/web/src/buttons/__stories__/IconButton.stories.tsx
@@ -19,6 +19,12 @@ const iconName = 'arrowsHorizontal';
 const accessibilityLabel = 'Horizontal arrows';
 
 const variants = [
+  {
+    component: (props?: Partial<IconButtonBaseProps>) => (
+      <IconButton compact={false} name={iconName} variant="primary" {...props} />
+    ),
+    title: 'Non-compact',
+  },
   {
     component: (props?: Partial<IconButtonBaseProps>) => (
       <IconButton name={iconName} variant="primary" {...props} />
@@ -45,15 +51,15 @@ const variants = [
   },
   {
     component: (props?: Partial<IconButtonBaseProps>) => (
-      <IconButton name={iconName} variant="foregroundMuted" {...props} />
+      <IconButton flush="start" name={iconName} variant="primary" {...props} />
     ),
-    title: 'ForegroundMuted',
+    title: 'Primary flush start',
   },
   {
     component: (props?: Partial<IconButtonBaseProps>) => (
-      <IconButton transparent name={iconName} variant="foregroundMuted" {...props} />
+      <IconButton flush="end" name={iconName} variant="primary" {...props} />
     ),
-    title: 'ForegroundMuted transparent',
+    title: 'Primary flush end',
   },
 ];
 
@@ -176,7 +182,6 @@ const IconButtonSheet = ({ startIndex, endIndex }: { startIndex: number; endInde
           <HStack alignItems="center" gap={2}>
             <IconButton accessibilityLabel={name} name={name} variant="primary" />
             <IconButton accessibilityLabel={name} name={name} variant="secondary" />
-            <IconButton accessibilityLabel={name} name={name} variant="foregroundMuted" />
           </HStack>
         </VStack>
       ))}
diff --git a/packages/web/src/buttons/__stories__/IconCounterButton.stories.tsx b/packages/web/src/buttons/__stories__/IconCounterButton.stories.tsx
index 838f298bd8..40f245b387 100644
--- a/packages/web/src/buttons/__stories__/IconCounterButton.stories.tsx
+++ b/packages/web/src/buttons/__stories__/IconCounterButton.stories.tsx
@@ -29,7 +29,11 @@ export const IconCounterButtonExample = () => {
       <HStack gap={4}>
         <IconCounterButton active color="fgNegative" count={99} icon="heart" />
         <IconCounterButton color="fgPrimary" count={4200} icon="comment" />
-        <IconCounterButton count={69000000} dangerouslySetColor="orange" icon="arrowsHorizontal" />
+        <IconCounterButton
+          count={69000000}
+          icon="arrowsHorizontal"
+          styles={{ icon: { color: 'orange' } }}
+        />
       </HStack>
       <Divider />
       <Text as="h3" display="block" font="title3">
diff --git a/packages/web/src/buttons/__tests__/AvatarButton.test.tsx b/packages/web/src/buttons/__tests__/AvatarButton.test.tsx
index db9ebb6fbc..f77ed746f0 100644
--- a/packages/web/src/buttons/__tests__/AvatarButton.test.tsx
+++ b/packages/web/src/buttons/__tests__/AvatarButton.test.tsx
@@ -62,4 +62,14 @@ describe('AvatarButton', () => {
 
     expect(screen.getByRole('button')).not.toHaveAttribute('onClick');
   });
+
+  it('accepts deprecated border props without changing rendering', () => {
+    render(
+      <DefaultThemeProvider>
+        <AvatarButton bordered alt="Sneezy" borderRadius={900} borderWidth={300} />
+      </DefaultThemeProvider>,
+    );
+
+    expect(screen.getByRole('button')).toBeDefined();
+  });
 });
diff --git a/packages/web/src/cards/AnnouncementCard.tsx b/packages/web/src/cards/AnnouncementCard.tsx
index 07dd082fc4..6d4640a6a4 100644
--- a/packages/web/src/cards/AnnouncementCard.tsx
+++ b/packages/web/src/cards/AnnouncementCard.tsx
@@ -3,8 +3,9 @@ import React, { memo } from 'react';
 import { Card, type CardBaseProps } from './Card';
 import { CardBody, type CardBodyBaseProps } from './CardBody';
 
-export type AnnouncementCardBaseProps = CardBaseProps & CardBodyBaseProps;
-export type AnnouncementCardProps = AnnouncementCardBaseProps;
+type AnnouncementCardBaseProps = CardBaseProps & CardBodyBaseProps;
+type AnnouncementCardProps = AnnouncementCardBaseProps;
+
 /**
  * @deprecated Use MessagingCard instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v6
diff --git a/packages/web/src/cards/Card.tsx b/packages/web/src/cards/Card.tsx
index 43f676b497..47237bd75a 100644
--- a/packages/web/src/cards/Card.tsx
+++ b/packages/web/src/cards/Card.tsx
@@ -17,6 +17,10 @@ export type CardBaseProps = Pick<SharedAccessibilityProps, 'id'> &
     onClick?: MouseEventHandler;
   };
 
+/**
+ * @deprecated Use `ContentCard`, `MediaCard`, `MessagingCard`, or `DataCard` based on your use case. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type CardProps = CardBaseProps &
   Omit<BoxProps<BoxDefaultElement>, 'onClick' | 'onKeyDown' | 'onKeyUp' | 'background'>;
 
@@ -69,7 +73,6 @@ export const Card = memo<CardProps>(function Card({
     ),
     [background, borderRadius, children, elevation, height, linkable, pin, props, testID, width],
   );
-
   if (isAnchor) {
     return (
       <Pressable
diff --git a/packages/web/src/cards/CardMedia.tsx b/packages/web/src/cards/CardMedia.tsx
index e661c491ed..8929f0c9b9 100644
--- a/packages/web/src/cards/CardMedia.tsx
+++ b/packages/web/src/cards/CardMedia.tsx
@@ -32,25 +32,11 @@ const imageProps: Record<CardMediaPlacement, CardMediaImageSizeObject> = {
  */
 export const CardMedia = memo(function CardMedia({ placement = 'end', ...props }: CardMediaProps) {
   if (props.type === 'spotSquare') {
-    return (
-      <SpotSquare
-        {...props}
-        dimension={defaultMediaDimension}
-        name={props.name}
-        testID={props.testID}
-      />
-    );
+    return <SpotSquare dimension={defaultMediaDimension} {...props} />;
   }
 
   if (props.type === 'pictogram') {
-    return (
-      <Pictogram
-        {...props}
-        dimension={defaultPictogramMediaDimension}
-        name={props.name}
-        testID={props.testID}
-      />
-    );
+    return <Pictogram dimension={defaultPictogramMediaDimension} {...props} />;
   }
 
   if (props.type === 'image') {
diff --git a/packages/web/src/cards/ContentCard/__stories__/ContentCard.stories.tsx b/packages/web/src/cards/ContentCard/__stories__/ContentCard.stories.tsx
index a3433d8ead..a3c34ca167 100644
--- a/packages/web/src/cards/ContentCard/__stories__/ContentCard.stories.tsx
+++ b/packages/web/src/cards/ContentCard/__stories__/ContentCard.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { assets, ethBackground } from '@coinbase/cds-common/internal/data/assets';
 
 import { Button, IconButton, IconCounterButton } from '../../../buttons';
@@ -491,5 +491,12 @@ export default {
 };
 
 ProductCarousel.parameters = {
-  a11y: { config: { rules: [{ id: 'scrollable-region-focusable', enabled: false }] } },
+  a11y: {
+    config: { rules: [{ id: 'scrollable-region-focusable', enabled: false }] },
+    options: {
+      rules: {
+        'target-size': { enabled: false },
+      },
+    },
+  },
 };
diff --git a/packages/web/src/cards/FeatureEntryCard.tsx b/packages/web/src/cards/FeatureEntryCard.tsx
index c256876509..a50aedd425 100644
--- a/packages/web/src/cards/FeatureEntryCard.tsx
+++ b/packages/web/src/cards/FeatureEntryCard.tsx
@@ -3,13 +3,8 @@ import React, { memo } from 'react';
 import { Card, type CardBaseProps } from './Card';
 import { CardBody, type CardBodyBaseProps } from './CardBody';
 
-export type FeatureEntryCardBaseProps = CardBaseProps & CardBodyBaseProps;
-
-/**
- * @deprecated Use MessagingCard instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v6
- */
-export type FeatureEntryCardProps = FeatureEntryCardBaseProps;
+type FeatureEntryCardBaseProps = CardBaseProps & CardBodyBaseProps;
+type FeatureEntryCardProps = FeatureEntryCardBaseProps;
 
 /**
  * @deprecated Use MessagingCard instead. This will be removed in a future major release.
diff --git a/packages/web/src/cards/FeedCard.tsx b/packages/web/src/cards/FeedCard.tsx
index 251612ac5d..0bf2910edb 100644
--- a/packages/web/src/cards/FeedCard.tsx
+++ b/packages/web/src/cards/FeedCard.tsx
@@ -13,7 +13,7 @@ import { CardFooter } from './CardFooter';
 import { CardHeader } from './CardHeader';
 import { LikeButton, type LikeButtonBaseProps } from './LikeButton';
 
-export type FeedCardBaseProps = Pick<CardBodyBaseProps, 'image' | 'pictogram' | 'spotSquare'> &
+type FeedCardBaseProps = Pick<CardBodyBaseProps, 'image' | 'pictogram' | 'spotSquare'> &
   CardBaseProps & {
     /** Image url for Avatar */
     avatar?: string;
@@ -37,11 +37,7 @@ export type FeedCardBaseProps = Pick<CardBodyBaseProps, 'image' | 'pictogram' |
     cta?: ButtonBaseProps;
   };
 
-/**
- * @deprecated Use the ContentCard component instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
-export type FeedCardProps = FeedCardBaseProps;
+type FeedCardProps = FeedCardBaseProps;
 
 /**
  * @deprecated Use the ContentCard component instead. This will be removed in a future major release.
diff --git a/packages/web/src/cards/LikeButton.tsx b/packages/web/src/cards/LikeButton.tsx
index c717a705a2..7198603b6c 100644
--- a/packages/web/src/cards/LikeButton.tsx
+++ b/packages/web/src/cards/LikeButton.tsx
@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
+import { memo, useMemo } from 'react';
 import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
 import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
+import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
 import { Pressable, type PressableDefaultElement, type PressableProps } from '../system/Pressable';
@@ -16,7 +16,7 @@ export type LikeButtonBaseProps = Pick<
   SharedProps & {
     liked?: boolean;
     count?: number;
-    /** Reduce the inner padding within the button itself. */
+    /** Use the compact variant. */
     compact?: boolean;
     /** Ensure the button aligns flush on the left or right.
      * This prop will translate the entire button left/right,
@@ -29,14 +29,27 @@ export type LikeButtonProps = LikeButtonBaseProps & PressableProps<PressableDefa
 
 export const LikeButton = memo(function LikeButton(_props: LikeButtonProps) {
   const mergedProps = useComponentConfig('LikeButton', _props);
-  const { count = 0, compact = true, flush, liked = false, ...props } = mergedProps;
+  const {
+    count = 0,
+    compact = true,
+    flush,
+    liked = false,
+    padding = compact ? 1.5 : 2, // mirror IconButton's padding
+    ...props
+  } = mergedProps;
+  const theme = useTheme();
   const iconSize = compact ? 's' : 'm';
-  const size = interactableHeight[compact ? 'compact' : 'regular'];
 
   const { marginStart, marginEnd } = getButtonSpacingProps({ compact, flush });
 
+  // override default line height to match the height of the sibling icon
+  const countTextStyle = useMemo(
+    () => ({ lineHeight: `${theme.iconSize[iconSize]}px` }),
+    [theme.iconSize, iconSize],
+  );
+
   return (
-    <Pressable background="transparent" {...props}>
+    <Pressable background="transparent" padding={padding} {...props}>
       <HStack
         alignItems="center"
         flexShrink={0}
@@ -45,12 +58,10 @@ export const LikeButton = memo(function LikeButton(_props: LikeButtonProps) {
         justifyContent="flex-start"
         marginEnd={marginEnd}
         marginStart={marginStart}
-        minHeight={size}
-        minWidth={size}
       >
         <Icon active={liked} color={liked ? 'fgNegative' : 'fg'} name="heart" size={iconSize} />
         {count > 0 ? (
-          <Text mono as="p" display="block" font="label1">
+          <Text mono as="p" display="block" font="label1" style={countTextStyle}>
             {count}
           </Text>
         ) : null}
diff --git a/packages/web/src/cards/UpsellCard.tsx b/packages/web/src/cards/UpsellCard.tsx
index 256bfb7927..6a1df1a5cc 100644
--- a/packages/web/src/cards/UpsellCard.tsx
+++ b/packages/web/src/cards/UpsellCard.tsx
@@ -8,13 +8,14 @@ import type {
 } from '@coinbase/cds-common/types';
 
 import { Button, IconButton } from '../buttons';
-import { HStack, VStack } from '../layout';
+import { HStack, type HStackDefaultElement, type HStackProps, VStack } from '../layout';
 import { Pressable, type PressableDefaultElement, type PressableProps } from '../system';
 import { Text } from '../typography/Text';
 
 export type UpsellCardBaseProps = SharedProps &
   Pick<SharedAccessibilityProps, 'accessibilityLabel'> &
-  Pick<DimensionStyles, 'width'> & {
+  Pick<DimensionStyles, 'width'> &
+  Pick<HStackProps<HStackDefaultElement>, 'className' | 'style'> & {
     /** Callback fired when the action button is pressed */
     onActionPress?: PressableProps<PressableDefaultElement>['onClick'];
     /** Callback fired when the dismiss button is pressed */
@@ -37,7 +38,8 @@ export type UpsellCardBaseProps = SharedProps &
      */
     background?: ThemeVars.Color;
     /**
-     * @danger This is a migration escape hatch. It is not intended to be used normally.
+     * @deprecated Use `style`, `className`, or `background` to customize card background. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
      */
     dangerouslySetBackground?: string;
   };
@@ -86,6 +88,8 @@ export const UpsellCard = memo(
     accessibilityLabel,
     width = upsellCardDefaultWidth,
     onClick,
+    className,
+    style,
   }: UpsellCardProps) => {
     const content = (
       <HStack
@@ -93,9 +97,10 @@ export const UpsellCard = memo(
         background={background}
         borderColor="transparent"
         borderRadius={500}
+        className={className}
         dangerouslySetBackground={dangerouslySetBackground}
         minHeight={upsellCardMinHeight}
-        style={{ border: 'none' }}
+        style={{ border: 'none', ...style }}
         testID={testID}
         width={width}
       >
diff --git a/packages/web/src/cards/__figma__/UpsellCard.figma.tsx b/packages/web/src/cards/__figma__/UpsellCard.figma.tsx
index 288cacf183..4573917c43 100644
--- a/packages/web/src/cards/__figma__/UpsellCard.figma.tsx
+++ b/packages/web/src/cards/__figma__/UpsellCard.figma.tsx
@@ -40,8 +40,8 @@ figma.connect(
       return (
         <UpsellCard
           {...props}
-          dangerouslySetBackground={green60}
           description={description.string}
+          style={{ backgroundColor: green60 }}
           title={title.string}
         />
       );
diff --git a/packages/web/src/cards/__stories__/Card.stories.tsx b/packages/web/src/cards/__stories__/Card.stories.tsx
deleted file mode 100644
index 7052ee96f1..0000000000
--- a/packages/web/src/cards/__stories__/Card.stories.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { announcementCards } from '@coinbase/cds-common/internal/data/announcementCards';
-import { avatars } from '@coinbase/cds-common/internal/data/avatars';
-import { dataCards } from '@coinbase/cds-common/internal/data/dataCards';
-import { featureEntryCards } from '@coinbase/cds-common/internal/data/featureEntryCards';
-import { feedImages } from '@coinbase/cds-common/internal/data/feedImages';
-import { loremIpsum } from '@coinbase/cds-common/internal/data/loremIpsum';
-import { baseConfig, storyBuilder } from '@coinbase/cds-common/internal/utils/storyBuilder';
-
-import { Button } from '../../buttons';
-import { Box, VStack } from '../../layout';
-import { LoremIpsum } from '../../layout/__stories__/LoremIpsum';
-import type { AnnouncementCardProps } from '../AnnouncementCard';
-import { AnnouncementCard as AnnouncementCardComponent } from '../AnnouncementCard';
-import { Card } from '../Card';
-import { CardGroup } from '../CardGroup';
-import { DataCard as DataCardComponent } from '../DataCard';
-import { FeatureEntryCard as FeatureEntryCardComponent } from '../FeatureEntryCard';
-import type { FeedCardProps } from '../FeedCard';
-import { FeedCard as FeedCardComponent } from '../FeedCard';
-import type { LikeButtonBaseProps } from '../LikeButton';
-
-const cardParameters = {
-  /**
-   * TODO: Remove this percy skip
-   */
-  percy: { skip: true },
-  wrapper: CardGroup,
-  wrapperProps: { background: 'bg', borderedBottom: true },
-} as const;
-const builder = storyBuilder({ parameters: cardParameters });
-
-/* -------------------------------------------------------------------------- */
-/*                             Announcement Cards                             */
-/* -------------------------------------------------------------------------- */
-const announcementCardBuilder = builder(AnnouncementCardComponent);
-
-export const AnnouncementCard = announcementCardBuilder.build(
-  announcementCards[0] as AnnouncementCardProps,
-);
-export const AnnouncementCards = announcementCardBuilder.buildSheet(
-  announcementCards as AnnouncementCardProps[],
-);
-
-/* -------------------------------------------------------------------------- */
-/*                             FeatureEntry Cards                             */
-/* -------------------------------------------------------------------------- */
-const featureEntryCardBuilder = builder(FeatureEntryCardComponent);
-
-export const FeatureEntryCard = featureEntryCardBuilder.build(featureEntryCards[0]);
-export const FeatureEntryCards = featureEntryCardBuilder.buildSheet(featureEntryCards);
-
-/* -------------------------------------------------------------------------- */
-/*                                 Feed Cards                                 */
-/* -------------------------------------------------------------------------- */
-const likeCounter = ({ count: countProp = 0, liked: likedProp }: LikeButtonBaseProps) => {
-  return function useLikeButtonProps() {
-    const [count, setCount] = useState(countProp);
-    const [liked, setLiked] = useState(likedProp);
-    const handleOnClick = useCallback(() => {
-      if (liked) {
-        setCount((prev) => prev - 1);
-        setLiked(false);
-      } else {
-        setCount((prev) => prev + 1);
-        setLiked(true);
-      }
-    }, [liked]);
-
-    return useMemo(
-      () => ({
-        liked,
-        count,
-        onClick: handleOnClick,
-        accessibilityLabel: `${count} likes, ${liked ? 'unlike' : 'like'}`,
-      }),
-      [liked, count, handleOnClick],
-    );
-  };
-};
-
-const defaultProps = {
-  avatar: avatars[0],
-  author: 'Author Name',
-  metadata: 'News • Dec 18',
-  title: 'Title',
-  description: loremIpsum,
-  image: feedImages[0],
-  headerAction: {
-    name: 'more',
-    onClick: () => console.log('clicked'),
-  },
-  like: likeCounter({
-    liked: false,
-    count: 10,
-  }),
-  share: {},
-  cta: {
-    children: 'View ETH',
-  },
-} as const;
-
-const feedCards = [
-  {
-    ...defaultProps,
-    key: 'card1',
-    title: 'Russia Values Local Crypto at $200 Billion as Rules Near',
-  } as const,
-  {
-    ...defaultProps,
-    key: 'card2',
-    avatar: avatars[1],
-    image: feedImages[1],
-    title: 'Reddit co-founder raises $500 million fund for crypto startups: report',
-    description:
-      '776 Management, the VC firm owned by Reddit co-founder Alexis Ohanian, has raised $500 million for two new funds primarily focused on...',
-    like: likeCounter({
-      liked: true,
-      count: 3,
-    }),
-    comment: {},
-  } as const,
-];
-
-export const FeedCard = ({ ...props }: FeedCardProps) => {
-  return (
-    <FeedCardComponent
-      background="bg"
-      {...feedCards[0]}
-      like={feedCards[0].like() as LikeButtonBaseProps}
-      maxWidth={800}
-      {...props}
-    />
-  );
-};
-
-FeedCard.bind({});
-FeedCard.args = baseConfig.args;
-FeedCard.argTypes = baseConfig.argTypes;
-FeedCard.parameters = {
-  ...baseConfig.parameters,
-  ...cardParameters,
-};
-
-export const FeedCards = () => {
-  return (
-    <CardGroup>
-      {feedCards.map(({ like: getLikeProps, ...item }) => (
-        <FeedCardComponent {...item} like={getLikeProps()} maxWidth={800} />
-      ))}
-    </CardGroup>
-  );
-};
-
-FeedCards.bind({});
-FeedCards.args = FeedCard.args;
-FeedCards.parameters = FeedCard.parameters;
-FeedCards.argTypes = FeedCard.argTypes;
-
-// below is copied from cardBuilder.tsx
-const sharedWrapperProps = {
-  position: 'relative',
-  width: '100%',
-} as const;
-
-const sharedProps = { padding: 2 } as const;
-const sharedPressProps = { onClick: () => {}, ...sharedProps } as const;
-const pinnedSharedProps = { ...sharedProps, elevation: 2 } as const;
-const pinnedSharedWrapperProps = {
-  ...sharedWrapperProps,
-  height: 250,
-} as const;
-
-const PressableCards = () => (
-  <VStack gap={2} {...sharedWrapperProps}>
-    <Card {...sharedPressProps} elevation={0}>
-      <LoremIpsum title="Elevation 0" />
-    </Card>
-    <Card {...sharedPressProps} elevation={1}>
-      <LoremIpsum title="Elevation 1" />
-    </Card>
-    <Card {...sharedPressProps} elevation={2}>
-      <LoremIpsum title="Elevation 2" />
-    </Card>
-    <Card {...sharedPressProps} elevation={2} width="50%">
-      <LoremIpsum title="Half width" />
-    </Card>
-    <Card {...sharedPressProps} elevation={2} size="medium">
-      <LoremIpsum title="Medium size" />
-    </Card>
-    <Card {...sharedPressProps} borderRadius={400} elevation={1}>
-      <LoremIpsum title="With Border Radius" />
-    </Card>
-  </VStack>
-);
-
-const PressableColoredCards = () => (
-  <VStack gap={2} {...sharedWrapperProps}>
-    <Card {...sharedPressProps} background="bgPrimary">
-      <LoremIpsum color="fgInverse" title="Primary" />
-    </Card>
-
-    <Card {...sharedPressProps} background="bgPositive">
-      <LoremIpsum color="fgInverse" title="Positive" />
-    </Card>
-
-    <Card {...sharedPressProps} background="bgNegative">
-      <LoremIpsum color="fgInverse" title="Negative" />
-    </Card>
-  </VStack>
-);
-
-const NonClickableCards = () => (
-  <VStack gap={2} {...sharedWrapperProps}>
-    <Card {...sharedProps} elevation={1}>
-      <LoremIpsum title="Elevation 1" />
-      <Button variant="secondary">Secondary button</Button>
-    </Card>
-
-    <Card {...sharedProps} elevation={2}>
-      <LoremIpsum title="Elevation 2" />
-      <Button variant="secondary">Secondary button</Button>
-    </Card>
-  </VStack>
-);
-
-const NonClickableColoredCards = () => (
-  <VStack gap={2} {...sharedWrapperProps}>
-    <Card {...sharedProps} background="bgPrimary">
-      <LoremIpsum color="fgInverse" title="Primary" />
-    </Card>
-
-    <Card {...sharedProps} background="bgPositive">
-      <LoremIpsum color="fgInverse" title="Positive" />
-    </Card>
-
-    <Card {...sharedProps} background="bgNegative">
-      <LoremIpsum color="fgInverse" title="Negative" />
-    </Card>
-  </VStack>
-);
-
-const PinnedTopCard = () => (
-  <Box {...pinnedSharedWrapperProps} background="bgAlternate">
-    <Card {...pinnedSharedProps} pin="top">
-      <LoremIpsum concise title="Top" />
-    </Card>
-  </Box>
-);
-
-const PinnedRightCard = () => (
-  <Box {...pinnedSharedWrapperProps} background="bgAlternate">
-    <Card {...pinnedSharedProps} pin="right">
-      <LoremIpsum concise title="Right" />
-    </Card>
-  </Box>
-);
-
-const PinnedBottomCard = () => (
-  <Box {...pinnedSharedWrapperProps} background="bgAlternate">
-    <Card {...pinnedSharedProps} pin="bottom">
-      <LoremIpsum concise title="Bottom" />
-    </Card>
-  </Box>
-);
-
-const PinnedLeftCard = () => (
-  <Box {...pinnedSharedWrapperProps} background="bgAlternate">
-    <Card {...pinnedSharedProps} pin="left">
-      <LoremIpsum concise title="Left" />
-    </Card>
-  </Box>
-);
-
-export {
-  NonClickableCards,
-  NonClickableColoredCards,
-  PinnedBottomCard,
-  PinnedLeftCard,
-  PinnedRightCard,
-  PinnedTopCard,
-  PressableCards,
-  PressableColoredCards,
-};
-
-export default {
-  title: 'Components/Cards',
-  component: FeedCard,
-};
diff --git a/packages/web/src/cards/__stories__/ContainedAssetCard.stories.tsx b/packages/web/src/cards/__stories__/ContainedAssetCard.stories.tsx
index 5cc34f36db..57be356370 100644
--- a/packages/web/src/cards/__stories__/ContainedAssetCard.stories.tsx
+++ b/packages/web/src/cards/__stories__/ContainedAssetCard.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { assets, ethBackground } from '@coinbase/cds-common/internal/data/assets';
 import { subheadIconSignMap } from '@coinbase/cds-common/tokens/sparkline';
 
diff --git a/packages/web/src/cards/__stories__/FloatingAssetCard.stories.tsx b/packages/web/src/cards/__stories__/FloatingAssetCard.stories.tsx
index 1b58d1985f..e83bc87a79 100644
--- a/packages/web/src/cards/__stories__/FloatingAssetCard.stories.tsx
+++ b/packages/web/src/cards/__stories__/FloatingAssetCard.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import {
   ethBackground,
   floatingAssetCardCustomImage,
diff --git a/packages/web/src/cards/__stories__/MediaCard.stories.tsx b/packages/web/src/cards/__stories__/MediaCard.stories.tsx
index 6f08c754bf..41fb408459 100644
--- a/packages/web/src/cards/__stories__/MediaCard.stories.tsx
+++ b/packages/web/src/cards/__stories__/MediaCard.stories.tsx
@@ -1,11 +1,11 @@
-import React, { useRef } from 'react';
+import React, { type JSX, useRef } from 'react';
 import { assets, ethBackground } from '@coinbase/cds-common/internal/data/assets';
 
 import { Carousel } from '../../carousel/Carousel';
 import { CarouselItem } from '../../carousel/CarouselItem';
 import { VStack } from '../../layout/VStack';
 import { RemoteImage } from '../../media/RemoteImage';
-import { TextHeadline, TextLabel2, TextTitle3 } from '../../typography';
+import { Text } from '../../typography';
 import { MediaCard } from '../MediaCard';
 
 const exampleProps = {
@@ -123,14 +123,22 @@ export const TextContent = (): JSX.Element => {
       />
       <MediaCard
         description={
-          <TextLabel2 as="p">
+          <Text as="p" font="label2">
             Custom description with <strong>bold text</strong> and <em>italic text</em>
-          </TextLabel2>
+          </Text>
         }
         media={exampleMedia}
-        subtitle={<TextHeadline as="p">Custom Subtitle</TextHeadline>}
+        subtitle={
+          <Text as="p" font="headline">
+            Custom Subtitle
+          </Text>
+        }
         thumbnail={exampleThumbnail}
-        title={<TextTitle3 as="p">Custom Title</TextTitle3>}
+        title={
+          <Text as="p" font="title3">
+            Custom Title
+          </Text>
+        }
         width={320}
       />
     </VStack>
diff --git a/packages/web/src/cards/__stories__/MessagingCard.stories.tsx b/packages/web/src/cards/__stories__/MessagingCard.stories.tsx
index bc8d5d01cb..a613bb6004 100644
--- a/packages/web/src/cards/__stories__/MessagingCard.stories.tsx
+++ b/packages/web/src/cards/__stories__/MessagingCard.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { type JSX, useRef, useState } from 'react';
 import { coinbaseOneLogo, svgs } from '@coinbase/cds-common/internal/data/assets';
 
 import { Button } from '../../buttons/Button';
diff --git a/packages/web/src/cards/__stories__/UpsellCard.stories.tsx b/packages/web/src/cards/__stories__/UpsellCard.stories.tsx
index b43f005296..6634595a70 100644
--- a/packages/web/src/cards/__stories__/UpsellCard.stories.tsx
+++ b/packages/web/src/cards/__stories__/UpsellCard.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { coinbaseOneLogo } from '@coinbase/cds-common/internal/data/assets';
 
 import { Button } from '../../buttons';
@@ -68,12 +68,12 @@ export const CustomTextNodes = (): JSX.Element => {
           Sign up
         </Button>
       }
-      dangerouslySetBackground="rgb(var(--blue80))"
       description={
         <Text as="p" color="fgInverse" display="block" font="label2">
           Start your free 30 day trial of Coinbase One
         </Text>
       }
+      style={{ backgroundColor: 'rgb(var(--blue80))' }}
       title={
         <Text as="h3" color="fgInverse" display="block" font="headline">
           Coinbase One
@@ -84,7 +84,7 @@ export const CustomTextNodes = (): JSX.Element => {
 };
 
 export const CustomBackground = (): JSX.Element => {
-  return <UpsellCard {...exampleProps} dangerouslySetBackground="rgb(var(--yellow20))" />;
+  return <UpsellCard {...exampleProps} style={{ backgroundColor: 'rgb(var(--yellow20))' }} />;
 };
 
 export const CustomWidth = (): JSX.Element => <UpsellCard {...exampleProps} width="100%" />;
diff --git a/packages/web/src/cards/__tests__/UpsellCard.test.tsx b/packages/web/src/cards/__tests__/UpsellCard.test.tsx
index c369a6b221..edf6f9e13a 100644
--- a/packages/web/src/cards/__tests__/UpsellCard.test.tsx
+++ b/packages/web/src/cards/__tests__/UpsellCard.test.tsx
@@ -46,10 +46,10 @@ describe('UpsellCard', () => {
     expect(screen.getByTestId('media')).toBeInTheDocument();
   });
 
-  it('renders dangerouslySetBackground', () => {
+  it('renders custom background via style prop', () => {
     render(
       <DefaultThemeProvider>
-        <UpsellCard {...exampleProps} dangerouslySetBackground="#d3d3d3" />
+        <UpsellCard {...exampleProps} style={{ backgroundColor: '#d3d3d3' }} />
       </DefaultThemeProvider>,
     );
     expect(screen.getByTestId(exampleProps.testID as string)).toHaveStyle({
diff --git a/packages/web/src/carousel/Carousel.tsx b/packages/web/src/carousel/Carousel.tsx
index c47a5c7619..4737f92035 100644
--- a/packages/web/src/carousel/Carousel.tsx
+++ b/packages/web/src/carousel/Carousel.tsx
@@ -69,7 +69,7 @@ const animationConfig: Transition = {
   mass: 4,
 };
 
-export type CarouselItemRenderChildren = React.FC<{ isVisible: boolean }>;
+export type CarouselItemRenderChildren = (args: { isVisible: boolean }) => React.ReactNode;
 
 export type CarouselItemBaseProps = Omit<BoxBaseProps, 'children'> & {
   /**
@@ -163,10 +163,10 @@ export type CarouselPaginationComponentBaseProps = {
   paginationAccessibilityLabel?: string | ((pageIndex: number) => string);
   /**
    * Visual variant for the pagination indicators.
-   * - 'pill': All indicators are pill-shaped (default)
-   * - 'dot': Inactive indicators are small dots, active indicator expands to a pill
-   * @default 'pill'
-   * @note 'pill' variant is deprecated, use 'dot' instead
+   * When omitted, the default pagination component renders the current dot-style design.
+   * @default 'dot'
+   * @deprecated `pill` is deprecated. Prefer the default dot pagination or provide a custom `PaginationComponent`. This will be removed in a future major release.
+   * @deprecationExpectedRemoval v10
    */
   variant?: 'pill' | 'dot';
 };
@@ -235,6 +235,11 @@ export type CarouselBaseProps = SharedProps &
      * Hides the pagination indicators (dots/bars showing current page).
      */
     hidePagination?: boolean;
+    /**
+     * @deprecated Use the default dot pagination, or provide a custom `PaginationComponent` if you need custom visuals. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
+     */
+    paginationVariant?: CarouselPaginationComponentBaseProps['variant'];
     /**
      * Custom component to render navigation arrows.
      * @default DefaultCarouselNavigation
@@ -312,14 +317,6 @@ export type CarouselBaseProps = SharedProps &
      * @default 3000 (3 seconds)
      */
     autoplayInterval?: number;
-    /**
-     * Visual variant for the pagination indicators.
-     * - 'pill': All indicators are pill-shaped (default)
-     * - 'dot': Inactive indicators are small dots, active indicator expands to a pill
-     * @default 'pill'
-     * @note 'pill' variant is deprecated, use 'dot' instead
-     */
-    paginationVariant?: CarouselPaginationComponentBaseProps['variant'];
   };
 
 export type CarouselProps = Omit<BoxProps<BoxDefaultElement>, 'title'> &
@@ -717,6 +714,7 @@ export const Carousel = memo(
         title,
         hideNavigation,
         hidePagination,
+        paginationVariant,
         drag = 'snap',
         snapMode = 'page',
         NavigationComponent = DefaultCarouselNavigation,
@@ -737,7 +735,6 @@ export const Carousel = memo(
         loop,
         autoplay,
         autoplayInterval = 3000,
-        paginationVariant,
         ...props
       } = mergedProps;
       const animationApi = useAnimation();
@@ -1323,7 +1320,12 @@ export const Carousel = memo(
                 {(title || !hideNavigation) && (
                   <HStack alignItems="center" justifyContent={title ? 'space-between' : 'flex-end'}>
                     {typeof title === 'string' ? (
-                      <Text className={classNames?.title} font="title3" style={styles?.title}>
+                      <Text
+                        className={classNames?.title}
+                        font="title3"
+                        numberOfLines={1}
+                        style={styles?.title}
+                      >
                         {title}
                       </Text>
                     ) : (
@@ -1379,32 +1381,35 @@ export const Carousel = memo(
                         {pageChangeAccessibilityLabel(activePageIndex, totalPages)}
                       </div>
                     )}
+                    {/* // TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility */}
                     <m.div
-                      _dragX={carouselScrollX}
-                      animate={animationApi}
-                      className={cx(classNames?.carousel, defaultCarouselCss)}
-                      drag={isDragEnabled ? 'x' : false}
-                      dragConstraints={
-                        shouldLoop ? undefined : { left: -maxScrollOffset, right: 0 }
-                      }
-                      dragControls={dragControls}
-                      dragTransition={{
-                        // How much inertia affects the target
-                        power: drag === 'free' ? 0.5 : 0.125,
-                        timeConstant: drag !== 'free' ? 125 : undefined,
-                        modifyTarget: handleDragTransition,
-                      }}
-                      initial={false}
-                      onDragEnd={handleDragEnd}
-                      style={{
-                        display: 'flex',
-                        position: 'relative',
-                        x: shouldLoop ? wrappedX : carouselScrollX,
-                        ...styles?.carousel,
-                      }}
-                      whileDrag={{
-                        pointerEvents: 'none',
-                      }}
+                      {...({
+                        _dragX: carouselScrollX,
+                        animate: animationApi,
+                        className: cx(classNames?.carousel, defaultCarouselCss),
+                        drag: isDragEnabled ? 'x' : false,
+                        dragConstraints: shouldLoop
+                          ? undefined
+                          : { left: -maxScrollOffset, right: 0 },
+                        dragControls: dragControls,
+                        dragTransition: {
+                          // How much inertia affects the target
+                          power: drag === 'free' ? 0.5 : 0.125,
+                          timeConstant: drag !== 'free' ? 125 : undefined,
+                          modifyTarget: handleDragTransition,
+                        },
+                        initial: false,
+                        onDragEnd: handleDragEnd,
+                        style: {
+                          display: 'flex',
+                          position: 'relative',
+                          x: shouldLoop ? wrappedX : carouselScrollX,
+                          ...styles?.carousel,
+                        },
+                        whileDrag: {
+                          pointerEvents: 'none',
+                        },
+                      } as React.ComponentProps<typeof m.div>)}
                     >
                       {childrenWithClones}
                     </m.div>
diff --git a/packages/web/src/carousel/DefaultCarouselPagination.tsx b/packages/web/src/carousel/DefaultCarouselPagination.tsx
index 2d804f69ff..a0dcc63eae 100644
--- a/packages/web/src/carousel/DefaultCarouselPagination.tsx
+++ b/packages/web/src/carousel/DefaultCarouselPagination.tsx
@@ -76,6 +76,7 @@ type PaginationIndicatorProps = PressableProps<'button'> & {
 
 const PaginationPill = memo(function PaginationPill({
   isActive,
+  className,
   ...props
 }: PaginationIndicatorProps) {
   return (
@@ -83,6 +84,8 @@ const PaginationPill = memo(function PaginationPill({
       aria-current={isActive ? 'true' : undefined}
       background={isActive ? 'bgPrimary' : 'bgLine'}
       borderColor="transparent"
+      borderWidth={0}
+      className={cx(pillCss, className)}
       data-active={isActive}
       {...props}
     />
@@ -180,7 +183,7 @@ export const DefaultCarouselPagination = memo(function DefaultCarouselPagination
   style,
   styles,
   testID = 'carousel-pagination',
-  variant = 'pill',
+  variant = 'dot',
 }: DefaultCarouselPaginationProps) {
   const isDot = variant === 'dot';
 
@@ -195,9 +198,11 @@ export const DefaultCarouselPagination = memo(function DefaultCarouselPagination
   return (
     <HStack
       className={cx(defaultPaginationCss, className, classNames?.root)}
+      data-variant={variant}
       gap={0.5}
       justifyContent="center"
       style={{ ...style, ...styles?.root }}
+      testID={testID}
     >
       {totalPages > 0 ? (
         Array.from({ length: totalPages }, (_, index) =>
@@ -215,7 +220,7 @@ export const DefaultCarouselPagination = memo(function DefaultCarouselPagination
             <PaginationPill
               key={index}
               accessibilityLabel={getAccessibilityLabel(index)}
-              className={cx(pillCss, classNames?.dot)}
+              className={classNames?.dot}
               isActive={index === activePageIndex}
               onClick={() => onClickPage?.(index)}
               style={styles?.dot}
@@ -229,6 +234,7 @@ export const DefaultCarouselPagination = memo(function DefaultCarouselPagination
           aria-hidden="true"
           background="bgLine"
           borderColor="transparent"
+          borderWidth={0}
           className={cx(isDot ? dotCss : pillCss, classNames?.dot)}
           style={{
             opacity: 0,
diff --git a/packages/web/src/carousel/__figma__/Carousel.figma.tsx b/packages/web/src/carousel/__figma__/Carousel.figma.tsx
index cb248f5434..a7609a0044 100644
--- a/packages/web/src/carousel/__figma__/Carousel.figma.tsx
+++ b/packages/web/src/carousel/__figma__/Carousel.figma.tsx
@@ -19,7 +19,7 @@ figma.connect(
       }),
     },
     example: ({ title, hidePagination }) => (
-      <Carousel hidePagination={hidePagination} paginationVariant="dot" title={title}>
+      <Carousel hidePagination={hidePagination} title={title}>
         <CarouselItem id="1">{/* Item content */}</CarouselItem>
         <CarouselItem id="2">{/* Item content */}</CarouselItem>
         <CarouselItem id="3">{/* Item content */}</CarouselItem>
diff --git a/packages/web/src/carousel/__stories__/Carousel.stories.tsx b/packages/web/src/carousel/__stories__/Carousel.stories.tsx
index 8c5b433c92..effe60e7c0 100644
--- a/packages/web/src/carousel/__stories__/Carousel.stories.tsx
+++ b/packages/web/src/carousel/__stories__/Carousel.stories.tsx
@@ -165,7 +165,7 @@ const SquareAssetCard = ({
 const BasicExamples = () => (
   <VStack gap={4}>
     <NegativeMargin>
-      <Carousel paginationVariant="dot" styles={overflowStyles} title="Snap Page">
+      <Carousel styles={overflowStyles} title="Snap Page">
         {sampleItems.map((item, index) => (
           <CarouselItem
             key={`spaced-${index}`}
@@ -178,13 +178,7 @@ const BasicExamples = () => (
       </Carousel>
     </NegativeMargin>
     <NegativeMargin>
-      <Carousel
-        drag="snap"
-        paginationVariant="dot"
-        snapMode="item"
-        styles={overflowStyles}
-        title="Snap Item"
-      >
+      <Carousel drag="snap" snapMode="item" styles={overflowStyles} title="Snap Item">
         {sampleItems.map((item, index) => (
           <CarouselItem
             key={`snap-${index}`}
@@ -201,7 +195,6 @@ const BasicExamples = () => (
         loop
         NavigationComponent={SeeAllComponent}
         drag="free"
-        paginationVariant="dot"
         snapMode="item"
         styles={overflowStyles}
         title="Square Items Carousel"
@@ -222,7 +215,6 @@ const BasicExamples = () => (
     </NegativeMargin>
     <Carousel
       drag="snap"
-      paginationVariant="dot"
       snapMode="page"
       styles={gapOnlyStyles}
       title={
@@ -247,12 +239,7 @@ const BasicExamples = () => (
         {({ isVisible }) => <SampleUpsellCard isVisible={isVisible} />}
       </CarouselItem>
     </Carousel>
-    <Carousel
-      drag="none"
-      paginationVariant="dot"
-      styles={gapOnlyStyles}
-      title="Navigation Only (No Drag)"
-    >
+    <Carousel drag="none" styles={gapOnlyStyles} title="Navigation Only (No Drag)">
       {sampleItems.slice(0, 4).map((item, index) => (
         <CarouselItem key={`nav-only-${index}`} id={`nav-only-${index}`} width="100%">
           {item}
@@ -300,14 +287,14 @@ const CustomComponentsExample = () => {
             disabled={!canGoPrevious}
             name="caretLeft"
             onClick={onPrevious}
-            variant="foregroundMuted"
+            variant="secondary"
           />
           <IconButton
             accessibilityLabel="Next"
             disabled={!canGoNext}
             name="caretRight"
             onClick={onNext}
-            variant="foregroundMuted"
+            variant="secondary"
           />
         </HStack>
         <HStack alignItems="center" gap={1}>
@@ -437,7 +424,7 @@ const CustomStylesExample = () => {
                 zIndex: 1,
               },
             }}
-            variant="foregroundMuted"
+            variant="secondary"
           />
         )}
         styles={{
@@ -582,13 +569,7 @@ const AnimatedPaginationExample = () => {
 
 const AutoplayExample = () => (
   <NegativeMargin>
-    <Carousel
-      autoplay
-      loop
-      paginationVariant="dot"
-      styles={overflowStyles}
-      title="Autoplay Carousel"
-    >
+    <Carousel autoplay loop styles={overflowStyles} title="Autoplay Carousel">
       {Object.values(assets).map((asset) => (
         <CarouselItem key={asset.symbol} accessibilityLabel={asset.name} id={asset.symbol}>
           {({ isVisible }) => (
@@ -608,13 +589,7 @@ const AutoplayExample = () => (
 const LoopingExamples = () => (
   <VStack gap={4}>
     <NegativeMargin>
-      <Carousel
-        loop
-        paginationVariant="dot"
-        snapMode="page"
-        styles={overflowStyles}
-        title="Looping - Snap Page"
-      >
+      <Carousel loop snapMode="page" styles={overflowStyles} title="Looping - Snap Page">
         {sampleItems.map((item, index) => (
           <CarouselItem
             key={`loop-page-${index}`}
@@ -631,7 +606,6 @@ const LoopingExamples = () => (
         autoplay
         loop
         drag="snap"
-        paginationVariant="dot"
         snapMode="item"
         styles={overflowStyles}
         title="Looping with Autoplay - Snap Item"
@@ -651,7 +625,6 @@ const LoopingExamples = () => (
       <Carousel
         loop
         drag="free"
-        paginationVariant="dot"
         snapMode="item"
         styles={overflowStyles}
         title="Looping - Free Drag"
diff --git a/packages/web/src/carousel/__tests__/Carousel.test.tsx b/packages/web/src/carousel/__tests__/Carousel.test.tsx
index 2bda47aeef..64cef9ad01 100644
--- a/packages/web/src/carousel/__tests__/Carousel.test.tsx
+++ b/packages/web/src/carousel/__tests__/Carousel.test.tsx
@@ -323,16 +323,47 @@ describe('Carousel', () => {
 
       render(<TestCarouselWithItems NavigationComponent={mockNavigation} itemCount={5} />);
 
-      expect(mockNavigation).toHaveBeenCalledWith(
+      expect(mockNavigation).toHaveBeenCalled();
+      expect(mockNavigation.mock.calls[0]?.[0]).toEqual(
         expect.objectContaining({
           onGoNext: expect.any(Function),
           onGoPrevious: expect.any(Function),
           disableGoNext: expect.any(Boolean),
           disableGoPrevious: expect.any(Boolean),
         }),
-        {},
       );
     });
+
+    it('does not pass a pagination variant by default', async () => {
+      const mockPagination = jest.fn((props: { variant?: 'pill' | 'dot' }) => null);
+
+      render(<TestCarouselWithItems PaginationComponent={mockPagination} itemCount={5} />);
+
+      await waitFor(() => {
+        expect(
+          mockPagination.mock.calls.some((call) => {
+            const props = call[0];
+            return props !== undefined && props.variant === undefined;
+          }),
+        ).toBe(true);
+      });
+    });
+
+    it('forwards deprecated paginationVariant to custom pagination components', async () => {
+      const mockPagination = jest.fn((props: { variant?: 'pill' | 'dot' }) => null);
+
+      render(
+        <TestCarouselWithItems
+          PaginationComponent={mockPagination}
+          itemCount={5}
+          paginationVariant="pill"
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockPagination.mock.calls.some((call) => call[0]?.variant === 'pill')).toBe(true);
+      });
+    });
   });
 
   describe('Accessibility', () => {
diff --git a/packages/web/src/carousel/__tests__/DefaultCarouselPagination.test.tsx b/packages/web/src/carousel/__tests__/DefaultCarouselPagination.test.tsx
index 5798e87193..fd4dc9ab10 100644
--- a/packages/web/src/carousel/__tests__/DefaultCarouselPagination.test.tsx
+++ b/packages/web/src/carousel/__tests__/DefaultCarouselPagination.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { domMax, LazyMotion } from 'framer-motion';
 
 import { DefaultThemeProvider } from '../../utils/test';
 import { CarouselAutoplayContext } from '../CarouselContext';
@@ -9,17 +10,9 @@ import { DefaultCarouselPagination } from '../DefaultCarouselPagination';
 jest.mock('framer-motion', () => {
   const realFramerMotion = jest.requireActual('framer-motion');
 
-  const createMockMotionValue = (initialValue: number) => ({
-    get: jest.fn(() => initialValue),
-    set: jest.fn(),
-    on: jest.fn(() => () => {}),
-    onChange: jest.fn(() => () => {}),
-    clearListeners: jest.fn(),
-  });
-
   return {
     ...realFramerMotion,
-    motion: realFramerMotion.motion,
+    motion: realFramerMotion.m,
     useTransform: (value: { get: () => number }, transformer: (v: number) => string) => {
       const transformedValue = transformer(value.get());
       return transformedValue;
@@ -46,18 +39,34 @@ const mockAutoplayContext = {
 const renderPagination = (props: Partial<React.ComponentProps<typeof DefaultCarouselPagination>>) =>
   render(
     <DefaultThemeProvider>
-      <CarouselAutoplayContext.Provider value={mockAutoplayContext}>
-        <DefaultCarouselPagination
-          activePageIndex={0}
-          onClickPage={jest.fn()}
-          totalPages={3}
-          {...props}
-        />
-      </CarouselAutoplayContext.Provider>
+      <LazyMotion features={domMax}>
+        <CarouselAutoplayContext.Provider value={mockAutoplayContext}>
+          <DefaultCarouselPagination
+            activePageIndex={0}
+            onClickPage={jest.fn()}
+            totalPages={3}
+            {...props}
+          />
+        </CarouselAutoplayContext.Provider>
+      </LazyMotion>
     </DefaultThemeProvider>,
   );
 
 describe('DefaultCarouselPagination', () => {
+  describe('variant', () => {
+    it('defaults to the dot variant', () => {
+      renderPagination({ totalPages: 3 });
+
+      expect(screen.getByTestId('carousel-pagination')).toHaveAttribute('data-variant', 'dot');
+    });
+
+    it('switches to the pill variant when requested', () => {
+      renderPagination({ totalPages: 3, variant: 'pill' });
+
+      expect(screen.getByTestId('carousel-pagination')).toHaveAttribute('data-variant', 'pill');
+    });
+  });
+
   describe('paginationAccessibilityLabel', () => {
     it('uses default function that includes page number when not provided', () => {
       renderPagination({ totalPages: 3 });
diff --git a/packages/web/src/cells/Cell.tsx b/packages/web/src/cells/Cell.tsx
index a25c37e12a..8e34a6b70a 100644
--- a/packages/web/src/cells/Cell.tsx
+++ b/packages/web/src/cells/Cell.tsx
@@ -207,7 +207,24 @@ export const Cell: CellComponent = memo(
         accessory,
         accessoryNode,
         alignItems = 'center',
+        bordered,
+        borderedBottom,
+        borderedEnd,
+        borderedHorizontal,
+        borderedStart,
+        borderedTop,
+        borderedVertical,
+        borderBottomLeftRadius,
+        borderBottomRightRadius,
+        borderBottomWidth,
+        borderColor,
+        borderEndWidth,
         borderRadius = 200,
+        borderStartWidth,
+        borderTopLeftRadius,
+        borderTopRightRadius,
+        borderTopWidth,
+        borderWidth,
         children,
         style,
         styles,
@@ -262,11 +279,56 @@ export const Cell: CellComponent = memo(
       const isButton = Boolean(onClick ?? onKeyDown ?? onKeyUp);
       const linkable = isAnchor || isButton;
       const contentTruncationStyle = cx(baseCss, shouldTruncate && truncationCss);
+      // Border props must be applied to the internal Pressable wrapper for correct visual rendering.
+      // The outer Box was only meant to create padding outside the Pressable area; this behavior
+      // will be removed in https://linear.app/coinbase/issue/CDS-1512/remove-legacy-normal-spacing-variant-from-listcell.
+      const borderProps = useMemo(
+        () => ({
+          bordered,
+          borderedBottom,
+          borderedEnd,
+          borderedHorizontal,
+          borderedStart,
+          borderedTop,
+          borderedVertical,
+          borderBottomLeftRadius,
+          borderBottomRightRadius,
+          borderBottomWidth,
+          borderColor,
+          borderEndWidth,
+          borderRadius,
+          borderStartWidth,
+          borderTopLeftRadius,
+          borderTopRightRadius,
+          borderTopWidth,
+          borderWidth,
+        }),
+        [
+          bordered,
+          borderedBottom,
+          borderedEnd,
+          borderedHorizontal,
+          borderedStart,
+          borderedTop,
+          borderedVertical,
+          borderBottomLeftRadius,
+          borderBottomRightRadius,
+          borderBottomWidth,
+          borderColor,
+          borderEndWidth,
+          borderRadius,
+          borderStartWidth,
+          borderTopLeftRadius,
+          borderTopRightRadius,
+          borderTopWidth,
+          borderWidth,
+        ],
+      );
       const content = useMemo(() => {
         // props for the entire inner container that wraps the top content
         // (media, children, intermediary, detail, accessory) and the bottom content
         const contentContainerProps = {
-          borderRadius,
+          ...borderProps,
           className: cx(contentClassName, classNames?.contentContainer),
           testID,
           ...(selected ? { background } : {}),
@@ -368,7 +430,7 @@ export const Cell: CellComponent = memo(
           </VStack>
         );
       }, [
-        borderRadius,
+        borderProps,
         contentClassName,
         classNames?.contentContainer,
         classNames?.topContent,
@@ -417,7 +479,7 @@ export const Cell: CellComponent = memo(
           accessibilityLabel,
           accessibilityLabelledBy,
           background: 'bg' as const,
-          borderRadius,
+          ...borderProps,
           className: cx(pressCss, insetFocusRingCss, classNames?.pressable),
           disabled,
           marginX: innerSpacingMarginX,
@@ -447,7 +509,7 @@ export const Cell: CellComponent = memo(
         accessibilityHint,
         accessibilityLabel,
         accessibilityLabelledBy,
-        borderRadius,
+        borderProps,
         classNames?.pressable,
         disabled,
         innerSpacingMarginX,
diff --git a/packages/web/src/cells/CellAccessory.tsx b/packages/web/src/cells/CellAccessory.tsx
index 3f29cb877f..cf6d1dbfd2 100644
--- a/packages/web/src/cells/CellAccessory.tsx
+++ b/packages/web/src/cells/CellAccessory.tsx
@@ -51,7 +51,7 @@ export const CellAccessory = memo(
     }
 
     return (
-      <Box {...props} ref={ref} testID={cellAccessoryTestId}>
+      <Box ref={ref} testID={cellAccessoryTestId} {...props}>
         {icon}
       </Box>
     );
diff --git a/packages/web/src/cells/ContentCellFallback.tsx b/packages/web/src/cells/ContentCellFallback.tsx
index ce1c5c95be..a1ef19c32a 100644
--- a/packages/web/src/cells/ContentCellFallback.tsx
+++ b/packages/web/src/cells/ContentCellFallback.tsx
@@ -55,6 +55,10 @@ const fullWidthStyle = { width: '100%', display: 'block' } as const;
 
 const floatStyle = { float: 'right', width: '30%' } as const;
 
+/**
+ * @deprecated Use `ListCellFallback` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const ContentCellFallback = memo(function ContentCellFallback({
   accessory,
   accessoryNode,
diff --git a/packages/web/src/cells/ListCell.tsx b/packages/web/src/cells/ListCell.tsx
index 9f89407485..012122a651 100644
--- a/packages/web/src/cells/ListCell.tsx
+++ b/packages/web/src/cells/ListCell.tsx
@@ -30,6 +30,7 @@ export const condensedInnerSpacing = {
   paddingY: 1,
   marginX: 0,
 } as const satisfies CellSpacing;
+
 // no padding outside of the pressable area
 export const condensedOuterSpacing = {
   paddingX: 0,
@@ -239,16 +240,20 @@ export const ListCell: ListCellComponent = memo(
         style,
         subtitle,
         subtitleNode,
+        minHeight: minHeightProp,
         ...props
       } = mergedProps;
       const Component = (as ?? listCellDefaultElement) satisfies React.ElementType;
 
+      // we need to maintain fixed min-heights for the different cell style variants until they are dropped in a breaking change
+      // see CDS-1620
       const minHeight =
-        spacingVariant === 'compact'
+        minHeightProp ??
+        (spacingVariant === 'compact'
           ? compactListHeight
           : spacingVariant === 'normal'
             ? listHeight
-            : undefined;
+            : undefined);
 
       const accessoryType = selected && !disableSelectionAccessory ? 'selected' : accessory;
 
diff --git a/packages/web/src/cells/MediaFallback.tsx b/packages/web/src/cells/MediaFallback.tsx
index 414be4ad6c..bf0db24e46 100644
--- a/packages/web/src/cells/MediaFallback.tsx
+++ b/packages/web/src/cells/MediaFallback.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { imageSize, mediaSize } from '@coinbase/cds-common/tokens/cell';
 
 import { Fallback, type fallbackDefaultElement, type FallbackProps } from '../layout/Fallback';
@@ -14,8 +14,8 @@ export const MediaFallback = memo(function MediaFallback({
   ...fallbackProps
 }: MediaFallbackProps) {
   if (type === 'image') {
-    return <Fallback {...fallbackProps} height={imageSize} shape="squircle" width={imageSize} />;
+    return <Fallback height={imageSize} shape="squircle" width={imageSize} {...fallbackProps} />;
   }
 
-  return <Fallback {...fallbackProps} height={mediaSize} shape="circle" width={mediaSize} />;
+  return <Fallback height={mediaSize} shape="circle" width={mediaSize} {...fallbackProps} />;
 });
diff --git a/packages/web/src/cells/__stories__/ListCell.stories.tsx b/packages/web/src/cells/__stories__/ListCell.stories.tsx
index 81f8284b84..c014afd5ec 100644
--- a/packages/web/src/cells/__stories__/ListCell.stories.tsx
+++ b/packages/web/src/cells/__stories__/ListCell.stories.tsx
@@ -887,48 +887,93 @@ const WithHelperText = () => (
   </VStack>
 );
 
-const SpacingVariant = () => (
-  <VStack>
-    {/* Preferred (new design) */}
-    <ListCell
-      accessory="arrow"
-      description="New design"
-      detail="$12,345.00"
-      intermediary={<Icon name="chartLine" />}
-      media={<Avatar src={assets.eth.imageUrl} />}
-      onClick={onClickConsole}
-      spacingVariant="condensed"
-      subdetail="+1.23%"
-      title="Condensed"
-      variant="positive"
-    />
+const BorderCustomization = () => {
+  const [isCondensed, setIsCondensed] = useState(true);
+  const spacingVariant = isCondensed ? 'condensed' : 'normal';
 
-    {/* Deprecated options kept for backward compatibility */}
-    <ListCell
-      accessory="arrow"
-      description="Deprecated (use condensed)"
-      detail="$12,345.00"
-      intermediary={<Icon name="chartLine" />}
-      media={<Avatar src={assets.eth.imageUrl} />}
-      onClick={onClickConsole}
-      spacingVariant="compact"
-      subdetail="+1.23%"
-      title="Compact"
-      variant="positive"
-    />
-    <ListCell
-      accessory="arrow"
-      detail="$12,345.00"
-      intermediary={<Icon name="chartLine" />}
-      media={<Avatar src={assets.eth.imageUrl} />}
-      onClick={onClickConsole}
-      spacingVariant="normal"
-      subdetail="+1.23%"
-      title="Normal"
-      variant="positive"
-    />
-  </VStack>
-);
+  return (
+    <VStack gap={2} padding={2} width="360px">
+      <Switch
+        checked={isCondensed}
+        onChange={(event) => setIsCondensed(event.currentTarget.checked)}
+      >
+        Spacing variant: {spacingVariant}
+      </Switch>
+      <ListCell
+        bordered
+        borderColor="bgLine"
+        description="Bordered on all sides"
+        onClick={onClickConsole}
+        spacingVariant={spacingVariant}
+        title="bordered"
+      />
+      <ListCell
+        borderedTop
+        borderColor="bgLine"
+        description="Border on top side only"
+        onClick={onClickConsole}
+        spacingVariant={spacingVariant}
+        title="borderedTop"
+      />
+      <ListCell
+        borderedHorizontal
+        borderColor="bgLine"
+        description="Borders on leading and trailing sides"
+        onClick={onClickConsole}
+        spacingVariant={spacingVariant}
+        title="borderedHorizontal"
+      />
+      <ListCell
+        bordered
+        borderColor={{
+          phone: 'fgPositive',
+          tablet: 'fgNegative',
+          desktop: 'accentBoldPurple',
+        }}
+        description="Custom border color"
+        onClick={onClickConsole}
+        spacingVariant={spacingVariant}
+        title="borderColor"
+      />
+      <ListCell
+        bordered
+        borderColor="bgLine"
+        borderWidth={200}
+        description="Uniform border width"
+        onClick={onClickConsole}
+        spacingVariant={spacingVariant}
+        title="borderWidth"
+      />
+      <ListCell
+        bordered
+        borderColor="bgLine"
+        borderTopWidth={300}
+        description="Top border width"
+        onClick={onClickConsole}
+        spacingVariant={spacingVariant}
+        title="borderTopWidth"
+      />
+      <ListCell
+        bordered
+        borderColor="bgLine"
+        borderRadius={300}
+        description="Uniform corner radius"
+        onClick={onClickConsole}
+        spacingVariant={spacingVariant}
+        title="borderRadius"
+      />
+      <ListCell
+        bordered
+        borderColor="bgLine"
+        borderTopLeftRadius={400}
+        description="Top-left corner radius"
+        onClick={onClickConsole}
+        spacingVariant={spacingVariant}
+        title="borderTopLeftRadius"
+      />
+    </VStack>
+  );
+};
 
 const CondensedListCell = () => {
   return (
@@ -1238,7 +1283,236 @@ const UseCaseShowcase = () => {
   );
 };
 
+/**
+ * This story shows all 3 spacing variants side by side for easy comparison.
+ * Each column represents a different variant, and each row shows the same content configuration.
+ *
+ * This is useful for:
+ * - Comparing visual differences between variants
+ * - Understanding the impact of removing fixed min-height values
+ * - Testing before/after changes to spacing or height behavior
+ *
+ * Current min-height values:
+ * - normal: 80px
+ * - compact (deprecated): 40px
+ * - condensed: undefined (no min-height)
+ */
+const SpacingVariantsComparison = () => {
+  const spacingVariants = ['normal', 'compact', 'condensed'] as const;
+
+  const renderCell = (
+    spacingVariant: 'normal' | 'compact' | 'condensed',
+    props: Partial<React.ComponentProps<typeof ListCell>>,
+  ) => (
+    <ListCell
+      {...props}
+      spacingVariant={spacingVariant}
+      style={{ border: '1px dashed var(--color-bgLine)', ...props.style }}
+    />
+  );
+
+  return (
+    <VStack gap={6} padding={4}>
+      {/* Header row */}
+      <HStack gap={4}>
+        {spacingVariants.map((variant) => (
+          <VStack key={variant} alignItems="center" gap={1} width="320px">
+            <Text font="title3">{variant}</Text>
+            <Text color="fgMuted" font="label2">
+              {variant === 'normal'
+                ? 'min-height: 80px'
+                : variant === 'compact'
+                  ? 'min-height: 40px'
+                  : 'min-height: none'}
+            </Text>
+          </VStack>
+        ))}
+      </HStack>
+
+      {/* Row 1: Title only - shows min-height impact most clearly */}
+      <VStack gap={2}>
+        <Text color="fgMuted" font="headline">
+          Title only (min-height impact most visible)
+        </Text>
+        <HStack alignItems="flex-start" gap={4}>
+          {spacingVariants.map((variant) => (
+            <VStack key={variant} width="320px">
+              {renderCell(variant, { title: 'Title' })}
+            </VStack>
+          ))}
+        </HStack>
+      </VStack>
+
+      {/* Row 2: Title + Detail */}
+      <VStack gap={2}>
+        <Text color="fgMuted" font="headline">
+          Title + Detail
+        </Text>
+        <HStack alignItems="flex-start" gap={4}>
+          {spacingVariants.map((variant) => (
+            <VStack key={variant} width="320px">
+              {renderCell(variant, {
+                title: 'Title',
+                detail: '$12,345.00',
+                subdetail: '+1.23%',
+                variant: 'positive',
+              })}
+            </VStack>
+          ))}
+        </HStack>
+      </VStack>
+
+      {/* Row 3: Title + Description */}
+      <VStack gap={2}>
+        <Text color="fgMuted" font="headline">
+          Title + Description
+        </Text>
+        <HStack alignItems="flex-start" gap={4}>
+          {spacingVariants.map((variant) => (
+            <VStack key={variant} width="320px">
+              {renderCell(variant, {
+                title: 'Title',
+                description: 'Description text here',
+              })}
+            </VStack>
+          ))}
+        </HStack>
+      </VStack>
+
+      {/* Row 4: Full content - Title + Description + Detail + Subdetail */}
+      <VStack gap={2}>
+        <Text color="fgMuted" font="headline">
+          Full content (Title + Description + Detail + Subdetail)
+        </Text>
+        <HStack alignItems="flex-start" gap={4}>
+          {spacingVariants.map((variant) => (
+            <VStack key={variant} width="320px">
+              {renderCell(variant, {
+                title: 'Title',
+                description: 'Description',
+                detail: '$12,345.00',
+                subdetail: '+1.23%',
+                variant: 'positive',
+              })}
+            </VStack>
+          ))}
+        </HStack>
+      </VStack>
+
+      {/* Row 5: With Media */}
+      <VStack gap={2}>
+        <Text color="fgMuted" font="headline">
+          With Media (Avatar)
+        </Text>
+        <HStack alignItems="flex-start" gap={4}>
+          {spacingVariants.map((variant) => (
+            <VStack key={variant} width="320px">
+              {renderCell(variant, {
+                title: 'Title',
+                description: 'Description',
+                detail: '$12,345.00',
+                subdetail: '+1.23%',
+                media: <Avatar src={assets.eth.imageUrl} />,
+                variant: 'positive',
+              })}
+            </VStack>
+          ))}
+        </HStack>
+      </VStack>
+
+      {/* Row 6: With Media + Accessory */}
+      <VStack gap={2}>
+        <Text color="fgMuted" font="headline">
+          With Media + Accessory
+        </Text>
+        <HStack alignItems="flex-start" gap={4}>
+          {spacingVariants.map((variant) => (
+            <VStack key={variant} width="320px">
+              {renderCell(variant, {
+                title: 'Title',
+                description: 'Description',
+                detail: '$12,345.00',
+                subdetail: '+1.23%',
+                media: <Avatar src={assets.eth.imageUrl} />,
+                accessory: 'arrow',
+                variant: 'positive',
+              })}
+            </VStack>
+          ))}
+        </HStack>
+      </VStack>
+
+      {/* Row 7: Pressable */}
+      <VStack gap={2}>
+        <Text color="fgMuted" font="headline">
+          Pressable (onClick)
+        </Text>
+        <HStack alignItems="flex-start" gap={4}>
+          {spacingVariants.map((variant) => (
+            <VStack key={variant} width="320px">
+              {renderCell(variant, {
+                title: 'Title',
+                description: 'Description',
+                detail: '$12,345.00',
+                subdetail: '+1.23%',
+                media: <Avatar src={assets.eth.imageUrl} />,
+                accessory: 'arrow',
+                onClick: onClickConsole,
+                variant: 'positive',
+              })}
+            </VStack>
+          ))}
+        </HStack>
+      </VStack>
+
+      {/* Row 8: Long title - tests text wrapping at different heights */}
+      <VStack gap={2}>
+        <Text color="fgMuted" font="headline">
+          Long title (tests numberOfLines behavior)
+        </Text>
+        <HStack alignItems="flex-start" gap={4}>
+          {spacingVariants.map((variant) => (
+            <VStack key={variant} width="320px">
+              {renderCell(variant, {
+                title: 'This is a very long title that should wrap to multiple lines',
+                detail: '$12,345.00',
+              })}
+            </VStack>
+          ))}
+        </HStack>
+      </VStack>
+
+      {/* Row 9: Mixed list simulation - shows how lists look with varying content */}
+      <VStack gap={2}>
+        <Text color="fgMuted" font="headline">
+          Mixed content list (shows height inconsistency without min-height)
+        </Text>
+        <HStack alignItems="flex-start" gap={4}>
+          {spacingVariants.map((variant) => (
+            <VStack key={variant} width="320px">
+              {renderCell(variant, { title: 'Short' })}
+              {renderCell(variant, {
+                title: 'With description',
+                description: 'Has more content',
+              })}
+              {renderCell(variant, { title: 'Short again' })}
+              {renderCell(variant, {
+                title: 'Full content',
+                description: 'Description here',
+                detail: '$100.00',
+                subdetail: '+5%',
+                variant: 'positive',
+              })}
+            </VStack>
+          ))}
+        </HStack>
+      </VStack>
+    </VStack>
+  );
+};
+
 export {
+  BorderCustomization,
   CompactContentDeprecated,
   CompactPressableContentDeprecated,
   CondensedListCell,
@@ -1248,7 +1522,7 @@ export {
   LongContent,
   PressableContent,
   PriorityContent,
-  SpacingVariant,
+  SpacingVariantsComparison,
   UseCaseShowcase,
   WithAccessory,
   WithActions,
diff --git a/packages/web/src/cells/__tests__/ContentCellFallback.test.tsx b/packages/web/src/cells/__tests__/ContentCellFallback.test.tsx
index c38ff0c649..24ca54c248 100644
--- a/packages/web/src/cells/__tests__/ContentCellFallback.test.tsx
+++ b/packages/web/src/cells/__tests__/ContentCellFallback.test.tsx
@@ -38,7 +38,7 @@ describe('ContentCellFallback', () => {
         rectWidthVariant: getRectWidthVariant(1, 0),
         width: 50,
       },
-      {},
+      undefined,
     );
   });
 
@@ -55,7 +55,7 @@ describe('ContentCellFallback', () => {
         rectWidthVariant: getRectWidthVariant(1, 1),
         width: 45,
       },
-      {},
+      undefined,
     );
   });
 
@@ -73,7 +73,7 @@ describe('ContentCellFallback', () => {
         paddingTop: 0.5,
         width: 35,
       },
-      {},
+      undefined,
     );
   });
 
@@ -91,7 +91,7 @@ describe('ContentCellFallback', () => {
         rectWidthVariant: getRectWidthVariant(1, 3),
         width: 65,
       },
-      {},
+      undefined,
     );
   });
 });
diff --git a/packages/web/src/chips/ChipProps.ts b/packages/web/src/chips/ChipProps.ts
index 55e7bb7488..30294b8355 100644
--- a/packages/web/src/chips/ChipProps.ts
+++ b/packages/web/src/chips/ChipProps.ts
@@ -1,8 +1,4 @@
-import type {
-  DimensionValue,
-  SharedAccessibilityProps,
-  SharedProps,
-} from '@coinbase/cds-common/types';
+import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
 
 import type {
   PressableBaseProps,
diff --git a/packages/web/src/chips/TabbedChips.tsx b/packages/web/src/chips/TabbedChips.tsx
index 98ccd62958..70c42ce2e9 100644
--- a/packages/web/src/chips/TabbedChips.tsx
+++ b/packages/web/src/chips/TabbedChips.tsx
@@ -1,4 +1,5 @@
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
 import { css } from '@linaria/core';
@@ -6,6 +7,7 @@ import { css } from '@linaria/core';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useHorizontalScrollToTarget } from '../hooks/useHorizontalScrollToTarget';
 import { type BoxBaseProps, HStack } from '../layout';
+import type { ResponsiveProp } from '../styles/styleProps';
 import { Paddle, type TabNavigationBaseProps, Tabs } from '../tabs';
 
 import { MediaChip } from './MediaChip';
@@ -81,6 +83,7 @@ const TabbedChipsComponent = memo(
       previousArrowAccessibilityLabel = 'Previous',
       nextArrowAccessibilityLabel = 'Next',
       width = '100%',
+      color,
       ...props
     } = mergedProps;
     const [scrollTarget, setScrollTarget] = useState<HTMLElement | null>(null);
@@ -129,6 +132,7 @@ const TabbedChipsComponent = memo(
             TabsActiveIndicatorComponent={TabsActiveIndicatorComponent}
             activeTab={activeTab || null}
             background={background}
+            color={color as ResponsiveProp<ThemeVars.Color>}
             gap={gap}
             onActiveTabElementChange={setScrollTarget}
             onChange={handleChange}
diff --git a/packages/web/src/coachmark/Coachmark.tsx b/packages/web/src/coachmark/Coachmark.tsx
index 53d1ec2021..457325349d 100644
--- a/packages/web/src/coachmark/Coachmark.tsx
+++ b/packages/web/src/coachmark/Coachmark.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, memo } from 'react';
-import { type DimensionValue, type SharedProps } from '@coinbase/cds-common';
+import { type SharedProps } from '@coinbase/cds-common';
 
 import { IconButton } from '../buttons/IconButton';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -43,7 +43,7 @@ export type CoachmarkBaseProps = SharedProps &
     /**
      * Desired width of the Coachmark with respect to max width of windowWidth - spacing2 * 2
      */
-    width?: DimensionValue;
+    width?: React.CSSProperties['width'];
     /**
      * a11y label of the close button
      */
@@ -71,7 +71,6 @@ export const Coachmark = memo(
     return (
       <InvertedThemeProvider>
         <VStack
-          {...props}
           ref={ref}
           borderRadius={400}
           maxWidth={400}
@@ -79,6 +78,7 @@ export const Coachmark = memo(
           position="relative"
           testID={testID}
           width={width}
+          {...props}
         >
           {media}
           {!!onClose && (
diff --git a/packages/web/src/collapsible/Collapsible.tsx b/packages/web/src/collapsible/Collapsible.tsx
index 253c325bc3..0119daad4e 100644
--- a/packages/web/src/collapsible/Collapsible.tsx
+++ b/packages/web/src/collapsible/Collapsible.tsx
@@ -102,16 +102,19 @@ export const Collapsible = memo(
     }, [motionStyle, isDisplayNone]);
 
     return (
+      // TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility
       <motion.div
-        {...motionProps}
-        ref={forwardedRef}
-        aria-labelledby={accessibilityLabelledBy}
-        className={COMPONENT_STATIC_CLASSNAME}
-        data-testid={testID}
-        id={id}
-        onAnimationComplete={handleAnimationComplete}
-        role={role}
-        style={style}
+        {...({
+          ...motionProps,
+          ref: forwardedRef,
+          'aria-labelledby': accessibilityLabelledBy,
+          className: COMPONENT_STATIC_CLASSNAME,
+          'data-testid': testID,
+          id: id,
+          onAnimationComplete: handleAnimationComplete,
+          role: role,
+          style: style,
+        } as React.ComponentProps<typeof motion.div>)}
       >
         <Box display="block" paddingTop={paddingTop}>
           <Box
diff --git a/packages/web/src/controls/CheckboxGroup.tsx b/packages/web/src/controls/CheckboxGroup.tsx
index 3e859e2e00..79c8e2e697 100644
--- a/packages/web/src/controls/CheckboxGroup.tsx
+++ b/packages/web/src/controls/CheckboxGroup.tsx
@@ -23,26 +23,7 @@ const checkboxCss = css`
   border-width: 0;
 `;
 
-/**
- * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- *
- * @example
- * // Instead of:
- * <CheckboxGroup selectedValues={new Set(['value1'])} onChange={onChange}>
- *   <Checkbox value="value1">Option 1</Checkbox>
- * </CheckboxGroup>
- *
- * // Use:
- * <ControlGroup
- *   role="group"
- *   ControlComponent={Checkbox}
- *   options={[{ value: 'value1', children: 'Option 1' }]}
- *   value={['value1']}
- *   onChange={onChange}xw
- * />
- */
-export type CheckboxGroupBaseProps<CheckboxValue extends string | number> = FilteredHTMLAttributes<
+type CheckboxGroupBaseProps<CheckboxValue extends string | number> = FilteredHTMLAttributes<
   FieldsetHTMLAttributes<HTMLFieldSetElement>,
   'onChange'
 > &
@@ -59,12 +40,7 @@ export type CheckboxGroupBaseProps<CheckboxValue extends string | number> = Filt
     style?: React.CSSProperties;
   };
 
-/**
- * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
-export type CheckboxGroupProps<CheckboxValue extends string> =
-  CheckboxGroupBaseProps<CheckboxValue>;
+type CheckboxGroupProps<CheckboxValue extends string> = CheckboxGroupBaseProps<CheckboxValue>;
 
 // Follows behavior describe in https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-2/checkbox-2.html
 const CheckboxGroupWithRef = forwardRef(function CheckboxGroupWithRef<CheckboxValue extends string>(
@@ -143,5 +119,9 @@ const CheckboxGroupWithRef = forwardRef(function CheckboxGroupWithRef<CheckboxVa
   props: CheckboxGroupProps<CheckboxValue> & { ref?: React.Ref<HTMLFieldSetElement> },
 ) => React.ReactElement;
 
+/**
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with accessibilityRole="group" instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CheckboxGroup = memo(CheckboxGroupWithRef) as typeof CheckboxGroupWithRef &
   React.MemoExoticComponent<typeof CheckboxGroupWithRef>;
diff --git a/packages/web/src/controls/Control.tsx b/packages/web/src/controls/Control.tsx
index 9a9da1b245..99986ad114 100644
--- a/packages/web/src/controls/Control.tsx
+++ b/packages/web/src/controls/Control.tsx
@@ -10,11 +10,24 @@ import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { Interactable, type InteractableBaseProps } from '../system/Interactable';
-import type { FilteredHTMLAttributes } from '../types';
+import type { FilteredHTMLAttributes, StylesAndClassNames } from '../types';
 import { Text } from '../typography/Text';
 import { isRtl } from '../utils/isRtl';
 
-const COMPONENT_STATIC_CLASSNAME = 'cds-Control';
+/**
+ * Static class names for Control component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export const controlClassNames = {
+  /** Persistent outer wrapper across labeled and unlabeled variants. */
+  root: 'cds-Control',
+  /** Native `<label>` wrapper element. */
+  label: 'cds-Control-label',
+  /** Interactable icon wrapper element. */
+  icon: 'cds-Control-icon',
+  /** Native input element. */
+  input: 'cds-Control-input',
+} as const;
 
 const pointerCss = css`
   &:not(:disabled),
@@ -63,7 +76,14 @@ export type ControlBaseProps<ControlValue extends string> = FilteredHTMLAttribut
   Partial<
     Pick<
       InteractableBaseProps,
-      'background' | 'borderColor' | 'borderRadius' | 'borderWidth' | 'color' | 'elevation'
+      | 'background'
+      | 'borderColor'
+      | 'borderRadius'
+      | 'borderWidth'
+      | 'color'
+      | 'elevation'
+      | 'className'
+      | 'style'
     >
   > & {
     /** Label for the control option. */
@@ -86,10 +106,11 @@ export type ControlBaseProps<ControlValue extends string> = FilteredHTMLAttribut
     labelStyle?: React.CSSProperties;
   };
 
-export type ControlProps<ControlValue extends string> = ControlBaseProps<ControlValue> & {
-  label?: React.ReactNode;
-  children: React.ReactNode;
-};
+export type ControlProps<ControlValue extends string> = ControlBaseProps<ControlValue> &
+  StylesAndClassNames<typeof controlClassNames> & {
+    label?: React.ReactNode;
+    children: React.ReactNode;
+  };
 
 const ControlWithRef = forwardRef(function ControlWithRef<ControlValue extends string>(
   _props: ControlProps<ControlValue>,
@@ -116,6 +137,10 @@ const ControlWithRef = forwardRef(function ControlWithRef<ControlValue extends s
     testID,
     iconStyle,
     labelStyle,
+    className,
+    style,
+    classNames,
+    styles,
     ...htmlProps
   } = mergedProps;
   if (isDevelopment() && !children && !ariaLabelledby) {
@@ -128,7 +153,7 @@ const ControlWithRef = forwardRef(function ControlWithRef<ControlValue extends s
   const labelId = ariaLabelledby ?? id1;
   const inputId = htmlProps.id ?? id2;
 
-  const internalInputRef = useRef<HTMLInputElement>();
+  const internalInputRef = useRef<HTMLInputElement>(undefined);
   const inputRef = useMergeRefs(ref, internalInputRef);
 
   const iconElement = useMemo(
@@ -140,10 +165,10 @@ const ControlWithRef = forwardRef(function ControlWithRef<ControlValue extends s
         borderColor={borderColor}
         borderRadius={borderRadius}
         borderWidth={borderWidth}
-        className={interactableCss}
+        className={cx(interactableCss, controlClassNames.icon, classNames?.icon)}
         disabled={disabled || readOnly}
         elevation={elevation}
-        style={iconStyle}
+        style={{ ...iconStyle, ...styles?.icon }}
         testID={testID ? `${testID}-parent` : undefined}
       >
         {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
@@ -153,12 +178,13 @@ const ControlWithRef = forwardRef(function ControlWithRef<ControlValue extends s
           aria-labelledby={labelId}
           aria-required={type !== 'checkbox' ? required : undefined}
           checked={checked}
-          className={cx(inputBaseCss, pointerCss)}
+          className={cx(inputBaseCss, pointerCss, controlClassNames.input, classNames?.input)}
           data-testid={testID}
           disabled={disabled}
           id={inputId}
           readOnly={readOnly}
           required={required}
+          style={styles?.input}
           type={type}
           value={value}
           {...htmlProps}
@@ -171,6 +197,8 @@ const ControlWithRef = forwardRef(function ControlWithRef<ControlValue extends s
       borderColor,
       borderRadius,
       borderWidth,
+      classNames?.icon,
+      classNames?.input,
       checked,
       children,
       disabled,
@@ -182,6 +210,8 @@ const ControlWithRef = forwardRef(function ControlWithRef<ControlValue extends s
       labelId,
       readOnly,
       required,
+      styles?.icon,
+      styles?.input,
       testID,
       type,
       value,
@@ -198,9 +228,9 @@ const ControlWithRef = forwardRef(function ControlWithRef<ControlValue extends s
     if (!label) return iconElement;
     return (
       <label
-        className={cx(COMPONENT_STATIC_CLASSNAME, pointerCss)}
+        className={cx(pointerCss, controlClassNames.label, classNames?.label)}
         htmlFor={inputId}
-        style={labelStyle}
+        style={{ ...labelStyle, ...styles?.label }}
       >
         <Box alignItems="flex-start" flexDirection={isRtl() ? 'row-reverse' : 'row'} gap={1}>
           <Box alignItems="center" height="var(--lineHeight-body)" role="presentation">
@@ -212,10 +242,29 @@ const ControlWithRef = forwardRef(function ControlWithRef<ControlValue extends s
         </Box>
       </label>
     );
-  }, [label, iconElement, inputId, labelStyle, color, disabled, readOnly, labelId]);
+  }, [
+    label,
+    iconElement,
+    inputId,
+    labelStyle,
+    color,
+    disabled,
+    readOnly,
+    labelId,
+    classNames?.label,
+    styles?.label,
+  ]);
 
   // If no label is provided, consumer should wrap the checkbox with <label> or provide a value for the aria-labelledby prop.
-  return controlElement;
+  return (
+    <Box
+      className={cx(controlClassNames.root, className, classNames?.root)}
+      style={{ ...style, ...styles?.root }}
+      width="fit-content"
+    >
+      {controlElement}
+    </Box>
+  );
 }) as <ControlValue extends string>(
   props: ControlProps<ControlValue> & { ref?: React.Ref<HTMLInputElement> },
 ) => React.ReactElement;
diff --git a/packages/web/src/controls/HelperText.tsx b/packages/web/src/controls/HelperText.tsx
index dcac95d814..055de71bf4 100644
--- a/packages/web/src/controls/HelperText.tsx
+++ b/packages/web/src/controls/HelperText.tsx
@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { css } from '@linaria/core';
 
+import { cx } from '../cx';
 import { Icon } from '../icons/Icon';
 import { Box } from '../layout/Box';
 import { Text, type TextDefaultElement, type TextProps } from '../typography/Text';
@@ -15,6 +16,20 @@ export type HelperTextProps = {
   errorIconAccessibilityLabel?: string;
   /** Test ID for the error icon */
   errorIconTestID?: string;
+  /** Custom inline styles for individual elements of the HelperText component */
+  styles?: {
+    /** Root text element */
+    root?: React.CSSProperties;
+    /** Error icon element */
+    icon?: React.CSSProperties;
+  };
+  /** Custom class names for individual elements of the HelperText component */
+  classNames?: {
+    /** Root text element */
+    root?: string;
+    /** Error icon element */
+    icon?: string;
+  };
 } & TextProps<TextDefaultElement>;
 
 const iconCss = css`
@@ -30,15 +45,29 @@ export const HelperText = memo(function HelperTex({
   children,
   dangerouslySetColor,
   textAlign = 'start',
+  style,
+  styles,
+  className,
+  classNames,
   ...props
 }: HelperTextProps) {
+  const rootStyle = { ...style, ...styles?.root };
+  // TODO: when we actually remove dangerouslySetColor:
+  // when migrating from dangerouslySetColor to style.color,
+  // root style/className color will not automatically style the error icon like dangerouslySetColor.
+  // Consumers must set both styles.root and styles.icon (or classNames equivalents).
+  // We need to have a migrator handle this or document in future migration guide.
+  const iconStyle = styles?.icon;
+
   return (
     <Text
+      className={cx(className, classNames?.root)}
       color={color}
       dangerouslySetColor={dangerouslySetColor}
       display="block"
       font="label2"
       id={id}
+      style={rootStyle}
       textAlign={textAlign}
       {...props}
     >
@@ -47,10 +76,12 @@ export const HelperText = memo(function HelperTex({
           <Icon
             active
             accessibilityLabel={errorIconAccessibilityLabel}
+            className={classNames?.icon}
             color="fgNegative"
             dangerouslySetColor={dangerouslySetColor}
             name="info"
             size="xs"
+            style={iconStyle}
             testID={errorIconTestID}
           />
         </Box>
diff --git a/packages/web/src/controls/InputIcon.tsx b/packages/web/src/controls/InputIcon.tsx
index 101d285ccd..38998df44a 100644
--- a/packages/web/src/controls/InputIcon.tsx
+++ b/packages/web/src/controls/InputIcon.tsx
@@ -39,10 +39,10 @@ export const InputIcon = memo(
       return (
         <Box paddingX={2} testID={testID}>
           <Icon
+            ref={ref}
             color={disableInheritFocusStyle ? color : (variantColor ?? color)}
             size="s"
             {...props}
-            ref={ref}
           />
         </Box>
       );
diff --git a/packages/web/src/controls/InputIconButton.tsx b/packages/web/src/controls/InputIconButton.tsx
index be03a3713d..58e2562c10 100644
--- a/packages/web/src/controls/InputIconButton.tsx
+++ b/packages/web/src/controls/InputIconButton.tsx
@@ -15,7 +15,7 @@ export const variantTransformMap: Record<InputVariant, IconButtonVariant> = {
   negative: 'primary',
   foreground: 'primary',
   primary: 'primary',
-  foregroundMuted: 'foregroundMuted',
+  foregroundMuted: 'secondary',
   secondary: 'secondary',
 };
 
diff --git a/packages/web/src/controls/InputStack.tsx b/packages/web/src/controls/InputStack.tsx
index 3081d0c944..ba62ad7ae7 100644
--- a/packages/web/src/controls/InputStack.tsx
+++ b/packages/web/src/controls/InputStack.tsx
@@ -148,7 +148,27 @@ export type InputStackProps = Omit<
   BoxProps<BoxDefaultElement>,
   'width' | 'height' | 'borderRadius'
 > &
-  InputStackBaseProps;
+  InputStackBaseProps & {
+    classNames?: {
+      /** Root container element */
+      root?: string;
+      /**
+       * Input horizontal container.
+       * Contains the input node, inner label and start/end nodes.
+       */
+      inputContainer?: string;
+      /** Interactable input element */
+      input?: string;
+    };
+    styles?: {
+      /** Root container element */
+      root?: React.CSSProperties;
+      /** Input horizontal container element */
+      inputContainer?: React.CSSProperties;
+      /** Interactable input element */
+      input?: React.CSSProperties;
+    };
+  };
 
 export const InputStack = memo(
   forwardRef<HTMLElement, InputStackProps>((_props, ref) => {
@@ -175,6 +195,10 @@ export const InputStack = memo(
       labelVariant = 'outside',
       blendStyles,
       inputBackground = 'bg',
+      className,
+      style,
+      classNames,
+      styles,
       ...props
     } = mergedProps;
     const focusedVariant = useMemo(
@@ -229,10 +253,14 @@ export const InputStack = memo(
       };
     }, [borderColorUnfocused, borderColorFocused, focusedBorderWidth, inputBorderRadius]);
 
+    const rootStyles = useMemo(() => ({ ...style, ...styles?.root }), [style, styles?.root]);
+
     return (
       <VStack
+        className={cx(className, classNames?.root)}
         gap={inputStackGap}
         opacity={disabled ? accessibleOpacityDisabled : 1}
+        style={rootStyles}
         testID={testID}
         width={width}
         {...props}
@@ -242,7 +270,10 @@ export const InputStack = memo(
           (typeof labelNode === 'string' ? <InputLabel>{labelNode}</InputLabel> : labelNode)}
         <HStack>
           {!!prependNode && <>{prependNode}</>}
-          <div className={inputAreaContainerCss}>
+          <div
+            className={cx(inputAreaContainerCss, classNames?.inputContainer)}
+            style={styles?.inputContainer}
+          >
             <Interactable
               ref={ref}
               as="span"
@@ -250,10 +281,10 @@ export const InputStack = memo(
               blendStyles={blendStyles}
               borderRadius={borderRadius}
               borderWidth={borderWidth}
-              className={cx(baseCss, focused && persistedFocusCss)}
+              className={cx(baseCss, focused && persistedFocusCss, classNames?.input)}
               disabled={disabled}
               height={height}
-              style={inputAreaStyles}
+              style={{ ...inputAreaStyles, ...styles?.input }}
               testID="input-interactable-area"
             >
               {!!focused && !!enableColorSurge && (
diff --git a/packages/web/src/controls/NativeInput.tsx b/packages/web/src/controls/NativeInput.tsx
index adcc44305a..6460335687 100644
--- a/packages/web/src/controls/NativeInput.tsx
+++ b/packages/web/src/controls/NativeInput.tsx
@@ -81,6 +81,10 @@ const compactContainerPaddingCss = css`
 `;
 
 export type NativeInputBaseProps = BoxBaseProps & {
+  /**
+   * Decreases the padding within the input element
+   * @default false
+   */
   compact?: boolean;
   /** Custom container spacing if needed. This will add to the existing spacing */
   containerSpacing?: string;
diff --git a/packages/web/src/controls/Radio.tsx b/packages/web/src/controls/Radio.tsx
index c57ef7cf0e..0cdb67a5c5 100644
--- a/packages/web/src/controls/Radio.tsx
+++ b/packages/web/src/controls/Radio.tsx
@@ -18,11 +18,11 @@ import { Control, type ControlBaseProps } from './Control';
 
 const DotSvg = ({
   color = 'black',
-  width = 20,
+  width,
   dotSize = (2 * width) / 3,
 }: {
   color?: React.CSSProperties['color'];
-  width?: number;
+  width: number;
   dotSize?: number;
 }) => {
   return (
@@ -46,9 +46,9 @@ const baseCss = css`
   }
   &:focus-visible {
     outline-style: solid;
-    outline-width: 2px;
+    outline-width: var(--borderWidth-200);
     outline-color: var(--color-bgPrimary);
-    outline-offset: 2px;
+    outline-offset: var(--borderWidth-200);
   }
 `;
 
diff --git a/packages/web/src/controls/RadioGroup.tsx b/packages/web/src/controls/RadioGroup.tsx
index f9c7b831e0..5284c20737 100644
--- a/packages/web/src/controls/RadioGroup.tsx
+++ b/packages/web/src/controls/RadioGroup.tsx
@@ -12,25 +12,7 @@ import { useHandleRadioSelect } from './useHandleRadioSelect';
 
 export { Radio, type RadioProps, useHandleRadioSelect };
 
-/**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v6
- *
- * @example
- * // Instead of:
- * <RadioGroup options={{ value1: 'Label 1' }} value={value} onChange={onChange} name="radio" />
- *
- * // Use:
- * <ControlGroup
- *   role="radiogroup"
- *   ControlComponent={Radio}
- *   options={[{ value: 'value1', children: 'Label 1' }]}
- *   value={value}
- *   onChange={(e) => onChange(e.target.value)}
- *   name="radio"
- * />
- */
-export type RadioGroupBaseProps<RadioValue extends string> = FilteredHTMLAttributes<
+type RadioGroupBaseProps<RadioValue extends string> = FilteredHTMLAttributes<
   React.HTMLAttributes<HTMLDivElement>,
   'onChange' | 'color'
 > &
@@ -56,11 +38,7 @@ export type RadioGroupBaseProps<RadioValue extends string> = FilteredHTMLAttribu
     controlColor?: ThemeVars.Color;
   };
 
-/**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
-export type RadioGroupProps<RadioValue extends string> = RadioGroupBaseProps<RadioValue>;
+type RadioGroupProps<RadioValue extends string> = RadioGroupBaseProps<RadioValue>;
 
 const RadioGroupWithRef = forwardRef(function RadioGroup<RadioValue extends string>(
   {
diff --git a/packages/web/src/controls/SearchInput.tsx b/packages/web/src/controls/SearchInput.tsx
index 478a1e84e6..311da4bcb5 100644
--- a/packages/web/src/controls/SearchInput.tsx
+++ b/packages/web/src/controls/SearchInput.tsx
@@ -9,10 +9,14 @@ import { InputIcon } from './InputIcon';
 import { InputIconButton } from './InputIconButton';
 import { TextInput, type TextInputBaseProps, type TextInputProps } from './TextInput';
 
+/**
+ * @deprecated Use local constants or the `compact` prop instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const scales = {
   regular: 56,
   compact: 40,
-};
+} as const;
 
 export type SearchInputBaseProps = Pick<
   TextInputBaseProps,
diff --git a/packages/web/src/controls/SegmentedControl.tsx b/packages/web/src/controls/SegmentedControl.tsx
index 2e52dc0691..44214baf6b 100644
--- a/packages/web/src/controls/SegmentedControl.tsx
+++ b/packages/web/src/controls/SegmentedControl.tsx
@@ -1,6 +1,5 @@
-import React, { forwardRef, Fragment, memo, useCallback, useId, useState } from 'react';
+import React, { forwardRef, Fragment, memo, useCallback, useId, useMemo, useState } from 'react';
 import type { ChangeEvent, ForwardedRef } from 'react';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
 import type {
   IconName,
   IconSize,
@@ -42,7 +41,6 @@ const containerCss = css`
 `;
 
 const labelCss = css`
-  height: ${interactableHeight.regular}px;
   padding-inline-start: ${checkmarkSize}px;
   padding-inline-end: ${checkmarkSize}px;
 
@@ -229,6 +227,7 @@ function SegmentedControlInternal(
             <Interactable
               as="label"
               background="bgAlternate"
+              borderWidth={0} // remove Interactable's default transparent border
               className={labelCss}
               disabled={disabled}
               htmlFor={`${name}-${value}`}
diff --git a/packages/web/src/controls/SelectOption.tsx b/packages/web/src/controls/SelectOption.tsx
index 2150c40e0b..5cdb67e2a7 100644
--- a/packages/web/src/controls/SelectOption.tsx
+++ b/packages/web/src/controls/SelectOption.tsx
@@ -110,6 +110,10 @@ export type SelectOptionBaseProps = Omit<CellBaseProps, 'children' | 'selected'>
 
 export type SelectOptionProps = SelectOptionBaseProps;
 
+/**
+ * @deprecated This component is deprecated along with old Select component. Please use the new Select alpha component instead. If you are using this component outside of Select, we recommend replacing it with ListCell. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const SelectOption = memo((_props: SelectOptionProps) => {
   const mergedProps = useComponentConfig('SelectOption', _props);
   const {
diff --git a/packages/web/src/controls/Switch.tsx b/packages/web/src/controls/Switch.tsx
index 2d429a6726..ab980ff525 100644
--- a/packages/web/src/controls/Switch.tsx
+++ b/packages/web/src/controls/Switch.tsx
@@ -4,14 +4,29 @@ import { switchTransitionConfig } from '@coinbase/cds-common/motion/switch';
 import { css } from '@linaria/core';
 import { m as motion } from 'framer-motion';
 
+import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { convertTransition } from '../motion/utils';
+import type { StylesAndClassNames } from '../types';
 
 import { Control, type ControlBaseProps } from './Control';
 
-const COMPONENT_STATIC_CLASSNAME = 'cds-Switch';
+/**
+ * Static class names for Switch component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export const switchClassNames = {
+  /** Persistent outer wrapper across all variants. */
+  root: 'cds-Switch',
+  /** Underlying `Control` wrapper element. */
+  control: 'cds-Switch-control',
+  /** Track wrapper element. */
+  track: 'cds-Switch-track',
+  /** Thumb wrapper element. */
+  thumb: 'cds-Switch-thumb',
+} as const;
 
 const trackCss = css`
   width: var(--controlSize-switchWidth);
@@ -45,7 +60,18 @@ export type SwitchBaseProps = ControlBaseProps<string> & {
   controlColor?: ThemeVars.Color;
 };
 
-export type SwitchProps = SwitchBaseProps;
+export type SwitchProps = SwitchBaseProps &
+  StylesAndClassNames<typeof switchClassNames> & {
+    /**
+     * Label content rendered next to the switch control.
+     *
+     * @example
+     * ```tsx
+     * <Switch onChange={handleChange}>Dark mode</Switch>
+     * ```
+     */
+    children?: React.ReactNode;
+  };
 
 const MotionBox = motion(Box);
 
@@ -72,6 +98,10 @@ const SwitchWithRef = forwardRef<HTMLInputElement, SwitchProps>(
       borderRadius = 1000,
       borderWidth,
       value,
+      className,
+      style,
+      classNames,
+      styles,
       ...props
     } = mergedProps;
     const { activeColorScheme } = useTheme();
@@ -81,9 +111,11 @@ const SwitchWithRef = forwardRef<HTMLInputElement, SwitchProps>(
         ref={ref}
         borderRadius={1000}
         checked={checked}
+        className={cx(switchClassNames.control, classNames?.control)}
         disabled={disabled}
         label={children}
         role="switch"
+        style={{ ...style, ...styles?.control }}
         type="checkbox"
         value={value}
         {...props}
@@ -94,19 +126,21 @@ const SwitchWithRef = forwardRef<HTMLInputElement, SwitchProps>(
           borderColor={borderColor}
           borderRadius={borderRadius}
           borderWidth={borderWidth}
-          className={trackCss}
+          className={cx(trackCss, switchClassNames.track, classNames?.track)}
           data-filled={checked}
           justifyContent="flex-start"
+          style={styles?.track}
           testID="switch-track"
         >
           <MotionBox
             animate={checked ? 'checked' : 'unchecked'}
             background={controlColor ?? defaultControlColor}
             borderRadius={1000}
-            className={thumbCss}
+            className={cx(thumbCss, switchClassNames.thumb, classNames?.thumb)}
             data-testid="switch-thumb"
             elevation={elevation}
             initial={false}
+            style={styles?.thumb}
             testID="switch-thumb"
             transition={convertTransition(switchTransitionConfig)}
             variants={thumbMotionVariants}
@@ -115,18 +149,17 @@ const SwitchWithRef = forwardRef<HTMLInputElement, SwitchProps>(
       </Control>
     );
 
-    return children ? (
+    return (
       <Box
-        alignItems="center"
-        className={COMPONENT_STATIC_CLASSNAME}
-        minHeight="var(--controlSize-switchHeight)"
+        alignItems={children ? 'center' : undefined}
+        className={cx(switchClassNames.root, className, classNames?.root)}
+        minHeight={children ? 'var(--controlSize-switchHeight)' : undefined}
         role="presentation"
+        style={styles?.root}
         width="fit-content"
       >
         {switchNode}
       </Box>
-    ) : (
-      switchNode
     );
   },
 );
diff --git a/packages/web/src/controls/TextInput.tsx b/packages/web/src/controls/TextInput.tsx
index 566aa341eb..13188bcb9b 100644
--- a/packages/web/src/controls/TextInput.tsx
+++ b/packages/web/src/controls/TextInput.tsx
@@ -9,9 +9,9 @@ import React, {
 } from 'react';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { useInputVariant } from '@coinbase/cds-common/hooks/useInputVariant';
-import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import { usePrefixedId } from '@coinbase/cds-common/hooks/usePrefixedId';
 import type { InputVariant, SharedInputProps } from '@coinbase/cds-common/types/InputBaseProps';
+import { mergeReactElementRef, mergeRefs } from '@coinbase/cds-common/utils/mergeRefs';
 import { css } from '@linaria/core';
 
 import { cx } from '../cx';
@@ -83,12 +83,15 @@ export type TextInputBaseProps = Omit<NativeInputBaseProps, 'caretColor'> &
     | 'inputBackground'
   > & {
     /**
-     * Customize the element which the input area will be rendered as. Adds ability to render the input area
-     * as a `<textarea />`, `<input />` etc...
-     * By default, the input area will be rendered as an `<input />`.
+     * Customize the element which the input area will be rendered as.
+     * Adds ability to render the input area as a `<textarea />`, `<input />` etc...
+     * By default, TextInput renders an `<input />`.
      * @danger Use this at your own risk, and don't use unless ABSOLUTELY NECESSARY. You may see weird UI when focusing etc..
      * Our default input handles all of the UI/Accessibility needs for your out of the box, but inputNode will not include
      * those.
+     *
+     * If you need a ref to the underlying input element, prefer using `ref` on the `TextInput` component.
+     * Supplying a `ref` on the `inputNode` element is redundant; if present, it will be merged with the component's ref.
      * */
     inputNode?: React.ReactElement;
     /**
@@ -178,8 +181,8 @@ export const TextInput = memo(
     } = mergedProps;
     const [focused, setFocused] = useState(false);
     const focusedVariant = useInputVariant(focused, variant);
-    const internalRef = useRef<HTMLInputElement>();
-    const refs = useMergeRefs(ref, internalRef);
+    const internalRef = useRef<HTMLInputElement | null>(null);
+    const refs = useMemo(() => mergeRefs(ref, internalRef), [ref]);
 
     // Only generate a helperTextId if helperText is defined, otherwise
     // set it to undefined
@@ -232,15 +235,21 @@ export const TextInput = memo(
     const inputElement = useMemo(() => {
       /** Ensures that the renderedInput has the blurring, focusing, disabled features */
       if (inputNode) {
-        const clonedElm = cloneElement(inputNode, {
-          onFocus: handleOnFocus,
-          onBlur: handleOnBlur,
-          ref: refs,
-          'aria-describedby': shouldSetHelperTextId && helperTextId,
-          'aria-invalid': variant === 'negative',
-          id: shouldSetLabelId ? labelId : undefined,
-          disabled,
-        });
+        const clonedElm = cloneElement(
+          inputNode as React.ReactElement<
+            React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>
+          >,
+
+          {
+            onFocus: handleOnFocus,
+            onBlur: handleOnBlur,
+            ref: mergeReactElementRef<HTMLInputElement>(inputNode, refs),
+            'aria-describedby': shouldSetHelperTextId ? helperTextId : undefined,
+            'aria-invalid': variant === 'negative',
+            id: shouldSetLabelId ? labelId : undefined,
+            disabled,
+          },
+        );
 
         return clonedElm;
       }
diff --git a/packages/web/src/controls/__stories__/HelperText.stories.tsx b/packages/web/src/controls/__stories__/HelperText.stories.tsx
index 2808fe01f9..0a6333be45 100644
--- a/packages/web/src/controls/__stories__/HelperText.stories.tsx
+++ b/packages/web/src/controls/__stories__/HelperText.stories.tsx
@@ -49,7 +49,10 @@ export const TextAlign = () => {
 export const CustomColor = () => {
   return (
     <div>
-      <HelperText color="fgNegative" dangerouslySetColor="purple">
+      <HelperText
+        color="fgNegative"
+        styles={{ root: { color: 'purple' }, icon: { color: 'purple' } }}
+      >
         Test message
       </HelperText>
     </div>
diff --git a/packages/web/src/controls/__stories__/InputIconButton.stories.tsx b/packages/web/src/controls/__stories__/InputIconButton.stories.tsx
index 3601e4c035..d93590dce6 100644
--- a/packages/web/src/controls/__stories__/InputIconButton.stories.tsx
+++ b/packages/web/src/controls/__stories__/InputIconButton.stories.tsx
@@ -21,7 +21,7 @@ export const AddCustomColor = () => {
           disableInheritFocusStyle
           accessibilityLabel="Add"
           name="add"
-          variant="foregroundMuted"
+          variant="secondary"
         />
       }
     />
@@ -38,7 +38,7 @@ export const AddCustomColorEnd = () => {
           transparent
           accessibilityLabel="Add"
           name="add"
-          variant="foregroundMuted"
+          variant="secondary"
         />
       }
       label="Label"
@@ -53,9 +53,7 @@ export const Basic = () => {
         <TextInput
           key={`${variant}-input-iconbutton`}
           label={variant}
-          start={
-            <InputIconButton active accessibilityLabel="Add" name="add" variant="foregroundMuted" />
-          }
+          start={<InputIconButton active accessibilityLabel="Add" name="add" variant="secondary" />}
           variant={variant}
         />
       ))}
@@ -82,7 +80,7 @@ export const DefaultsToPrimary = () => {
 export const InvalidPlacement = () => {
   return (
     <Box background="bgAlternate">
-      <InputIconButton active accessibilityLabel="Add" name="add" variant="foregroundMuted" />
+      <InputIconButton active accessibilityLabel="Add" name="add" variant="secondary" />
     </Box>
   );
 };
diff --git a/packages/web/src/controls/__stories__/Select.stories.tsx b/packages/web/src/controls/__stories__/Select.stories.tsx
index d5eb96ddca..0de2a7ef2e 100644
--- a/packages/web/src/controls/__stories__/Select.stories.tsx
+++ b/packages/web/src/controls/__stories__/Select.stories.tsx
@@ -2,6 +2,7 @@ import React, { useRef, useState } from 'react';
 import type { AssetKey } from '@coinbase/cds-common/internal/data/assets';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { loremIpsum } from '@coinbase/cds-common/internal/data/loremIpsum';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { DotSymbol } from '../../dots';
 import { Box } from '../../layout/Box';
@@ -11,11 +12,7 @@ import { InputIcon } from '../InputIcon';
 import { Select, type SelectProps } from '../Select';
 import { SelectOption } from '../SelectOption';
 
-const exampleOptions = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
-
-const assetKeys = Object.keys(assets) as AssetKey[];
-
-export default {
+const meta: Meta = {
   title: 'Components/Select/Select',
   component: Select,
   parameters: {
@@ -23,6 +20,13 @@ export default {
   },
 };
 
+export default meta;
+type Story = StoryObj;
+
+const exampleOptions = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
+
+const assetKeys = Object.keys(assets) as AssetKey[];
+
 const Default = ({
   variant,
   label,
@@ -169,7 +173,7 @@ const InputStackOptions = () => {
   );
 };
 
-const Disabled = () => {
+const DisabledRender = () => {
   const [value, setValue] = useState<string | undefined>('');
 
   return (
@@ -196,6 +200,21 @@ const Disabled = () => {
   );
 };
 
+const Disabled: Story = {
+  render: () => <DisabledRender />,
+  parameters: {
+    a11y: {
+      config: {
+        /**
+         * Color contrast ratio doesn't need to meet 4.5:1, as the element is disabled
+         * @link https://dequeuniversity.com/rules/axe/4.3/color-contrast
+         */
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+};
+
 const Compact = () => {
   const [value, setValue] = useState<string | undefined>('');
 
@@ -322,17 +341,3 @@ export {
   LongTextSelect,
   Variants,
 };
-
-Disabled.bind({});
-/** TODO: convert to CSF (Component Story Format v3) */
-Disabled.parameters = {
-  a11y: {
-    config: {
-      /**
-       * Color contrast ratio doesn't need to meet 4.5:1, as the element is disabled
-       * @link https://dequeuniversity.com/rules/axe/4.3/color-contrast
-       */
-      rules: [{ id: 'color-contrast', enabled: false }],
-    },
-  },
-};
diff --git a/packages/web/src/controls/__stories__/TextInput.stories.tsx b/packages/web/src/controls/__stories__/TextInput.stories.tsx
index df28ee49c4..adacd2c65f 100644
--- a/packages/web/src/controls/__stories__/TextInput.stories.tsx
+++ b/packages/web/src/controls/__stories__/TextInput.stories.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { InputVariant } from '@coinbase/cds-common/types/InputBaseProps';
 import { css } from '@linaria/core';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Icon } from '../../icons/Icon';
 import { Box } from '../../layout/Box';
@@ -17,11 +18,14 @@ import { InputLabel } from '../InputLabel';
 import { NativeTextArea } from '../NativeTextArea';
 import { TextInput } from '../TextInput';
 
-export default {
+const meta: Meta = {
   title: 'Components/Inputs/TextInput',
   component: TextInput,
 };
 
+export default meta;
+type Story = StoryObj;
+
 const nativeInputCustomCss = css`
   &:focus {
     outline-style: none;
@@ -219,7 +223,7 @@ export const Borderless = function Borderless() {
   );
 };
 
-export const Disabled = function Disabled() {
+const DisabledRender = () => {
   return (
     <>
       <TextInput disabled label="Disabled label" />
@@ -232,15 +236,17 @@ export const Disabled = function Disabled() {
   );
 };
 
-Disabled.bind({});
-Disabled.parameters = {
-  a11y: {
-    config: {
-      /**
-       * Color contrast ratio doesn't need to meet 4.5:1, as the element is disabled
-       * @link https://dequeuniversity.com/rules/axe/4.3/color-contrast
-       */
-      rules: [{ id: 'color-contrast', enabled: false }],
+export const Disabled: Story = {
+  render: () => <DisabledRender />,
+  parameters: {
+    a11y: {
+      config: {
+        /**
+         * Color contrast ratio doesn't need to meet 4.5:1, as the element is disabled
+         * @link https://dequeuniversity.com/rules/axe/4.3/color-contrast
+         */
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
     },
   },
 };
@@ -482,7 +488,7 @@ export const RenderInputDefault = () => {
   );
 };
 
-export const RenderInputDisabled = () => {
+const RenderInputDisabledRender = () => {
   const [inputText, setInputText] = useState('Test');
   const ref = useRef<HTMLInputElement>(null);
 
@@ -506,12 +512,14 @@ export const RenderInputDisabled = () => {
   );
 };
 
-RenderInputDisabled.bind({});
-RenderInputDisabled.parameters = {
-  a11y: {
-    options: {
-      rules: {
-        'color-contrast': { enabled: false },
+export const RenderInputDisabled: Story = {
+  render: () => <RenderInputDisabledRender />,
+  parameters: {
+    a11y: {
+      options: {
+        rules: {
+          'color-contrast': { enabled: false },
+        },
       },
     },
   },
diff --git a/packages/web/src/controls/__tests__/Control.test.tsx b/packages/web/src/controls/__tests__/Control.test.tsx
index 6986d000d7..9a4976a0a9 100644
--- a/packages/web/src/controls/__tests__/Control.test.tsx
+++ b/packages/web/src/controls/__tests__/Control.test.tsx
@@ -49,4 +49,56 @@ describe('Control', () => {
     expect(console.warn).toHaveBeenCalledTimes(1);
     process.env.NODE_ENV = 'test';
   });
+
+  it('keeps a stable root wrapper regardless of label presence', () => {
+    const { rerender } = render(
+      <DefaultThemeProvider>
+        <Control aria-label="control" type="checkbox">
+          <div>test children</div>
+        </Control>
+      </DefaultThemeProvider>,
+    );
+
+    expect(screen.getByRole('checkbox').closest('.cds-Control')).toBeTruthy();
+
+    rerender(
+      <DefaultThemeProvider>
+        <Control aria-label="control" label="test label" type="checkbox">
+          <div>test children</div>
+        </Control>
+      </DefaultThemeProvider>,
+    );
+
+    expect(screen.getByRole('checkbox').closest('.cds-Control')).toBeTruthy();
+  });
+
+  it('applies classNames/styles to root and slots', () => {
+    render(
+      <DefaultThemeProvider>
+        <Control
+          aria-label="control"
+          classNames={{
+            icon: 'test-control-icon',
+            input: 'test-control-input',
+            root: 'test-control-root',
+          }}
+          styles={{ root: { borderTopWidth: 3 } }}
+          type="checkbox"
+        >
+          <div>test children</div>
+        </Control>
+      </DefaultThemeProvider>,
+    );
+
+    expect(screen.getByRole('checkbox').closest('.test-control-root')).toBeTruthy();
+    expect(screen.getByRole('checkbox').closest('.cds-Control')).toBeTruthy();
+    expect(screen.getByRole('checkbox').className).toContain('test-control-input');
+    expect(screen.getByRole('checkbox').className).toContain('cds-Control-input');
+    expect(screen.getByText('test children').parentElement?.className).toContain(
+      'test-control-icon',
+    );
+    expect(screen.getByText('test children').parentElement?.className).toContain(
+      'cds-Control-icon',
+    );
+  });
 });
diff --git a/packages/web/src/controls/__tests__/HelperText.test.tsx b/packages/web/src/controls/__tests__/HelperText.test.tsx
index 0d29657299..0ca277a0cf 100644
--- a/packages/web/src/controls/__tests__/HelperText.test.tsx
+++ b/packages/web/src/controls/__tests__/HelperText.test.tsx
@@ -23,8 +23,8 @@ describe('HelperText.test', () => {
     expect(screen.getByTestId('error-icon').className).toContain('fgNegative');
   });
 
-  it('renders custom color via dangerouslySetColor', () => {
-    render(<HelperText dangerouslySetColor="#FF0000">Test text</HelperText>);
+  it('renders custom color via style', () => {
+    render(<HelperText style={{ color: '#FF0000' }}>Test text</HelperText>);
 
     expect(screen.getByText('Test text')).toHaveStyle({
       color: '#FF0000',
@@ -48,6 +48,30 @@ describe('HelperText.test', () => {
     });
   });
 
+  it('renders custom root and icon slots with styles and classNames', () => {
+    render(
+      <DefaultThemeProvider>
+        <HelperText
+          classNames={{ root: 'helper-root', icon: 'helper-icon' }}
+          color="fgNegative"
+          errorIconTestID="error-icon"
+          styles={{ root: { color: '#00FF00' }, icon: { color: '#0000FF' } }}
+        >
+          Test text
+        </HelperText>
+      </DefaultThemeProvider>,
+    );
+
+    expect(screen.getByText('Test text')).toHaveStyle({
+      color: '#00FF00',
+    });
+    expect(screen.getByText('Test text').className).toContain('helper-root');
+    expect(screen.getByTestId('error-icon')).toHaveStyle({
+      color: '#0000FF',
+    });
+    expect(screen.getByTestId('error-icon').className).toContain('helper-icon');
+  });
+
   it('renders custom padding', () => {
     render(
       <HelperText padding={4} testID="helper-text-test">
diff --git a/packages/web/src/controls/__tests__/InputIconButton.test.tsx b/packages/web/src/controls/__tests__/InputIconButton.test.tsx
index a68e4e91a8..5c5ad442c0 100644
--- a/packages/web/src/controls/__tests__/InputIconButton.test.tsx
+++ b/packages/web/src/controls/__tests__/InputIconButton.test.tsx
@@ -28,23 +28,20 @@ describe('Test InputIconButton inheritFocusedVariant interaction', () => {
 });
 
 describe('InputIconButton', () => {
-  it(`Can override focused color provided by context.`, () => {
-    const variant = 'foregroundMuted';
-
+  it(`Uses context variant over its own variant when disableInheritFocusStyle is false`, () => {
     render(
       <DefaultThemeProvider>
         <TextInput
-          key={`${variant}-inputicon`}
           label="Label"
-          start={<InputIconButton active name="add" testID="input-icon" variant={variant} />}
+          start={<InputIconButton active name="add" testID="input-icon" variant="secondary" />}
           testID="text-input"
-          variant={variant as InputVariant}
+          variant="foregroundMuted"
         />
       </DefaultThemeProvider>,
     );
 
     fireEvent.click(screen.getByRole('textbox'));
 
-    expect(screen.getByTestId('icon-base-glyph')).toHaveStyle(`color: var(--${variant})`);
+    expect(screen.getByTestId('icon-base-glyph')).toHaveStyle(`color: var(--secondary)`);
   });
 });
diff --git a/packages/web/src/controls/__tests__/InputStack.test.tsx b/packages/web/src/controls/__tests__/InputStack.test.tsx
index 5deb864953..2cb0cd0808 100644
--- a/packages/web/src/controls/__tests__/InputStack.test.tsx
+++ b/packages/web/src/controls/__tests__/InputStack.test.tsx
@@ -1,42 +1,70 @@
-import TestRenderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 
 import { DefaultThemeProvider } from '../../utils/test';
 import type { InputStackProps } from '../InputStack';
 import { InputStack } from '../InputStack';
 
 const TEST_ID = 'input';
+const input = <input required id="name" name="name" type="text" />;
 
-function expectAttribute<
-  K extends keyof Pick<InputStackProps, 'width' | 'disabled' | 'variant' | 'height'>,
->(prop: K, values: readonly NonNullable<InputStackProps[K]>[]) {
-  const input = <input required id="name" name="name" type="text" />;
-
-  values.forEach((value) => {
-    it(`will set "${value}" for \`${prop}\` prop`, async () => {
-      const inputRenderer = TestRenderer.create(
-        <DefaultThemeProvider>
-          <InputStack testID={TEST_ID} {...{ [prop]: value }} inputNode={input} />
-        </DefaultThemeProvider>,
-      );
+function renderInputStack(props: Partial<InputStackProps> = {}) {
+  return render(
+    <DefaultThemeProvider>
+      <InputStack inputNode={input} testID={TEST_ID} {...props} />
+    </DefaultThemeProvider>,
+  );
+}
+
+describe('InputStack', () => {
+  describe('width', () => {
+    it.each(['10%', '50%', '100%'] as const)('renders with width="%s"', (width) => {
+      renderInputStack({ width });
 
-      const inputInstance = await inputRenderer.root.findByType(InputStack);
-      expect(inputInstance.props[prop]).toEqual(value);
+      const container = screen.getByTestId(TEST_ID);
+      expect(container).toBeInTheDocument();
     });
   });
-}
 
-describe('width', () => {
-  expectAttribute('width', ['10%', '50%', '100%']);
-});
+  describe('height', () => {
+    it.each(['10%', '50%', '100%', 56, 40] as const)('renders with height="%s"', (height) => {
+      renderInputStack({ height });
 
-describe('height', () => {
-  expectAttribute('height', ['10%', '50%', '100%', 56, 40]);
-});
+      const interactable = screen.getByTestId('input-interactable-area');
+      expect(interactable).toBeInTheDocument();
+    });
+  });
 
-describe('disabled', () => {
-  expectAttribute('disabled', [false, true]);
-});
+  describe('disabled', () => {
+    it('renders without disabled state when disabled=false', () => {
+      renderInputStack({ disabled: false });
 
-describe('variant', () => {
-  expectAttribute('variant', ['foreground', 'foregroundMuted', 'negative', 'positive', 'primary']);
+      const interactable = screen.getByTestId('input-interactable-area');
+      expect(interactable).not.toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('renders with disabled state when disabled=true', () => {
+      renderInputStack({ disabled: true });
+
+      const interactable = screen.getByTestId('input-interactable-area');
+      expect(interactable).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+
+  describe('variant', () => {
+    it.each([
+      ['foreground', 'var(--color-bgInverse)'],
+      ['foregroundMuted', 'var(--color-bgLineHeavy)'],
+      ['negative', 'var(--color-bgNegative)'],
+      ['positive', 'var(--color-bgPositive)'],
+      ['primary', 'var(--color-bgPrimary)'],
+    ] as const)('applies variant="%s" border color styling', (variant, expectedBorderColor) => {
+      renderInputStack({ variant });
+
+      const interactable = screen.getByTestId('input-interactable-area');
+      // The variant affects the CSS custom property --border-color-unfocused via inline style
+      expect(interactable.style.getPropertyValue('--border-color-unfocused')).toBe(
+        expectedBorderColor,
+      );
+    });
+  });
 });
diff --git a/packages/web/src/controls/__tests__/Switch.test.tsx b/packages/web/src/controls/__tests__/Switch.test.tsx
index 71c922134b..c2c0e7bb29 100644
--- a/packages/web/src/controls/__tests__/Switch.test.tsx
+++ b/packages/web/src/controls/__tests__/Switch.test.tsx
@@ -92,6 +92,59 @@ describe('Switch.test', () => {
     expect(screen.getByTestId('test-test-id')).toBeTruthy();
   });
 
+  it('keeps a stable root wrapper regardless of label presence', () => {
+    const { rerender } = render(
+      <DefaultThemeProvider>
+        <Switch onChange={jest.fn()} />
+      </DefaultThemeProvider>,
+    );
+
+    expect(screen.getByRole('switch').closest('.cds-Switch')).toBeTruthy();
+
+    rerender(
+      <DefaultThemeProvider>
+        <Switch onChange={jest.fn()}>with label</Switch>
+      </DefaultThemeProvider>,
+    );
+
+    expect(screen.getByRole('switch').closest('.cds-Switch')).toBeTruthy();
+  });
+
+  it('applies classNames/styles to root and slots', () => {
+    render(
+      <DefaultThemeProvider>
+        <Switch
+          classNames={{
+            control: 'test-switch-control',
+            root: 'test-switch-root',
+            thumb: 'test-switch-thumb',
+            track: 'test-switch-track',
+          }}
+          onChange={jest.fn()}
+          style={{ borderRightWidth: 5 }}
+          styles={{ control: { borderLeftWidth: 4 }, root: { borderTopWidth: 2 } }}
+        >
+          label
+        </Switch>
+      </DefaultThemeProvider>,
+    );
+
+    expect(screen.getByRole('switch').closest('.test-switch-root')).toBeTruthy();
+    expect(screen.getByRole('switch').closest('.cds-Switch')).toBeTruthy();
+    expect(screen.getByTestId('switch-track').className).toContain('test-switch-track');
+    expect(screen.getByTestId('switch-track').className).toContain('cds-Switch-track');
+    expect(screen.getByTestId('switch-thumb').className).toContain('test-switch-thumb');
+    expect(screen.getByTestId('switch-thumb').className).toContain('cds-Switch-thumb');
+    expect(screen.getByRole('switch').closest('.test-switch-control')).toBeTruthy();
+    expect(screen.getByRole('switch').closest('.cds-Switch-control')).toBeTruthy();
+    expect(screen.getByRole('switch').closest('.cds-Control')).toHaveStyle({
+      borderLeftWidth: '4px',
+    });
+    expect(screen.getByRole('switch').closest('.cds-Control')).toHaveStyle({
+      borderRightWidth: '5px',
+    });
+  });
+
   it('has default color', () => {
     render(
       <DefaultThemeProvider>
diff --git a/packages/web/src/controls/selectContext.ts b/packages/web/src/controls/selectContext.ts
index 5df6e411a2..de69c161b9 100644
--- a/packages/web/src/controls/selectContext.ts
+++ b/packages/web/src/controls/selectContext.ts
@@ -2,6 +2,10 @@ import { createContext, useContext } from 'react';
 
 import type { SelectBaseProps } from './Select';
 
+/**
+ * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type SelectContextType = {
   handleCloseMenu?: () => void;
 } & Pick<SelectBaseProps, 'onChange' | 'value'>;
@@ -12,7 +16,20 @@ export const defaultContext = {
   handleCloseMenu: undefined,
 };
 
+/**
+ * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const SelectContext = createContext<SelectContextType>(defaultContext);
+
+/**
+ * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const SelectProvider = SelectContext.Provider;
 
+/**
+ * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const useSelectContext = () => useContext(SelectContext);
diff --git a/packages/web/src/dates/DateInput.tsx b/packages/web/src/dates/DateInput.tsx
index c05dc44af6..b0d5a0a6b6 100644
--- a/packages/web/src/dates/DateInput.tsx
+++ b/packages/web/src/dates/DateInput.tsx
@@ -104,7 +104,6 @@ export const DateInput = memo(
       <VStack className={className} minWidth={164} style={style} width="100%">
         <TextInput
           ref={ref}
-          {...props}
           end={end}
           helperText={helperText || error?.message || intlDateFormat.dateStringFormat}
           onBlur={handleBlur}
@@ -115,6 +114,7 @@ export const DateInput = memo(
           testIDMap={testIDMap}
           value={inputValue}
           variant={variant || (error ? 'negative' : undefined)}
+          {...props}
         />
       </VStack>
     );
diff --git a/packages/web/src/dates/DatePicker.tsx b/packages/web/src/dates/DatePicker.tsx
index 7c81fc810d..ed4cf38818 100644
--- a/packages/web/src/dates/DatePicker.tsx
+++ b/packages/web/src/dates/DatePicker.tsx
@@ -288,7 +288,6 @@ export const DatePicker = memo(
     const dateInput = useMemo(
       () => (
         <DateInput
-          {...props}
           accessibilityLabel={accessibilityLabel}
           accessibilityLabelledBy={accessibilityLabelledBy}
           className={cx(classNames?.dateInput, dateInputClassName)}
@@ -311,6 +310,7 @@ export const DatePicker = memo(
           requiredError={requiredError}
           style={{ ...dateInputStyle, ...styles?.dateInput }}
           variant={variant}
+          {...props}
         />
       ),
       [
diff --git a/packages/web/src/dots/DotCount.tsx b/packages/web/src/dots/DotCount.tsx
index fa5fc3ea95..81e243a224 100644
--- a/packages/web/src/dots/DotCount.tsx
+++ b/packages/web/src/dots/DotCount.tsx
@@ -37,14 +37,11 @@ const dotCountContentCss = css`
   align-items: center;
   justify-content: center;
   display: flex;
-  border-width: 1px;
-  min-width: ${dotCountSize}px;
-  height: ${dotCountSize}px;
-  border-radius: 16px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  padding-inline-start: 6px;
-  padding-inline-end: 6px;
+  border-style: solid;
+  border-width: var(--borderWidth-100);
+  border-radius: var(--borderRadius-400);
+  padding-inline-start: var(--space-0_75);
+  padding-inline-end: var(--space-0_75);
 `;
 
 const variantColorMap: Record<DotCountVariants, ThemeVars.Color> = {
@@ -76,6 +73,18 @@ export type DotCountBaseProps = SharedProps &
     children?: React.ReactNode;
     /** Indicates what shape Dot is overlapping */
     overlap?: DotOverlap;
+    /**
+     * An optional fixed height of the DotCount component.
+     * Width grows based on content length.
+     * @default 24
+     * */
+    height?: number;
+    /**
+     * An optional fixed width of the DotCount component.
+     * By default, width grows based on content length.
+     * @default auto
+     * */
+    width?: number;
   };
 
 export type DotCountProps = DotCountBaseProps & {
@@ -109,6 +118,8 @@ export const DotCount = memo((_props: DotCountProps) => {
     variant = 'negative',
     count,
     max,
+    height = dotCountSize,
+    width,
     testID,
     accessibilityLabel,
     overlap,
@@ -124,12 +135,15 @@ export const DotCount = memo((_props: DotCountProps) => {
   const containerStyles = useMemo(() => {
     const variantColor = variantColorMap[variant];
     return {
+      height,
+      minWidth: height,
+      width,
       backgroundColor: color[variantColor],
       borderColor: color.bgSecondary,
       ...pinStyles,
       ...styles?.container,
     };
-  }, [color, pinStyles, styles?.container, variant]);
+  }, [height, width, color, pinStyles, styles?.container, variant]);
 
   const motionProps = useMotionProps({
     enterConfigs: [dotOpacityEnterConfig, dotScaleEnterConfig],
@@ -156,11 +170,14 @@ export const DotCount = memo((_props: DotCountProps) => {
       {children}
       <NewAnimatePresence>
         {count > 0 && (
+          // TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility
           <motion.div
-            {...motionProps}
-            className={cx(dotCountContentCss, classNames?.container)}
-            data-testid="dotcount-container"
-            style={containerStyles}
+            {...({
+              ...motionProps,
+              className: cx(dotCountContentCss, classNames?.container),
+              'data-testid': 'dotcount-container',
+              style: containerStyles,
+            } as React.ComponentProps<typeof motion.div>)}
           >
             <Text
               as="p"
diff --git a/packages/web/src/dots/DotSymbol.tsx b/packages/web/src/dots/DotSymbol.tsx
index ad18168ce4..be50051478 100644
--- a/packages/web/src/dots/DotSymbol.tsx
+++ b/packages/web/src/dots/DotSymbol.tsx
@@ -106,8 +106,8 @@ export const DotSymbol = memo((_props: DotSymbolProps) => {
       aria-label={accessibilityLabel}
       className={cx(baseCss, className)}
       data-testid={testID}
-      {...props}
       style={style}
+      {...props}
     >
       {children}
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
diff --git a/packages/web/src/dropdown/DropdownContent.tsx b/packages/web/src/dropdown/DropdownContent.tsx
index d0a48082a1..1c90a69c7b 100644
--- a/packages/web/src/dropdown/DropdownContent.tsx
+++ b/packages/web/src/dropdown/DropdownContent.tsx
@@ -6,7 +6,6 @@ import {
   animateDropdownTransformOutConfig,
 } from '@coinbase/cds-common/animation/dropdown';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
-import type { DimensionValue } from '@coinbase/cds-common/types';
 import { m as motion } from 'framer-motion';
 
 import { VStack } from '../layout/VStack';
@@ -22,7 +21,7 @@ const dropdownStaticClassName = 'cds-dropdown';
  * @deprecationExpectedRemoval v10
  */
 export type DropdownContentProps = {
-  height?: DimensionValue;
+  height?: React.CSSProperties['height'];
   placement?: Placement;
 } & Pick<DropdownProps, 'width' | 'maxHeight' | 'maxWidth' | 'minWidth' | 'children'>;
 
diff --git a/packages/web/src/dropdown/useResponsiveHeight.ts b/packages/web/src/dropdown/useResponsiveHeight.ts
index 9cb1d92f01..c83b360dd5 100644
--- a/packages/web/src/dropdown/useResponsiveHeight.ts
+++ b/packages/web/src/dropdown/useResponsiveHeight.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import type React from 'react';
 import type { RectReadOnly } from 'react-use-measure';
-import type { DimensionValue } from '@coinbase/cds-common';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 
 import { useIsoEffect } from '../hooks/useIsoEffect';
@@ -34,7 +34,9 @@ export function useResponsiveHeight({
   const bottomGutter = space[BOTTOM_GUTTER_SPACE];
   const calculatedGap = space[gap ?? 0];
 
-  const [dropdownHeight, setDropdownHeight] = useState<DimensionValue | undefined>(maxHeight);
+  const [dropdownHeight, setDropdownHeight] = useState<
+    React.CSSProperties['maxHeight'] | undefined
+  >(maxHeight);
 
   // the following calculates the window height on resize changes and stores it in state
   const [windowHeight, setWindowHeight] = useState<number | undefined>(
diff --git a/packages/web/src/hooks/__tests__/useA11yControlledVisibility.test.ts b/packages/web/src/hooks/__tests__/useA11yControlledVisibility.test.ts
index a5c2240db9..b9a2c57a96 100644
--- a/packages/web/src/hooks/__tests__/useA11yControlledVisibility.test.ts
+++ b/packages/web/src/hooks/__tests__/useA11yControlledVisibility.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useA11yControlledVisibility } from '../useA11yControlledVisibility';
 
diff --git a/packages/web/src/hooks/__tests__/useA11yLabels.test.ts b/packages/web/src/hooks/__tests__/useA11yLabels.test.ts
index cb83373cbe..d88068669d 100644
--- a/packages/web/src/hooks/__tests__/useA11yLabels.test.ts
+++ b/packages/web/src/hooks/__tests__/useA11yLabels.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useA11yLabels } from '../useA11yLabels';
 
@@ -9,7 +9,7 @@ describe('useA11yLabels', () => {
   it('generates default props when no options are passed', () => {
     const { result } = renderHook(() => useA11yLabels());
 
-    expect(result.current.labelledBySource).toMatch(/:r[0-9].*/);
+    expect(result.current.labelledBySource).toMatch(/«r[0-9]+»/);
     expect(result.current.labelledBy).toBe(result.current.labelledBySource);
     expect(result.current.label).toBeUndefined();
   });
diff --git a/packages/web/src/hooks/__tests__/useBreakpoints.test.tsx b/packages/web/src/hooks/__tests__/useBreakpoints.test.tsx
index fef43f5f10..1875dd4190 100644
--- a/packages/web/src/hooks/__tests__/useBreakpoints.test.tsx
+++ b/packages/web/src/hooks/__tests__/useBreakpoints.test.tsx
@@ -1,4 +1,5 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act } from 'react';
+import { renderHook } from '@testing-library/react';
 
 import { media } from '../../styles/media';
 import { MediaQueryContext } from '../../system/MediaQueryProvider';
@@ -23,8 +24,9 @@ describe('useBreakpoints hook', () => {
   });
 
   it('throws an error if used outside of MediaQueryProvider', () => {
-    const { result } = renderHook(() => useBreakpoints());
-    expect(() => result.current).toThrow('useBreakpoints must be used within a MediaQueryProvider');
+    expect(() => renderHook(() => useBreakpoints())).toThrow(
+      'useBreakpoints must be used within a MediaQueryProvider',
+    );
   });
 
   it('returns initial matches based on getSnapshot', () => {
diff --git a/packages/web/src/hooks/__tests__/useCellSpacing.test.ts b/packages/web/src/hooks/__tests__/useCellSpacing.test.ts
index b1c711fe34..080f2c9bdd 100644
--- a/packages/web/src/hooks/__tests__/useCellSpacing.test.ts
+++ b/packages/web/src/hooks/__tests__/useCellSpacing.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { innerDefaults, outerDefaults, useCellSpacing } from '../useCellSpacing';
 
diff --git a/packages/web/src/hooks/__tests__/useDimensions.test.ts b/packages/web/src/hooks/__tests__/useDimensions.test.ts
index 2c045cb83a..7e2da23256 100644
--- a/packages/web/src/hooks/__tests__/useDimensions.test.ts
+++ b/packages/web/src/hooks/__tests__/useDimensions.test.ts
@@ -1,5 +1,5 @@
 import { act } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import type { Event as ResizeEvent, Options } from '../useDimensions';
 import { borderBoxWarn, observerErr, useDimensions } from '../useDimensions';
diff --git a/packages/web/src/hooks/__tests__/useHorizontalScrollToTarget.test.ts b/packages/web/src/hooks/__tests__/useHorizontalScrollToTarget.test.ts
index 6c4f778250..4402e01d9c 100644
--- a/packages/web/src/hooks/__tests__/useHorizontalScrollToTarget.test.ts
+++ b/packages/web/src/hooks/__tests__/useHorizontalScrollToTarget.test.ts
@@ -1,4 +1,5 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act } from 'react';
+import { renderHook } from '@testing-library/react';
 import throttle from 'lodash/throttle';
 
 import { useHorizontalScrollToTarget } from '../useHorizontalScrollToTarget';
@@ -96,7 +97,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ overflowThreshold: 5 }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
         mockScrollElement.scrollLeft = 10;
         throttledFn();
@@ -110,7 +110,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ overflowThreshold: 5 }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
         mockScrollElement.scrollLeft = 490; // Near max scroll (maxScroll = 500, so 490 < 495 = true)
         throttledFn();
@@ -124,7 +123,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ overflowThreshold: 5 }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
         mockScrollElement.scrollLeft = 0;
         throttledFn();
@@ -138,7 +136,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ overflowThreshold: 5 }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
         mockScrollElement.scrollLeft = 500; // Max scroll
         throttledFn();
@@ -152,7 +149,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ overflowThreshold: 10 }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
         mockScrollElement.scrollLeft = 5; // Below threshold
         throttledFn();
@@ -165,7 +161,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget());
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = null;
         throttledFn();
       });
@@ -208,7 +203,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget());
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
         result.current.handleScroll();
       });
@@ -226,7 +220,6 @@ describe('useHorizontalScrollToTarget', () => {
       );
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
         mockScrollElement.scrollLeft = 100;
         Object.defineProperty(mockActiveTarget, 'offsetLeft', { value: 50, writable: true }); // Offscreen left
@@ -249,7 +242,6 @@ describe('useHorizontalScrollToTarget', () => {
       );
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
         mockScrollElement.scrollLeft = 0;
         Object.defineProperty(mockActiveTarget, 'offsetLeft', { value: 600, writable: true }); // Offscreen right
@@ -272,7 +264,6 @@ describe('useHorizontalScrollToTarget', () => {
       );
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
         mockScrollElement.scrollLeft = 100;
         Object.defineProperty(mockActiveTarget, 'offsetLeft', { value: 200, writable: true }); // Visible
@@ -297,7 +288,6 @@ describe('useHorizontalScrollToTarget', () => {
       );
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
         mockScrollElement.scrollLeft = 100;
         Object.defineProperty(mockActiveTarget, 'offsetLeft', { value: 50, writable: true });
@@ -325,7 +315,6 @@ describe('useHorizontalScrollToTarget', () => {
       );
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
         mockScrollElement.scrollLeft = 100;
         Object.defineProperty(mockActiveTarget, 'offsetLeft', { value: 10, writable: true });
@@ -344,7 +333,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget({ activeTarget: null }));
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
       });
 
@@ -357,7 +345,6 @@ describe('useHorizontalScrollToTarget', () => {
       );
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = null;
       });
 
@@ -370,7 +357,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget());
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
         Object.defineProperty(mockScrollElement, 'scrollWidth', { value: 500 });
         Object.defineProperty(mockScrollElement, 'clientWidth', { value: 500 });
@@ -386,7 +372,6 @@ describe('useHorizontalScrollToTarget', () => {
       const { result } = renderHook(() => useHorizontalScrollToTarget());
 
       act(() => {
-        // @ts-expect-error - Testing internal ref assignment
         result.current.scrollRef.current = mockScrollElement;
         Object.defineProperty(mockScrollElement, 'scrollWidth', { value: 300 });
         Object.defineProperty(mockScrollElement, 'clientWidth', { value: 500 });
diff --git a/packages/web/src/hooks/__tests__/useIsBrowser.test.ts b/packages/web/src/hooks/__tests__/useIsBrowser.test.ts
index b2c960ff11..43fee4e5d2 100644
--- a/packages/web/src/hooks/__tests__/useIsBrowser.test.ts
+++ b/packages/web/src/hooks/__tests__/useIsBrowser.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useIsBrowser } from '../useIsBrowser';
 
diff --git a/packages/web/src/hooks/__tests__/useMediaQuery.test.tsx b/packages/web/src/hooks/__tests__/useMediaQuery.test.tsx
index 606cb261bc..48421acefb 100644
--- a/packages/web/src/hooks/__tests__/useMediaQuery.test.tsx
+++ b/packages/web/src/hooks/__tests__/useMediaQuery.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 import { isDevelopment } from '@coinbase/cds-utils';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { MediaQueryProvider } from '../../system/MediaQueryProvider';
 import { useMediaQuery } from '../useMediaQuery';
@@ -38,8 +38,9 @@ describe('useMediaQuery', () => {
   });
 
   it('throws error when used outside MediaQueryProvider', () => {
-    const { result } = renderHook(() => useMediaQuery('(min-width: 768px)'));
-    expect(() => result.current).toThrow('useMediaQuery must be used within a MediaQueryProvider');
+    expect(() => renderHook(() => useMediaQuery('(min-width: 768px)'))).toThrow(
+      'useMediaQuery must be used within a MediaQueryProvider',
+    );
   });
   it('warns about complex queries in development', () => {
     mockMatchMedia(true);
@@ -67,12 +68,8 @@ describe('useMediaQuery', () => {
     const initialQuery = '(min-width: 768px)';
     const updatedQuery = '(max-width: 500px)';
 
-    const DynamicWrapper: React.FunctionComponent<{ children?: ReactNode; query: string }> = ({
-      children,
-    }) => <MediaQueryProvider>{children}</MediaQueryProvider>;
-
     const { result, rerender } = renderHook(({ query }) => useMediaQuery(query), {
-      wrapper: DynamicWrapper,
+      wrapper: ({ children }) => <MediaQueryProvider>{children}</MediaQueryProvider>,
       initialProps: { query: initialQuery },
     });
 
diff --git a/packages/web/src/hooks/__tests__/useResolveResponsiveProp.test.tsx b/packages/web/src/hooks/__tests__/useResolveResponsiveProp.test.tsx
new file mode 100644
index 0000000000..d289c66f3c
--- /dev/null
+++ b/packages/web/src/hooks/__tests__/useResolveResponsiveProp.test.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react';
+
+import { media } from '../../styles/media';
+import { MediaQueryContext } from '../../system/MediaQueryProvider';
+import { useResolveResponsiveProp } from '../useResolveResponsiveProp';
+
+const createMediaContext = (width: number) => ({
+  subscribe: () => () => {},
+  getServerSnapshot: (query: string) => {
+    if (query === media.phone) return width <= 767;
+    if (query === media.tablet) return width >= 768 && width <= 1279;
+    if (query === media.desktop) return width >= 1280;
+    return false;
+  },
+  getSnapshot: (query: string) => {
+    if (query === media.phone) return width <= 767;
+    if (query === media.tablet) return width >= 768 && width <= 1279;
+    if (query === media.desktop) return width >= 1280;
+    return false;
+  },
+});
+
+const responsiveValue = {
+  base: 'base',
+  phone: 'phone',
+  tablet: 'tablet',
+  desktop: 'desktop',
+} as const;
+
+const wrapper = (width: number) =>
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <MediaQueryContext.Provider value={createMediaContext(width)}>
+        {children}
+      </MediaQueryContext.Provider>
+    );
+  };
+
+describe('useResolveResponsiveProp', () => {
+  it('returns scalar value unchanged', () => {
+    const { result } = renderHook(() => useResolveResponsiveProp('scalar'), {
+      wrapper: wrapper(500),
+    });
+    expect(result.current).toBe('scalar');
+  });
+
+  it('returns undefined for undefined input', () => {
+    const { result } = renderHook(() => useResolveResponsiveProp(undefined), {
+      wrapper: wrapper(500),
+    });
+    expect(result.current).toBeUndefined();
+  });
+
+  it.each([
+    ['phone', 500, 'phone'],
+    ['tablet', 900, 'tablet'],
+    ['desktop', 1400, 'desktop'],
+  ])('resolves responsive object for %s viewport', (_, width, expected) => {
+    const { result } = renderHook(() => useResolveResponsiveProp(responsiveValue), {
+      wrapper: wrapper(width),
+    });
+    expect(result.current).toBe(expected);
+  });
+
+  it('falls back to base when outside MediaQueryProvider', () => {
+    const { result } = renderHook(() => useResolveResponsiveProp(responsiveValue));
+    expect(result.current).toBe('base');
+  });
+});
diff --git a/packages/web/src/hooks/useDimensions.ts b/packages/web/src/hooks/useDimensions.ts
index b65f04a23e..0fdf835d34 100644
--- a/packages/web/src/hooks/useDimensions.ts
+++ b/packages/web/src/hooks/useDimensions.ts
@@ -28,7 +28,7 @@ type ShouldUpdate = {
 type Breakpoints = Record<string, number>;
 
 export type Options<T> = {
-  ref?: RefObject<T> | null;
+  ref?: RefObject<T | null> | null;
   useBorderBoxSize?: boolean;
   breakpoints?: Breakpoints;
   updateOnBreakpointChange?: boolean;
@@ -38,7 +38,7 @@ export type Options<T> = {
   polyfill?: any;
 };
 type Return<T> = {
-  ref: RefObject<T>;
+  ref: RefObject<T | null>;
   entry?: ResizeObserverEntry;
 } & Omit<Event<T>, 'entry'>;
 
@@ -105,7 +105,7 @@ export const useDimensions = <T extends HTMLElement>({
     x?: number;
     y?: number;
   }>({});
-  const prevBreakpointRef = useRef<string>();
+  const prevBreakpointRef = useRef<string>(undefined);
   const observerRef = useRef<ResizeObserver | null>(null);
   const onResizeRef = useRef<OnResize<T> | null>(null);
   const shouldUpdateRef = useRef<ShouldUpdate | null>(null);
diff --git a/packages/web/src/hooks/useResolveResponsiveProp.ts b/packages/web/src/hooks/useResolveResponsiveProp.ts
new file mode 100644
index 0000000000..e144b36374
--- /dev/null
+++ b/packages/web/src/hooks/useResolveResponsiveProp.ts
@@ -0,0 +1,39 @@
+import { useContext } from 'react';
+
+import { media } from '../styles/media';
+import type { ResponsiveProp, ResponsiveValue } from '../styles/styleProps';
+import { MediaQueryContext } from '../system/MediaQueryProvider';
+
+const isResponsiveValue = <T>(value: ResponsiveProp<T>): value is ResponsiveValue<T> =>
+  typeof value === 'object' &&
+  value !== null &&
+  ('base' in value || 'phone' in value || 'tablet' in value || 'desktop' in value);
+
+/**
+ * Resolves a ResponsiveProp to a single value based on the current viewport.
+ *
+ * Use this when you need the resolved value in JavaScript (e.g., passing to a child
+ * component or using in conditional logic). For applying responsive styles via CSS,
+ * use getStyles from styleProps instead—it handles responsive objects via
+ * media-query CSS variables.
+ *
+ * Reads getSnapshot from MediaQueryContext when within MediaQueryProvider.
+ * Without it, returns the first defined value (base ?? phone ?? tablet ?? desktop).
+ *
+ * @param value - A scalar value or responsive object with base/phone/tablet/desktop keys
+ * @returns The resolved value for the current breakpoint
+ */
+export const useResolveResponsiveProp = <T>(
+  value: ResponsiveProp<T> | undefined,
+): T | undefined => {
+  const context = useContext(MediaQueryContext);
+  const getSnapshot = context?.getSnapshot;
+
+  if (!value || !isResponsiveValue(value)) return value;
+  const fallback = value.base ?? value.phone ?? value.tablet ?? value.desktop;
+  if (!getSnapshot) return fallback;
+  if (typeof value.phone !== 'undefined' && getSnapshot(media.phone)) return value.phone;
+  if (typeof value.tablet !== 'undefined' && getSnapshot(media.tablet)) return value.tablet;
+  if (typeof value.desktop !== 'undefined' && getSnapshot(media.desktop)) return value.desktop;
+  return fallback;
+};
diff --git a/packages/web/src/icons/Icon.tsx b/packages/web/src/icons/Icon.tsx
index d8f8ceec6e..fab47288c8 100644
--- a/packages/web/src/icons/Icon.tsx
+++ b/packages/web/src/icons/Icon.tsx
@@ -40,7 +40,10 @@ export type IconBaseProps = SharedProps &
      * @default false
      */
     active?: boolean;
-    /** @danger This is a migration escape hatch. It is not intended to be used normally. */
+    /**
+     * @deprecated Use `style`, `styles.root`, `className`, `classNames.root`, or the `color` prop to customize icon color. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
+     */
     dangerouslySetColor?: string;
   };
 
diff --git a/packages/web/src/layout/Box.tsx b/packages/web/src/layout/Box.tsx
index 784c1b28fe..b43058f51d 100644
--- a/packages/web/src/layout/Box.tsx
+++ b/packages/web/src/layout/Box.tsx
@@ -37,7 +37,10 @@ export type BoxBaseProps = StyleProps &
     borderedHorizontal?: boolean;
     /** Add a border to the top and bottom sides of the box. */
     borderedVertical?: boolean;
-    /** @danger This is a migration escape hatch. It is not intended to be used normally. */
+    /**
+     * @deprecated Use `style` or `className` to set custom background colors. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
+     */
     dangerouslySetBackground?: string;
   };
 
diff --git a/packages/web/src/layout/Grid.tsx b/packages/web/src/layout/Grid.tsx
index 21c92a697b..db3615cb4b 100644
--- a/packages/web/src/layout/Grid.tsx
+++ b/packages/web/src/layout/Grid.tsx
@@ -1,5 +1,4 @@
 import React, { forwardRef, useMemo } from 'react';
-import { type DimensionValue } from '@coinbase/cds-common/types/DimensionStyles';
 
 import type { Polymorphic } from '../core/polymorphism';
 
@@ -34,7 +33,7 @@ export type GridBaseProps = Polymorphic.ExtendableProps<
      * Grid can take a minimum column dimension that will clamp it to be no less than the value
      * @note `columnMin` cannot be used in conjunction with `columns` or `templateColumns`
      */
-    columnMin?: DimensionValue;
+    columnMin?: React.CSSProperties['minWidth'];
     /**
      * if neither `columns` or `templateColumns` are declared, Grid will implicitly lay out grid lines based on available space
      * You can cap the maximum width of each column by passing `columnMax`
@@ -44,7 +43,7 @@ export type GridBaseProps = Polymorphic.ExtendableProps<
      * @default 1fr
      * @note `columnMax` cannot be used in conjunction with `columns` or `templateColumns`
      */
-    columnMax?: DimensionValue;
+    columnMax?: React.CSSProperties['maxWidth'];
   }
 >;
 
diff --git a/packages/web/src/layout/Group.tsx b/packages/web/src/layout/Group.tsx
index 205b61155b..db753cb097 100644
--- a/packages/web/src/layout/Group.tsx
+++ b/packages/web/src/layout/Group.tsx
@@ -32,11 +32,11 @@ export type GroupBaseProps<BoxProps> = Omit<BoxProps, 'gap'> & {
    */
   renderItem?: (info: {
     Wrapper: React.ComponentType<React.PropsWithChildren<BoxProps>>;
-    item: React.ReactChild;
+    item: React.ReactElement | number | string;
     index: number;
     isFirst: boolean;
     isLast: boolean;
-  }) => React.ReactChild;
+  }) => React.ReactElement | number | string;
 };
 
 export type RenderGroupItem = GroupBaseProps<BoxProps<BoxDefaultElement>>['renderItem'];
@@ -50,7 +50,7 @@ const fallbackRenderItem: RenderGroupItem = ({
   item,
   index,
 }: {
-  item: React.ReactChild;
+  item: React.ReactElement | number | string;
   index: number;
 }) => {
   return <ItemWrapper key={index}>{item}</ItemWrapper>;
diff --git a/packages/web/src/layout/__stories__/Divider.stories.tsx b/packages/web/src/layout/__stories__/Divider.stories.tsx
index 2af95954d6..e621d9b16d 100644
--- a/packages/web/src/layout/__stories__/Divider.stories.tsx
+++ b/packages/web/src/layout/__stories__/Divider.stories.tsx
@@ -1,11 +1,12 @@
-import type { ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Box } from '../Box';
+import type { DividerProps } from '../Divider';
 import { Divider } from '../Divider';
 import { HStack } from '../HStack';
 import { VStack } from '../VStack';
 
-export default {
+const meta = {
   title: 'Components/Divider',
   component: Divider,
   argTypes: {
@@ -14,46 +15,52 @@ export default {
       control: { type: 'radio' },
     },
   },
-};
+  render: ({ direction, ...rest }: DividerProps) => {
+    if (direction === 'horizontal') {
+      return (
+        <VStack width={500}>
+          <Box background="bg" height={100} width={500} />
+          <Divider direction={direction} {...rest} />
+          <Box background="bg" height={100} width={500} />
+        </VStack>
+      );
+    }
 
-const Template: ComponentStory<typeof Divider> = ({ direction, ...rest }) => {
-  if (direction === 'horizontal') {
     return (
-      <VStack width={500}>
-        <Box background="bg" height={100} width={500} />
+      <HStack>
+        <Box background="bg" height={200} width={250} />
         <Divider direction={direction} {...rest} />
-        <Box background="bg" height={100} width={500} />
-      </VStack>
+        <Box background="bg" height={200} width={250} />
+      </HStack>
     );
-  }
-
-  return (
-    <HStack>
-      <Box background="bg" height={200} width={250} />
-      <Divider direction={direction} {...rest} />
-      <Box background="bg" height={200} width={250} />
-    </HStack>
-  );
-};
+  },
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const HorizontalDirection = Template.bind({});
-HorizontalDirection.args = {
-  direction: 'horizontal',
+export const HorizontalDirection: Story = {
+  args: {
+    direction: 'horizontal',
+  },
 };
 
-export const VerticalDirection = Template.bind({});
-VerticalDirection.args = {
-  direction: 'vertical',
+export const VerticalDirection: Story = {
+  args: {
+    direction: 'vertical',
+  },
 };
 
-export const LightColor = Template.bind({});
-LightColor.args = {
-  direction: 'horizontal',
-  color: 'bgLine',
+export const LightColor: Story = {
+  args: {
+    direction: 'horizontal',
+    color: 'bgLine',
+  },
 };
 
-export const HeavyColor = Template.bind({});
-HeavyColor.args = {
-  direction: 'horizontal',
-  color: 'bgLineHeavy',
+export const HeavyColor: Story = {
+  args: {
+    direction: 'horizontal',
+    color: 'bgLineHeavy',
+  },
 };
diff --git a/packages/web/src/layout/__stories__/Responsive.stories.tsx b/packages/web/src/layout/__stories__/Responsive.stories.tsx
index 606c9026f9..7726f96598 100644
--- a/packages/web/src/layout/__stories__/Responsive.stories.tsx
+++ b/packages/web/src/layout/__stories__/Responsive.stories.tsx
@@ -120,7 +120,7 @@ export const ResponsiveCard = () => {
     <Card {...cardResponsiveProps}>
       <CardHeader
         action={
-          <IconButton transparent accessibilityLabel="More" name="more" variant="foregroundMuted" />
+          <IconButton transparent accessibilityLabel="More" name="more" variant="secondary" />
         }
         avatar="https://images.ctfassets.net/q5ulk4bp65r7/3rv8jr1B1Z1dZ2EhHqo7dp/e74ddbf1cd4836b83d34fe5cec351d78/Alt-Coin.png?w=768&fm=png"
         description="Earn crypto"
diff --git a/packages/web/src/loaders/Spinner.tsx b/packages/web/src/loaders/Spinner.tsx
index 2cdea5a341..2c2937a7cc 100644
--- a/packages/web/src/loaders/Spinner.tsx
+++ b/packages/web/src/loaders/Spinner.tsx
@@ -8,7 +8,8 @@ const COMPONENT_STATIC_CLASSNAME = 'cds-Spinner';
 
 export type SpinnerBaseProps = {
   /**
-   * The font size of the spinner in pixels - used to calculate the width, height, and borderWidth. Width and height are 10em while borderWidth is 1.1em.
+   * The font size of the spinner in pixels - used to calculate the width, height, and borderWidth.
+   * Width and height are 10em while borderWidth is 1.1em.
    */
   size: number;
 };
diff --git a/packages/web/src/media/Avatar.tsx b/packages/web/src/media/Avatar.tsx
index fa299ab66b..b2e8fdf4f5 100644
--- a/packages/web/src/media/Avatar.tsx
+++ b/packages/web/src/media/Avatar.tsx
@@ -176,7 +176,7 @@ export const Avatar = memo((_props: AvatarProps) => {
         <Text
           as="p"
           color="fgInverse"
-          display="block"
+          display="inline"
           font="title2"
           style={{ transform: `scale(${dangerouslySetSize * 0.02})` }}
           textAlign="center"
@@ -193,7 +193,7 @@ export const Avatar = memo((_props: AvatarProps) => {
       <Text
         as="p"
         color="fgInverse"
-        display="block"
+        display="inline"
         font={showLargerFont ? 'title2' : 'body'}
         textAlign="center"
         transform="uppercase"
diff --git a/packages/web/src/media/Hexagon.tsx b/packages/web/src/media/Hexagon.tsx
index acf3b2d4ce..78a37fd429 100644
--- a/packages/web/src/media/Hexagon.tsx
+++ b/packages/web/src/media/Hexagon.tsx
@@ -1,5 +1,6 @@
 import React, { memo, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
+import { hexagonShapePath } from '@coinbase/cds-common/svg/shape';
 import type { SharedProps } from '@coinbase/cds-common/types';
 import { css } from '@linaria/core';
 
@@ -30,7 +31,7 @@ export const HexagonAvatarClipPath = () => {
           id={hexagonAvatarClipId}
           transform={`scale(${1 / viewBoxSize} ${1 / viewBoxSize})`}
         >
-          <path d="M15.4855 6.0242C16.1715 7.24852 16.1715 8.75148 15.4855 9.97581L13.4213 13.6598C12.7259 14.9008 11.4317 15.6667 10.0301 15.6667H5.96994C4.56828 15.6667 3.2741 14.9008 2.57874 13.6598L0.514515 9.97581C-0.171504 8.75148 -0.171505 7.24852 0.514514 6.0242L2.57874 2.34022C3.2741 1.09922 4.56828 0.333336 5.96994 0.333336H10.0301C11.4317 0.333336 12.7259 1.09922 13.4213 2.34022L15.4855 6.0242Z" />
+          <path d={hexagonShapePath} />
         </clipPath>
       </defs>
     </svg>
@@ -109,7 +110,7 @@ export const HexagonBorder = memo(
         <svg data-testid={`${testID}-svg`} overflow="visible" viewBox="0 0 16 16">
           <path
             className={pathElementCss}
-            d="M15.4855 6.0242C16.1715 7.24852 16.1715 8.75148 15.4855 9.97581L13.4213 13.6598C12.7259 14.9008 11.4317 15.6667 10.0301 15.6667H5.96994C4.56828 15.6667 3.2741 14.9008 2.57874 13.6598L0.514515 9.97581C-0.171504 8.75148 -0.171505 7.24852 0.514514 6.0242L2.57874 2.34022C3.2741 1.09922 4.56828 0.333336 5.96994 0.333336H10.0301C11.4317 0.333336 12.7259 1.09922 13.4213 2.34022L15.4855 6.0242Z"
+            d={hexagonShapePath}
             data-testid={`${testID}-path`}
             stroke={strokeColor}
             strokeWidth={hexagonBorderWidth}
diff --git a/packages/web/src/media/RemoteImageGroup.tsx b/packages/web/src/media/RemoteImageGroup.tsx
index 81a9cf2187..a2d7c7d1e0 100644
--- a/packages/web/src/media/RemoteImageGroup.tsx
+++ b/packages/web/src/media/RemoteImageGroup.tsx
@@ -110,7 +110,9 @@ export const RemoteImageGroup = (_props: RemoteImageGroupProps) => {
           return null;
         }
 
-        const childShape: RemoteImageProps['shape'] = child.props.shape;
+        const childShape: RemoteImageProps['shape'] = (
+          child as React.ReactElement<RemoteImageProps>
+        ).props.shape;
 
         // dynamically apply uniform sizing and shape to all RemoteImage children elements
         const clonedChild = React.cloneElement(child as React.ReactElement<RemoteImageProps>, {
diff --git a/packages/web/src/motion/__tests__/Pulse.test.tsx b/packages/web/src/motion/__tests__/Pulse.test.tsx
index e681833da0..8bae8fe6ea 100644
--- a/packages/web/src/motion/__tests__/Pulse.test.tsx
+++ b/packages/web/src/motion/__tests__/Pulse.test.tsx
@@ -68,7 +68,7 @@ describe('Pulse', () => {
     const ref = { current: null } as React.RefObject<{
       play: () => Promise<void>;
       stop: () => Promise<void>;
-    }>;
+    } | null>;
     render(
       <Pulse ref={ref}>
         <div>Children</div>
diff --git a/packages/web/src/motion/__tests__/Shake.test.tsx b/packages/web/src/motion/__tests__/Shake.test.tsx
index cd0fee8ec2..6476aed83a 100644
--- a/packages/web/src/motion/__tests__/Shake.test.tsx
+++ b/packages/web/src/motion/__tests__/Shake.test.tsx
@@ -67,7 +67,7 @@ describe('Shake', () => {
   it('exposes imperative handlers that start the animation', () => {
     const ref = { current: null } as React.RefObject<{
       play: () => Promise<void>;
-    }>;
+    } | null>;
     render(
       <Shake ref={ref}>
         <div>Children</div>
diff --git a/packages/web/src/motion/__tests__/useMotionProps.test.tsx b/packages/web/src/motion/__tests__/useMotionProps.test.tsx
index bd173bdf77..04dcf2cee4 100644
--- a/packages/web/src/motion/__tests__/useMotionProps.test.tsx
+++ b/packages/web/src/motion/__tests__/useMotionProps.test.tsx
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import type { MotionConfigs } from '../types';
 import { useMotionProps } from '../useMotionProps';
diff --git a/packages/web/src/navigation/NavigationTitleSelect.tsx b/packages/web/src/navigation/NavigationTitleSelect.tsx
index cd46aafcb9..49af246a9a 100644
--- a/packages/web/src/navigation/NavigationTitleSelect.tsx
+++ b/packages/web/src/navigation/NavigationTitleSelect.tsx
@@ -1,6 +1,7 @@
 import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { selectCellSpacingConfig } from '@coinbase/cds-common/tokens/select';
 
-import { SelectOption } from '../controls/SelectOption';
+import { Cell } from '../cells/Cell';
 import { Dropdown } from '../dropdown/Dropdown';
 import type { DropdownRef } from '../dropdown/DropdownProps';
 import { useA11yControlledVisibility } from '../hooks/useA11yControlledVisibility';
@@ -49,11 +50,28 @@ export const NavigationTitleSelect = memo((_props: NavigationTitleSelectProps) =
     setVisible(true);
   }, []);
 
+  const handleOptionClick = useCallback(
+    (id: string) => {
+      onChange(id);
+      dropdownRef.current?.closeMenu();
+    },
+    [onChange],
+  );
+
   const dropdownContent = useMemo(() => {
-    return options.map((option) => (
-      <SelectOption key={option.id} title={option.label} value={option.id} />
+    return options.map(({ id, label: title }) => (
+      <Cell
+        borderRadius={0}
+        onClick={() => handleOptionClick(id)}
+        selected={value === id}
+        {...selectCellSpacingConfig}
+      >
+        <Text font="headline" overflow="truncate">
+          {title}
+        </Text>
+      </Cell>
     ));
-  }, [options]);
+  }, [handleOptionClick, options, value]);
 
   const label = useMemo(() => {
     return options.find((option) => option.id === value)?.label;
diff --git a/packages/web/src/navigation/SidebarItem.tsx b/packages/web/src/navigation/SidebarItem.tsx
index 77d6ef7159..ac374a5b30 100644
--- a/packages/web/src/navigation/SidebarItem.tsx
+++ b/packages/web/src/navigation/SidebarItem.tsx
@@ -2,6 +2,7 @@ import React, { forwardRef, memo, useMemo } from 'react';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { css } from '@linaria/core';
 
+import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon, type IconProps } from '../icons';
 import { Box } from '../layout';
@@ -13,6 +14,7 @@ import {
   type PressableDefaultElement,
   type PressableProps,
 } from '../system/Pressable';
+import type { StylesAndClassNames } from '../types';
 import { Text } from '../typography';
 
 import { useSidebarContext } from './SidebarContext';
@@ -35,6 +37,21 @@ type ManagedPressableProps = Pick<
   'background' | 'width' | 'transparentWhileInactive' | 'className' | 'borderWidth'
 >;
 
+/**
+ * Static class names for SidebarItem component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export const sidebarItemClassNames = {
+  /** Persistent outer wrapper across tooltip/non-tooltip variants. */
+  root: 'cds-SidebarItem',
+  /** Default content wrapper element. */
+  content: 'cds-SidebarItem-content',
+  /** Icon wrapper element. */
+  icon: 'cds-SidebarItem-icon',
+  /** Title text element. */
+  title: 'cds-SidebarItem-title',
+} as const;
+
 export type SidebarItemBaseProps = Pick<TooltipBaseProps, 'disablePortal'> &
   Omit<PressableBaseProps, keyof ManagedPressableProps> & {
     /**
@@ -69,7 +86,11 @@ export type SidebarItemBaseProps = Pick<TooltipBaseProps, 'disablePortal'> &
   };
 
 export type SidebarItemProps = SidebarItemBaseProps &
-  Omit<PressableProps<PressableDefaultElement>, keyof ManagedPressableProps>;
+  StylesAndClassNames<typeof sidebarItemClassNames> &
+  Omit<PressableProps<PressableDefaultElement>, keyof ManagedPressableProps> & {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 
 export const SidebarItem = memo(
   forwardRef((_props: SidebarItemProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
@@ -84,6 +105,10 @@ export const SidebarItem = memo(
       borderRadius,
       accessibilityLabel = title,
       Component,
+      className,
+      style,
+      classNames,
+      styles,
       ...pressableProps
     } = mergedProps;
     const color: ThemeVars.Color = active ? 'fgPrimary' : 'fg';
@@ -94,20 +119,31 @@ export const SidebarItem = memo(
       () => (
         <Box
           alignItems="center"
+          className={cx(sidebarItemClassNames.content, classNames?.content)}
           flexDirection={isDefaultVariant ? 'row' : 'column'}
           gap={isDefaultVariant ? 2 : 0.5}
           paddingX={isDefaultVariant ? 2 : 0.5}
           paddingY={isDefaultVariant ? 2 : 1}
+          style={styles?.content}
           testID={`sidebar-item-${variant}`}
         >
-          <Icon active={active} color={color} name={icon} size="m" />
+          <Icon
+            active={active}
+            className={cx(sidebarItemClassNames.icon, classNames?.icon)}
+            color={color}
+            name={icon}
+            size="m"
+            style={styles?.icon}
+          />
           {(variant === 'condensed' || !isCollapsed) && (
             <Text
+              className={cx(sidebarItemClassNames.title, classNames?.title)}
               color={color}
               font={isDefaultVariant ? 'headline' : 'label1'}
               fontSize={isDefaultVariant ? 'inherit' : 'legal'}
               numberOfLines={isDefaultVariant ? undefined : 1}
               overflow={isDefaultVariant ? undefined : 'break'}
+              style={styles?.title}
               textAlign={isDefaultVariant ? 'start' : 'center'}
             >
               {title}
@@ -115,22 +151,36 @@ export const SidebarItem = memo(
           )}
         </Box>
       ),
-      [active, color, icon, isCollapsed, isDefaultVariant, title, variant],
+      [
+        active,
+        color,
+        icon,
+        isCollapsed,
+        isDefaultVariant,
+        title,
+        variant,
+        classNames?.content,
+        classNames?.icon,
+        classNames?.title,
+        styles?.content,
+        styles?.icon,
+        styles?.title,
+      ],
     );
 
     const content = useMemo(
       () => (
         <Pressable
           ref={ref}
-          className={pressableCss}
-          {...pressableProps}
           accessibilityLabel={isCollapsed ? accessibilityLabel : undefined}
           aria-current={active ? 'page' : undefined}
           background="bgPrimaryWash"
           borderRadius={borderRadius ?? (isDefaultVariant ? 1000 : 400)}
           borderWidth={isDefaultVariant ? undefined : 0}
+          className={pressableCss}
           transparentWhileInactive={!active}
           width="100%"
+          {...pressableProps}
         >
           {Component ? (
             <Component
@@ -161,12 +211,20 @@ export const SidebarItem = memo(
       ],
     );
 
-    return tooltipContent && isCollapsed ? (
-      <Tooltip content={tooltipContent} disablePortal={disablePortal} placement="right">
-        {content}
-      </Tooltip>
-    ) : (
-      content
+    return (
+      <Box
+        className={cx(sidebarItemClassNames.root, className, classNames?.root)}
+        style={{ ...style, ...styles?.root }}
+        width="100%"
+      >
+        {tooltipContent && isCollapsed ? (
+          <Tooltip content={tooltipContent} disablePortal={disablePortal} placement="right">
+            {content}
+          </Tooltip>
+        ) : (
+          content
+        )}
+      </Box>
     );
   }),
 );
diff --git a/packages/web/src/navigation/__tests__/SidebarItem.test.tsx b/packages/web/src/navigation/__tests__/SidebarItem.test.tsx
index 8327eb1d5d..6bfe385d68 100644
--- a/packages/web/src/navigation/__tests__/SidebarItem.test.tsx
+++ b/packages/web/src/navigation/__tests__/SidebarItem.test.tsx
@@ -86,4 +86,34 @@ describe('SidebarItem', () => {
     // super brittle way to test that a linaria class was applied for borderRadius style prop value of 0
     expect(screen.getAllByTestId('sidebar-item')[0].className).toContain('_0-');
   });
+
+  it('applies classNames to root and slots', () => {
+    render(
+      <DefaultThemeProvider>
+        <Sidebar>
+          <SidebarItem
+            classNames={{
+              content: 'test-sidebar-content',
+              icon: 'test-sidebar-icon',
+              root: 'test-sidebar-root',
+              title: 'test-sidebar-title',
+            }}
+            icon="chartPie"
+            testID="sidebar-item-with-classnames"
+            title="Assets"
+          />
+          <SidebarItem icon="trading" title="Trade" />
+        </Sidebar>
+      </DefaultThemeProvider>,
+    );
+
+    expect(
+      screen.getByTestId('sidebar-item-with-classnames').closest('.test-sidebar-root'),
+    ).toBeTruthy();
+    expect(
+      screen.getByTestId('sidebar-item-with-classnames').closest('.cds-SidebarItem'),
+    ).toBeTruthy();
+    expect(screen.getByText('Assets').className).toContain('test-sidebar-title');
+    expect(screen.getByText('Assets').className).toContain('cds-SidebarItem-title');
+  });
 });
diff --git a/packages/web/src/numbers/RollingNumber/DefaultRollingNumberDigit.tsx b/packages/web/src/numbers/RollingNumber/DefaultRollingNumberDigit.tsx
index a02dad4a9c..18f9b945af 100644
--- a/packages/web/src/numbers/RollingNumber/DefaultRollingNumberDigit.tsx
+++ b/packages/web/src/numbers/RollingNumber/DefaultRollingNumberDigit.tsx
@@ -145,7 +145,9 @@ export const DefaultRollingNumberDigit: RollingNumberDigitComponent = memo(
         (digit: number) => (
           <span
             key={digit}
-            ref={(r) => void (numberRefs.current[digit] = r)}
+            ref={(r) => {
+              void (numberRefs.current[digit] = r);
+            }}
             className={digitSpanCss}
           >
             {digit}
diff --git a/packages/web/src/numbers/RollingNumber/RollingNumber.tsx b/packages/web/src/numbers/RollingNumber/RollingNumber.tsx
index 7a19a0cea3..f100bbbd9f 100644
--- a/packages/web/src/numbers/RollingNumber/RollingNumber.tsx
+++ b/packages/web/src/numbers/RollingNumber/RollingNumber.tsx
@@ -718,12 +718,15 @@ export const RollingNumber: RollingNumberComponent = memo(
         >
           {/* render screen reader only section for accessibility */}
           {screenReaderOnlySection}
+          {/* TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility */}
           <m.span
-            aria-hidden
-            animate={colorControls}
-            className={cx(tickerCss, classNames?.visibleContent)}
-            style={styles?.visibleContent}
-            transition={transitionConfig}
+            {...({
+              'aria-hidden': true,
+              animate: colorControls,
+              className: cx(tickerCss, classNames?.visibleContent),
+              style: styles?.visibleContent,
+              transition: transitionConfig,
+            } as React.ComponentProps<typeof m.span>)}
           >
             {prefixSection}
             {formattedValue ? formattedValueValueSection : intlPartsValueSection}
diff --git a/packages/web/src/overlays/Alert.tsx b/packages/web/src/overlays/Alert.tsx
index 0a5318efbf..9d5880bc90 100644
--- a/packages/web/src/overlays/Alert.tsx
+++ b/packages/web/src/overlays/Alert.tsx
@@ -2,7 +2,6 @@ import { forwardRef, memo, useCallback, useMemo } from 'react';
 import type {
   ButtonVariant,
   IllustrationPictogramNames,
-  PositionStyles,
   SharedProps,
   ValidateProps,
 } from '@coinbase/cds-common/types';
@@ -12,6 +11,7 @@ import { useA11yLabels } from '../hooks/useA11yLabels';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Pictogram } from '../illustrations';
 import { Box } from '../layout/Box';
+import type { PositionStyles } from '../styles/styleProps';
 import { Text } from '../typography/Text';
 
 import { Modal, type ModalBaseProps, type ModalRefBaseProps } from './modal/Modal';
@@ -190,9 +190,9 @@ export const Alert = memo(
           </Box>
           <Box
             flexDirection={actionLayout === 'vertical' ? 'column-reverse' : 'row'}
-            gap={2}
-            paddingX={2}
-            paddingY={3}
+            gap={1}
+            paddingX={3}
+            paddingY={2}
             testID={testID && `${testID}-actions`}
           >
             {dismissAction}
diff --git a/packages/web/src/overlays/FocusTrap.tsx b/packages/web/src/overlays/FocusTrap.tsx
index 2c004e9aeb..a518be5148 100644
--- a/packages/web/src/overlays/FocusTrap.tsx
+++ b/packages/web/src/overlays/FocusTrap.tsx
@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import type { ReactElement, RefObject } from 'react';
-import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import { FOCUSABLE_ELEMENTS } from '@coinbase/cds-common/tokens/overlays';
 import { debounce } from '@coinbase/cds-common/utils/debounce';
+import { mergeReactElementRef } from '@coinbase/cds-common/utils/mergeRefs';
 
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { getBrowserGlobals } from '../utils/browser';
@@ -139,7 +139,7 @@ export const FocusTrap = memo((_props: FocusTrapProps) => {
 
   // trap focus for accessibility
   const handleKeyboardNavigation = useCallback(
-    (event: KeyboardEvent, element: RefObject<HTMLElement>['current']) => {
+    (event: KeyboardEvent, element: RefObject<HTMLElement | null>['current']) => {
       if (event.defaultPrevented) return;
       const document = getBrowserGlobals()?.document;
       const activeElement = document?.activeElement as HTMLElement;
@@ -381,11 +381,11 @@ export const FocusTrap = memo((_props: FocusTrapProps) => {
   // only works for single child
   const onlyChild = React.Children.only(children);
 
-  const mergedRef = useMergeRefs(childrenRef, children?.ref);
-
   if (!onlyChild) {
     return <>{children}</>;
   }
 
-  return React.cloneElement(children, { ref: mergedRef });
+  return React.cloneElement(children as React.ReactElement<React.RefAttributes<HTMLElement>>, {
+    ref: mergeReactElementRef<HTMLElement>(children, childrenRef),
+  });
 });
diff --git a/packages/web/src/overlays/Portal.tsx b/packages/web/src/overlays/Portal.tsx
index 98c51773d1..2259434c41 100644
--- a/packages/web/src/overlays/Portal.tsx
+++ b/packages/web/src/overlays/Portal.tsx
@@ -6,17 +6,19 @@ import { ThemeProvider } from '../system/ThemeProvider';
 import { isSSR } from '../utils/browser';
 
 export type PortalProps = {
-  /**
-   * Disable React portal integration
-   */
+  /** When true, renders children in place without creating a React portal. */
   disablePortal?: boolean;
-  /**
-   * Portal container element id
-   */
+  /** The DOM element ID to render the portal content into. */
   containerId?: string;
   children: React.ReactNode;
 };
 
+/**
+ * Internal component used by CDS overlay components (Modal, Toast, Alert, etc.) to
+ * render content into the container elements created by PortalProvider. Wraps
+ * `createPortal` and automatically re-establishes the current theme in the portal's
+ * DOM tree via an isolated ThemeProvider.
+ */
 export const Portal = memo(function Portal({
   disablePortal,
   children,
@@ -29,7 +31,7 @@ export const Portal = memo(function Portal({
   }
 
   return createPortal(
-    <ThemeProvider activeColorScheme={theme.activeColorScheme} theme={theme}>
+    <ThemeProvider isolated activeColorScheme={theme.activeColorScheme} theme={theme}>
       {children}
     </ThemeProvider>,
     document.getElementById(containerId) as HTMLElement,
diff --git a/packages/web/src/overlays/PortalProvider.tsx b/packages/web/src/overlays/PortalProvider.tsx
index 9b268e412d..435b5fb943 100644
--- a/packages/web/src/overlays/PortalProvider.tsx
+++ b/packages/web/src/overlays/PortalProvider.tsx
@@ -29,6 +29,11 @@ export const trayContainerId = 'trayContainer';
 
 const safeDocument = getBrowserGlobals()?.document;
 
+/**
+ * Internal component that creates the DOM container elements for overlay components.
+ * Appends a root div to `document.body` containing separate containers for each overlay
+ * type (modals, toasts, alerts, tooltips, trays), each with its own z-index layer.
+ */
 export const PortalHost: React.FC = memo(() => {
   const portalRoot = useMemo(
     // prevent duplicate portal root
@@ -94,6 +99,13 @@ export const PortalHost: React.FC = memo(() => {
   );
 });
 
+/**
+ * Required root-level provider that enables CDS overlay components (Modal, Toast, Alert,
+ * Tooltip, Tray). Creates the DOM containers these components render into via React portals
+ * and provides the context for managing overlay state and toast queuing.
+ *
+ * Must be rendered once near the root of your application, alongside ThemeProvider.
+ */
 export const PortalProvider: React.FC<React.PropsWithChildren<PortalProviderProps>> = memo(
   ({ children, toastBottomOffset = 0, renderPortals = true }) => {
     const portalState = usePortalState();
@@ -117,6 +129,11 @@ export const PortalProvider: React.FC<React.PropsWithChildren<PortalProviderProp
   },
 );
 
+/**
+ * Renders portal containers and overlay nodes independently from PortalProvider.
+ * Use this when `renderPortals={false}` is set on PortalProvider to control
+ * where in the component tree the portal DOM containers are created.
+ */
 export const PortalNodes = () => {
   const { nodes } = usePortal();
   return (
diff --git a/packages/web/src/overlays/Toast.tsx b/packages/web/src/overlays/Toast.tsx
index 84bb3a60be..2f1ead8bf2 100644
--- a/packages/web/src/overlays/Toast.tsx
+++ b/packages/web/src/overlays/Toast.tsx
@@ -131,11 +131,14 @@ export const Toast = memo(
 
     return (
       <Portal containerId={toastContainerId} disablePortal={disablePortal}>
+        {/* TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility */}
         <motion.div
-          {...motionProps}
-          className={baseCss}
-          data-testid={`${testID}-motion`}
-          onAnimationComplete={handleAnimationComplete}
+          {...({
+            ...motionProps,
+            className: baseCss,
+            'data-testid': `${testID}-motion`,
+            onAnimationComplete: handleAnimationComplete,
+          } as React.ComponentProps<typeof motion.div>)}
         >
           <Box
             justifyContent="center"
@@ -184,7 +187,7 @@ export const Toast = memo(
                     name="close"
                     onClick={handleClose}
                     testID={`${testID}-close-button`}
-                    variant="foregroundMuted"
+                    variant="secondary"
                     {...closeButtonAccessibilityProps}
                   />
                 )}
diff --git a/packages/web/src/overlays/__stories__/FullscreenModal.stories.tsx b/packages/web/src/overlays/__stories__/FullscreenModal.stories.tsx
index f93001de38..79d13bafa0 100644
--- a/packages/web/src/overlays/__stories__/FullscreenModal.stories.tsx
+++ b/packages/web/src/overlays/__stories__/FullscreenModal.stories.tsx
@@ -154,7 +154,7 @@ export const Example = () => {
       description="Amp is an Ethereum token that can be used as collateral to provide instant settlement assurance any time value is transferred."
       headerAction={{
         name: 'more',
-        variant: 'foregroundMuted',
+        variant: 'secondary',
       }}
       image="https://images.ctfassets.net/q5ulk4bp65r7/3rv8jr1B1Z1dZ2EhHqo7dp/e74ddbf1cd4836b83d34fe5cec351d78/Alt-Coin.png?w=768&fm=png"
       mediaPlacement="above"
diff --git a/packages/web/src/overlays/__stories__/FullscreenModalLayout.stories.tsx b/packages/web/src/overlays/__stories__/FullscreenModalLayout.stories.tsx
index aab75612e4..9cb6a4c29e 100644
--- a/packages/web/src/overlays/__stories__/FullscreenModalLayout.stories.tsx
+++ b/packages/web/src/overlays/__stories__/FullscreenModalLayout.stories.tsx
@@ -282,7 +282,7 @@ export const Example = () => {
       description="Amp is an Ethereum token that can be used as collateral to provide instant settlement assurance any time value is transferred."
       headerAction={{
         name: 'more',
-        variant: 'foregroundMuted',
+        variant: 'secondary',
       }}
       image="https://images.ctfassets.net/q5ulk4bp65r7/3rv8jr1B1Z1dZ2EhHqo7dp/e74ddbf1cd4836b83d34fe5cec351d78/Alt-Coin.png?w=768&fm=png"
       mediaPlacement="above"
diff --git a/packages/web/src/overlays/__stories__/Modal.stories.tsx b/packages/web/src/overlays/__stories__/Modal.stories.tsx
index c98a0a76f9..d16a0ac053 100644
--- a/packages/web/src/overlays/__stories__/Modal.stories.tsx
+++ b/packages/web/src/overlays/__stories__/Modal.stories.tsx
@@ -25,7 +25,7 @@ export default {
 };
 
 type ModalA11yProps = {
-  triggerRef?: React.RefObject<HTMLButtonElement>;
+  triggerRef?: React.RefObject<HTMLButtonElement | null>;
   enableBackButton?: boolean;
   visible?: boolean;
 };
diff --git a/packages/web/src/overlays/__stories__/ModalInteractive.stories.tsx b/packages/web/src/overlays/__stories__/ModalInteractive.stories.tsx
index 4ae0fb06f4..f3863d90e3 100644
--- a/packages/web/src/overlays/__stories__/ModalInteractive.stories.tsx
+++ b/packages/web/src/overlays/__stories__/ModalInteractive.stories.tsx
@@ -8,7 +8,7 @@ import { ModalFooter } from '../modal/ModalFooter';
 import { ModalHeader } from '../modal/ModalHeader';
 
 type ModalA11yProps = {
-  triggerRef?: React.RefObject<HTMLButtonElement>;
+  triggerRef?: React.RefObject<HTMLButtonElement | null>;
   focusTrigger?: () => void;
   accessibilityLabelledBy?: string;
   accessibilityLabel?: string;
diff --git a/packages/web/src/overlays/__stories__/Tooltip.stories.tsx b/packages/web/src/overlays/__stories__/Tooltip.stories.tsx
index 2c35d22168..2a39f8eecf 100644
--- a/packages/web/src/overlays/__stories__/Tooltip.stories.tsx
+++ b/packages/web/src/overlays/__stories__/Tooltip.stories.tsx
@@ -1,9 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
-import type {
-  ComponentMeta,
-  ComponentStory,
-} from '@storybook/react/dist/ts3.9/client/preview/types-6-3';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '../../buttons/Button';
 import { IconButton } from '../../buttons/IconButton';
@@ -16,13 +13,15 @@ import { PortalProvider } from '../PortalProvider';
 import { Tooltip } from '../tooltip/Tooltip';
 import type { TooltipProps } from '../tooltip/TooltipProps';
 
-export default {
+const meta: Meta = {
   title: 'Components/Tooltip/Tooltip',
   component: Tooltip,
   parameters: {
     layout: 'padded',
   },
-} as ComponentMeta<typeof Tooltip>;
+};
+
+export default meta;
 
 type BasicTooltipProps = {
   content: TooltipProps['content'];
@@ -195,23 +194,23 @@ const BasicTooltip = ({ content, openDelay, closeDelay }: BasicTooltipProps) =>
   );
 };
 
-const Template: ComponentStory<typeof BasicTooltip> = (args: BasicTooltipProps) => (
-  <BasicTooltip {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  content: 'This is the tooltip Content',
-};
-
-export const TooltipLongContent = Template.bind({});
+type Story = StoryObj<BasicTooltipProps>;
 
 const longContent =
   'This is the tooltip Content. This is just really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really Long.';
 
-TooltipLongContent.args = {
-  content: longContent,
+export const Default: Story = {
+  render: (args) => <BasicTooltip {...args} />,
+  args: {
+    content: 'This is the tooltip Content',
+  },
+};
+
+export const TooltipLongContent: Story = {
+  render: (args) => <BasicTooltip {...args} />,
+  args: {
+    content: longContent,
+  },
 };
 
 export const DelayedVisibility = ({
diff --git a/packages/web/src/overlays/__stories__/TooltipContent.stories.tsx b/packages/web/src/overlays/__stories__/TooltipContent.stories.tsx
index 5b09fad87e..c632b9c293 100644
--- a/packages/web/src/overlays/__stories__/TooltipContent.stories.tsx
+++ b/packages/web/src/overlays/__stories__/TooltipContent.stories.tsx
@@ -1,8 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import type {
-  ComponentMeta,
-  ComponentStory,
-} from '@storybook/react/dist/ts3.9/client/preview/types-6-3';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '../../buttons/Button';
 import { HStack } from '../../layout/HStack';
@@ -11,13 +8,16 @@ import { PortalProvider } from '../PortalProvider';
 import { TooltipContent } from '../tooltip/TooltipContent';
 import type { PopperTooltipProps } from '../tooltip/TooltipProps';
 
-export default {
+const meta: Meta = {
   title: 'Components/Tooltip/TooltipContent',
   component: TooltipContent,
   parameters: {
     layout: 'padded',
   },
-} as ComponentMeta<typeof TooltipContent>;
+};
+
+export default meta;
+type Story = StoryObj<PopperTooltipProps>;
 
 const BasicTooltipContent = ({ content }: PopperTooltipProps) => {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -39,36 +39,12 @@ const BasicTooltipContent = ({ content }: PopperTooltipProps) => {
   );
 };
 
-const Template: ComponentStory<typeof BasicTooltipContent> = (args: PopperTooltipProps) => (
-  <BasicTooltipContent {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  content: 'This is the tooltip Content',
-};
-
-export const TooltipLongContent = Template.bind({});
-
 const longContent =
   'This is the tooltip Content. This is just really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really Long.';
 
-TooltipLongContent.args = {
-  content: longContent,
-};
-
-export const TooltipLongWordContent = Template.bind({});
-
 const longWordContent =
   'ThisisReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyLongWordContent. This is just really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really Long.';
 
-TooltipLongWordContent.args = {
-  content: longWordContent,
-};
-
-export const VStackNodeContent = Template.bind({});
-
 const VStackNode = (
   <VStack gap={2}>
     <Button>Btn 1</Button>
@@ -77,12 +53,6 @@ const VStackNode = (
   </VStack>
 );
 
-VStackNodeContent.args = {
-  content: VStackNode,
-};
-
-export const HStackNodeContent = Template.bind({});
-
 const HStackNode = (
   <HStack gap={2}>
     <Button>Btn 1</Button>
@@ -91,6 +61,37 @@ const HStackNode = (
   </HStack>
 );
 
-HStackNodeContent.args = {
-  content: HStackNode,
+export const Default: Story = {
+  render: (args) => <BasicTooltipContent {...args} />,
+  args: {
+    content: 'This is the tooltip Content',
+  },
+};
+
+export const TooltipLongContent: Story = {
+  render: (args) => <BasicTooltipContent {...args} />,
+  args: {
+    content: longContent,
+  },
+};
+
+export const TooltipLongWordContent: Story = {
+  render: (args) => <BasicTooltipContent {...args} />,
+  args: {
+    content: longWordContent,
+  },
+};
+
+export const VStackNodeContent: Story = {
+  render: (args) => <BasicTooltipContent {...args} />,
+  args: {
+    content: VStackNode,
+  },
+};
+
+export const HStackNodeContent: Story = {
+  render: (args) => <BasicTooltipContent {...args} />,
+  args: {
+    content: HStackNode,
+  },
 };
diff --git a/packages/web/src/overlays/__tests__/Alert.test.tsx b/packages/web/src/overlays/__tests__/Alert.test.tsx
index 12e589fd7a..396b5d623b 100644
--- a/packages/web/src/overlays/__tests__/Alert.test.tsx
+++ b/packages/web/src/overlays/__tests__/Alert.test.tsx
@@ -95,8 +95,8 @@ describe('Alert', () => {
     const modal = screen.getByRole('alertdialog');
 
     expect(modal).toHaveAttribute('aria-modal', 'true');
-    expect(modal).toHaveAttribute('aria-labelledby', expect.stringMatching(/:r[0-9].*/));
-    expect(screen.getByText(TITLE)).toHaveAttribute('id', expect.stringMatching(/:r[0-9].*/));
+    expect(modal).toHaveAttribute('aria-labelledby', expect.stringMatching(/«r[0-9]+»/));
+    expect(screen.getByText(TITLE)).toHaveAttribute('id', expect.stringMatching(/«r[0-9]+»/));
   });
 
   it('overrides default a11y attrs when accessibilityLabelledBy is provided', () => {
diff --git a/packages/web/src/overlays/modal/FullscreenModalLayout.tsx b/packages/web/src/overlays/modal/FullscreenModalLayout.tsx
index 9f3813c98f..53c6962446 100644
--- a/packages/web/src/overlays/modal/FullscreenModalLayout.tsx
+++ b/packages/web/src/overlays/modal/FullscreenModalLayout.tsx
@@ -101,10 +101,17 @@ export const FullscreenModalLayout = memo(
           visible={visible}
           zIndex={zIndex}
         >
-          <motion.div {...overlayMotionProps}>
+          {/* TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility */}
+          <motion.div {...(overlayMotionProps as React.ComponentProps<typeof motion.div>)}>
             <Overlay />
           </motion.div>
-          <motion.div {...dialogMotionProps} className={pinCss}>
+          {/* TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility */}
+          <motion.div
+            {...({
+              ...dialogMotionProps,
+              className: pinCss,
+            } as React.ComponentProps<typeof motion.div>)}
+          >
             <FocusTrap
               disableFocusTrap={disableFocusTrap}
               focusTabIndexElements={focusTabIndexElements}
diff --git a/packages/web/src/overlays/modal/Modal.tsx b/packages/web/src/overlays/modal/Modal.tsx
index eb2816bd62..a0fcce88fe 100644
--- a/packages/web/src/overlays/modal/Modal.tsx
+++ b/packages/web/src/overlays/modal/Modal.tsx
@@ -11,8 +11,7 @@ import {
   type OverlayContentContextValue,
 } from '@coinbase/cds-common/overlays/OverlayContentContext';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
-import type { PositionStyles, SharedProps } from '@coinbase/cds-common/types';
-import type { Position } from '@coinbase/cds-common/types/Position';
+import type { SharedProps } from '@coinbase/cds-common/types';
 import { css } from '@linaria/core';
 import { m as motion } from 'framer-motion';
 
@@ -23,6 +22,7 @@ import { Box } from '../../layout';
 import { VStack } from '../../layout/VStack';
 import { useMotionProps } from '../../motion/useMotionProps';
 import { media } from '../../styles/media';
+import type { PositionStyles } from '../../styles/styleProps';
 import { FocusTrap, type FocusTrapProps } from '../FocusTrap';
 
 import type { ModalWrapperProps } from './ModalWrapper';
@@ -85,7 +85,7 @@ export type ModalBaseProps = SharedProps &
     'disableFocusTrap' | 'focusTabIndexElements' | 'disableArrowKeyNavigation'
   > & {
     /** Component to render as the Modal content */
-    children?: React.ReactNode | React.FC<ModalChildrenRenderProps>;
+    children?: React.ReactNode | ((props: ModalChildrenRenderProps) => React.ReactNode);
     /**
      * Callback fired after the component is closed.
      */
@@ -99,7 +99,7 @@ export type ModalBaseProps = SharedProps &
      * Set the position for the modal dialogue
      * @danger This is a migration escape hatch. It is not intended to be used normally.
      */
-    dangerouslySetPosition?: Position;
+    dangerouslySetPosition?: React.CSSProperties['position'];
     /**
      * If `true`, the focus trap will restore focus to the previously focused element when it unmounts.
      *
diff --git a/packages/web/src/overlays/modal/ModalHeader.tsx b/packages/web/src/overlays/modal/ModalHeader.tsx
index 92c1a3c96c..35bc2b0151 100644
--- a/packages/web/src/overlays/modal/ModalHeader.tsx
+++ b/packages/web/src/overlays/modal/ModalHeader.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
 import type { SharedAccessibilityProps } from '@coinbase/cds-common/types';
 
 import { IconButton } from '../../buttons/IconButton';
@@ -78,9 +77,10 @@ export const ModalHeader = (_props: ModalHeaderProps) => {
 
   if (!title && !onBackButtonClick && !onRequestClose) return null;
 
-  // use empty placeholder which has the same size as IconButton to maintain horizontal position
   const emptyPlaceholder = (
-    <Box height={interactableHeight.compact} width={interactableHeight.compact} />
+    <Box aria-hidden style={{ visibility: 'hidden' }}>
+      <IconButton disabled transparent name="close" tabIndex={-1} />
+    </Box>
   );
 
   return (
diff --git a/packages/web/src/overlays/modal/__tests__/FullscreenModal.test.tsx b/packages/web/src/overlays/modal/__tests__/FullscreenModal.test.tsx
index 6f921bcdc9..32f5c3cab1 100644
--- a/packages/web/src/overlays/modal/__tests__/FullscreenModal.test.tsx
+++ b/packages/web/src/overlays/modal/__tests__/FullscreenModal.test.tsx
@@ -88,8 +88,8 @@ describe('FullscreenModal', () => {
     const modal = screen.getByRole('dialog');
 
     expect(modal).toHaveAttribute('aria-modal', 'true');
-    expect(modal).toHaveAttribute('aria-labelledby', expect.stringMatching(/:r[0-9].*/));
-    expect(screen.getByText(TITLE)).toHaveAttribute('id', expect.stringMatching(/:r[0-9].*/));
+    expect(modal).toHaveAttribute('aria-labelledby', expect.stringMatching(/«r[0-9]+»/));
+    expect(screen.getByText(TITLE)).toHaveAttribute('id', expect.stringMatching(/«r[0-9]+»/));
   });
 
   it('overrides default a11y attrs when accessibilityLabelledBy is provided', () => {
diff --git a/packages/web/src/overlays/modal/__tests__/Modal.test.tsx b/packages/web/src/overlays/modal/__tests__/Modal.test.tsx
index 76ce0b1ad1..b0b0517061 100644
--- a/packages/web/src/overlays/modal/__tests__/Modal.test.tsx
+++ b/packages/web/src/overlays/modal/__tests__/Modal.test.tsx
@@ -77,7 +77,7 @@ const LoremIpsum = ({ title, concise, repeat }: LoremIpsumProps) => {
 };
 
 type MockModalProps = {
-  triggerRef?: React.RefObject<HTMLButtonElement>;
+  triggerRef?: React.RefObject<HTMLButtonElement | null>;
   focusTrigger?: () => void;
   onBackButtonClick?: () => void;
 };
@@ -207,8 +207,8 @@ describe('Modal', () => {
     const modal = screen.getByRole('dialog');
 
     expect(modal).toHaveAttribute('aria-modal', 'true');
-    expect(modal).toHaveAttribute('aria-labelledby', expect.stringMatching(/:r[0-9].*/));
-    expect(screen.getByText(TITLE)).toHaveAttribute('id', expect.stringMatching(/:r[0-9].*/));
+    expect(modal).toHaveAttribute('aria-labelledby', expect.stringMatching(/«r[0-9]+»/));
+    expect(screen.getByText(TITLE)).toHaveAttribute('id', expect.stringMatching(/«r[0-9]+»/));
     expect(modal).not.toHaveAttribute('aria-label');
   });
 
diff --git a/packages/web/src/overlays/overlay/OverlayContent.tsx b/packages/web/src/overlays/overlay/OverlayContent.tsx
index 4b787d88b1..341aa45c16 100644
--- a/packages/web/src/overlays/overlay/OverlayContent.tsx
+++ b/packages/web/src/overlays/overlay/OverlayContent.tsx
@@ -30,7 +30,7 @@ export const OverlayContent = forwardRef<HTMLDivElement, OverlayProps>(
     });
 
     const content = (
-      <VStack background="bgOverlay" onClick={onClick} pin="all" {...props} ref={forwardedRef} />
+      <VStack ref={forwardedRef} background="bgOverlay" onClick={onClick} pin="all" {...props} />
     );
 
     return animated ? (
diff --git a/packages/web/src/overlays/popover/usePopper.ts b/packages/web/src/overlays/popover/usePopper.ts
index 2b7df56e7d..f628c7eda4 100644
--- a/packages/web/src/overlays/popover/usePopper.ts
+++ b/packages/web/src/overlays/popover/usePopper.ts
@@ -1,11 +1,17 @@
 import { useMemo, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports -- Temporary v9 compatibility export; remove with `usePopper` in v10.
 import { usePopper as useExternalPopper } from 'react-popper';
+// eslint-disable-next-line no-restricted-imports -- Temporary v9 compatibility export; remove with `usePopper` in v10.
 import type { Options as PopperOptions } from '@popperjs/core';
 
 import { useTheme } from '../../hooks/useTheme';
 
 import type { PopoverContentPositionConfig } from './PopoverProps';
 
+/**
+ * @deprecated Use Floating UI directly. This hook is temporarily supported for compatibility. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const usePopper = ({
   placement,
   skid = 0,
diff --git a/packages/web/src/overlays/tooltip/Tooltip.tsx b/packages/web/src/overlays/tooltip/Tooltip.tsx
index 59a2068104..5cb8443d36 100644
--- a/packages/web/src/overlays/tooltip/Tooltip.tsx
+++ b/packages/web/src/overlays/tooltip/Tooltip.tsx
@@ -56,7 +56,9 @@ export const Tooltip = memo((_props: TooltipProps) => {
     // Use aria-describedby to associate the tooltip (role="tooltip") with the trigger.
     // This preserves the trigger's own accessible name (e.g. button text) while the tooltip
     // provides supplemental description, per the ARIA tooltip pattern.
-    return cloneElement(children, { 'aria-describedby': tooltipId });
+    return cloneElement(children as React.ReactElement<React.HTMLAttributes<HTMLElement>>, {
+      'aria-describedby': tooltipId,
+    });
   }, [children, tooltipId]);
 
   const contentPosition = useMemo(
diff --git a/packages/web/src/overlays/tooltip/TooltipProps.ts b/packages/web/src/overlays/tooltip/TooltipProps.ts
index d2eadc6d5f..0007817424 100644
--- a/packages/web/src/overlays/tooltip/TooltipProps.ts
+++ b/packages/web/src/overlays/tooltip/TooltipProps.ts
@@ -1,6 +1,5 @@
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { BaseTooltipPlacement, ElevationProps, SharedProps } from '@coinbase/cds-common/types';
-import type { PositionStyles } from '@coinbase/cds-common/types/BoxBaseProps';
 
 import type { PopoverProps } from '../popover/PopoverProps';
 
@@ -55,7 +54,7 @@ export type TooltipBaseProps = SharedProps &
      * Typically only used when disablePortal is set to true to adjust zIndex of tooltip. When using portal this value should remain as default.
      * @default 4
      * */
-    zIndex?: PositionStyles['zIndex'];
+    zIndex?: React.CSSProperties['zIndex'];
     /**
      * A unique ID used to ensure tooltips are accessible
      */
diff --git a/packages/web/src/overlays/tooltip/__figma__/Tooltip.figma.tsx b/packages/web/src/overlays/tooltip/__figma__/Tooltip.figma.tsx
index 9a2dec0722..4f0968984d 100644
--- a/packages/web/src/overlays/tooltip/__figma__/Tooltip.figma.tsx
+++ b/packages/web/src/overlays/tooltip/__figma__/Tooltip.figma.tsx
@@ -1,7 +1,7 @@
 import { figma } from '@figma/code-connect';
 
 import { Button } from '../../../buttons';
-import { TextBody, TextHeadline } from '../../../typography';
+import { Text } from '../../../typography';
 import { Tooltip } from '../Tooltip';
 
 figma.connect(
@@ -78,8 +78,12 @@ figma.connect(
       <Tooltip
         content={
           <>
-            <TextHeadline as="p">{content.title}</TextHeadline>
-            <TextBody as="p">{content.description}</TextBody>
+            <Text as="p" font="headline">
+              {content.title}
+            </Text>
+            <Text as="p" font="body">
+              {content.description}
+            </Text>
           </>
         }
       >
diff --git a/packages/web/src/overlays/tray/Tray.tsx b/packages/web/src/overlays/tray/Tray.tsx
index de0693b416..c8940a470d 100644
--- a/packages/web/src/overlays/tray/Tray.tsx
+++ b/packages/web/src/overlays/tray/Tray.tsx
@@ -129,7 +129,7 @@ export const trayClassNames = {
   closeButton: 'cds-Tray-closeButton',
 } as const;
 
-export type TrayRenderChildren = React.FC<{ handleClose: () => void }>;
+export type TrayRenderChildren = (args: { handleClose: () => void }) => React.ReactElement;
 
 export type TrayBaseProps = Pick<
   FocusTrapProps,
diff --git a/packages/web/src/overlays/useModal.ts b/packages/web/src/overlays/useModal.ts
index c9dd8af227..56c221bf4e 100644
--- a/packages/web/src/overlays/useModal.ts
+++ b/packages/web/src/overlays/useModal.ts
@@ -1,7 +1,7 @@
 import { useModal } from '@coinbase/cds-common/overlays/useModal';
 
 /**
- * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
+ * @deprecated Use the `visible` and `onRequestClose` props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
  * @deprecationExpectedRemoval v7
  */
 export { useModal };
diff --git a/packages/web/src/page/PageFooter.tsx b/packages/web/src/page/PageFooter.tsx
index 284ca84e07..38c1e154a6 100644
--- a/packages/web/src/page/PageFooter.tsx
+++ b/packages/web/src/page/PageFooter.tsx
@@ -1,13 +1,13 @@
 import React, { forwardRef, memo } from 'react';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { pageFooterHeight } from '@coinbase/cds-common/tokens/page';
-import type { PositionStyles, SharedProps } from '@coinbase/cds-common/types';
+import type { SharedProps } from '@coinbase/cds-common/types';
 
 import type { Polymorphic } from '../core/polymorphism';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, type BoxDefaultElement, type BoxProps } from '../layout/Box';
 import { VStack } from '../layout/VStack';
-import type { ResponsiveProps, StaticStyleProps } from '../styles/styleProps';
+import type { PositionStyles, ResponsiveProps, StaticStyleProps } from '../styles/styleProps';
 import { Text } from '../typography/Text';
 
 export type PageFooterBaseProps = SharedProps &
diff --git a/packages/web/src/page/PageHeader.tsx b/packages/web/src/page/PageHeader.tsx
index 7ed149bb6b..04e4c5b86c 100644
--- a/packages/web/src/page/PageHeader.tsx
+++ b/packages/web/src/page/PageHeader.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, memo, useMemo } from 'react';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { pageHeaderHeight } from '@coinbase/cds-common/tokens/page';
-import type { PositionStyles, SharedProps } from '@coinbase/cds-common/types';
+import type { SharedProps } from '@coinbase/cds-common/types';
 import { css } from '@linaria/core';
 
 import type { Polymorphic } from '../core/polymorphism';
@@ -10,7 +10,7 @@ import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { Grid, type GridDefaultElement, type GridProps } from '../layout/Grid';
 import { media } from '../styles/media';
-import type { ResponsiveProps, StaticStyleProps } from '../styles/styleProps';
+import type { PositionStyles, ResponsiveProps, StaticStyleProps } from '../styles/styleProps';
 import { Text } from '../typography/Text';
 
 const gridStylesMobileTitleCss = css`
diff --git a/packages/web/src/page/__stories__/PageFooter.stories.tsx b/packages/web/src/page/__stories__/PageFooter.stories.tsx
index da4f7e5cc0..852c696493 100644
--- a/packages/web/src/page/__stories__/PageFooter.stories.tsx
+++ b/packages/web/src/page/__stories__/PageFooter.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button, ButtonGroup, IconButton } from '../../buttons';
 import { useBreakpoints } from '../../hooks/useBreakpoints';
@@ -70,16 +70,17 @@ const exampleProps = {
   ),
 };
 
-const Template: Story<PageFooterProps> = (args) => <PageFooter {...args} />;
+type Story = StoryObj<PageFooterProps>;
 
-export const InteractiveFooter = Template.bind({});
-
-InteractiveFooter.args = {
-  background: 'bg',
-  action: 'endButtons',
+export const InteractiveFooter: Story = {
+  render: (args) => <PageFooter {...args} />,
+  args: {
+    background: 'bg',
+    action: 'endButtons',
+  },
 };
 
-export const Examples = () => {
+const ExamplesRender = () => {
   const { isPhone } = useBreakpoints();
   const setEndButtonMobile = isPhone ? exampleProps.endButtonsBlock2 : exampleProps.endButtons2;
 
@@ -95,22 +96,25 @@ export const Examples = () => {
   );
 };
 
-Examples.parameters = {
-  a11y: {
-    config: {
-      /**
-       * It is expected to include multiple PageFooter with same landmark in this story
-       * @link https://dequeuniversity.com/rules/axe/4.6/landmark-no-duplicate-contentinfo?application=axeAPI
-       */
-      rules: [
-        { id: 'landmark-no-duplicate-contentinfo', enabled: false },
-        { id: 'landmark-unique', enabled: false },
-      ],
+export const Examples: Story = {
+  render: () => <ExamplesRender />,
+  parameters: {
+    a11y: {
+      config: {
+        /**
+         * It is expected to include multiple PageFooter with same landmark in this story
+         * @link https://dequeuniversity.com/rules/axe/4.6/landmark-no-duplicate-contentinfo?application=axeAPI
+         */
+        rules: [
+          { id: 'landmark-no-duplicate-contentinfo', enabled: false },
+          { id: 'landmark-unique', enabled: false },
+        ],
+      },
     },
   },
 };
 
-export const PageFooterInPage = () => {
+const PageFooterInPageRender = () => {
   const { isPhone } = useBreakpoints();
   const setEndButtonMobile = isPhone ? exampleProps.endButtonsBlock2 : exampleProps.endButtons2;
 
@@ -119,24 +123,28 @@ export const PageFooterInPage = () => {
       <VStack
         alignContent="center"
         alignItems="center"
-        dangerouslySetBackground="#FADADD"
         flexGrow={1}
         flexShrink={1}
         height="400px"
         justifyContent="center"
+        style={{ backgroundColor: '#FADADD' }}
       >
         <Text as="h3" display="block" font="title1">
           Primary Content
         </Text>
       </VStack>
-      <Box dangerouslySetBackground="gray" height="500px" />
-      <Box dangerouslySetBackground="orange" height="500px" />
+      <Box height="500px" style={{ backgroundColor: 'gray' }} />
+      <Box height="500px" style={{ backgroundColor: 'orange' }} />
       <PageFooter action={setEndButtonMobile} bottom="0" />
     </VStack>
   );
 };
 
-export default {
+export const PageFooterInPage: Story = {
+  render: () => <PageFooterInPageRender />,
+};
+
+const meta: Meta<PageFooterProps> = {
   title: 'Components/PageFooter',
   component: PageFooter,
   argTypes: {
@@ -182,3 +190,5 @@ export default {
     },
   },
 };
+
+export default meta;
diff --git a/packages/web/src/page/__stories__/PageHeader.stories.tsx b/packages/web/src/page/__stories__/PageHeader.stories.tsx
index 14186abfd3..bd0c88b5ab 100644
--- a/packages/web/src/page/__stories__/PageHeader.stories.tsx
+++ b/packages/web/src/page/__stories__/PageHeader.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
-import type { Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button, ButtonGroup, IconButton } from '../../buttons';
 import { useBreakpoints } from '../../hooks/useBreakpoints';
@@ -73,7 +73,7 @@ const exampleProps = {
     </Text>
   ),
   intermediary2: (
-    <Box dangerouslySetBackground="red">
+    <Box style={{ backgroundColor: 'red' }}>
       <Text as="sub" font="body">
         Hello there. This is a rather long text sentence since I do not have lorem ipsum handy.
         Hello there. This is a rather long text sentence since I do not have lorem ipsum handy.
@@ -166,19 +166,20 @@ const exampleProps = {
   ),
 };
 
-const Template: Story<PageHeaderProps> = (args) => <PageHeader {...args} />;
+type Story = StoryObj<PageHeaderProps>;
 
-export const InteractiveHeader = Template.bind({});
-
-InteractiveHeader.args = {
-  background: 'bg',
-  start: 'logoMark2',
-  title: 'title1',
-  end: 'end2',
+export const InteractiveHeader: Story = {
+  render: (args) => <PageHeader {...args} />,
+  args: {
+    background: 'bg',
+    start: 'logoMark2',
+    title: 'title1',
+    end: 'end2',
+  },
 };
 
-export const Examples = () => {
-  return (
+export const Examples: Story = {
+  render: () => (
     <VStack gap={2} left={0} position="absolute" top={0} width="100%">
       <PageHeader
         background="bgPrimaryWash"
@@ -263,26 +264,25 @@ export const Examples = () => {
         title={exampleProps.intermediary2}
       />
     </VStack>
-  );
-};
-
-Examples.parameters = {
-  a11y: {
-    config: {
-      /**
-       * It is expected to include multiple PageHeaders with same landmark in this story
-       * @link https://dequeuniversity.com/rules/axe/4.6/landmark-no-duplicate-banner?application=axeAPI
-       */
-      rules: [
-        { id: 'landmark-no-duplicate-banner', enabled: false },
-        { id: 'landmark-unique', enabled: false },
-      ],
+  ),
+  parameters: {
+    a11y: {
+      config: {
+        /**
+         * It is expected to include multiple PageHeaders with same landmark in this story
+         * @link https://dequeuniversity.com/rules/axe/4.6/landmark-no-duplicate-banner?application=axeAPI
+         */
+        rules: [
+          { id: 'landmark-no-duplicate-banner', enabled: false },
+          { id: 'landmark-unique', enabled: false },
+        ],
+      },
     },
   },
 };
 
-export const PageHeaderInErrorEmptyState = () => {
-  return (
+export const PageHeaderInErrorEmptyState: Story = {
+  render: () => (
     <VStack gap={0} left={0} position="absolute" top={0} width="100%">
       <PageHeader background="bg" position="sticky" start={exampleProps.logoMark2} top="0" />
       <Box background="bgPrimaryWash">
@@ -305,10 +305,10 @@ export const PageHeaderInErrorEmptyState = () => {
         </VStack>
       </Box>
     </VStack>
-  );
+  ),
 };
 
-export const PageHeaderInPage = () => {
+const PageHeaderInPageRender = () => {
   const { isPhone } = useBreakpoints();
   const setEndButtonMobile = isPhone ? exampleProps.endButtonsBlock3 : exampleProps.endButtons3;
 
@@ -340,25 +340,29 @@ export const PageHeaderInPage = () => {
       <VStack
         alignContent="center"
         alignItems="center"
-        dangerouslySetBackground="#FADADD"
         flexGrow={1}
         flexShrink={1}
         height="400px"
         justifyContent="center"
         padding={3}
+        style={{ backgroundColor: '#FADADD' }}
       >
         <Text as="h3" display="block" font="title1">
           Primary Content
         </Text>
       </VStack>
-      <Box dangerouslySetBackground="gray" height="500px" />
-      <Box dangerouslySetBackground="orange" height="500px" />
+      <Box height="500px" style={{ backgroundColor: 'gray' }} />
+      <Box height="500px" style={{ backgroundColor: 'orange' }} />
       <PageFooter action={setEndButtonMobile} />
     </VStack>
   );
 };
 
-export default {
+export const PageHeaderInPage: Story = {
+  render: () => <PageHeaderInPageRender />,
+};
+
+const meta: Meta<PageHeaderProps> = {
   title: 'Components/PageHeader',
   component: PageHeader,
   argTypes: {
@@ -433,3 +437,5 @@ export default {
     },
   },
 };
+
+export default meta;
diff --git a/packages/web/src/stepper/DefaultStepperHeaderHorizontal.tsx b/packages/web/src/stepper/DefaultStepperHeaderHorizontal.tsx
index fde90953b8..6deaec2243 100644
--- a/packages/web/src/stepper/DefaultStepperHeaderHorizontal.tsx
+++ b/packages/web/src/stepper/DefaultStepperHeaderHorizontal.tsx
@@ -1,12 +1,13 @@
-import { memo, useMemo } from 'react';
-import { animated, useSpring } from '@react-spring/web';
+import { memo } from 'react';
+import { curves, durations } from '@coinbase/cds-common/motion/tokens';
+import { m as motion } from 'framer-motion';
 
 import { HStack } from '../layout/HStack';
 import { Text } from '../typography/Text';
 
 import type { StepperHeaderComponent } from './Stepper';
 
-const AnimatedHStack = animated(HStack);
+const MotionHStack = motion(HStack);
 
 const displayStyle = {
   phone: 'flex',
@@ -14,6 +15,12 @@ const displayStyle = {
   desktop: 'none',
 } as const;
 
+const headerTransition = {
+  type: 'tween' as const,
+  duration: durations.slow2 / 1000,
+  ease: curves.global,
+};
+
 export const DefaultStepperHeaderHorizontal: StepperHeaderComponent = memo(
   function DefaultStepperHeaderHorizontal({
     activeStep,
@@ -22,6 +29,7 @@ export const DefaultStepperHeaderHorizontal: StepperHeaderComponent = memo(
     className,
     style,
     display = displayStyle,
+    disableAnimateOnMount,
     width = '100%',
     paddingBottom = 1.5,
     font = 'caption',
@@ -32,26 +40,22 @@ export const DefaultStepperHeaderHorizontal: StepperHeaderComponent = memo(
     textTransform,
     ...props
   }) {
-    const spring = useSpring({
-      from: { opacity: 0 },
-      to: { opacity: 1 },
-      reset: true,
-    });
-
-    const styles = useMemo(() => ({ ...style, ...spring }), [style, spring]);
     const flatStepIndex = activeStep ? flatStepIds.indexOf(activeStep.id) : -1;
     const emptyText = <>&nbsp;</>;
 
     return (
-      <AnimatedHStack
+      <MotionHStack
         aria-hidden
+        animate={{ opacity: 1 }}
         className={className}
         display={display}
         font={font}
         fontFamily={fontFamily}
+        initial={{ opacity: disableAnimateOnMount ? 1 : 0 }}
         paddingBottom={paddingBottom}
         position="relative"
-        style={styles}
+        style={style}
+        transition={headerTransition}
         width={width}
         {...props}
       >
@@ -82,7 +86,7 @@ export const DefaultStepperHeaderHorizontal: StepperHeaderComponent = memo(
             </HStack>
           )}
         </Text>
-      </AnimatedHStack>
+      </MotionHStack>
     );
   },
 );
diff --git a/packages/web/src/stepper/DefaultStepperLabelHorizontal.tsx b/packages/web/src/stepper/DefaultStepperLabelHorizontal.tsx
index c09a4d9f13..f45b1889ec 100644
--- a/packages/web/src/stepper/DefaultStepperLabelHorizontal.tsx
+++ b/packages/web/src/stepper/DefaultStepperLabelHorizontal.tsx
@@ -1,14 +1,14 @@
 import { memo, useMemo } from 'react';
 import useMeasure from 'react-use-measure';
-import { animated, useSpring } from '@react-spring/web';
+import { m as motion } from 'framer-motion';
 
 import { Box } from '../layout/Box';
 import { HStack } from '../layout/HStack';
 import { Text } from '../typography/Text';
 
-import type { StepperLabelComponent } from './Stepper';
+import { defaultProgressTimingConfig, type StepperLabelComponent } from './Stepper';
 
-const AnimatedBox = animated(Box);
+const MotionBox = motion(Box);
 
 const displayStyle = {
   phone: 'none',
@@ -30,6 +30,7 @@ export const DefaultStepperLabelHorizontal: StepperLabelComponent = memo(
     className,
     style,
     completedStepAccessibilityLabel,
+    progressTimingConfig = defaultProgressTimingConfig,
     setActiveStepLabelElement,
     defaultColor = 'fgMuted',
     activeColor = 'fg',
@@ -45,18 +46,13 @@ export const DefaultStepperLabelHorizontal: StepperLabelComponent = memo(
     fontWeight = font,
     lineHeight = font,
     textTransform,
+    disableAnimateOnMount,
     ...props
   }) {
     const isStepGroupActive = active || isDescendentActive;
+    const showPagination = isStepGroupActive && !complete && !visited;
 
     const [paginationRef, { width: paginationWidth }] = useMeasure();
-    const paginationSpring = useSpring({
-      opacity: isStepGroupActive && !complete && !visited ? 1 : 0,
-    });
-    const labelSpring = useSpring({
-      left: isStepGroupActive && !complete && !visited ? paginationWidth : 0,
-    });
-
     const flatStepIndex = flatStepIds.indexOf(step.id);
 
     const fontProps = useMemo(
@@ -127,17 +123,23 @@ export const DefaultStepperLabelHorizontal: StepperLabelComponent = memo(
         width={width}
         {...props}
       >
-        <AnimatedBox ref={paginationRef} paddingEnd={1} style={paginationSpring}>
+        <MotionBox
+          ref={paginationRef}
+          animate={{ opacity: showPagination ? 1 : 0 }}
+          paddingEnd={1}
+          transition={progressTimingConfig}
+        >
           {paginationText}
-        </AnimatedBox>
-        <AnimatedBox
+        </MotionBox>
+        <MotionBox
+          animate={{ left: showPagination ? paginationWidth : 0 }}
           maxWidth={`calc(100% - ${paginationWidth}px)`}
           position="absolute"
-          style={labelSpring}
+          transition={progressTimingConfig}
           width="100%"
         >
           {labelElement}
-        </AnimatedBox>
+        </MotionBox>
       </HStack>
     );
   },
diff --git a/packages/web/src/stepper/DefaultStepperProgressHorizontal.tsx b/packages/web/src/stepper/DefaultStepperProgressHorizontal.tsx
index b6719a4267..f97a267814 100644
--- a/packages/web/src/stepper/DefaultStepperProgressHorizontal.tsx
+++ b/packages/web/src/stepper/DefaultStepperProgressHorizontal.tsx
@@ -1,9 +1,9 @@
-import { memo } from 'react';
-import { animated } from '@react-spring/web';
+import { memo, useMemo } from 'react';
+import { m as motion } from 'framer-motion';
 
 import { Box } from '../layout/Box';
 
-import type { StepperProgressComponent } from './Stepper';
+import { defaultProgressTimingConfig, type StepperProgressComponent } from './Stepper';
 
 export const DefaultStepperProgressHorizontal: StepperProgressComponent = memo(
   function DefaultStepperProgressHorizontal({
@@ -17,7 +17,7 @@ export const DefaultStepperProgressHorizontal: StepperProgressComponent = memo(
     flatStepIds,
     complete,
     isDescendentActive,
-    progressSpringConfig,
+    progressTimingConfig,
     activeStepLabelElement,
     animate,
     disableAnimateOnMount,
@@ -34,6 +34,14 @@ export const DefaultStepperProgressHorizontal: StepperProgressComponent = memo(
     height = 4,
     ...props
   }) {
+    const transition = useMemo(
+      () =>
+        animate
+          ? (progressTimingConfig ?? defaultProgressTimingConfig)
+          : { type: 'tween' as const, duration: 0 },
+      [animate, progressTimingConfig],
+    );
+
     return (
       <Box
         background={background}
@@ -65,11 +73,14 @@ export const DefaultStepperProgressHorizontal: StepperProgressComponent = memo(
           overflow="hidden"
           width="100%"
         >
-          <animated.div
+          <motion.div
+            animate={{ width: `${progress * 100}%` }}
+            initial={{ width: disableAnimateOnMount ? `${progress * 100}%` : '0%' }}
             style={{
               backgroundColor: 'currentColor',
-              width: progress.to((p) => `${p * 100}%`),
+              height: '100%',
             }}
+            transition={transition}
           />
         </Box>
       </Box>
diff --git a/packages/web/src/stepper/DefaultStepperProgressVertical.tsx b/packages/web/src/stepper/DefaultStepperProgressVertical.tsx
index e993419fed..69771c3abb 100644
--- a/packages/web/src/stepper/DefaultStepperProgressVertical.tsx
+++ b/packages/web/src/stepper/DefaultStepperProgressVertical.tsx
@@ -1,11 +1,10 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { defaultRect } from '@coinbase/cds-common/types/Rect';
-import { animated, to, useSpring } from '@react-spring/web';
+import { m as motion } from 'framer-motion';
 
-import { useHasMounted } from '../hooks/useHasMounted';
 import { Box } from '../layout/Box';
 
-import type { StepperProgressComponent } from './Stepper';
+import { defaultProgressTimingConfig, type StepperProgressComponent } from './Stepper';
 
 export const DefaultStepperProgressVertical: StepperProgressComponent = memo(
   function DefaultStepperProgressVertical({
@@ -21,7 +20,7 @@ export const DefaultStepperProgressVertical: StepperProgressComponent = memo(
     className,
     style,
     activeStepLabelElement,
-    progressSpringConfig,
+    progressTimingConfig = defaultProgressTimingConfig,
     animate = true,
     disableAnimateOnMount,
     background = 'bgLine',
@@ -35,62 +34,58 @@ export const DefaultStepperProgressVertical: StepperProgressComponent = memo(
     progress,
     ...props
   }) {
-    const hasMounted = useHasMounted();
     const containerRef = useRef<HTMLDivElement | null>(null);
-    const [renderTick, setRenderTick] = useState(0);
+    const [fillHeight, setFillHeight] = useState(0);
+    const [hasReceivedFillHeight, setHasReceivedFillHeight] = useState(false);
 
     const isStepGroupActive = active || isDescendentActive;
 
     const isLastStep = flatStepIds[flatStepIds.length - 1] === step.id;
 
-    useEffect(() => {
-      if (!containerRef.current) return;
-      const observer = new window.ResizeObserver((entries) => {
-        setRenderTick((prev) => prev + 1);
-      });
-
-      observer.observe(containerRef.current);
-      return () => observer.disconnect();
-    }, []);
-
-    const getFillHeight = useCallback(() => {
+    const recalculateFillHeight = useCallback(() => {
+      const container = containerRef.current;
+      if (!container) return;
       const hasSubSteps = Boolean(step.subSteps?.length);
-      const containerRect = containerRef.current?.getBoundingClientRect() ?? defaultRect;
+      const containerRect = container.getBoundingClientRect();
 
-      // Complete progress fill
-      if (complete || (visited && !isStepGroupActive) || (!hasSubSteps && active))
-        return containerRect.height;
-      // Partial progress fill
-      if (hasSubSteps && isDescendentActive) {
+      let height: number;
+      if (complete || (visited && !isStepGroupActive) || (!hasSubSteps && active)) {
+        height = containerRect.height;
+      } else if (hasSubSteps && isDescendentActive) {
         const activeStepLabelRect = activeStepLabelElement?.getBoundingClientRect() ?? defaultRect;
         const lastSubstep = step.subSteps?.[step.subSteps.length - 1];
         const isLastSubstepActive = activeStepId === lastSubstep?.id;
         const activeStepLabelBottom = activeStepLabelRect.y + activeStepLabelRect.height;
         const halfLabelHeight = isLastSubstepActive ? 0 : 0.5 * activeStepLabelRect.height;
-        return activeStepLabelBottom - containerRect.y - halfLabelHeight;
+        height = activeStepLabelBottom - containerRect.y - halfLabelHeight;
+      } else {
+        height = 0;
       }
-      return 0;
-      // renderTick is used to force a new height calculation when it changes by the observer
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      setFillHeight(height);
+      if (height) setHasReceivedFillHeight(true);
     }, [
       step.subSteps,
       complete,
       visited,
       isStepGroupActive,
       active,
-      renderTick,
       isDescendentActive,
       activeStepLabelElement,
       activeStepId,
     ]);
 
-    const [{ fillHeight }] = useSpring(
-      () => ({
-        fillHeight: getFillHeight(),
-        config: progressSpringConfig,
-        immediate: !animate || (disableAnimateOnMount && !hasMounted),
-      }),
-      [getFillHeight, animate, disableAnimateOnMount, hasMounted],
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const observer = new window.ResizeObserver(recalculateFillHeight);
+      observer.observe(container);
+      return () => observer.disconnect();
+    }, [recalculateFillHeight]);
+
+    const animatedHeight = progress * fillHeight;
+    const transition = useMemo(
+      () => (animate ? progressTimingConfig : { type: 'tween' as const, duration: 0 }),
+      [animate, progressTimingConfig],
     );
 
     if (depth > 0 || isLastStep) return null;
@@ -124,14 +119,27 @@ export const DefaultStepperProgressVertical: StepperProgressComponent = memo(
                     : defaultFill
           }
         >
-          <animated.div
-            style={{
-              position: 'absolute',
-              width: '100%',
-              backgroundColor: 'currentColor',
-              height: to([progress, fillHeight], (p, f) => `${p * f}px`),
-            }}
-          />
+          {disableAnimateOnMount && !hasReceivedFillHeight ? (
+            <div
+              style={{
+                position: 'absolute',
+                width: '100%',
+                height: animatedHeight,
+                backgroundColor: 'currentColor',
+              }}
+            />
+          ) : (
+            <motion.div
+              animate={{ height: animatedHeight }}
+              initial={{ height: disableAnimateOnMount ? animatedHeight : 0 }}
+              style={{
+                position: 'absolute',
+                width: '100%',
+                backgroundColor: 'currentColor',
+              }}
+              transition={transition}
+            />
+          )}
         </Box>
       </Box>
     );
diff --git a/packages/web/src/stepper/DefaultStepperStepHorizontal.tsx b/packages/web/src/stepper/DefaultStepperStepHorizontal.tsx
index 844d171239..d1a68d0981 100644
--- a/packages/web/src/stepper/DefaultStepperStepHorizontal.tsx
+++ b/packages/web/src/stepper/DefaultStepperStepHorizontal.tsx
@@ -28,7 +28,7 @@ export const DefaultStepperStepHorizontal: StepperStepComponent = memo(
     progress,
     activeStepLabelElement,
     setActiveStepLabelElement,
-    progressSpringConfig,
+    progressTimingConfig,
     animate,
     disableAnimateOnMount,
     StepperStepComponent = DefaultStepperStepHorizontal,
@@ -112,7 +112,7 @@ export const DefaultStepperStepHorizontal: StepperStepComponent = memo(
               isDescendentActive={isDescendentActive}
               parentStep={parentStep}
               progress={progress}
-              progressSpringConfig={progressSpringConfig}
+              progressTimingConfig={progressTimingConfig}
               step={step}
               style={styles?.progress}
               visited={visited}
@@ -127,9 +127,11 @@ export const DefaultStepperStepHorizontal: StepperStepComponent = memo(
             complete={complete}
             completedStepAccessibilityLabel={completedStepAccessibilityLabel}
             depth={depth}
+            disableAnimateOnMount={disableAnimateOnMount}
             flatStepIds={flatStepIds}
             isDescendentActive={isDescendentActive}
             parentStep={parentStep}
+            progressTimingConfig={progressTimingConfig}
             setActiveStepLabelElement={setActiveStepLabelElement}
             step={step}
             style={styles?.label}
@@ -180,7 +182,7 @@ export const DefaultStepperStepHorizontal: StepperStepComponent = memo(
                     isDescendentActive={isDescendentActive}
                     parentStep={step}
                     progress={progress}
-                    progressSpringConfig={progressSpringConfig}
+                    progressTimingConfig={progressTimingConfig}
                     setActiveStepLabelElement={setActiveStepLabelElement}
                     step={subStep}
                     styles={styles}
diff --git a/packages/web/src/stepper/DefaultStepperStepVertical.tsx b/packages/web/src/stepper/DefaultStepperStepVertical.tsx
index 1ead8b0558..cfaaff653d 100644
--- a/packages/web/src/stepper/DefaultStepperStepVertical.tsx
+++ b/packages/web/src/stepper/DefaultStepperStepVertical.tsx
@@ -29,7 +29,7 @@ export const DefaultStepperStepVertical: StepperStepComponent = memo(
     progress,
     activeStepLabelElement,
     setActiveStepLabelElement,
-    progressSpringConfig,
+    progressTimingConfig,
     animate,
     disableAnimateOnMount,
     StepperStepComponent = DefaultStepperStepVertical,
@@ -111,7 +111,7 @@ export const DefaultStepperStepVertical: StepperStepComponent = memo(
                 isDescendentActive={isDescendentActive}
                 parentStep={parentStep}
                 progress={progress}
-                progressSpringConfig={progressSpringConfig}
+                progressTimingConfig={progressTimingConfig}
                 step={step}
                 style={styles?.progress}
                 visited={visited}
@@ -153,7 +153,7 @@ export const DefaultStepperStepVertical: StepperStepComponent = memo(
                 style={styles?.substepContainer}
                 visited={visited}
               >
-                {step.subSteps.map((subStep, index) => {
+                {step.subSteps.map((subStep) => {
                   const RenderedStepComponent = subStep.Component ?? StepperStepComponent;
                   const isDescendentActive = activeStepId
                     ? containsStep({
@@ -183,7 +183,7 @@ export const DefaultStepperStepVertical: StepperStepComponent = memo(
                         isDescendentActive={isDescendentActive}
                         parentStep={step}
                         progress={progress}
-                        progressSpringConfig={progressSpringConfig}
+                        progressTimingConfig={progressTimingConfig}
                         setActiveStepLabelElement={setActiveStepLabelElement}
                         step={subStep}
                         styles={styles}
diff --git a/packages/web/src/stepper/Stepper.tsx b/packages/web/src/stepper/Stepper.tsx
index ba1da8f9d5..19b9b3baf9 100644
--- a/packages/web/src/stepper/Stepper.tsx
+++ b/packages/web/src/stepper/Stepper.tsx
@@ -1,13 +1,13 @@
-import React, { forwardRef, memo, useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
-import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { curves, durations } from '@coinbase/cds-common/motion/tokens';
 import { containsStep, flattenSteps, isStepVisited } from '@coinbase/cds-common/stepper/utils';
 import type { IconName } from '@coinbase/cds-common/types';
-import { type SpringConfig, type SpringValue, useSprings } from '@react-spring/web';
+import type { SpringConfig } from '@react-spring/core';
+import type { Transition } from 'framer-motion';
 
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { useHasMounted } from '../hooks/useHasMounted';
 import type { IconProps } from '../icons/Icon';
 import { Box, type BoxDefaultElement, type BoxProps } from '../layout/Box';
 import { VStack, type VStackBaseProps, type VStackProps } from '../layout/VStack';
@@ -74,13 +74,13 @@ export type StepperStepProps<Metadata extends Record<string, unknown> = Record<s
   StepperSubcomponentProps<Metadata> &
     BoxProps<BoxDefaultElement> & {
       /**
-       * An animated SpringValue between 0 and 1.
-       * You can use this to animate your own custom Progress subcomponent.
+       * A value between 0 and 1 representing the step's progress.
+       * Progress bar subcomponents animate to this value with the given progressTimingConfig.
        */
-      progress: SpringValue<number>;
+      progress: number;
       activeStepLabelElement: HTMLElement | null;
       setActiveStepLabelElement: (element: HTMLElement) => void;
-      progressSpringConfig?: SpringConfig;
+      progressTimingConfig?: Transition;
       animate?: boolean;
       disableAnimateOnMount?: boolean;
       completedStepAccessibilityLabel?: string;
@@ -119,6 +119,7 @@ export type StepperHeaderProps<Metadata extends Record<string, unknown> = Record
     activeStep: StepperValue<Metadata> | null;
     flatStepIds: string[];
     complete?: boolean;
+    disableAnimateOnMount?: boolean;
     className?: string;
     style?: React.CSSProperties;
   };
@@ -127,21 +128,23 @@ export type StepperLabelProps<Metadata extends Record<string, unknown> = Record<
   StepperSubcomponentProps<Metadata> &
     BoxProps<BoxDefaultElement> & {
       setActiveStepLabelElement: (element: HTMLElement) => void;
+      progressTimingConfig?: Transition;
       defaultColor?: ResponsiveProp<ThemeVars.Color>;
       activeColor?: ResponsiveProp<ThemeVars.Color>;
       descendentActiveColor?: ResponsiveProp<ThemeVars.Color>;
       visitedColor?: ResponsiveProp<ThemeVars.Color>;
       completeColor?: ResponsiveProp<ThemeVars.Color>;
       completedStepAccessibilityLabel?: string;
+      disableAnimateOnMount?: boolean;
     };
 
 export type StepperProgressProps<
   Metadata extends Record<string, unknown> = Record<string, unknown>,
 > = StepperSubcomponentProps<Metadata> &
   BoxProps<BoxDefaultElement> & {
-    progress: SpringValue<number>;
+    progress: number;
     activeStepLabelElement: HTMLElement | null;
-    progressSpringConfig?: SpringConfig;
+    progressTimingConfig?: Transition;
     animate?: boolean;
     disableAnimateOnMount?: boolean;
     defaultFill?: ResponsiveProp<ThemeVars.Color>;
@@ -225,9 +228,14 @@ export type StepperBaseProps<Metadata extends Record<string, unknown> = Record<s
     StepperIconComponent?: StepperIconComponent<Metadata> | null;
     /** An optional component to render in place of the default Header subcomponent. Set to null to render nothing in this slot. */
     StepperHeaderComponent?: StepperHeaderComponent<Metadata> | null;
-    /** The spring config to use for the progress spring. */
+    /** The Framer Motion transition config for progress bar animations (e.g. duration in seconds, ease). */
+    progressTimingConfig?: Transition;
+    /**
+     * @deprecated Stepper no longer uses react-spring for progress; this value is ignored but retained for migration only. Use {@link progressTimingConfig} instead. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
+     */
     progressSpringConfig?: SpringConfig;
-    /** Whether to animate the progress spring.
+    /** Whether to animate the progress bar.
      * @default true
      */
     animate?: boolean;
@@ -238,6 +246,8 @@ export type StepperBaseProps<Metadata extends Record<string, unknown> = Record<s
 export const stepperDefaultElement = 'div';
 export type StepperDefaultElement = typeof stepperDefaultElement;
 
+const cascadeStaggerMs = durations.moderate2;
+
 export type StepperProps<Metadata extends Record<string, unknown> = Record<string, unknown>> =
   VStackProps<StepperDefaultElement> &
     StepperBaseProps<Metadata> & {
@@ -283,7 +293,22 @@ export const horizontalStepGap = {
   desktop: 1,
 } as const;
 
-export const defaultProgressSpringConfig = { friction: 0, tension: 100, clamp: true };
+/** Default progress transition: tween with CDS duration (seconds) and global curve. */
+export const defaultProgressTimingConfig: Transition = {
+  type: 'tween',
+  duration: durations.slow2 / 1000,
+  ease: curves.global,
+};
+
+/**
+ * @deprecated Use {@link defaultProgressTimingConfig}. Retained for migration only; Stepper no longer uses react-spring for progress. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+export const defaultProgressSpringConfig: SpringConfig = {
+  friction: 0,
+  tension: 100,
+  clamp: true,
+};
 
 type StepperComponent = <Metadata extends Record<string, unknown> = Record<string, unknown>>(
   props: StepperProps<Metadata> & { ref?: React.Ref<HTMLDivElement> },
@@ -326,12 +351,11 @@ const StepperBase = memo(
         StepperHeaderComponent = direction === 'vertical'
           ? null
           : (DefaultStepperHeaderHorizontal as StepperHeaderComponent<Metadata>),
-        progressSpringConfig = defaultProgressSpringConfig,
+        progressTimingConfig = defaultProgressTimingConfig,
         animate = true,
         disableAnimateOnMount,
         ...props
       } = mergedProps;
-      const hasMounted = useHasMounted();
       const flatStepIds = useMemo(() => flattenSteps(steps).map((step) => step.id), [steps]);
 
       // Derive activeStep from activeStepId
@@ -365,91 +389,68 @@ const StepperBase = memo(
           : -1;
       }, [activeStepId, steps]);
 
-      const previousComplete = usePreviousValue(complete) ?? false;
-      const previousActiveStepIndex = usePreviousValue(activeStepIndex) ?? -1;
+      // the target step index for the cascade animation
+      const cascadeTargetIndex = useMemo(
+        () => (complete ? steps.length - 1 : activeStepIndex),
+        [complete, steps, activeStepIndex],
+      );
+      // reference to the previous cascade targetIndex
+      const cascadeTargetIndexRef = useRef(cascadeTargetIndex);
+      // the index of the last filled step
+      const [filledStepIndex, setFilledStepIndex] = useState(
+        disableAnimateOnMount ? cascadeTargetIndex : -1,
+      );
 
-      const [progressSprings, progressSpringsApi] = useSprings(steps.length, (index) => ({
-        from: { progress: complete ? 1 : 0 },
-        config: progressSpringConfig,
-      }));
+      const filledStepTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
       useEffect(() => {
-        // update the previous values for next render
-        let stepsToAnimate: number[] = [];
-        let isAnimatingForward = false;
-
-        // Case when going from not-complete to complete
-        if (Boolean(complete) !== previousComplete) {
-          if (complete) {
-            // Going to complete: animate remaining steps to filled.
-            // Use previousActiveStepIndex to determine which steps are already filled before the completion state update,
-            const lastFilledIndex = Math.max(activeStepIndex, previousActiveStepIndex);
-            stepsToAnimate = Array.from(
-              { length: steps.length - lastFilledIndex - 1 },
-              (_, i) => lastFilledIndex + 1 + i,
-            );
-            isAnimatingForward = true;
+        if (filledStepTimeoutRef.current) {
+          clearTimeout(filledStepTimeoutRef.current);
+          filledStepTimeoutRef.current = null;
+        }
+        if (!animate) {
+          if (filledStepIndex !== cascadeTargetIndex) setFilledStepIndex(cascadeTargetIndex);
+        } else if (cascadeTargetIndex < filledStepIndex) {
+          if (cascadeTargetIndexRef.current !== cascadeTargetIndex) {
+            setFilledStepIndex((prev) => prev - 1);
+            cascadeTargetIndexRef.current = cascadeTargetIndex;
           } else {
-            // Going from complete: animate from end down to activeStepIndex+1
-            stepsToAnimate = Array.from(
-              { length: steps.length - activeStepIndex - 1 },
-              (_, i) => steps.length - 1 - i,
+            filledStepTimeoutRef.current = setTimeout(
+              () => setFilledStepIndex((prev) => prev - 1),
+              cascadeStaggerMs,
             );
-            isAnimatingForward = false;
           }
-        }
-
-        // Case for normal step navigation (e.g. step 1 => step 2)
-        else if (activeStepIndex !== previousActiveStepIndex) {
-          if (activeStepIndex > previousActiveStepIndex) {
-            // Forward: animate from previousActiveStepIndex+1 to activeStepIndex
-            stepsToAnimate = Array.from(
-              { length: activeStepIndex - previousActiveStepIndex },
-              (_, i) => previousActiveStepIndex + 1 + i,
-            );
-            isAnimatingForward = true;
+        } else if (cascadeTargetIndex > filledStepIndex) {
+          if (cascadeTargetIndexRef.current !== cascadeTargetIndex) {
+            setFilledStepIndex((prev) => prev + 1);
+            cascadeTargetIndexRef.current = cascadeTargetIndex;
           } else {
-            // Backward: animate from previousActiveStepIndex down to activeStepIndex+1
-            stepsToAnimate = Array.from(
-              { length: previousActiveStepIndex - activeStepIndex },
-              (_, i) => previousActiveStepIndex - i,
+            filledStepTimeoutRef.current = setTimeout(
+              () => setFilledStepIndex((prev) => prev + 1),
+              cascadeStaggerMs,
             );
-            isAnimatingForward = false;
           }
         }
-
-        const animateNextStep = () => {
-          if (stepsToAnimate.length === 0) return;
-          const stepIndex = stepsToAnimate.shift();
-          if (stepIndex === undefined) return;
-
-          progressSpringsApi.start((index) =>
-            index === stepIndex
-              ? {
-                  progress: isAnimatingForward ? 1 : 0,
-                  config: progressSpringConfig,
-                  onRest: animateNextStep,
-                  immediate: !animate || (disableAnimateOnMount && !hasMounted),
-                }
-              : {},
-          );
+        return () => {
+          if (filledStepTimeoutRef.current) {
+            clearTimeout(filledStepTimeoutRef.current);
+            filledStepTimeoutRef.current = null;
+          }
         };
-
-        // start the animation loop for relevant springs (stepsToAnimate)
-        animateNextStep();
-      }, [
-        progressSpringsApi,
-        complete,
-        steps.length,
-        steps,
-        activeStepIndex,
-        previousActiveStepIndex,
-        previousComplete,
-        progressSpringConfig,
-        animate,
-        disableAnimateOnMount,
-        hasMounted,
-      ]);
+      }, [animate, cascadeTargetIndex, filledStepIndex]);
+
+      const getStepProgress = useCallback(
+        (index: number) => {
+          if (!animate) {
+            // if animation is disabled, return 0 if the step index is less than the active step index, otherwise return 1
+            if (filledStepIndex < 0) return 0;
+            return index <= activeStepIndex ? 1 : 0;
+          }
+          if (filledStepIndex < 0) return 0;
+          return index <= filledStepIndex ? 1 : 0;
+        },
+        [animate, activeStepIndex, filledStepIndex],
+      );
 
       return (
         <VStack
@@ -464,6 +465,7 @@ const StepperBase = memo(
               activeStep={activeStep}
               className={classNames?.header}
               complete={complete}
+              disableAnimateOnMount={disableAnimateOnMount}
               flatStepIds={flatStepIds}
               style={styles?.header}
             />
@@ -500,8 +502,8 @@ const StepperBase = memo(
                     flatStepIds={flatStepIds}
                     isDescendentActive={isDescendentActive}
                     parentStep={null}
-                    progress={progressSprings[index].progress}
-                    progressSpringConfig={progressSpringConfig}
+                    progress={getStepProgress(index)}
+                    progressTimingConfig={progressTimingConfig}
                     setActiveStepLabelElement={setActiveStepLabelElement}
                     step={step}
                     styles={stepStyles}
diff --git a/packages/web/src/stepper/__stories__/StepperHorizontal.stories.tsx b/packages/web/src/stepper/__stories__/StepperHorizontal.stories.tsx
index 1c30c4af50..b177afee72 100644
--- a/packages/web/src/stepper/__stories__/StepperHorizontal.stories.tsx
+++ b/packages/web/src/stepper/__stories__/StepperHorizontal.stories.tsx
@@ -298,6 +298,91 @@ export const NestedSteps = () => (
   <StepperHorizontalExample defaultActiveStepId={twoLevelSteps[0].id} steps={twoLevelSteps} />
 );
 
+// ------------------------------------------------------------
+// Disable animate on mount
+// ------------------------------------------------------------
+export const DisableAnimateOnMount = () => (
+  <VStack gap={4}>
+    <StepperHorizontalExample
+      disableAnimateOnMount
+      defaultActiveStepId={basicSteps[0].id}
+      steps={basicSteps}
+      title="Default active step (first) – no progress animation on mount"
+    />
+    <StepperHorizontalExample
+      disableAnimateOnMount
+      defaultActiveStepId={basicSteps[2].id}
+      steps={basicSteps}
+      title="Default active step (third) – no progress animation on mount"
+    />
+    <StepperHorizontalExample
+      complete
+      disableAnimateOnMount
+      defaultActiveStepId={basicSteps[2].id}
+      steps={basicSteps}
+      title="Initial complete – no progress animation on mount"
+    />
+    <StepperHorizontalExample
+      disableAnimateOnMount
+      defaultActiveStepId={twoLevelSteps[0].id}
+      steps={twoLevelSteps}
+      title="Nested steps – first step active – no progress animation on mount"
+    />
+    <StepperHorizontalExample
+      disableAnimateOnMount
+      defaultActiveStepId="second-step-substep-one"
+      steps={twoLevelSteps}
+      title="Nested steps – substep active – no progress animation on mount"
+    />
+    <StepperHorizontalExample
+      complete
+      disableAnimateOnMount
+      defaultActiveStepId={twoLevelSteps[2].id}
+      steps={twoLevelSteps}
+      title="Nested steps – initial complete – no progress animation on mount"
+    />
+  </VStack>
+);
+
+// ------------------------------------------------------------
+// Animate false
+// ------------------------------------------------------------
+export const AnimateFalse = () => (
+  <VStack gap={4}>
+    <StepperHorizontalExample
+      animate={false}
+      defaultActiveStepId={basicSteps[0].id}
+      steps={basicSteps}
+      title="Default active step (first) – no animations"
+    />
+    <StepperHorizontalExample
+      animate={false}
+      defaultActiveStepId={basicSteps[2].id}
+      steps={basicSteps}
+      title="Default active step (third) – no animations"
+    />
+    <StepperHorizontalExample
+      complete
+      animate={false}
+      defaultActiveStepId={basicSteps[2].id}
+      steps={basicSteps}
+      title="Initial complete – no animations"
+    />
+    <StepperHorizontalExample
+      animate={false}
+      defaultActiveStepId={twoLevelSteps[0].id}
+      steps={twoLevelSteps}
+      title="Nested steps – first step active – no animations"
+    />
+    <StepperHorizontalExample
+      animate={false}
+      defaultActiveStepId="second-step-substep-one"
+      steps={twoLevelSteps}
+      title="Nested steps – substep active – no animations"
+    />
+  </VStack>
+);
+
 // ------------------------------------------------------------
 // Null Components
 // ------------------------------------------------------------
diff --git a/packages/web/src/stepper/__stories__/StepperVertical.stories.tsx b/packages/web/src/stepper/__stories__/StepperVertical.stories.tsx
index 8f979544e1..1c4a93d012 100644
--- a/packages/web/src/stepper/__stories__/StepperVertical.stories.tsx
+++ b/packages/web/src/stepper/__stories__/StepperVertical.stories.tsx
@@ -552,6 +552,240 @@ export const CustomComponents = () => {
   );
 };
 
+// ------------------------------------------------------------
+// Disable animate on mount
+// ------------------------------------------------------------
+export const DisableAnimateOnMount = () => {
+  const steps: StepperValue[] = [
+    {
+      id: 'first-step',
+      label: 'First step',
+    },
+    {
+      id: 'second-step',
+      label: 'Second step',
+    },
+    {
+      id: 'third-step',
+      label: 'Third step',
+    },
+    {
+      id: 'final-step',
+      label: 'Final step',
+    },
+  ];
+
+  const oneLevelSteps: StepperValue[] = [
+    {
+      id: 'first-step',
+      label: 'First step',
+    },
+    {
+      id: 'second-step',
+      label: 'Second step',
+      subSteps: [
+        { id: 'second-step-substep-one', label: 'Substep one' },
+        { id: 'second-step-substep-two', label: 'Substep two' },
+        { id: 'second-step-substep-three', label: 'Substep three' },
+      ],
+    },
+    {
+      id: 'final-step',
+      label: 'Final step',
+    },
+  ];
+
+  const twoLevelSteps: StepperValue[] = [
+    {
+      id: 'first-step',
+      label: 'First step',
+    },
+    {
+      id: 'second-step',
+      label: 'Second step',
+      subSteps: [
+        { id: 'second-step-substep-one', label: 'Substep one' },
+        {
+          id: 'second-step-substep-two',
+          label: 'Substep two',
+          subSteps: [
+            { id: 'deeply-nested-step-1', label: 'Deeply nested step 1' },
+            { id: 'deeply-nested-step-2', label: 'Deeply nested step 2' },
+          ],
+        },
+        { id: 'second-step-substep-three', label: 'Substep three' },
+      ],
+    },
+    {
+      id: 'final-step',
+      label: 'Final step',
+    },
+  ];
+
+  return (
+    <VStack gap={4}>
+      <StepperVerticalExample
+        disableAnimateOnMount
+        defaultActiveStepId={steps[0].id}
+        steps={steps}
+        title="Default active step (first) – no progress animation on mount"
+      />
+      <StepperVerticalExample
+        disableAnimateOnMount
+        defaultActiveStepId={steps[2].id}
+        steps={steps}
+        title="Default active step (third) – no progress animation on mount"
+      />
+      <StepperVerticalExample
+        disableAnimateOnMount
+        initialComplete
+        defaultActiveStepId={steps[0].id}
+        steps={steps}
+        title="Initial complete – no progress animation on mount"
+      />
+      <StepperVerticalExample
+        disableAnimateOnMount
+        accessibilityLabel="Stepper with substeps"
+        defaultActiveStepId={oneLevelSteps[0].id}
+        steps={oneLevelSteps}
+        title="Nested steps (one level) – first step active – no progress animation on mount"
+      />
+      <StepperVerticalExample
+        disableAnimateOnMount
+        accessibilityLabel="Stepper with substeps"
+        defaultActiveStepId="second-step-substep-one"
+        steps={oneLevelSteps}
+        title="Nested steps (one level) – substep active – no progress animation on mount"
+      />
+      <StepperVerticalExample
+        disableAnimateOnMount
+        initialComplete
+        accessibilityLabel="Stepper with substeps"
+        defaultActiveStepId={oneLevelSteps[0].id}
+        steps={oneLevelSteps}
+        title="Nested steps (one level) – initial complete – no progress animation on mount"
+      />
+      <StepperVerticalExample
+        disableAnimateOnMount
+        skipParentSteps
+        accessibilityLabel="Stepper with substeps"
+        defaultActiveStepId={twoLevelSteps[0].id}
+        steps={twoLevelSteps}
+        title="Nested steps (two levels, skipParentSteps) – first step active – no progress animation on mount"
+      />
+      <StepperVerticalExample
+        disableAnimateOnMount
+        skipParentSteps
+        accessibilityLabel="Stepper with substeps"
+        defaultActiveStepId="deeply-nested-step-1"
+        steps={twoLevelSteps}
+        title="Nested steps (two levels, skipParentSteps) – deeply nested step active – no progress animation on mount"
+      />
+    </VStack>
+  );
+};
+
+// ------------------------------------------------------------
+// Animate false
+// ------------------------------------------------------------
+export const AnimateFalse = () => {
+  const steps: StepperValue[] = [
+    { id: 'first-step', label: 'First step' },
+    { id: 'second-step', label: 'Second step' },
+    { id: 'third-step', label: 'Third step' },
+    { id: 'final-step', label: 'Final step' },
+  ];
+
+  const oneLevelSteps: StepperValue[] = [
+    { id: 'first-step', label: 'First step' },
+    {
+      id: 'second-step',
+      label: 'Second step',
+      subSteps: [
+        { id: 'second-step-substep-one', label: 'Substep one' },
+        { id: 'second-step-substep-two', label: 'Substep two' },
+        { id: 'second-step-substep-three', label: 'Substep three' },
+      ],
+    },
+    { id: 'final-step', label: 'Final step' },
+  ];
+
+  const twoLevelSteps: StepperValue[] = [
+    { id: 'first-step', label: 'First step' },
+    {
+      id: 'second-step',
+      label: 'Second step',
+      subSteps: [
+        { id: 'second-step-substep-one', label: 'Substep one' },
+        {
+          id: 'second-step-substep-two',
+          label: 'Substep two',
+          subSteps: [
+            { id: 'deeply-nested-step-1', label: 'Deeply nested step 1' },
+            { id: 'deeply-nested-step-2', label: 'Deeply nested step 2' },
+          ],
+        },
+        { id: 'second-step-substep-three', label: 'Substep three' },
+      ],
+    },
+    { id: 'final-step', label: 'Final step' },
+  ];
+
+  return (
+    <VStack gap={4}>
+      <StepperVerticalExample
+        animate={false}
+        defaultActiveStepId={steps[0].id}
+        steps={steps}
+        title="Default active step (first) – no animations"
+      />
+      <StepperVerticalExample
+        animate={false}
+        defaultActiveStepId={steps[2].id}
+        steps={steps}
+        title="Default active step (third) – no animations"
+      />
+      <StepperVerticalExample
+        initialComplete
+        animate={false}
+        defaultActiveStepId={steps[0].id}
+        steps={steps}
+        title="Initial complete – no animations"
+      />
+      <StepperVerticalExample
+        accessibilityLabel="Stepper with substeps"
+        animate={false}
+        defaultActiveStepId={oneLevelSteps[0].id}
+        steps={oneLevelSteps}
+        title="Nested steps (one level) – first step active – no animations"
+      />
+      <StepperVerticalExample
+        accessibilityLabel="Stepper with substeps"
+        animate={false}
+        defaultActiveStepId="second-step-substep-one"
+        steps={oneLevelSteps}
+        title="Nested steps (one level) – substep active – no animations"
+      />
+      <StepperVerticalExample
+        skipParentSteps
+        accessibilityLabel="Stepper with substeps"
+        animate={false}
+        defaultActiveStepId={twoLevelSteps[0].id}
+        steps={twoLevelSteps}
+        title="Nested steps (two levels, skipParentSteps) – first step active – no animations"
+      />
+      <StepperVerticalExample
+        skipParentSteps
+        accessibilityLabel="Stepper with substeps"
+        animate={false}
+        defaultActiveStepId="deeply-nested-step-1"
+        steps={twoLevelSteps}
+        title="Nested steps (two levels, skipParentSteps) – deeply nested step active – no animations"
+      />
+    </VStack>
+  );
+};
+
 // ------------------------------------------------------------
 // Null Components
 // ------------------------------------------------------------
diff --git a/packages/web/src/styles/styleProps.ts b/packages/web/src/styles/styleProps.ts
index 54457e7559..67da997ffe 100644
--- a/packages/web/src/styles/styleProps.ts
+++ b/packages/web/src/styles/styleProps.ts
@@ -150,7 +150,9 @@ export const dynamicPixelProps = {
   flexBasis: 1,
 } as const satisfies Partial<Record<keyof DynamicStyleProps, 1>>;
 
-export type ResponsiveProp<T> = T | { base?: T; phone?: T; tablet?: T; desktop?: T };
+export type ResponsiveValue<T> = { base?: T; phone?: T; tablet?: T; desktop?: T };
+
+export type ResponsiveProp<T> = T | ResponsiveValue<T>;
 
 export type ResponsiveProps<T> = {
   [key in keyof T]?: ResponsiveProp<T[key]>;
@@ -158,6 +160,12 @@ export type ResponsiveProps<T> = {
 
 export type StyleProps = ResponsiveProps<StaticStyleProps> & ResponsiveProps<DynamicStyleProps>;
 
+/** Position-related style props using CSS types. Use this instead of common's PositionStyles for web. */
+export type PositionStyles = Pick<
+  StyleProps,
+  'position' | 'top' | 'bottom' | 'left' | 'right' | 'zIndex'
+>;
+
 export const getStyles = (styleProps: StyleProps, inlineStyle?: React.CSSProperties) => {
   const style: Record<string, unknown> = {};
   let className = '';
diff --git a/packages/web/src/system/Interactable.tsx b/packages/web/src/system/Interactable.tsx
index 3876bfbb85..34c227b195 100644
--- a/packages/web/src/system/Interactable.tsx
+++ b/packages/web/src/system/Interactable.tsx
@@ -12,6 +12,7 @@ import { css } from '@linaria/core';
 import type { Polymorphic } from '../core/polymorphism';
 import type { Theme } from '../core/theme';
 import { cx } from '../cx';
+import { useResolveResponsiveProp } from '../hooks/useResolveResponsiveProp';
 import { useTheme } from '../hooks/useTheme';
 import { Box, type BoxBaseProps } from '../layout/Box';
 
@@ -163,8 +164,6 @@ export type InteractableBaseProps = Polymorphic.ExtendableProps<
     background?: ThemeVars.Color;
     /** Set element to block and expand to 100% width. */
     block?: boolean;
-    /** Border color of the element. */
-    borderColor?: ThemeVars.Color;
     /** Is the element currently disabled. */
     disabled?: boolean;
     /**
@@ -223,6 +222,7 @@ export const Interactable: InteractableComponent = forwardRef<
   ) => {
     const Component = (as ?? interactableDefaultElement) satisfies React.ElementType;
     const theme = useTheme();
+    const resolvedBorderColor = useResolveResponsiveProp(borderColor);
 
     const interactableStyle = useMemo(
       () => ({
@@ -230,11 +230,11 @@ export const Interactable: InteractableComponent = forwardRef<
           theme,
           background,
           blendStyles,
-          borderColor,
+          borderColor: resolvedBorderColor,
         }),
         ...style,
       }),
-      [style, background, theme, blendStyles, borderColor],
+      [style, background, theme, blendStyles, resolvedBorderColor],
     );
 
     return (
diff --git a/packages/web/src/system/PressableOpacity.tsx b/packages/web/src/system/PressableOpacity.tsx
index 2ae9192ac1..8643692718 100644
--- a/packages/web/src/system/PressableOpacity.tsx
+++ b/packages/web/src/system/PressableOpacity.tsx
@@ -47,7 +47,7 @@ export const PressableOpacity: PressableOpacityComponent = forwardRef<
   ) => {
     const Component = (as ?? pressableOpacityDefaultElement) satisfies React.ElementType;
     return (
-      <Pressable ref={ref} as={Component} {...props} background="transparent">
+      <Pressable ref={ref} as={Component} background="transparent" {...props}>
         {children}
       </Pressable>
     );
diff --git a/packages/web/src/system/ThemeProvider.tsx b/packages/web/src/system/ThemeProvider.tsx
index b69be314c4..feb344d77c 100644
--- a/packages/web/src/system/ThemeProvider.tsx
+++ b/packages/web/src/system/ThemeProvider.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, memo, useContext, useMemo } from 'react';
 import type { ColorScheme } from '@coinbase/cds-common/core/theme';
 
 import { createThemeCssVars } from '../core/createThemeCssVars';
@@ -23,15 +23,16 @@ type ThemeManagerProps = {
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
-  theme: Theme;
+  theme: Partial<Theme>;
 };
 
-export const useThemeProviderStyles = (theme: Theme) => {
+export const useThemeProviderStyles = (theme: Partial<Theme>) => {
   const style = useMemo(() => createThemeCssVars(theme), [theme]);
   return style;
 };
 
-const ThemeManager = ({ display, className, style, children, theme }: ThemeManagerProps) => {
+/** Injects theme CSS variables into the DOM by calling `createThemeCssVars` via `useThemeProviderStyles`. */
+const ThemeManager = memo(({ display, className, style, children, theme }: ThemeManagerProps) => {
   const themeStyles = useThemeProviderStyles(theme);
   const styles = useMemo(
     () => ({ ...themeStyles, display, ...style }),
@@ -42,102 +43,144 @@ const ThemeManager = ({ display, className, style, children, theme }: ThemeManag
       {children}
     </div>
   );
+});
+
+/**
+ * Diff two themes and return a new partial theme with only the differences.
+ */
+export const diffThemes = (theme: Theme, parentTheme?: Theme) => {
+  if (!parentTheme) return theme;
+  const themeDiff = {
+    id: theme.id,
+    activeColorScheme: theme.activeColorScheme,
+  } as Record<keyof Theme, any>;
+  (Object.keys(theme) as (keyof Theme)[]).forEach((key) => {
+    if (key === 'id' || key === 'activeColorScheme') return;
+    themeDiff[key] = {};
+    Object.keys(theme[key] ?? {}).forEach((value) => {
+      if ((theme[key] as any)?.[value] !== (parentTheme[key] as any)?.[value]) {
+        themeDiff[key][value] = (theme[key] as any)[value];
+      }
+    });
+  });
+  return themeDiff as Partial<Theme>;
 };
 
-export type ThemeProviderProps = Pick<ThemeManagerProps, 'display' | 'className' | 'style'> &
-  Pick<FramerMotionProviderProps, 'motionFeatures'> & {
-    theme: ThemeConfig;
-    activeColorScheme: ColorScheme;
-    children?: React.ReactNode;
-  };
-
-export const ThemeProvider = ({
-  theme,
-  activeColorScheme,
-  children,
-  className,
-  display,
-  style,
-  motionFeatures,
-}: ThemeProviderProps) => {
-  const themeApi = useMemo(() => {
-    const activeSpectrumKey = activeColorScheme === 'dark' ? 'darkSpectrum' : 'lightSpectrum';
-    const activeColorKey = activeColorScheme === 'dark' ? 'darkColor' : 'lightColor';
-    const activeIllustrationKey =
-      activeColorScheme === 'dark' ? 'darkIllustrationColor' : 'lightIllustrationColor';
-    const inverseSpectrumKey = activeColorScheme === 'dark' ? 'lightSpectrum' : 'darkSpectrum';
-    const inverseColorKey = activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
-
-    // TO DO: Link to color / theme docs in these error messages
-    if (!theme[activeColorKey])
-      throw Error(
-        `ThemeProvider activeColorScheme is ${activeColorScheme} but no ${activeColorScheme} colors are defined for the theme`,
-      );
-
-    if (!theme[activeSpectrumKey])
-      throw Error(
-        `ThemeProvider activeColorScheme is ${activeColorScheme} but no ${activeSpectrumKey} values are defined for the theme`,
-      );
-
-    if (theme[inverseSpectrumKey] && !theme[inverseColorKey])
-      throw Error(
-        `ThemeProvider theme has ${inverseSpectrumKey} values defined but no ${inverseColorKey} colors are defined for the theme`,
-      );
-
-    if (theme[inverseColorKey] && !theme[inverseSpectrumKey])
-      throw Error(
-        `ThemeProvider theme has ${inverseColorKey} colors defined but no ${inverseSpectrumKey} values are defined for the theme`,
-      );
-
-    return {
-      ...theme,
-      activeColorScheme: activeColorScheme,
-      spectrum: theme[activeSpectrumKey],
-      color: theme[activeColorKey],
-      illustrationColor: theme[activeIllustrationKey],
-    };
-  }, [theme, activeColorScheme]);
-
-  return (
-    <FramerMotionProvider motionFeatures={motionFeatures}>
-      <ThemeContext.Provider value={themeApi}>
-        <ThemeManager className={className} display={display} style={style} theme={themeApi}>
-          {children}
-        </ThemeManager>
-      </ThemeContext.Provider>
-    </FramerMotionProvider>
-  );
+export type ThemeProviderProps = Pick<ThemeManagerProps, 'display' | 'className' | 'style'> & {
+  theme: ThemeConfig;
+  activeColorScheme: ColorScheme;
+  children?: React.ReactNode;
+  /**
+   * Use the `isolated` prop to indicate when ThemeProvider will render outside its parent's DOM tree, such as in a portal.
+   * An isolated ThemeProvider always inserts all theme CSS variables into the DOM, regardless of what overlaps with parent ThemeProvider instances.
+   * @default false
+   */
+  isolated?: boolean;
+  /**
+   * A motion "feature" bundle, used to selectively bundle specific framer-motion features. You likely won't need to use this this prop.
+   * @default domAnimation
+   * @see https://motion.dev/docs/react-reduce-bundle-size
+   */
+  motionFeatures?: FramerMotionProviderProps['motionFeatures'];
 };
 
+export const ThemeProvider = memo(
+  ({
+    theme,
+    activeColorScheme,
+    children,
+    className,
+    display,
+    style,
+    motionFeatures,
+    isolated,
+  }: ThemeProviderProps) => {
+    const themeApi = useMemo(() => {
+      const activeSpectrumKey = activeColorScheme === 'dark' ? 'darkSpectrum' : 'lightSpectrum';
+      const activeColorKey = activeColorScheme === 'dark' ? 'darkColor' : 'lightColor';
+      const activeIllustrationKey =
+        activeColorScheme === 'dark' ? 'darkIllustrationColor' : 'lightIllustrationColor';
+      const inverseSpectrumKey = activeColorScheme === 'dark' ? 'lightSpectrum' : 'darkSpectrum';
+      const inverseColorKey = activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
+
+      if (!theme[activeColorKey])
+        throw Error(
+          `ThemeProvider activeColorScheme is ${activeColorScheme} but no ${activeColorScheme} colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming`,
+        );
+
+      if (!theme[activeSpectrumKey])
+        throw Error(
+          `ThemeProvider activeColorScheme is ${activeColorScheme} but no ${activeSpectrumKey} values are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming`,
+        );
+
+      if (theme[inverseSpectrumKey] && !theme[inverseColorKey])
+        throw Error(
+          `ThemeProvider theme has ${inverseSpectrumKey} values defined but no ${inverseColorKey} colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming`,
+        );
+
+      if (theme[inverseColorKey] && !theme[inverseSpectrumKey])
+        throw Error(
+          `ThemeProvider theme has ${inverseColorKey} colors defined but no ${inverseSpectrumKey} values are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming`,
+        );
+
+      return {
+        ...theme,
+        activeColorScheme: activeColorScheme,
+        spectrum: theme[activeSpectrumKey],
+        color: theme[activeColorKey],
+        illustrationColor: theme[activeIllustrationKey],
+      };
+    }, [theme, activeColorScheme]);
+
+    const parentTheme = useContext(ThemeContext);
+
+    const partialTheme = useMemo(
+      () => (isolated ? themeApi : diffThemes(themeApi, parentTheme)),
+      [themeApi, parentTheme, isolated],
+    );
+
+    return (
+      <FramerMotionProvider motionFeatures={motionFeatures}>
+        <ThemeContext.Provider value={themeApi}>
+          <ThemeManager className={className} display={display} style={style} theme={partialTheme}>
+            {children}
+          </ThemeManager>
+        </ThemeContext.Provider>
+      </FramerMotionProvider>
+    );
+  },
+);
+
 export type InvertedThemeProviderProps = Pick<
   ThemeManagerProps,
   'display' | 'className' | 'style'
-> & {
-  children?: React.ReactNode;
-};
+> &
+  Pick<ThemeProviderProps, 'isolated'> & {
+    children?: React.ReactNode;
+  };
 
 /** Falls back to the currently active colorScheme if the inverse colors are not defined in the theme.  */
-export const InvertedThemeProvider = ({
-  children,
-  display,
-  className,
-  style,
-}: InvertedThemeProviderProps) => {
-  const context = useContext(ThemeContext);
-  if (!context) throw Error('InvertedThemeProvider must be used within a ThemeProvider');
-  const inverseColorScheme = context.activeColorScheme === 'dark' ? 'light' : 'dark';
-  const inverseColorKey = context.activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
-  const newColorScheme = context[inverseColorKey] ? inverseColorScheme : context.activeColorScheme;
-
-  return (
-    <ThemeProvider
-      activeColorScheme={newColorScheme}
-      className={className}
-      display={display}
-      style={style}
-      theme={context}
-    >
-      {children}
-    </ThemeProvider>
-  );
-};
+export const InvertedThemeProvider = memo(
+  ({ children, display, className, style, isolated }: InvertedThemeProviderProps) => {
+    const context = useContext(ThemeContext);
+    if (!context) throw Error('InvertedThemeProvider must be used within a ThemeProvider');
+    const inverseColorScheme = context.activeColorScheme === 'dark' ? 'light' : 'dark';
+    const inverseColorKey = context.activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
+    const newColorScheme = context[inverseColorKey]
+      ? inverseColorScheme
+      : context.activeColorScheme;
+
+    return (
+      <ThemeProvider
+        activeColorScheme={newColorScheme}
+        className={className}
+        display={display}
+        isolated={isolated}
+        style={style}
+        theme={context}
+      >
+        {children}
+      </ThemeProvider>
+    );
+  },
+);
diff --git a/packages/web/src/system/__stories__/Pressable.stories.tsx b/packages/web/src/system/__stories__/Pressable.stories.tsx
index bcdca15c4a..9a5a02b831 100644
--- a/packages/web/src/system/__stories__/Pressable.stories.tsx
+++ b/packages/web/src/system/__stories__/Pressable.stories.tsx
@@ -178,7 +178,7 @@ export const ThemeColors = () => {
             borderColor="bgLine"
             borderWidth={100}
           >
-            <Text as="p" dangerouslySetColor={textColor} display="block" font="body" padding={1}>
+            <Text as="p" display="block" font="body" padding={1} style={{ color: textColor }}>
               {color}
             </Text>
           </Pressable>
@@ -213,7 +213,7 @@ export const ThemeColorsWithDisabled = () => {
             borderColor="bgLine"
             borderWidth={100}
           >
-            <Text as="p" dangerouslySetColor={textColor} display="block" font="body" padding={1}>
+            <Text as="p" display="block" font="body" padding={1} style={{ color: textColor }}>
               {color}
             </Text>
           </Pressable>
diff --git a/packages/web/src/system/__tests__/Interactable.test.tsx b/packages/web/src/system/__tests__/Interactable.test.tsx
new file mode 100644
index 0000000000..09644321df
--- /dev/null
+++ b/packages/web/src/system/__tests__/Interactable.test.tsx
@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react';
+
+import { media } from '../../styles/media';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { Interactable } from '../Interactable';
+import { MediaQueryContext } from '../MediaQueryProvider';
+import { ThemeProvider } from '../ThemeProvider';
+
+const responsiveBorderColor = {
+  base: 'bgLine',
+  phone: 'bgNegative',
+  tablet: 'bgPositive',
+  desktop: 'bgPrimary',
+} as const;
+
+const renderWithWidth = (width?: number) => {
+  const mediaContextValue = width
+    ? {
+        subscribe: () => () => undefined,
+        getServerSnapshot: () => false,
+        getSnapshot: (query: string) => {
+          if (query === media.phone) return width <= 767;
+          if (query === media.tablet) return width >= 768 && width <= 1279;
+          if (query === media.desktop) return width >= 1280;
+          return false;
+        },
+      }
+    : null;
+
+  const content = (
+    <ThemeProvider activeColorScheme="light" theme={defaultTheme}>
+      <Interactable borderColor={responsiveBorderColor} testID="interactable" />
+    </ThemeProvider>
+  );
+
+  return render(
+    mediaContextValue ? (
+      <MediaQueryContext.Provider value={mediaContextValue}>{content}</MediaQueryContext.Provider>
+    ) : (
+      content
+    ),
+  );
+};
+
+describe('Interactable', () => {
+  it.each([
+    ['phone', 500, 'bgNegative'],
+    ['tablet', 900, 'bgPositive'],
+    ['desktop', 1400, 'bgPrimary'],
+  ])('resolves %s borderColor from responsive prop', (_, width, expectedToken) => {
+    renderWithWidth(width);
+    const element = screen.getByTestId('interactable');
+    expect(element.style.getPropertyValue('--inter-borderColor')).toBe(
+      `var(--color-${expectedToken})`,
+    );
+  });
+
+  it('falls back to base value without MediaQueryProvider', () => {
+    renderWithWidth();
+
+    const element = screen.getByTestId('interactable');
+    expect(element.style.getPropertyValue('--inter-borderColor')).toBe(
+      `var(--color-${responsiveBorderColor.base})`,
+    );
+  });
+});
diff --git a/packages/web/src/system/__tests__/MediaQueryProvider.test.tsx b/packages/web/src/system/__tests__/MediaQueryProvider.test.tsx
index 1c6210e733..78cc7b36f6 100644
--- a/packages/web/src/system/__tests__/MediaQueryProvider.test.tsx
+++ b/packages/web/src/system/__tests__/MediaQueryProvider.test.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { act, render, screen } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { act, render, renderHook, screen } from '@testing-library/react';
 
 // Mock the listener utilities
 import * as MediaQueryListenerUtils from '../../utils/mediaQueryListener';
@@ -141,9 +140,7 @@ describe('createMediaQueryStore client-side logic', () => {
 
     useEffect(() => {
       const callback = () => {
-        act(() => {
-          setMatches(store.getSnapshot(query));
-        });
+        setMatches(store.getSnapshot(query));
       };
       const unsubscribe = store.subscribe(query, callback);
       callback();
diff --git a/packages/web/src/system/interactableCSSProperties.ts b/packages/web/src/system/interactableCSSProperties.ts
index 7ab949cb51..334c870275 100644
--- a/packages/web/src/system/interactableCSSProperties.ts
+++ b/packages/web/src/system/interactableCSSProperties.ts
@@ -1,14 +1,14 @@
-export const interactableBorderRadius = '--interactable-border-radius';
-export const interactableBackground = '--interactable-background';
-export const interactableBorderColor = '--interactable-border-color';
+export const interactableBorderRadius = '--inter-borderRadius';
+export const interactableBackground = '--inter-bg';
+export const interactableBorderColor = '--inter-borderColor';
 // Pressed:
-export const interactablePressedBackground = '--interactable-pressed-background';
-export const interactablePressedBorderColor = '--interactable-pressed-border-color';
-export const interactablePressedOpacity = '--interactable-pressed-opacity';
+export const interactablePressedBackground = '--inter-press-bg';
+export const interactablePressedBorderColor = '--inter-press-borderColor';
+export const interactablePressedOpacity = '--inter-press-opacity';
 // Hovered:
-export const interactableHoveredBackground = '--interactable-hovered-background';
-export const interactableHoveredBorderColor = '--interactable-hovered-border-color';
-export const interactableHoveredOpacity = '--interactable-hovered-opacity';
+export const interactableHoveredBackground = '--inter-hover-bg';
+export const interactableHoveredBorderColor = '--inter-hover-borderColor';
+export const interactableHoveredOpacity = '--inter-hover-opacity';
 // Disabled:
-export const interactableDisabledBackground = '--interactable-disabled-background';
-export const interactableDisabledBorderColor = '--interactable-disabled-border-color';
+export const interactableDisabledBackground = '--inter-disable-bg';
+export const interactableDisabledBorderColor = '--inter-disable-borderColor';
diff --git a/packages/web/src/tables/Table.tsx b/packages/web/src/tables/Table.tsx
index 184acb039a..f802dc1b1d 100644
--- a/packages/web/src/tables/Table.tsx
+++ b/packages/web/src/tables/Table.tsx
@@ -1,5 +1,4 @@
 import React, { forwardRef, memo, useMemo } from 'react';
-import type { DimensionValue } from '@coinbase/cds-common/types/DimensionStyles';
 import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
 import { css, type LinariaClassName } from '@linaria/core';
@@ -50,9 +49,9 @@ export type TableBaseProps = SharedProps &
     /** Use compact cell spacing. If set, cellSpacing will override these defaults */
     compact?: boolean;
     /** Set a fixed height. */
-    height?: DimensionValue;
+    height?: React.CSSProperties['height'];
     /** Set a maximum height. */
-    maxHeight?: DimensionValue;
+    maxHeight?: React.CSSProperties['maxHeight'];
   };
 
 export type TableProps = TableBaseProps &
diff --git a/packages/web/src/tables/TableCell.tsx b/packages/web/src/tables/TableCell.tsx
index 84cf218ee5..f4e59979dc 100644
--- a/packages/web/src/tables/TableCell.tsx
+++ b/packages/web/src/tables/TableCell.tsx
@@ -6,6 +6,7 @@ import { isDevelopment } from '@coinbase/cds-utils';
 import { css } from '@linaria/core';
 
 import { Cell, type CellBaseProps } from '../cells/Cell';
+import type { CellAccessoryProps } from '../cells/CellAccessory';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
@@ -34,7 +35,7 @@ export type TableCellBaseProps = TableCellSharedProps & {
    * Element (icon, asset, image, etc) to display at the end of the cell
    * @default undefined
    */
-  end?: React.ReactElement;
+  end?: React.ReactElement<CellAccessoryProps>;
   /**
    * The color for all text components rendered inside the TableCell.
    * Use titleColor and subtitleColor if you need to be more specific
diff --git a/packages/web/src/tables/__stories__/TableCell.stories.tsx b/packages/web/src/tables/__stories__/TableCell.stories.tsx
index 48dcba7ff9..b5ed2c820a 100644
--- a/packages/web/src/tables/__stories__/TableCell.stories.tsx
+++ b/packages/web/src/tables/__stories__/TableCell.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from '@linaria/core';
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Accordion, AccordionItem } from '../../accordion';
 import { LoremIpsum } from '../../layout/__stories__/LoremIpsum';
@@ -11,10 +11,13 @@ import { defaultTheme } from '../../themes/defaultTheme';
 import { Text } from '../../typography/Text';
 import { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow } from '..';
 
-export default {
+const meta: Meta = {
   title: 'Components/Table/TableCell',
   component: TableCell,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj;
 
 const handleClick = console.log;
 
@@ -28,8 +31,8 @@ const spacingConfig = {
   huge: { padding: 7 },
 } as const;
 
-export const CellSpacing: Story = () => {
-  return (
+export const CellSpacing: Story = {
+  render: () => (
     <Table bordered cellSpacing={spacingConfig.flush} variant="ruled">
       <TableHeader>
         <TableRow backgroundColor="bgAlternate">
@@ -42,15 +45,15 @@ export const CellSpacing: Story = () => {
         </TableRow>
       </TableBody>
     </Table>
-  );
+  ),
 };
 
 const flexCss = css`
   display: flex;
 `;
 
-export const VerticallyAlignedTableCell: Story = () => {
-  return (
+export const VerticallyAlignedTableCell: Story = {
+  render: () => (
     <Table bordered cellSpacing={spacingConfig.flush} variant="ruled">
       <TableBody>
         <TableRow>
@@ -72,11 +75,11 @@ export const VerticallyAlignedTableCell: Story = () => {
         </TableRow>
       </TableBody>
     </Table>
-  );
+  ),
 };
 
-export const ComplexSpacingOverride: Story = () => {
-  return (
+export const ComplexSpacingOverride: Story = {
+  render: () => (
     <VStack gap={2}>
       <Text as="p" display="block" font="body">
         This story is complex on purpose - it is intended to provide visgreg testing to ensure crazy
@@ -157,11 +160,11 @@ export const ComplexSpacingOverride: Story = () => {
         </TableBody>
       </Table>
     </VStack>
-  );
+  ),
 };
 
-export const SampleCells: Story = () => {
-  return (
+export const SampleCells: Story = {
+  render: () => (
     <ThemeProvider activeColorScheme="light" theme={defaultTheme}>
       <Table bordered variant="ruled">
         <TableHeader>
@@ -209,11 +212,11 @@ export const SampleCells: Story = () => {
         </TableFooter>
       </Table>
     </ThemeProvider>
-  );
+  ),
 };
 
-export const SampleFixedLayout: Story = () => {
-  return (
+export const SampleFixedLayout: Story = {
+  render: () => (
     <ThemeProvider activeColorScheme="light" theme={defaultTheme}>
       <Table bordered tableLayout="fixed" variant="ruled">
         <TableHeader>
@@ -261,5 +264,5 @@ export const SampleFixedLayout: Story = () => {
         </TableFooter>
       </Table>
     </ThemeProvider>
-  );
+  ),
 };
diff --git a/packages/web/src/tables/__stories__/TableCellFallback.stories.tsx b/packages/web/src/tables/__stories__/TableCellFallback.stories.tsx
index f286523e01..0aad5928f5 100644
--- a/packages/web/src/tables/__stories__/TableCellFallback.stories.tsx
+++ b/packages/web/src/tables/__stories__/TableCellFallback.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useToggler } from '@coinbase/cds-common/hooks/useToggler';
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { CellMedia, type CellMediaType } from '../../cells/CellMedia';
 import { Switch } from '../../controls/Switch';
@@ -11,14 +11,18 @@ import { Text } from '../../typography/Text';
 import { assetHubMock } from '../__mocks__';
 import { Table, TableBody, TableCell, TableCellFallback, TableHeader, TableRow } from '..';
 
-export default {
+const meta: Meta = {
   title: 'Components/Table/TableCellFallback',
   component: TableCellFallback,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj;
 
 const LABELS = ['name', 'ticker', 'appStatus'];
 const mediaTypes: CellMediaType[] = ['asset', 'avatar', 'icon', 'image', 'pictogram'];
-export const TableCellFallbackExample: Story = () => {
+
+const TableCellFallbackExampleRender = () => {
   const [loading, { toggle }] = useToggler();
   const data = assetHubMock.slice(0, 20);
 
@@ -100,3 +104,7 @@ export const TableCellFallbackExample: Story = () => {
     </ThemeProvider>
   );
 };
+
+export const TableCellFallbackExample: Story = {
+  render: () => <TableCellFallbackExampleRender />,
+};
diff --git a/packages/web/src/tables/__stories__/TableRow.stories.tsx b/packages/web/src/tables/__stories__/TableRow.stories.tsx
index 319b4a655c..3e19627320 100644
--- a/packages/web/src/tables/__stories__/TableRow.stories.tsx
+++ b/packages/web/src/tables/__stories__/TableRow.stories.tsx
@@ -1,19 +1,22 @@
 import React from 'react';
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '../../buttons/Button';
 import { Text } from '../../typography/Text';
 import { Table, TableBody, TableCell, TableRow } from '..';
 
-export default {
+const meta: Meta = {
   title: 'Components/Table/TableRow',
   component: TableRow,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj;
 
 const handleClick = console.log;
 
-export const TableRowExample: Story = () => {
-  return (
+export const TableRowExample: Story = {
+  render: () => (
     <Table bordered variant="ruled">
       <TableBody>
         <TableRow>
@@ -49,5 +52,5 @@ export const TableRowExample: Story = () => {
         </TableRow>
       </TableBody>
     </Table>
-  );
+  ),
 };
diff --git a/packages/web/src/tables/__stories__/TableSection.stories.tsx b/packages/web/src/tables/__stories__/TableSection.stories.tsx
index fa53cf3f75..1cf0de8a74 100644
--- a/packages/web/src/tables/__stories__/TableSection.stories.tsx
+++ b/packages/web/src/tables/__stories__/TableSection.stories.tsx
@@ -1,17 +1,20 @@
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { VStack } from '../../layout/VStack';
 import { Text } from '../../typography/Text';
 import { ProgressCircle } from '../../visualizations/ProgressCircle';
 import { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow } from '..';
 
-export default {
+const meta: Meta = {
   title: 'Components/Table/TableSection',
   component: TableBody,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj;
 
-export const SampleTableSection: Story = () => {
-  return (
+export const SampleTableSection: Story = {
+  render: () => (
     <Table bordered variant="ruled">
       <TableHeader>
         <TableRow>
@@ -29,11 +32,11 @@ export const SampleTableSection: Story = () => {
         </TableRow>
       </TableFooter>
     </Table>
-  );
+  ),
 };
 
-export const SectionFlowControl: Story = () => {
-  return (
+export const SectionFlowControl: Story = {
+  render: () => (
     <Table bordered variant="ruled">
       <TableBody>
         <TableRow>
@@ -51,11 +54,11 @@ export const SectionFlowControl: Story = () => {
         </TableRow>
       </TableHeader>
     </Table>
-  );
+  ),
 };
 
-export const LoadingStateExample: Story = () => {
-  return (
+export const LoadingStateExample: Story = {
+  render: () => (
     <Table bordered variant="ruled">
       <TableHeader>
         <TableRow>
@@ -71,5 +74,5 @@ export const LoadingStateExample: Story = () => {
         </VStack>
       </TableBody>
     </Table>
-  );
+  ),
 };
diff --git a/packages/web/src/tables/hooks/__tests__/useSortableCell.test.tsx b/packages/web/src/tables/hooks/__tests__/useSortableCell.test.tsx
index e7679cea23..334204b018 100644
--- a/packages/web/src/tables/hooks/__tests__/useSortableCell.test.tsx
+++ b/packages/web/src/tables/hooks/__tests__/useSortableCell.test.tsx
@@ -1,5 +1,5 @@
 import { noop } from '@coinbase/cds-utils';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { TableCellSortIcon } from '../../TableCellSortIcon';
 import { useSortableCell } from '../useSortableCell';
diff --git a/packages/web/src/tables/hooks/__tests__/useTable.test.tsx b/packages/web/src/tables/hooks/__tests__/useTable.test.tsx
index b12ebc51e8..bb08fc123b 100644
--- a/packages/web/src/tables/hooks/__tests__/useTable.test.tsx
+++ b/packages/web/src/tables/hooks/__tests__/useTable.test.tsx
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { Table } from '../../Table';
 import { TableBody } from '../../TableBody';
@@ -128,8 +128,11 @@ describe('useTableTag', () => {
   });
 
   it('Get cell spacing can skip as validation', () => {
-    const { result } = renderHook(() => useTableCellSpacing({ skipAsValidation: true }));
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+
+    renderHook(() => useTableCellSpacing({ skipAsValidation: true }));
 
-    expect(result.error).toBeUndefined();
+    expect(consoleSpy).not.toHaveBeenCalled();
+    consoleSpy.mockRestore();
   });
 });
diff --git a/packages/web/src/tables/hooks/__tests__/useTableRowListener.test.ts b/packages/web/src/tables/hooks/__tests__/useTableRowListener.test.ts
index 704031270c..00d618ecc1 100644
--- a/packages/web/src/tables/hooks/__tests__/useTableRowListener.test.ts
+++ b/packages/web/src/tables/hooks/__tests__/useTableRowListener.test.ts
@@ -1,5 +1,5 @@
 import { noop } from '@coinbase/cds-utils';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import type { TableRowRef } from '../../TableRow';
 import { useTableRowListener } from '../useTableRowListener';
diff --git a/packages/web/src/tables/hooks/__tests__/useTableVariant.test.tsx b/packages/web/src/tables/hooks/__tests__/useTableVariant.test.tsx
index 3bd228b48f..a2f7a10dfd 100644
--- a/packages/web/src/tables/hooks/__tests__/useTableVariant.test.tsx
+++ b/packages/web/src/tables/hooks/__tests__/useTableVariant.test.tsx
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { Table, TableBody } from '../../index';
 import { useTableVariant } from '../useTableVariant';
diff --git a/packages/web/src/tabs/Paddle.tsx b/packages/web/src/tabs/Paddle.tsx
index e865f26c68..504b2acb27 100644
--- a/packages/web/src/tabs/Paddle.tsx
+++ b/packages/web/src/tabs/Paddle.tsx
@@ -124,7 +124,13 @@ export const Paddle = ({
           color={background}
           data-testid={`${testID}--container`}
         >
-          <motion.span className={buttonCss} {...buttonMotionProps}>
+          {/* TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility */}
+          <motion.span
+            {...({
+              className: buttonCss,
+              ...buttonMotionProps,
+            } as React.ComponentProps<typeof motion.span>)}
+          >
             <IconButton
               accessibilityLabel={accessibilityLabel}
               name={direction === 'left' ? 'caretLeft' : 'caretRight'}
@@ -134,9 +140,12 @@ export const Paddle = ({
               variant="secondary"
             />
           </motion.span>
+          {/* TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility */}
           <motion.span
-            className={cx(gradientCss, direction === 'left' ? gradientLeftCss : gradientRightCss)}
-            {...gradientMotionProps}
+            {...({
+              className: cx(gradientCss, direction === 'left' ? gradientLeftCss : gradientRightCss),
+              ...gradientMotionProps,
+            } as React.ComponentProps<typeof motion.span>)}
           />
         </Box>
       )}
diff --git a/packages/web/src/tabs/TabLabel.tsx b/packages/web/src/tabs/TabLabel.tsx
index 1e68a667a5..0b729641c7 100644
--- a/packages/web/src/tabs/TabLabel.tsx
+++ b/packages/web/src/tabs/TabLabel.tsx
@@ -109,13 +109,13 @@ export const TabLabel = memo(
                 <Text as="h2" color={color} display="block" font={font} {...props} />
                 {/* This element is used to ensure the element width doesn't change when we change font-weight */}
                 <Text
+                  aria-hidden="true"
                   as="h2"
+                  className={hiddenCss}
                   color={color}
                   display="block"
                   font={font}
                   {...props}
-                  aria-hidden="true"
-                  className={hiddenCss}
                 />
               </>
             )}
@@ -127,12 +127,12 @@ export const TabLabel = memo(
           ) : (
             <Text
               as="h2"
+              className={variant === 'primary' ? primaryTabLabelCss : undefined}
               color={color}
               display="block"
               font={font}
               id={accessibilityLabelId}
               {...props}
-              className={variant === 'primary' ? primaryTabLabelCss : undefined}
             />
           ))}
         <Collapsible collapsed={!count} direction="horizontal" paddingStart={0.5} role="status">
diff --git a/packages/web/src/tabs/TabNavigation.tsx b/packages/web/src/tabs/TabNavigation.tsx
index fb17752bc8..ba8e57cb0a 100644
--- a/packages/web/src/tabs/TabNavigation.tsx
+++ b/packages/web/src/tabs/TabNavigation.tsx
@@ -166,19 +166,13 @@ export type TabNavigationProps<TabId extends string | undefined = string> =
   TabNavigationBaseProps<TabId>;
 
 type LayoutProps = { width: number; x: number };
-type TabRefs = Ref<{ id: string; ref: React.RefObject<HTMLButtonElement> }[]>;
+type TabRefs = Ref<{ id: string; ref: React.RefObject<HTMLButtonElement | null> }[]>;
 const fallbackLayout: LayoutProps = { width: 0, x: 0 };
 
 type TabNavigationFC = <TabId extends string | undefined = string>(
   props: TabNavigationProps<TabId> & { ref?: ForwardedRef<HTMLElement | null> },
 ) => React.ReactElement;
 
-/**
- * TabNavigation renders a horizontal, tab-based navigation bar.
- * This component has a opinionated default style, but allows for customization through custom Component props.
- * @deprecated Use Tabs instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
 const TabNavigationComponent = memo(
   forwardRef(
     <TabId extends string>(
@@ -297,7 +291,7 @@ const TabNavigationComponent = memo(
         };
       }, []);
 
-      const getScrollIntoViewHandler = useCallback((ref: React.RefObject<HTMLElement>) => {
+      const getScrollIntoViewHandler = useCallback((ref: React.RefObject<HTMLElement | null>) => {
         return function handleFocus() {
           // Container
           const container = scrollRef.current;
@@ -442,7 +436,7 @@ const TabNavigationComponent = memo(
             onScroll={handleOnScroll}
             position="relative"
           >
-            <VStack testID={testID} {...props} padding={0}>
+            <VStack padding={0} testID={testID} {...props}>
               <HStack
                 accessibilityLabel={accessibilityLabel}
                 accessibilityLabelledBy={accessibilityLabelledBy}
@@ -477,4 +471,10 @@ const TabNavigationComponent = memo(
 
 TabNavigationComponent.displayName = 'TabNavigation';
 
+/**
+ * TabNavigation renders a horizontal, tab-based navigation bar.
+ * This component has a opinionated default style, but allows for customization through custom Component props.
+ * @deprecated Use Tabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
+ */
 export const TabNavigation = TabNavigationComponent as TabNavigationFC;
diff --git a/packages/web/src/tabs/Tabs.tsx b/packages/web/src/tabs/Tabs.tsx
index ff0879aabd..f00ddde59d 100644
--- a/packages/web/src/tabs/Tabs.tsx
+++ b/packages/web/src/tabs/Tabs.tsx
@@ -33,7 +33,9 @@ type TabContainerProps = {
 
 const TabContainer = ({ id, registerRef, ...props }: TabContainerProps) => {
   const refCallback = useCallback(
-    (ref: HTMLElement | null) => ref && registerRef(id, ref),
+    (ref: HTMLElement | null) => {
+      if (ref) registerRef(id, ref);
+    },
     [id, registerRef],
   );
   return <div ref={refCallback} {...props} />;
diff --git a/packages/web/src/tabs/__stories__/TabIndicator.stories.tsx b/packages/web/src/tabs/__stories__/TabIndicator.stories.tsx
index 85b0305eb7..cf5379c76c 100644
--- a/packages/web/src/tabs/__stories__/TabIndicator.stories.tsx
+++ b/packages/web/src/tabs/__stories__/TabIndicator.stories.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '../../buttons/Button';
 import { VStack } from '../../layout/VStack';
@@ -7,12 +7,15 @@ import { TabIndicator } from '../TabIndicator';
 
 const getRandomNumber = () => Math.random() * 100 + 100;
 
-export default {
+const meta: Meta = {
   title: 'Components/Tabs/TabIndicator',
   component: TabIndicator,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj;
 
-export const Default: Story = () => {
+const DefaultRender = () => {
   const [width, setWidth] = useState(120);
   const [x, setX] = useState(120);
 
@@ -30,3 +33,7 @@ export const Default: Story = () => {
     </VStack>
   );
 };
+
+export const Default: Story = {
+  render: () => <DefaultRender />,
+};
diff --git a/packages/web/src/tabs/__stories__/TabLabel.stories.tsx b/packages/web/src/tabs/__stories__/TabLabel.stories.tsx
index 3b4fb93a09..2a7a33a4db 100644
--- a/packages/web/src/tabs/__stories__/TabLabel.stories.tsx
+++ b/packages/web/src/tabs/__stories__/TabLabel.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import type { ColorScheme } from '@coinbase/cds-common/core/theme';
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import sample from 'lodash/sample';
 
 import { Button } from '../../buttons/Button';
@@ -9,10 +9,13 @@ import { ThemeProvider } from '../../system/ThemeProvider';
 import { defaultTheme } from '../../themes/defaultTheme';
 import { TabLabel, type TabLabelBaseProps } from '../TabLabel';
 
-export default {
+const meta: Meta = {
   title: 'Components/Tabs/TabLabel',
   component: TabLabel,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj;
 
 type ExampleProps = {
   variant: TabLabelBaseProps['variant'];
@@ -45,7 +48,7 @@ const Example = ({ variant, colorScheme }: ExampleProps) => {
   );
 };
 
-export const Default: Story = () => {
+const DefaultRender = () => {
   return (
     <>
       <Example colorScheme="light" variant="primary" />
@@ -55,3 +58,7 @@ export const Default: Story = () => {
     </>
   );
 };
+
+export const Default: Story = {
+  render: () => <DefaultRender />,
+};
diff --git a/packages/web/src/tabs/__stories__/TabNavigation.stories.tsx b/packages/web/src/tabs/__stories__/TabNavigation.stories.tsx
index b21b766ffe..bfb31efd9e 100644
--- a/packages/web/src/tabs/__stories__/TabNavigation.stories.tsx
+++ b/packages/web/src/tabs/__stories__/TabNavigation.stories.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { loremIpsum } from '@coinbase/cds-common/internal/data/loremIpsum';
 import { sampleTabs } from '@coinbase/cds-common/internal/data/tabs';
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import sample from 'lodash/sample';
 
 import { Button } from '../../buttons/Button';
@@ -35,15 +35,18 @@ const a11ySkipConfig = {
 
 const tabs = sampleTabs.slice(0, 5);
 
-export default {
+const meta: Meta = {
   title: 'Components/Tabs/TabNavigation',
   component: TabNavigation,
   parameters: {
     a11y: { test: 'off' },
   },
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj;
 
-export const Default: Story = () => {
+const DefaultRender = () => {
   const [value, setValue] = useState<TabProps['id']>(tabs[0].id);
 
   return (
@@ -73,9 +76,13 @@ export const Default: Story = () => {
     </>
   );
 };
-Default.parameters = {
-  percy: { enableJavaScript: true },
-  a11y: a11ySkipConfig,
+
+export const Default: Story = {
+  render: () => <DefaultRender />,
+  parameters: {
+    percy: { enableJavaScript: true },
+    a11y: a11ySkipConfig,
+  },
 };
 
 const renderCustomTab = ({ label, ...props }: CustomTabProps) => (
@@ -100,7 +107,7 @@ const someCustomTabs = [
   },
 ];
 
-export const CustomTab: Story = () => {
+const CustomTabRender = () => {
   const [value, setValue] = useState<TabProps['id']>(tabs[0].id);
 
   return (
@@ -143,16 +150,23 @@ export const CustomTab: Story = () => {
   );
 };
 
-CustomTab.parameters = { percy: { enableJavaScript: true }, a11y: a11ySkipConfig };
+export const CustomTab: Story = {
+  render: () => <CustomTabRender />,
+  parameters: { percy: { enableJavaScript: true }, a11y: a11ySkipConfig },
+};
 
-export const WithPaddles: Story = () => {
+const WithPaddlesRender = () => {
   const [value, setValue] = useState<TabProps['id']>(tabs[0].id);
 
   return <TabNavigation onChange={setValue} tabs={sampleTabs} value={value} />;
 };
-WithPaddles.parameters = { percy: { enableJavaScript: true }, a11y: a11ySkipConfig };
 
-export const WithCustomPaddles: Story = () => {
+export const WithPaddles: Story = {
+  render: () => <WithPaddlesRender />,
+  parameters: { percy: { enableJavaScript: true }, a11y: a11ySkipConfig },
+};
+
+const WithCustomPaddlesRender = () => {
   const [value, setValue] = useState<TabProps['id']>(tabs[0].id);
 
   return (
@@ -164,7 +178,11 @@ export const WithCustomPaddles: Story = () => {
     />
   );
 };
-WithCustomPaddles.parameters = { percy: { enableJavaScript: true }, a11y: a11ySkipConfig };
+
+export const WithCustomPaddles: Story = {
+  render: () => <WithCustomPaddlesRender />,
+  parameters: { percy: { enableJavaScript: true }, a11y: a11ySkipConfig },
+};
 
 type TradingActivity = 'buy' | 'sell' | 'convert' | 'send' | 'receive';
 
@@ -176,7 +194,7 @@ const enumTabs: TabProps<TradingActivity>[] = [
   { id: 'receive', label: 'Receive' },
 ];
 
-export const WithEnum: Story = () => {
+const WithEnumRender = () => {
   const [value, setValue] = useState<TradingActivity>('buy');
 
   return (
@@ -190,9 +208,13 @@ export const WithEnum: Story = () => {
     </ThemeProvider>
   );
 };
-WithEnum.parameters = { percy: { enableJavaScript: true }, a11y: a11ySkipConfig };
 
-export const WithDotCountChange: Story = () => {
+export const WithEnum: Story = {
+  render: () => <WithEnumRender />,
+  parameters: { percy: { enableJavaScript: true }, a11y: a11ySkipConfig },
+};
+
+const WithDotCountChangeRender = () => {
   const [value, setValue] = useState<TabProps['id']>(tabs[0].id);
   const [count, setCount] = useState(0);
   // This is just a helper to make a random tab show a count
@@ -242,9 +264,13 @@ export const WithDotCountChange: Story = () => {
     </>
   );
 };
-WithDotCountChange.parameters = { percy: { enableJavaScript: true }, a11y: a11ySkipConfig };
 
-export const Secondary: Story = () => {
+export const WithDotCountChange: Story = {
+  render: () => <WithDotCountChangeRender />,
+  parameters: { percy: { enableJavaScript: true }, a11y: a11ySkipConfig },
+};
+
+const SecondaryRender = () => {
   const [currentTab, setCurrentTab] = useState<TabProps['id']>();
 
   return (
@@ -272,9 +298,13 @@ export const Secondary: Story = () => {
     </>
   );
 };
-Secondary.parameters = { percy: { enableJavaScript: true }, a11y: a11ySkipConfig };
 
-export const AccessibilityTest: Story = () => {
+export const Secondary: Story = {
+  render: () => <SecondaryRender />,
+  parameters: { percy: { enableJavaScript: true }, a11y: a11ySkipConfig },
+};
+
+const AccessibilityTestRender = () => {
   const [currentTab, setCurrentTab] = useState<TabProps['id']>(tabs[0].id);
 
   return (
@@ -324,7 +354,11 @@ export const AccessibilityTest: Story = () => {
   );
 };
 
-export const Disabled: Story = () => {
+export const AccessibilityTest: Story = {
+  render: () => <AccessibilityTestRender />,
+};
+
+const DisabledRender = () => {
   const [currentTab, setCurrentTab] = useState<TabProps['id']>();
 
   return (
@@ -338,9 +372,13 @@ export const Disabled: Story = () => {
     </VStack>
   );
 };
-Disabled.parameters = { percy: { enableJavaScript: true }, a11y: a11ySkipConfig };
 
-export const WithPadding: Story = () => {
+export const Disabled: Story = {
+  render: () => <DisabledRender />,
+  parameters: { percy: { enableJavaScript: true }, a11y: a11ySkipConfig },
+};
+
+const WithPaddingRender = () => {
   const [currentTab, setCurrentTab] = useState<TabProps['id']>(tabs[0].id);
 
   return (
@@ -353,4 +391,8 @@ export const WithPadding: Story = () => {
     />
   );
 };
-WithPadding.parameters = { percy: { enableJavaScript: true }, a11y: a11ySkipConfig };
+
+export const WithPadding: Story = {
+  render: () => <WithPaddingRender />,
+  parameters: { percy: { enableJavaScript: true }, a11y: a11ySkipConfig },
+};
diff --git a/packages/web/src/tabs/__tests__/TabIndicator.test.tsx b/packages/web/src/tabs/__tests__/TabIndicator.test.tsx
index d8d8c1a7ab..5264719e1d 100644
--- a/packages/web/src/tabs/__tests__/TabIndicator.test.tsx
+++ b/packages/web/src/tabs/__tests__/TabIndicator.test.tsx
@@ -38,7 +38,7 @@ describe('TabIndicator', () => {
 
   it('renders with ref', () => {
     const TEST_ID = 'tabIndicator';
-    const ref = { current: undefined } as unknown as React.RefObject<HTMLDivElement>;
+    const ref = { current: undefined } as unknown as React.RefObject<HTMLDivElement | null>;
     render(<TabIndicator ref={ref} testID={TEST_ID} width={100} x={0} />);
     expect(ref.current).toBeInstanceOf(HTMLElement);
   });
diff --git a/packages/web/src/tour/Tour.tsx b/packages/web/src/tour/Tour.tsx
index c36fd9138c..4f32eda425 100644
--- a/packages/web/src/tour/Tour.tsx
+++ b/packages/web/src/tour/Tour.tsx
@@ -301,7 +301,7 @@ const TourComponent = <TourStepId extends string = string>(_props: TourProps<Tou
     [animationApi, onChange],
   );
 
-  const api = useTour<TourStepId>({ steps, activeTourStep, onChange: handleChange });
+  const api = useTour<TourStepId, HTMLElement>({ steps, activeTourStep, onChange: handleChange });
   const { activeTourStepTarget, setActiveTourStepTarget } = api;
 
   // Component Lifecycle & Side Effects
@@ -378,14 +378,15 @@ const TourComponent = <TourStepId extends string = string>(_props: TourProps<Tou
               style={styles?.root}
             >
               {!(activeTourStep.hideOverlay ?? hideOverlay) && activeTourStepTarget && (
+                // TODO: Remove type assertion after replacing @react-spring/web with framer-motion v11+ for React 19 compatibility
                 <animated.div
-                  className={cx(tourClassNames.mask, classNames?.mask)}
-                  style={tourMaskStyles}
+                  {...({
+                    className: cx(tourClassNames.mask, classNames?.mask),
+                    style: tourMaskStyles,
+                  } as React.ComponentProps<typeof animated.div>)}
                 >
                   <TourMaskComponent
-                    activeTourStepTargetRect={(
-                      activeTourStepTarget as HTMLElement
-                    ).getBoundingClientRect()}
+                    activeTourStepTargetRect={activeTourStepTarget.getBoundingClientRect()}
                     borderRadius={activeTourStep.tourMaskBorderRadius ?? tourMaskBorderRadius}
                     padding={activeTourStep.tourMaskPadding ?? tourMaskPadding}
                   />
@@ -393,9 +394,12 @@ const TourComponent = <TourStepId extends string = string>(_props: TourProps<Tou
               )}
               <div ref={refs.setFloating} style={floatingStyles}>
                 <FocusTrap>
+                  {/* TODO: Remove type assertion after replacing @react-spring/web with framer-motion v11+ for React 19 compatibility */}
                   <animated.div
-                    className={cx(tourClassNames.stepContainer, classNames?.stepContainer)}
-                    style={stepContainerStyle}
+                    {...({
+                      className: cx(tourClassNames.stepContainer, classNames?.stepContainer),
+                      style: stepContainerStyle,
+                    } as React.ComponentProps<typeof animated.div>)}
                   >
                     <RenderedTourStepArrow
                       ref={tourStepArrowRef}
diff --git a/packages/web/src/tour/TourStep.tsx b/packages/web/src/tour/TourStep.tsx
index a608059f7d..7cae8bcbb8 100644
--- a/packages/web/src/tour/TourStep.tsx
+++ b/packages/web/src/tour/TourStep.tsx
@@ -17,7 +17,11 @@ type TourStepProps = {
 export const TourStep = ({ id, children, ...props }: TourStepProps) => {
   const { activeTourStep, setActiveTourStepTarget } = useTourContext();
   const refCallback = useCallback(
-    (ref: HTMLDivElement) => activeTourStep?.id === id && ref && setActiveTourStepTarget(ref),
+    (ref: HTMLDivElement) => {
+      if (activeTourStep?.id === id && ref) {
+        setActiveTourStepTarget(ref);
+      }
+    },
     [activeTourStep, id, setActiveTourStepTarget],
   );
   return (
diff --git a/packages/web/src/typography/Text.tsx b/packages/web/src/typography/Text.tsx
index bc536750ca..8acac1c7d8 100644
--- a/packages/web/src/typography/Text.tsx
+++ b/packages/web/src/typography/Text.tsx
@@ -112,7 +112,10 @@ export type TextBaseProps = Polymorphic.ExtendableProps<
      * @link [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)
      */
     overflow?: 'truncate' | 'clip' | 'wrap' | 'break';
-    /** @danger This is a migration escape hatch. It is not intended to be used normally. */
+    /**
+     * @deprecated Use `style`, `className`, or the `color` prop to set custom text colors. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
+     */
     dangerouslySetColor?: string;
     /**
      * @deprecated Do not use this prop, it is a migration escape hatch. This will be removed in a future major release.
diff --git a/packages/web/src/typography/TextBody.tsx b/packages/web/src/typography/TextBody.tsx
index c7f2f097c0..7aac7fe934 100644
--- a/packages/web/src/typography/TextBody.tsx
+++ b/packages/web/src/typography/TextBody.tsx
@@ -8,8 +8,16 @@ export const textBodyDefaultElement = 'span';
 
 export type TextBodyDefaultElement = typeof textBodyDefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="body"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextBodyBaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="body"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextBodyProps<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextBodyBaseProps
@@ -20,6 +28,10 @@ type TextBodyComponent = (<AsComponent extends React.ElementType = TextBodyDefau
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="body"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextBody: TextBodyComponent = forwardRef<
   React.ReactElement<TextBodyBaseProps>,
   TextBodyBaseProps
diff --git a/packages/web/src/typography/TextCaption.tsx b/packages/web/src/typography/TextCaption.tsx
index de54378025..146dd3315a 100644
--- a/packages/web/src/typography/TextCaption.tsx
+++ b/packages/web/src/typography/TextCaption.tsx
@@ -8,8 +8,16 @@ export const textCaptionDefaultElement = 'span';
 
 export type TextCaptionDefaultElement = typeof textCaptionDefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="caption"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextCaptionBaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="caption"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextCaptionProps<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextCaptionBaseProps
@@ -20,6 +28,10 @@ type TextCaptionComponent = (<AsComponent extends React.ElementType = TextCaptio
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="caption"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextCaption: TextCaptionComponent = forwardRef<
   React.ReactElement<TextCaptionBaseProps>,
   TextCaptionBaseProps
diff --git a/packages/web/src/typography/TextDisplay1.tsx b/packages/web/src/typography/TextDisplay1.tsx
index f732013a76..50af275b10 100644
--- a/packages/web/src/typography/TextDisplay1.tsx
+++ b/packages/web/src/typography/TextDisplay1.tsx
@@ -8,8 +8,16 @@ export const textDisplay1DefaultElement = 'span';
 
 export type TextDisplay1DefaultElement = typeof textDisplay1DefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="display1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextDisplay1BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="display1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextDisplay1Props<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextDisplay1BaseProps
@@ -20,6 +28,10 @@ type TextDisplay1Component = (<AsComponent extends React.ElementType = TextDispl
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="display1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextDisplay1: TextDisplay1Component = forwardRef<
   React.ReactElement<TextDisplay1BaseProps>,
   TextDisplay1BaseProps
diff --git a/packages/web/src/typography/TextDisplay2.tsx b/packages/web/src/typography/TextDisplay2.tsx
index 635353269b..d9da1fd450 100644
--- a/packages/web/src/typography/TextDisplay2.tsx
+++ b/packages/web/src/typography/TextDisplay2.tsx
@@ -8,8 +8,16 @@ export const textDisplay2DefaultElement = 'span';
 
 export type TextDisplay2DefaultElement = typeof textDisplay2DefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="display2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextDisplay2BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="display2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextDisplay2Props<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextDisplay2BaseProps
@@ -20,6 +28,10 @@ type TextDisplay2Component = (<AsComponent extends React.ElementType = TextDispl
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="display2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextDisplay2: TextDisplay2Component = forwardRef<
   React.ReactElement<TextDisplay2BaseProps>,
   TextDisplay2BaseProps
diff --git a/packages/web/src/typography/TextDisplay3.tsx b/packages/web/src/typography/TextDisplay3.tsx
index 70d3910a8d..5c80d14c91 100644
--- a/packages/web/src/typography/TextDisplay3.tsx
+++ b/packages/web/src/typography/TextDisplay3.tsx
@@ -8,8 +8,16 @@ export const textDisplay3DefaultElement = 'span';
 
 export type TextDisplay3DefaultElement = typeof textDisplay3DefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="display3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextDisplay3BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="display3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextDisplay3Props<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextDisplay3BaseProps
@@ -20,6 +28,10 @@ type TextDisplay3Component = (<AsComponent extends React.ElementType = TextDispl
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="display3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextDisplay3: TextDisplay3Component = forwardRef<
   React.ReactElement<TextDisplay3BaseProps>,
   TextDisplay3BaseProps
diff --git a/packages/web/src/typography/TextHeadline.tsx b/packages/web/src/typography/TextHeadline.tsx
index fa5baa81c0..82d4d1e8fc 100644
--- a/packages/web/src/typography/TextHeadline.tsx
+++ b/packages/web/src/typography/TextHeadline.tsx
@@ -8,8 +8,16 @@ export const textHeadlineDefaultElement = 'span';
 
 export type TextHeadlineDefaultElement = typeof textHeadlineDefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="headline"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextHeadlineBaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="headline"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextHeadlineProps<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextHeadlineBaseProps
@@ -20,6 +28,10 @@ type TextHeadlineComponent = (<AsComponent extends React.ElementType = TextHeadl
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="headline"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextHeadline: TextHeadlineComponent = forwardRef<
   React.ReactElement<TextHeadlineBaseProps>,
   TextHeadlineBaseProps
diff --git a/packages/web/src/typography/TextInherited.tsx b/packages/web/src/typography/TextInherited.tsx
index 9bce78b8d1..1445b87f62 100644
--- a/packages/web/src/typography/TextInherited.tsx
+++ b/packages/web/src/typography/TextInherited.tsx
@@ -8,8 +8,16 @@ export const textInheritDefaultElement = 'span';
 
 export type TextInheritDefaultElement = typeof textInheritDefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="inherit"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextInheritBaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="inherit"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextInheritProps<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextInheritBaseProps
@@ -20,6 +28,10 @@ type TextInheritComponent = (<AsComponent extends React.ElementType = TextInheri
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="inherit"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextInherited: TextInheritComponent = forwardRef<
   React.ReactElement<TextInheritBaseProps>,
   TextInheritBaseProps
diff --git a/packages/web/src/typography/TextLabel1.tsx b/packages/web/src/typography/TextLabel1.tsx
index ed06ce0001..29c72cecfa 100644
--- a/packages/web/src/typography/TextLabel1.tsx
+++ b/packages/web/src/typography/TextLabel1.tsx
@@ -8,8 +8,16 @@ export const textLabel1DefaultElement = 'span';
 
 export type TextLabel1DefaultElement = typeof textLabel1DefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="label1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextLabel1BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="label1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextLabel1Props<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextLabel1BaseProps
@@ -20,6 +28,10 @@ type TextLabel1Component = (<AsComponent extends React.ElementType = TextLabel1D
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="label1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextLabel1: TextLabel1Component = forwardRef<
   React.ReactElement<TextLabel1BaseProps>,
   TextLabel1BaseProps
diff --git a/packages/web/src/typography/TextLabel2.tsx b/packages/web/src/typography/TextLabel2.tsx
index d9a3ac11f9..423f7bebdc 100644
--- a/packages/web/src/typography/TextLabel2.tsx
+++ b/packages/web/src/typography/TextLabel2.tsx
@@ -8,8 +8,16 @@ export const textLabel2DefaultElement = 'span';
 
 export type TextLabel2DefaultElement = typeof textLabel2DefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="label2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextLabel2BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="label2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextLabel2Props<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextLabel2BaseProps
@@ -20,6 +28,10 @@ type TextLabel2Component = (<AsComponent extends React.ElementType = TextLabel2D
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="label2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextLabel2: TextLabel2Component = forwardRef<
   React.ReactElement<TextLabel2BaseProps>,
   TextLabel2BaseProps
diff --git a/packages/web/src/typography/TextLegal.tsx b/packages/web/src/typography/TextLegal.tsx
index 18b1ea0fc5..e9f8c9a267 100644
--- a/packages/web/src/typography/TextLegal.tsx
+++ b/packages/web/src/typography/TextLegal.tsx
@@ -8,8 +8,16 @@ export const textLegalDefaultElement = 'span';
 
 export type TextLegalDefaultElement = typeof textLegalDefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="legal"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextLegalBaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="legal"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextLegalProps<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextLegalBaseProps
@@ -20,6 +28,10 @@ type TextLegalComponent = (<AsComponent extends React.ElementType = TextLegalDef
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="legal"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextLegal: TextLegalComponent = forwardRef<
   React.ReactElement<TextLegalBaseProps>,
   TextLegalBaseProps
diff --git a/packages/web/src/typography/TextTitle1.tsx b/packages/web/src/typography/TextTitle1.tsx
index 71e702b41a..87fe0930c0 100644
--- a/packages/web/src/typography/TextTitle1.tsx
+++ b/packages/web/src/typography/TextTitle1.tsx
@@ -8,8 +8,16 @@ export const textTitle1DefaultElement = 'span';
 
 export type TextTitle1DefaultElement = typeof textTitle1DefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="title1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle1BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="title1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle1Props<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextTitle1BaseProps
@@ -20,6 +28,10 @@ type TextTitle1Component = (<AsComponent extends React.ElementType = TextTitle1D
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="title1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextTitle1: TextTitle1Component = forwardRef<
   React.ReactElement<TextTitle1BaseProps>,
   TextTitle1BaseProps
diff --git a/packages/web/src/typography/TextTitle2.tsx b/packages/web/src/typography/TextTitle2.tsx
index 92dc96959d..dc2625beb3 100644
--- a/packages/web/src/typography/TextTitle2.tsx
+++ b/packages/web/src/typography/TextTitle2.tsx
@@ -8,8 +8,16 @@ export const textTitle2DefaultElement = 'span';
 
 export type TextTitle2DefaultElement = typeof textTitle2DefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="title2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle2BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="title2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle2Props<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextTitle2BaseProps
@@ -20,6 +28,10 @@ type TextTitle2Component = (<AsComponent extends React.ElementType = TextTitle2D
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="title2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextTitle2: TextTitle2Component = forwardRef<
   React.ReactElement<TextTitle2BaseProps>,
   TextTitle2BaseProps
diff --git a/packages/web/src/typography/TextTitle3.tsx b/packages/web/src/typography/TextTitle3.tsx
index 1c12e9617f..f645a67c71 100644
--- a/packages/web/src/typography/TextTitle3.tsx
+++ b/packages/web/src/typography/TextTitle3.tsx
@@ -8,8 +8,16 @@ export const textTitle3DefaultElement = 'span';
 
 export type TextTitle3DefaultElement = typeof textTitle3DefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="title3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle3BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="title3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle3Props<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextTitle3BaseProps
@@ -20,6 +28,10 @@ type TextTitle3Component = (<AsComponent extends React.ElementType = TextTitle3D
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="title3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextTitle3: TextTitle3Component = forwardRef<
   React.ReactElement<TextTitle3BaseProps>,
   TextTitle3BaseProps
diff --git a/packages/web/src/typography/TextTitle4.tsx b/packages/web/src/typography/TextTitle4.tsx
index 697cfc95d1..cabb088a55 100644
--- a/packages/web/src/typography/TextTitle4.tsx
+++ b/packages/web/src/typography/TextTitle4.tsx
@@ -8,8 +8,16 @@ export const textTitle4DefaultElement = 'span';
 
 export type TextTitle4DefaultElement = typeof textTitle4DefaultElement;
 
+/**
+ * @deprecated Use `Text` with `font="title4"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle4BaseProps = TextBaseProps;
 
+/**
+ * @deprecated Use `Text` with `font="title4"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export type TextTitle4Props<AsComponent extends React.ElementType> = Polymorphic.Props<
   AsComponent,
   TextTitle4BaseProps
@@ -20,6 +28,10 @@ type TextTitle4Component = (<AsComponent extends React.ElementType = TextTitle4D
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 
+/**
+ * @deprecated Use `Text` with `font="title4"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextTitle4: TextTitle4Component = forwardRef<
   React.ReactElement<TextTitle4BaseProps>,
   TextTitle4BaseProps
diff --git a/packages/web/src/typography/__stories__/Link.stories.tsx b/packages/web/src/typography/__stories__/Link.stories.tsx
index ecb6202544..eaef50f792 100644
--- a/packages/web/src/typography/__stories__/Link.stories.tsx
+++ b/packages/web/src/typography/__stories__/Link.stories.tsx
@@ -5,6 +5,11 @@ import { noop } from '@coinbase/cds-utils';
 import { Link } from '../Link';
 import { Text } from '../Text';
 
+// React 19 type compatibility: react-router's published types can be out of sync with our React types during upgrades.
+// These stories only need runtime behavior, so we intentionally loosen the types here.
+const RouterAny = Router as unknown as React.FC<React.PropsWithChildren>;
+const RRLinkAny = RRLink as unknown as React.ElementType;
+
 export const Default = () => (
   <div>
     <Link href="https://www.google.com/">Default</Link>
@@ -139,21 +144,21 @@ export const OnClick = () => (
 
 export const RenderContainer = () => (
   <div>
-    <Router>
-      <Link as={RRLink} color="fgPrimary" font="body" onClick={noop} to="/invoices">
+    <RouterAny>
+      <Link as={RRLinkAny} color="fgPrimary" font="body" onClick={noop} to="/invoices">
         Test renderContainer
       </Link>
-    </Router>
+    </RouterAny>
   </div>
 );
 
 export const RenderContainerColor = () => (
   <div>
-    <Router>
-      <Link as={RRLink} color="fgNegative" font="label1" onClick={noop} to="/invoices">
+    <RouterAny>
+      <Link as={RRLinkAny} color="fgNegative" font="label1" onClick={noop} to="/invoices">
         Test renderContainer
       </Link>
-    </Router>
+    </RouterAny>
   </div>
 );
 
diff --git a/packages/web/src/typography/__stories__/Text.stories.tsx b/packages/web/src/typography/__stories__/Text.stories.tsx
index 5bbdb3807f..43eb5d4e6e 100644
--- a/packages/web/src/typography/__stories__/Text.stories.tsx
+++ b/packages/web/src/typography/__stories__/Text.stories.tsx
@@ -3,65 +3,57 @@ import React from 'react';
 import { Box } from '../../layout/Box';
 import { VStack } from '../../layout/VStack';
 import type { TextProps } from '../index';
-import {
-  Text,
-  TextBody,
-  TextCaption,
-  TextDisplay1,
-  TextDisplay2,
-  TextDisplay3,
-  TextHeadline,
-  TextLabel1,
-  TextLabel2,
-  TextLegal,
-  TextTitle1,
-  TextTitle2,
-  TextTitle3,
-  TextTitle4,
-} from '../index';
-
-const textComponents = [
-  TextTitle3,
-  TextTitle4,
-  TextHeadline,
-  TextBody,
-  TextLabel1,
-  TextLabel2,
-  TextCaption,
-  TextLegal,
+import { Text } from '../index';
+
+type FontVariant =
+  | 'title3'
+  | 'title4'
+  | 'headline'
+  | 'body'
+  | 'label1'
+  | 'label2'
+  | 'caption'
+  | 'legal';
+
+const textFontVariants: FontVariant[] = [
+  'title3',
+  'title4',
+  'headline',
+  'body',
+  'label1',
+  'label2',
+  'caption',
+  'legal',
 ];
 
 const renderHeaderComponents = (props?: TextProps<'h1' | 'h2' | 'h3' | 'h4'>) => (
   <>
-    <TextDisplay1 as="h1" {...props}>
+    <Text as="h1" font="display1" {...props}>
       Display1
-    </TextDisplay1>
-    <TextDisplay2 as="h2" {...props}>
+    </Text>
+    <Text as="h2" font="display2" {...props}>
       Display2
-    </TextDisplay2>
-    <TextDisplay3 as="h3" {...props}>
+    </Text>
+    <Text as="h3" font="display3" {...props}>
       Display3
-    </TextDisplay3>
-    <TextTitle1 as="h3" {...props}>
+    </Text>
+    <Text as="h3" font="title1" {...props}>
       Title1
-    </TextTitle1>
-    <TextTitle2 as="h4" {...props}>
+    </Text>
+    <Text as="h4" font="title2" {...props}>
       Title2
-    </TextTitle2>
+    </Text>
   </>
 );
 
 export const Normal = () => (
   <>
     {renderHeaderComponents({ display: 'block' })}
-    {textComponents.map((Component) => {
-      const name = (Component as { displayName?: string }).displayName?.slice(4);
-      return (
-        <Component key={name} as="p" display="block">
-          {name}
-        </Component>
-      );
-    })}
+    {textFontVariants.map((font) => (
+      <Text key={font} as="p" display="block" font={font}>
+        {font.charAt(0).toUpperCase() + font.slice(1)}
+      </Text>
+    ))}
   </>
 );
 
@@ -83,62 +75,59 @@ export const TextWithInherit = () => {
 export const MonoFont = () => (
   <>
     {renderHeaderComponents({ mono: true, display: 'block' })}
-    {textComponents.map((Component) => {
-      const name = (Component as { displayName?: string }).displayName?.slice(4);
-      return (
-        <Component key={name} mono as="p" display="block">
-          {name}
-        </Component>
-      );
-    })}
+    {textFontVariants.map((font) => (
+      <Text key={font} mono as="p" display="block" font={font}>
+        {font.charAt(0).toUpperCase() + font.slice(1)}
+      </Text>
+    ))}
   </>
 );
 
 export const SlashedZero = () => (
-  <TextBody slashedZero as="p">
+  <Text slashedZero as="p" font="body">
     OZY28019
-  </TextBody>
+  </Text>
 );
 
 export const TabularNumbers = () => (
   <>
-    <TextBody tabularNumbers as="p" display="block" textAlign="end">
+    <Text tabularNumbers as="p" display="block" font="body" textAlign="end">
       91.23450
-    </TextBody>
-    <TextBody tabularNumbers as="p" display="block" textAlign="end">
+    </Text>
+    <Text tabularNumbers as="p" display="block" font="body" textAlign="end">
       11.98762
-    </TextBody>
+    </Text>
   </>
 );
 
 export const SelectableNone = () => (
-  <TextBody as="p" display="block" userSelect="none">
+  <Text as="p" display="block" font="body" userSelect="none">
     BTC
-  </TextBody>
+  </Text>
 );
 
 export const SelectableText = () => (
-  <TextBody as="p" display="block" userSelect="text">
+  <Text as="p" display="block" font="body" userSelect="text">
     Balance: 1,820,29.56
-  </TextBody>
+  </Text>
 );
 
 export const SelectableAll = () => (
-  <TextBody slashedZero as="p" display="block" userSelect="all">
+  <Text slashedZero as="p" display="block" font="body" userSelect="all">
     bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh
-  </TextBody>
+  </Text>
 );
 
 export const Underline = () => (
-  <TextBody underline as="p" display="block">
+  <Text underline as="p" display="block" font="body">
     Learn more
-  </TextBody>
+  </Text>
 );
 
 export const Strikethrough = () => (
-  <TextBody as="s" textDecoration="line-through">
+  <Text as="s" font="body" textDecoration="line-through">
     Manual verification
-  </TextBody>
+  </Text>
 );
 
 const MediumContainer = ({ children }: { children?: React.ReactNode }) => (
@@ -149,88 +138,88 @@ const MediumContainer = ({ children }: { children?: React.ReactNode }) => (
 
 export const NoWrap = () => (
   <MediumContainer>
-    <TextBody noWrap as="p" display="block">
+    <Text noWrap as="p" display="block" font="body">
       As with any asset, the value of Digital Currencies can
-    </TextBody>
+    </Text>
   </MediumContainer>
 );
 
 export const TextOverflowEllipsis = () => (
   <MediumContainer>
-    <TextBody as="p" display="block" overflow="truncate">
+    <Text as="p" display="block" font="body" overflow="truncate">
       As with any asset, the value of Digital Currencies can go up or down and there can be a
       substantial risk that you lose money buying, selling, holding, or investing in digital
       currencies. You should carefully consider whether trading or holding Digital Currencies is
       suitable for you in light of your financial condition. Coinbase is not registered with the
       U.S. Securities and Exchange Commission and does not offer securities services in the United
       States or to U.S. persons.
-    </TextBody>
+    </Text>
   </MediumContainer>
 );
 
 export const TextOverflowClip = () => (
   <MediumContainer>
-    <TextBody as="p" display="block" overflow="clip">
+    <Text as="p" display="block" font="body" overflow="clip">
       Crypto address 0xf847047c69726b4049a5b866c8fa37cfe4ed614f. As with any asset, the value of
       Digital Currencies can go up or down and there can be a substantial risk that you lose money
       buying, selling, holding, or investing in digital currencies. You should carefully consider
       whether trading or holding Digital Currencies is suitable for you in light of your financial
       condition. Coinbase is not registered with the U.S. Securities and Exchange Commission and
       does not offer securities services in the United States or to U.S. persons.
-    </TextBody>
+    </Text>
   </MediumContainer>
 );
 
 export const TextNumberOfLines = () => (
   <VStack maxWidth={300}>
-    <TextBody as="p" display="block" numberOfLines={2}>
+    <Text as="p" display="block" font="body" numberOfLines={2}>
       Crypto address 0xf847047c69726b4049a5b866c8fa37cfe4ed614f. As with any asset, the value of
       Digital Currencies can go up or down and there can be a substantial risk that you lose money
       buying, selling, holding, or investing in digital currencies. You should carefully consider
       whether trading or holding Digital Currencies is suitable for you in light of your financial
       condition. Coinbase is not registered with the U.S. Securities and Exchange Commission and
       does not offer securities services in the United States or to U.S. persons.
-    </TextBody>
+    </Text>
   </VStack>
 );
 
 export const TextNumberOfLinesSiblings = () => (
   <VStack gap={3} maxWidth={300}>
-    <TextBody as="p" display="block" numberOfLines={1} overflow="break">
+    <Text as="p" display="block" font="body" numberOfLines={1} overflow="break">
       Crypto address 0xf847047c69726b4049a5b866c8fa37cfe4ed614f. As with any asset, the value of
       Digital Currencies can go up or down and there can be a substantial risk that you lose money
       buying, selling, holding, or investing in digital currencies. You should carefully consider
       whether trading or holding Digital Currencies is suitable for you in light of your financial
       condition. Coinbase is not registered with the U.S. Securities and Exchange Commission and
       does not offer securities services in the United States or to U.S. persons.
-    </TextBody>
-    <TextBody as="p" display="block" numberOfLines={2} overflow="break">
+    </Text>
+    <Text as="p" display="block" font="body" numberOfLines={2} overflow="break">
       Crypto address 0xf847047c69726b4049a5b866c8fa37cfe4ed614f. As with any asset, the value of
       Digital Currencies can go up or down and there can be a substantial risk that you lose money
       buying, selling, holding, or investing in digital currencies. You should carefully consider
       whether trading or holding Digital Currencies is suitable for you in light of your financial
       condition. Coinbase is not registered with the U.S. Securities and Exchange Commission and
       does not offer securities services in the United States or to U.S. persons.
-    </TextBody>
-    <TextBody as="p" display="block" numberOfLines={3} overflow="break">
+    </Text>
+    <Text as="p" display="block" font="body" numberOfLines={3} overflow="break">
       Crypto address 0xf847047c69726b4049a5b866c8fa37cfe4ed614f. As with any asset, the value of
       Digital Currencies can go up or down and there can be a substantial risk that you lose money
       buying, selling, holding, or investing in digital currencies. You should carefully consider
       whether trading or holding Digital Currencies is suitable for you in light of your financial
       condition. Coinbase is not registered with the U.S. Securities and Exchange Commission and
       does not offer securities services in the United States or to U.S. persons.
-    </TextBody>
+    </Text>
   </VStack>
 );
 
 export const TextNumberOfLinesNested = () => (
   <VStack gap={3} maxWidth={300}>
-    <TextBody as="p" display="block" numberOfLines={2}>
-      <TextBody as="p" display="block" numberOfLines={3}>
+    <Text as="p" display="block" font="body" numberOfLines={2}>
+      <Text as="p" display="block" font="body" numberOfLines={3}>
         The parent Text says this should only wrap to 2 lines, but the child which actually renders
         this text says it should wrap up to 3 lines.
-      </TextBody>
-    </TextBody>
+      </Text>
+    </Text>
   </VStack>
 );
 
@@ -238,14 +227,14 @@ export const TextNumberOfLinesCustomSpacing = () => {
   return (
     <VStack gap={3} maxWidth={300}>
       <Box as="span" padding={2}>
-        <TextBody as="p" display="block" numberOfLines={2}>
+        <Text as="p" display="block" font="body" numberOfLines={2}>
           Crypto address 0xf847047c69726b4049a5b866c8fa37cfe4ed614f. As with any asset, the value of
           Digital Currencies can go up or down and there can be a substantial risk that you lose
           money buying, selling, holding, or investing in digital currencies. You should carefully
           consider whether trading or holding Digital Currencies is suitable for you in light of
           your financial condition. Coinbase is not registered with the U.S. Securities and Exchange
           Commission and does not offer securities services in the United States or to U.S. persons.
-        </TextBody>
+        </Text>
       </Box>
       <Box
         as="span"
@@ -255,87 +244,92 @@ export const TextNumberOfLinesCustomSpacing = () => {
           desktop: 2,
         }}
       >
-        <TextBody as="p" display="block" numberOfLines={2}>
+        <Text as="p" display="block" font="body" numberOfLines={2}>
           Crypto address 0xf847047c69726b4049a5b866c8fa37cfe4ed614f. As with any asset, the value of
           Digital Currencies can go up or down and there can be a substantial risk that you lose
           money buying, selling, holding, or investing in digital currencies. You should carefully
           consider whether trading or holding Digital Currencies is suitable for you in light of
           your financial condition. Coinbase is not registered with the U.S. Securities and Exchange
           Commission and does not offer securities services in the United States or to U.S. persons.
-        </TextBody>
+        </Text>
       </Box>
     </VStack>
   );
 };
 
 export const Uppercase = () => (
-  <TextBody as="p" display="block" textTransform="uppercase">
+  <Text as="p" display="block" font="body" textTransform="uppercase">
     uppercase
-  </TextBody>
+  </Text>
 );
 
 export const Lowercase = () => (
-  <TextBody as="p" display="block" textTransform="lowercase">
+  <Text as="p" display="block" font="body" textTransform="lowercase">
     Lowercase
-  </TextBody>
+  </Text>
 );
 
 export const Capitalize = () => (
-  <TextBody as="p" display="block" textTransform="capitalize">
+  <Text as="p" display="block" font="body" textTransform="capitalize">
     capitalize
-  </TextBody>
+  </Text>
 );
 
-export const Sub = () => <TextBody as="sub">sub</TextBody>;
+export const Sub = () => (
+  <Text as="sub" font="body">
+    sub
+  </Text>
+);
 
-export const Strong = () => <TextBody as="strong">strong</TextBody>;
+export const Strong = () => (
+  <Text as="strong" font="body">
+    strong
+  </Text>
+);
 
 export const Bold = () => (
-  <TextBody as="p" display="block">
+  <Text as="p" display="block" font="body">
     b
-  </TextBody>
+  </Text>
 );
 
 export const DescriptionDlDd = () => (
   <dl>
-    <TextBody as="dt" display="block">
+    <Text as="dt" display="block" font="body">
       Coffee
-    </TextBody>
-    <TextBody as="dd" display="block">
+    </Text>
+    <Text as="dd" display="block" font="body">
       Black hot drink
-    </TextBody>
+    </Text>
     <div>
-      <TextBody as="dt" display="block">
+      <Text as="dt" display="block" font="body">
         Milk
-      </TextBody>
-      <TextBody as="dd" display="block">
+      </Text>
+      <Text as="dd" display="block" font="body">
         White cold drink
-      </TextBody>
+      </Text>
     </div>
   </dl>
 );
 
 export const Time = () => (
-  <TextBody as="time" dateTime="2020-10-10">
+  <Text as="time" dateTime="2020-10-10" font="body">
     2020-10-10
-  </TextBody>
+  </Text>
 );
 
 export const CustomStyle = () => (
   <>
     {renderHeaderComponents({ style: { background: 'coral', display: 'block' } })}
-    {textComponents.map((Component) => {
-      const name = (Component as { displayName?: string }).displayName?.slice(4);
-      return (
-        <Component key={name} as="p" display="block" style={{ background: 'coral ' }}>
-          {name}
-        </Component>
-      );
-    })}
+    {textFontVariants.map((font) => (
+      <Text key={font} as="p" display="block" font={font} style={{ background: 'coral ' }}>
+        {font.charAt(0).toUpperCase() + font.slice(1)}
+      </Text>
+    ))}
   </>
 );
 
 export default {
   title: 'Components/Text (tsx)',
-  component: TextDisplay1,
+  component: Text,
 };
diff --git a/packages/web/src/visualizations/ProgressCircle.tsx b/packages/web/src/visualizations/ProgressCircle.tsx
index 2a218fd678..3932b89108 100644
--- a/packages/web/src/visualizations/ProgressCircle.tsx
+++ b/packages/web/src/visualizations/ProgressCircle.tsx
@@ -31,7 +31,7 @@ export type ProgressCircleBaseProps = ProgressBaseProps & {
    */
   hideContent?: boolean;
   /**
-   * @deprecated Use hideContent instead. This will be removed in a future major release.
+   * @deprecated Use `hideContent` instead. This will be removed in a future major release.
    * @deprecationExpectedRemoval v8
    * Toggle used to hide the text rendered inside the circle.
    */
diff --git a/packages/web/src/visualizations/VisualizationContainer.tsx b/packages/web/src/visualizations/VisualizationContainer.tsx
index 3ef13415c4..e6affacb5f 100644
--- a/packages/web/src/visualizations/VisualizationContainer.tsx
+++ b/packages/web/src/visualizations/VisualizationContainer.tsx
@@ -1,5 +1,4 @@
 import React, { memo } from 'react';
-import type { DimensionValue } from '@coinbase/cds-common/types';
 import { useVisualizationDimensions } from '@coinbase/cds-common/visualizations/useVisualizationDimensions';
 
 import { useDimensions } from '../hooks/useDimensions';
@@ -12,9 +11,9 @@ export type VisualizationContainerDimension = {
 };
 
 export type VisualizationContainerBaseProps = {
-  width: DimensionValue;
-  height: DimensionValue;
-  minHeight?: DimensionValue; // can be used when a width calculation is only necessary
+  width: React.CSSProperties['width'];
+  height: React.CSSProperties['height'];
+  minHeight?: React.CSSProperties['minHeight']; // can be used when a width calculation is only necessary
   children: (dimensions: VisualizationContainerDimension) => React.ReactNode;
 };
 
@@ -26,7 +25,7 @@ Some visualizations need a static width to render. This container can be dynamic
 export const VisualizationContainer: React.FC<VisualizationContainerProps> = memo(
   ({ width, height, children }) => {
     const { observe, width: boxWidth, height: boxHeight } = useDimensions();
-    const dimensions = useVisualizationDimensions({
+    const dimensions = useVisualizationDimensions<React.CSSProperties['width']>({
       userDefinedWidth: width,
       userDefinedHeight: height,
       calculatedWidth: boxWidth,
diff --git a/packages/web-visualization/src/chart/CartesianChart.tsx b/packages/web/src/visualizations/chart/CartesianChart.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/CartesianChart.tsx
rename to packages/web/src/visualizations/chart/CartesianChart.tsx
index 6dd7c42cc7..48c8d22b90 100644
--- a/packages/web-visualization/src/chart/CartesianChart.tsx
+++ b/packages/web/src/visualizations/chart/CartesianChart.tsx
@@ -1,10 +1,11 @@
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
 import type { Rect } from '@coinbase/cds-common/types';
-import { cx } from '@coinbase/cds-web';
-import { useDimensions } from '@coinbase/cds-web/hooks/useDimensions';
-import { Box, type BoxBaseProps, type BoxProps } from '@coinbase/cds-web/layout';
 import { css } from '@linaria/core';
 
+import { useDimensions } from '../../hooks/useDimensions';
+import { cx } from '../../index';
+import { Box, type BoxBaseProps, type BoxProps } from '../../layout';
+
 import { ScrubberProvider, type ScrubberProviderProps } from './scrubber/ScrubberProvider';
 import { CartesianChartProvider } from './ChartProvider';
 import { Legend } from './legend';
diff --git a/packages/web-visualization/src/chart/ChartProvider.tsx b/packages/web/src/visualizations/chart/ChartProvider.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/ChartProvider.tsx
rename to packages/web/src/visualizations/chart/ChartProvider.tsx
diff --git a/packages/web-visualization/src/chart/Path.tsx b/packages/web/src/visualizations/chart/Path.tsx
similarity index 93%
rename from packages/web-visualization/src/chart/Path.tsx
rename to packages/web/src/visualizations/chart/Path.tsx
index 0aebd8c546..e48649725c 100644
--- a/packages/web-visualization/src/chart/Path.tsx
+++ b/packages/web/src/visualizations/chart/Path.tsx
@@ -117,11 +117,14 @@ const AnimatedPath = memo<Omit<PathProps, 'animate' | 'clipRect' | 'clipOffset'
 
     return (
       <motion.path
-        animate={animateEnterOpacity ? { opacity: 1 } : undefined}
-        d={interpolatedPath}
-        initial={animateEnterOpacity ? { opacity: 0 } : false}
-        transition={animateEnterOpacity ? { opacity: transitions?.enterOpacity } : undefined}
-        {...pathProps}
+        // TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility
+        {...({
+          animate: animateEnterOpacity ? { opacity: 1 } : undefined,
+          initial: animateEnterOpacity ? { opacity: 0 } : false,
+          transition: animateEnterOpacity ? { opacity: transitions?.enterOpacity } : undefined,
+          d: interpolatedPath,
+          ...pathProps,
+        } as React.ComponentProps<typeof motion.path>)}
       />
     );
   },
diff --git a/packages/web-visualization/src/chart/PeriodSelector.tsx b/packages/web/src/visualizations/chart/PeriodSelector.tsx
similarity index 93%
rename from packages/web-visualization/src/chart/PeriodSelector.tsx
rename to packages/web/src/visualizations/chart/PeriodSelector.tsx
index e4ec4fba28..71c9ba1f49 100644
--- a/packages/web-visualization/src/chart/PeriodSelector.tsx
+++ b/packages/web/src/visualizations/chart/PeriodSelector.tsx
@@ -1,18 +1,19 @@
 import React, { forwardRef, memo, useMemo } from 'react';
-import { cx } from '@coinbase/cds-web';
-import type { Polymorphic } from '@coinbase/cds-web/core/polymorphism';
-import { Box } from '@coinbase/cds-web/layout';
+import { css } from '@linaria/core';
+import { m as motion } from 'framer-motion';
+
+import type { Polymorphic } from '../../core/polymorphism';
+import { cx } from '../../index';
+import { Box } from '../../layout';
 import {
   SegmentedTabs,
   type SegmentedTabsProps,
   type TabComponent,
   type TabsActiveIndicatorProps,
   tabsTransitionConfig,
-} from '@coinbase/cds-web/tabs';
-import { SegmentedTab, type SegmentedTabProps } from '@coinbase/cds-web/tabs/SegmentedTab';
-import { Text, type TextBaseProps } from '@coinbase/cds-web/typography';
-import { css } from '@linaria/core';
-import { m as motion } from 'framer-motion';
+} from '../../tabs';
+import { SegmentedTab, type SegmentedTabProps } from '../../tabs/SegmentedTab';
+import { Text, type TextBaseProps } from '../../typography';
 
 const MotionBox = motion(Box);
 
diff --git a/packages/web-visualization/src/chart/__stories__/CartesianChart.stories.tsx b/packages/web/src/visualizations/chart/__stories__/CartesianChart.stories.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/__stories__/CartesianChart.stories.tsx
rename to packages/web/src/visualizations/chart/__stories__/CartesianChart.stories.tsx
index 35819a4e93..47b421497c 100644
--- a/packages/web-visualization/src/chart/__stories__/CartesianChart.stories.tsx
+++ b/packages/web/src/visualizations/chart/__stories__/CartesianChart.stories.tsx
@@ -2,13 +2,13 @@ import React, { memo, useCallback, useId, useMemo, useState } from 'react';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
 import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
-import { Radio } from '@coinbase/cds-web/controls/Radio';
-import { Box, type BoxBaseProps, Divider, HStack, VStack } from '@coinbase/cds-web/layout';
-import { RemoteImage } from '@coinbase/cds-web/media';
-import { SectionHeader } from '@coinbase/cds-web/section-header/SectionHeader';
-import { Pressable } from '@coinbase/cds-web/system';
-import { Text } from '@coinbase/cds-web/typography';
 
+import { Radio } from '../../../controls/Radio';
+import { Box, type BoxBaseProps, Divider, HStack, VStack } from '../../../layout';
+import { RemoteImage } from '../../../media';
+import { SectionHeader } from '../../../section-header/SectionHeader';
+import { Pressable } from '../../../system';
+import { Text } from '../../../typography';
 import { Area } from '../area/Area';
 import { XAxis, YAxis } from '../axis';
 import { useCartesianChartContext } from '../ChartProvider';
diff --git a/packages/web-visualization/src/chart/__stories__/ChartTransitions.stories.tsx b/packages/web/src/visualizations/chart/__stories__/ChartTransitions.stories.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/__stories__/ChartTransitions.stories.tsx
rename to packages/web/src/visualizations/chart/__stories__/ChartTransitions.stories.tsx
index b3f415c45d..b9375cc726 100644
--- a/packages/web-visualization/src/chart/__stories__/ChartTransitions.stories.tsx
+++ b/packages/web/src/visualizations/chart/__stories__/ChartTransitions.stories.tsx
@@ -7,10 +7,10 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Button } from '@coinbase/cds-web/buttons';
-import { Box, VStack } from '@coinbase/cds-web/layout';
-import { Text } from '@coinbase/cds-web/typography';
 
+import { Button } from '../../../buttons';
+import { Box, VStack } from '../../../layout';
+import { Text } from '../../../typography';
 import { Area } from '../area/Area';
 import type { BarProps } from '../bar/Bar';
 import { BarChart } from '../bar/BarChart';
diff --git a/packages/web-visualization/src/chart/__stories__/PeriodSelector.stories.tsx b/packages/web/src/visualizations/chart/__stories__/PeriodSelector.stories.tsx
similarity index 96%
rename from packages/web-visualization/src/chart/__stories__/PeriodSelector.stories.tsx
rename to packages/web/src/visualizations/chart/__stories__/PeriodSelector.stories.tsx
index 86ef076dd3..266398144b 100644
--- a/packages/web-visualization/src/chart/__stories__/PeriodSelector.stories.tsx
+++ b/packages/web/src/visualizations/chart/__stories__/PeriodSelector.stories.tsx
@@ -2,18 +2,18 @@ import { forwardRef, memo, useMemo, useState } from 'react';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
-import { IconButton } from '@coinbase/cds-web/buttons';
-import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
-import { Box, HStack, VStack } from '@coinbase/cds-web/layout';
+import { css } from '@linaria/core';
+
+import { IconButton } from '../../../buttons';
+import { useTheme } from '../../../hooks/useTheme';
+import { Box, HStack, VStack } from '../../../layout';
 import {
   SegmentedTab,
   type SegmentedTabProps,
   type TabComponent,
   type TabsActiveIndicatorProps,
-} from '@coinbase/cds-web/tabs';
-import { Text } from '@coinbase/cds-web/typography';
-import { css } from '@linaria/core';
-
+} from '../../../tabs';
+import { Text } from '../../../typography';
 import { LiveTabLabel, PeriodSelector, PeriodSelectorActiveIndicator } from '../PeriodSelector';
 
 export default {
diff --git a/packages/web-visualization/src/chart/__stories__/TextStories.stories.tsx b/packages/web/src/visualizations/chart/__stories__/TextStories.stories.tsx
similarity index 99%
rename from packages/web-visualization/src/chart/__stories__/TextStories.stories.tsx
rename to packages/web/src/visualizations/chart/__stories__/TextStories.stories.tsx
index a7a0df752f..039050f133 100644
--- a/packages/web-visualization/src/chart/__stories__/TextStories.stories.tsx
+++ b/packages/web/src/visualizations/chart/__stories__/TextStories.stories.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { Rect } from '@coinbase/cds-common/types';
-import { Switch } from '@coinbase/cds-web/controls';
 
+import { Switch } from '../../../controls';
 import { XAxis, YAxis } from '../axis';
 import { useCartesianChartContext } from '../ChartProvider';
 import { LineChart } from '../line/LineChart';
diff --git a/packages/web-visualization/src/chart/__tests__/CartesianChart.test.tsx b/packages/web/src/visualizations/chart/__tests__/CartesianChart.test.tsx
similarity index 99%
rename from packages/web-visualization/src/chart/__tests__/CartesianChart.test.tsx
rename to packages/web/src/visualizations/chart/__tests__/CartesianChart.test.tsx
index d5e00fbe8c..cce0d623b6 100644
--- a/packages/web-visualization/src/chart/__tests__/CartesianChart.test.tsx
+++ b/packages/web/src/visualizations/chart/__tests__/CartesianChart.test.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, ReactNode } from 'react';
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { render, screen } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../utils/test';
 import { Area } from '../area/Area';
 import { XAxis } from '../axis/XAxis';
 import { YAxis } from '../axis/YAxis';
@@ -13,7 +13,7 @@ import { ReferenceLine } from '../line/ReferenceLine';
 import { Point } from '../point/Point';
 import { Scrubber } from '../scrubber/Scrubber';
 
-jest.mock('@coinbase/cds-web/hooks/useDimensions', () => ({
+jest.mock('../../../hooks/useDimensions', () => ({
   useDimensions: jest.fn(() => ({
     observe: jest.fn(),
     width: 600,
diff --git a/packages/web-visualization/src/chart/area/Area.tsx b/packages/web/src/visualizations/chart/area/Area.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/area/Area.tsx
rename to packages/web/src/visualizations/chart/area/Area.tsx
diff --git a/packages/web-visualization/src/chart/area/AreaChart.tsx b/packages/web/src/visualizations/chart/area/AreaChart.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/area/AreaChart.tsx
rename to packages/web/src/visualizations/chart/area/AreaChart.tsx
index 0f365dfc9e..982161cf1d 100644
--- a/packages/web-visualization/src/chart/area/AreaChart.tsx
+++ b/packages/web/src/visualizations/chart/area/AreaChart.tsx
@@ -199,12 +199,12 @@ export const AreaChart = memo(
 
       return (
         <CartesianChart
-          {...chartProps}
           ref={ref}
           inset={inset}
           series={seriesToRender}
           xAxis={xAxisConfig}
           yAxis={yAxisConfig}
+          {...chartProps}
         >
           {showXAxis && <XAxis axisId={xAxisId} {...xAxisVisualProps} />}
           {showYAxis && <YAxis axisId={yAxisId} {...yAxisVisualProps} />}
diff --git a/packages/web-visualization/src/chart/area/DottedArea.tsx b/packages/web/src/visualizations/chart/area/DottedArea.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/area/DottedArea.tsx
rename to packages/web/src/visualizations/chart/area/DottedArea.tsx
diff --git a/packages/web-visualization/src/chart/area/GradientArea.tsx b/packages/web/src/visualizations/chart/area/GradientArea.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/area/GradientArea.tsx
rename to packages/web/src/visualizations/chart/area/GradientArea.tsx
diff --git a/packages/web-visualization/src/chart/area/SolidArea.tsx b/packages/web/src/visualizations/chart/area/SolidArea.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/area/SolidArea.tsx
rename to packages/web/src/visualizations/chart/area/SolidArea.tsx
diff --git a/packages/web-visualization/src/chart/area/__stories__/AreaChart.stories.tsx b/packages/web/src/visualizations/chart/area/__stories__/AreaChart.stories.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/area/__stories__/AreaChart.stories.tsx
rename to packages/web/src/visualizations/chart/area/__stories__/AreaChart.stories.tsx
index 1f3c32b99d..d00a345298 100644
--- a/packages/web-visualization/src/chart/area/__stories__/AreaChart.stories.tsx
+++ b/packages/web/src/visualizations/chart/area/__stories__/AreaChart.stories.tsx
@@ -1,8 +1,8 @@
 import React, { memo, useCallback } from 'react';
 import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
-import { VStack } from '@coinbase/cds-web/layout';
-import { Text } from '@coinbase/cds-web/typography';
 
+import { VStack } from '../../../../layout';
+import { Text } from '../../../../typography';
 import {
   DefaultReferenceLineLabel,
   DottedLine,
diff --git a/packages/web-visualization/src/chart/area/__tests__/AreaChart.test.tsx b/packages/web/src/visualizations/chart/area/__tests__/AreaChart.test.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/area/__tests__/AreaChart.test.tsx
rename to packages/web/src/visualizations/chart/area/__tests__/AreaChart.test.tsx
index bbe093b0c6..1bdbb35c43 100644
--- a/packages/web-visualization/src/chart/area/__tests__/AreaChart.test.tsx
+++ b/packages/web/src/visualizations/chart/area/__tests__/AreaChart.test.tsx
@@ -1,11 +1,11 @@
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { render, screen } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../../utils/test';
 import type { LineComponentProps } from '../../line/Line';
 import type { AreaComponentProps } from '../Area';
 import { AreaChart } from '../AreaChart';
 
-jest.mock('@coinbase/cds-web/hooks/useDimensions', () => ({
+jest.mock('../../../../hooks/useDimensions', () => ({
   useDimensions: jest.fn(() => ({
     observe: jest.fn(),
     width: 600,
diff --git a/packages/web-visualization/src/chart/area/__tests__/AreaChartBaseline.test.tsx b/packages/web/src/visualizations/chart/area/__tests__/AreaChartBaseline.test.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/area/__tests__/AreaChartBaseline.test.tsx
rename to packages/web/src/visualizations/chart/area/__tests__/AreaChartBaseline.test.tsx
index 990afa2217..da6090fc23 100644
--- a/packages/web-visualization/src/chart/area/__tests__/AreaChartBaseline.test.tsx
+++ b/packages/web/src/visualizations/chart/area/__tests__/AreaChartBaseline.test.tsx
@@ -1,6 +1,6 @@
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { render } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../../utils/test';
 import { CartesianChart } from '../../CartesianChart';
 import { AreaChart } from '../AreaChart';
 
diff --git a/packages/web-visualization/src/chart/area/index.ts b/packages/web/src/visualizations/chart/area/index.ts
similarity index 100%
rename from packages/web-visualization/src/chart/area/index.ts
rename to packages/web/src/visualizations/chart/area/index.ts
diff --git a/packages/web-visualization/src/chart/axis/Axis.tsx b/packages/web/src/visualizations/chart/axis/Axis.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/axis/Axis.tsx
rename to packages/web/src/visualizations/chart/axis/Axis.tsx
diff --git a/packages/web-visualization/src/chart/axis/DefaultAxisTickLabel.tsx b/packages/web/src/visualizations/chart/axis/DefaultAxisTickLabel.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/axis/DefaultAxisTickLabel.tsx
rename to packages/web/src/visualizations/chart/axis/DefaultAxisTickLabel.tsx
diff --git a/packages/web-visualization/src/chart/axis/XAxis.tsx b/packages/web/src/visualizations/chart/axis/XAxis.tsx
similarity index 99%
rename from packages/web-visualization/src/chart/axis/XAxis.tsx
rename to packages/web/src/visualizations/chart/axis/XAxis.tsx
index ce6787ec87..c232e77105 100644
--- a/packages/web-visualization/src/chart/axis/XAxis.tsx
+++ b/packages/web/src/visualizations/chart/axis/XAxis.tsx
@@ -1,8 +1,8 @@
 import { memo, useCallback, useEffect, useId, useMemo } from 'react';
-import { cx } from '@coinbase/cds-web';
 import { css } from '@linaria/core';
 import { m as motion } from 'framer-motion';
 
+import { cx } from '../../../index';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DottedLine } from '../line/DottedLine';
 import { SolidLine } from '../line/SolidLine';
diff --git a/packages/web-visualization/src/chart/axis/YAxis.tsx b/packages/web/src/visualizations/chart/axis/YAxis.tsx
similarity index 99%
rename from packages/web-visualization/src/chart/axis/YAxis.tsx
rename to packages/web/src/visualizations/chart/axis/YAxis.tsx
index f65036c018..2516cd2a60 100644
--- a/packages/web-visualization/src/chart/axis/YAxis.tsx
+++ b/packages/web/src/visualizations/chart/axis/YAxis.tsx
@@ -1,8 +1,8 @@
 import { memo, useCallback, useEffect, useId, useMemo } from 'react';
-import { cx } from '@coinbase/cds-web';
 import { css } from '@linaria/core';
 import { m as motion } from 'framer-motion';
 
+import { cx } from '../../../index';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DottedLine } from '../line/DottedLine';
 import { SolidLine } from '../line/SolidLine';
diff --git a/packages/web-visualization/src/chart/axis/__stories__/Axis.stories.tsx b/packages/web/src/visualizations/chart/axis/__stories__/Axis.stories.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/axis/__stories__/Axis.stories.tsx
rename to packages/web/src/visualizations/chart/axis/__stories__/Axis.stories.tsx
index e7874ce869..48c149e8d2 100644
--- a/packages/web-visualization/src/chart/axis/__stories__/Axis.stories.tsx
+++ b/packages/web/src/visualizations/chart/axis/__stories__/Axis.stories.tsx
@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useMemo } from 'react';
-import { Examples } from '@coinbase/cds-web/dates/__stories__/Calendar.stories';
-import { HStack, VStack } from '@coinbase/cds-web/layout';
-import { Text } from '@coinbase/cds-web/typography';
 
+import { Examples } from '../../../../dates/__stories__/Calendar.stories';
+import { HStack, VStack } from '../../../../layout';
+import { Text } from '../../../../typography';
 import { BarPlot } from '../../bar';
 import { CartesianChart } from '../../CartesianChart';
 import { LineChart, SolidLine, type SolidLineProps } from '../../line';
diff --git a/packages/web-visualization/src/chart/axis/__tests__/Axis.test.tsx b/packages/web/src/visualizations/chart/axis/__tests__/Axis.test.tsx
similarity index 99%
rename from packages/web-visualization/src/chart/axis/__tests__/Axis.test.tsx
rename to packages/web/src/visualizations/chart/axis/__tests__/Axis.test.tsx
index f7a2640f26..0ca0cd942e 100644
--- a/packages/web-visualization/src/chart/axis/__tests__/Axis.test.tsx
+++ b/packages/web/src/visualizations/chart/axis/__tests__/Axis.test.tsx
@@ -1,6 +1,6 @@
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { render, screen } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../../utils/test';
 import { CartesianChart } from '../../CartesianChart';
 import { Line } from '../../line/Line';
 import { getAxisTicksData } from '../../utils';
@@ -14,7 +14,7 @@ jest.mock('../../utils', () => {
   };
 });
 
-jest.mock('@coinbase/cds-web/hooks/useDimensions', () => ({
+jest.mock('../../../../hooks/useDimensions', () => ({
   useDimensions: jest.fn(() => ({
     observe: jest.fn(),
     width: 600,
diff --git a/packages/web-visualization/src/chart/axis/index.ts b/packages/web/src/visualizations/chart/axis/index.ts
similarity index 100%
rename from packages/web-visualization/src/chart/axis/index.ts
rename to packages/web/src/visualizations/chart/axis/index.ts
diff --git a/packages/web-visualization/src/chart/bar/Bar.tsx b/packages/web/src/visualizations/chart/bar/Bar.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/bar/Bar.tsx
rename to packages/web/src/visualizations/chart/bar/Bar.tsx
diff --git a/packages/web-visualization/src/chart/bar/BarChart.tsx b/packages/web/src/visualizations/chart/bar/BarChart.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/bar/BarChart.tsx
rename to packages/web/src/visualizations/chart/bar/BarChart.tsx
index 5b56e45312..3ba7f5e932 100644
--- a/packages/web-visualization/src/chart/bar/BarChart.tsx
+++ b/packages/web/src/visualizations/chart/bar/BarChart.tsx
@@ -206,12 +206,12 @@ export const BarChart = memo(
 
       return (
         <CartesianChart
-          {...chartProps}
           ref={ref}
           inset={inset}
           series={series}
           xAxis={xAxisConfig}
           yAxis={yAxisConfig}
+          {...chartProps}
         >
           {showXAxis && <XAxis axisId={xAxisId} {...xAxisVisualProps} />}
           {showYAxis && <YAxis axisId={yAxisId} {...yAxisVisualProps} />}
diff --git a/packages/web-visualization/src/chart/bar/BarPlot.tsx b/packages/web/src/visualizations/chart/bar/BarPlot.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/bar/BarPlot.tsx
rename to packages/web/src/visualizations/chart/bar/BarPlot.tsx
diff --git a/packages/web-visualization/src/chart/bar/BarStack.tsx b/packages/web/src/visualizations/chart/bar/BarStack.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/bar/BarStack.tsx
rename to packages/web/src/visualizations/chart/bar/BarStack.tsx
diff --git a/packages/web-visualization/src/chart/bar/BarStackGroup.tsx b/packages/web/src/visualizations/chart/bar/BarStackGroup.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/bar/BarStackGroup.tsx
rename to packages/web/src/visualizations/chart/bar/BarStackGroup.tsx
index 4179f0c35f..43694b2555 100644
--- a/packages/web-visualization/src/chart/bar/BarStackGroup.tsx
+++ b/packages/web/src/visualizations/chart/bar/BarStackGroup.tsx
@@ -112,7 +112,6 @@ export const BarStackGroup = memo<BarStackGroupProps>(
 
     return orderedConfigs.map(({ categoryIndex, indexPos, thickness }) => (
       <BarStack
-        {...props}
         key={`stack-${stackIndex}-category-${categoryIndex}`}
         categoryIndex={categoryIndex}
         indexPos={indexPos}
@@ -123,6 +122,7 @@ export const BarStackGroup = memo<BarStackGroupProps>(
         valueScale={valueScaleComputed}
         xAxisId={xAxisId}
         yAxisId={yAxisId}
+        {...props}
       />
     ));
   },
diff --git a/packages/web-visualization/src/chart/bar/DefaultBar.tsx b/packages/web/src/visualizations/chart/bar/DefaultBar.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/bar/DefaultBar.tsx
rename to packages/web/src/visualizations/chart/bar/DefaultBar.tsx
index 7f93a10889..7feb98db60 100644
--- a/packages/web-visualization/src/chart/bar/DefaultBar.tsx
+++ b/packages/web/src/visualizations/chart/bar/DefaultBar.tsx
@@ -139,7 +139,6 @@ export const DefaultBar = memo<DefaultBarProps>(
 
     return (
       <Path
-        {...props}
         animate={animate}
         clipRect={null}
         d={d}
@@ -151,6 +150,7 @@ export const DefaultBar = memo<DefaultBarProps>(
           enterOpacity: enterOpacityTransitionWithStagger,
           update: updateTransition,
         }}
+        {...props}
       />
     );
   },
diff --git a/packages/web-visualization/src/chart/bar/DefaultBarStack.tsx b/packages/web/src/visualizations/chart/bar/DefaultBarStack.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/bar/DefaultBarStack.tsx
rename to packages/web/src/visualizations/chart/bar/DefaultBarStack.tsx
diff --git a/packages/web-visualization/src/chart/bar/PercentageBarChart.tsx b/packages/web/src/visualizations/chart/bar/PercentageBarChart.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/bar/PercentageBarChart.tsx
rename to packages/web/src/visualizations/chart/bar/PercentageBarChart.tsx
diff --git a/packages/web-visualization/src/chart/bar/__stories__/BarChart.stories.tsx b/packages/web/src/visualizations/chart/bar/__stories__/BarChart.stories.tsx
similarity index 99%
rename from packages/web-visualization/src/chart/bar/__stories__/BarChart.stories.tsx
rename to packages/web/src/visualizations/chart/bar/__stories__/BarChart.stories.tsx
index 5f882d90dc..de682bca54 100644
--- a/packages/web-visualization/src/chart/bar/__stories__/BarChart.stories.tsx
+++ b/packages/web/src/visualizations/chart/bar/__stories__/BarChart.stories.tsx
@@ -1,10 +1,10 @@
 import React, { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
-import { HStack, VStack } from '@coinbase/cds-web/layout';
-import { Text } from '@coinbase/cds-web/typography';
 import { m as motion, type Transition } from 'framer-motion';
 
+import { HStack, VStack } from '../../../../layout';
+import { Text } from '../../../../typography';
 import { CartesianChart } from '../..';
 import { XAxis, YAxis } from '../../axis';
 import { useCartesianChartContext } from '../../ChartProvider';
diff --git a/packages/web-visualization/src/chart/bar/__stories__/PercentageBarChart.stories.tsx b/packages/web/src/visualizations/chart/bar/__stories__/PercentageBarChart.stories.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/bar/__stories__/PercentageBarChart.stories.tsx
rename to packages/web/src/visualizations/chart/bar/__stories__/PercentageBarChart.stories.tsx
diff --git a/packages/web-visualization/src/chart/bar/__tests__/BarChart.test.tsx b/packages/web/src/visualizations/chart/bar/__tests__/BarChart.test.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/bar/__tests__/BarChart.test.tsx
rename to packages/web/src/visualizations/chart/bar/__tests__/BarChart.test.tsx
index d58aaac826..bac315dec9 100644
--- a/packages/web-visualization/src/chart/bar/__tests__/BarChart.test.tsx
+++ b/packages/web/src/visualizations/chart/bar/__tests__/BarChart.test.tsx
@@ -1,10 +1,10 @@
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { render, screen } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../../utils/test';
 import type { BarComponentProps } from '../Bar';
 import { BarChart } from '../BarChart';
 
-jest.mock('@coinbase/cds-web/hooks/useDimensions', () => ({
+jest.mock('../../../../hooks/useDimensions', () => ({
   useDimensions: jest.fn(() => ({
     observe: jest.fn(),
     width: 600,
diff --git a/packages/web-visualization/src/chart/bar/__tests__/BarChartBaseline.test.tsx b/packages/web/src/visualizations/chart/bar/__tests__/BarChartBaseline.test.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/bar/__tests__/BarChartBaseline.test.tsx
rename to packages/web/src/visualizations/chart/bar/__tests__/BarChartBaseline.test.tsx
index 81b4d7127f..84dfb78d36 100644
--- a/packages/web-visualization/src/chart/bar/__tests__/BarChartBaseline.test.tsx
+++ b/packages/web/src/visualizations/chart/bar/__tests__/BarChartBaseline.test.tsx
@@ -1,6 +1,6 @@
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { render } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../../utils/test';
 import { CartesianChart } from '../../CartesianChart';
 import { BarChart } from '../BarChart';
 
diff --git a/packages/web-visualization/src/chart/bar/__tests__/PercentageBarChart.test.tsx b/packages/web/src/visualizations/chart/bar/__tests__/PercentageBarChart.test.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/bar/__tests__/PercentageBarChart.test.tsx
rename to packages/web/src/visualizations/chart/bar/__tests__/PercentageBarChart.test.tsx
diff --git a/packages/web-visualization/src/chart/bar/index.ts b/packages/web/src/visualizations/chart/bar/index.ts
similarity index 100%
rename from packages/web-visualization/src/chart/bar/index.ts
rename to packages/web/src/visualizations/chart/bar/index.ts
diff --git a/packages/web-visualization/src/chart/gradient/Gradient.tsx b/packages/web/src/visualizations/chart/gradient/Gradient.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/gradient/Gradient.tsx
rename to packages/web/src/visualizations/chart/gradient/Gradient.tsx
diff --git a/packages/web-visualization/src/chart/gradient/index.ts b/packages/web/src/visualizations/chart/gradient/index.ts
similarity index 100%
rename from packages/web-visualization/src/chart/gradient/index.ts
rename to packages/web/src/visualizations/chart/gradient/index.ts
diff --git a/packages/web/src/visualizations/chart/index.ts b/packages/web/src/visualizations/chart/index.ts
new file mode 100644
index 0000000000..7fa7b37e08
--- /dev/null
+++ b/packages/web/src/visualizations/chart/index.ts
@@ -0,0 +1,16 @@
+// codegen:start {preset: barrel, include: [./*.tsx, ./*/index.ts]}
+export * from './area/index';
+export * from './axis/index';
+export * from './bar/index';
+export * from './CartesianChart';
+export * from './ChartProvider';
+export * from './gradient/index';
+export * from './legend/index';
+export * from './line/index';
+export * from './Path';
+export * from './PeriodSelector';
+export * from './point/index';
+export * from './scrubber/index';
+export * from './text/index';
+export * from './utils/index';
+// codegen:end
diff --git a/packages/web-visualization/src/chart/legend/DefaultLegendEntry.tsx b/packages/web/src/visualizations/chart/legend/DefaultLegendEntry.tsx
similarity index 91%
rename from packages/web-visualization/src/chart/legend/DefaultLegendEntry.tsx
rename to packages/web/src/visualizations/chart/legend/DefaultLegendEntry.tsx
index 25d447a1ea..4b3f6390a2 100644
--- a/packages/web-visualization/src/chart/legend/DefaultLegendEntry.tsx
+++ b/packages/web/src/visualizations/chart/legend/DefaultLegendEntry.tsx
@@ -1,9 +1,10 @@
 import { memo } from 'react';
-import { cx } from '@coinbase/cds-web';
-import { HStack, type HStackDefaultElement, type HStackProps } from '@coinbase/cds-web/layout';
-import { Text } from '@coinbase/cds-web/typography';
 import { css } from '@linaria/core';
 
+import { cx } from '../../../index';
+import { HStack, type HStackDefaultElement, type HStackProps } from '../../../layout';
+import { Text } from '../../../typography';
+
 import { DefaultLegendShape } from './DefaultLegendShape';
 import type { LegendEntryProps } from './Legend';
 
diff --git a/packages/web-visualization/src/chart/legend/DefaultLegendShape.tsx b/packages/web/src/visualizations/chart/legend/DefaultLegendShape.tsx
similarity index 93%
rename from packages/web-visualization/src/chart/legend/DefaultLegendShape.tsx
rename to packages/web/src/visualizations/chart/legend/DefaultLegendShape.tsx
index 6914d17a19..0f03bcc052 100644
--- a/packages/web-visualization/src/chart/legend/DefaultLegendShape.tsx
+++ b/packages/web/src/visualizations/chart/legend/DefaultLegendShape.tsx
@@ -1,8 +1,8 @@
 import React, { memo } from 'react';
-import { cx } from '@coinbase/cds-web';
-import { Box, type BoxProps } from '@coinbase/cds-web/layout';
 import { css } from '@linaria/core';
 
+import { cx } from '../../../index';
+import { Box, type BoxProps } from '../../../layout';
 import type { LegendShape, LegendShapeVariant } from '../utils/chart';
 
 import type { LegendShapeProps } from './Legend';
diff --git a/packages/web-visualization/src/chart/legend/Legend.tsx b/packages/web/src/visualizations/chart/legend/Legend.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/legend/Legend.tsx
rename to packages/web/src/visualizations/chart/legend/Legend.tsx
index d2c8739a33..5803ab17fb 100644
--- a/packages/web-visualization/src/chart/legend/Legend.tsx
+++ b/packages/web/src/visualizations/chart/legend/Legend.tsx
@@ -1,11 +1,6 @@
 import { forwardRef, memo, useMemo } from 'react';
-import {
-  Box,
-  type BoxBaseProps,
-  type BoxDefaultElement,
-  type BoxProps,
-} from '@coinbase/cds-web/layout';
 
+import { Box, type BoxBaseProps, type BoxDefaultElement, type BoxProps } from '../../../layout';
 import { useCartesianChartContext } from '../ChartProvider';
 import type { LegendShape } from '../utils';
 
diff --git a/packages/web-visualization/src/chart/legend/__stories__/Legend.stories.tsx b/packages/web/src/visualizations/chart/legend/__stories__/Legend.stories.tsx
similarity index 99%
rename from packages/web-visualization/src/chart/legend/__stories__/Legend.stories.tsx
rename to packages/web/src/visualizations/chart/legend/__stories__/Legend.stories.tsx
index de2060d71f..b3e98bab56 100644
--- a/packages/web-visualization/src/chart/legend/__stories__/Legend.stories.tsx
+++ b/packages/web/src/visualizations/chart/legend/__stories__/Legend.stories.tsx
@@ -1,8 +1,8 @@
 import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
-import { Chip } from '@coinbase/cds-web/chips';
-import { Box, HStack, VStack } from '@coinbase/cds-web/layout';
-import { Text } from '@coinbase/cds-web/typography';
 
+import { Chip } from '../../../../chips';
+import { Box, HStack, VStack } from '../../../../layout';
+import { Text } from '../../../../typography';
 import { XAxis, YAxis } from '../../axis';
 import { BarChart, type BarComponentProps, BarPlot, DefaultBar } from '../../bar';
 import { CartesianChart } from '../../CartesianChart';
diff --git a/packages/web-visualization/src/chart/legend/__tests__/Legend.test.tsx b/packages/web/src/visualizations/chart/legend/__tests__/Legend.test.tsx
similarity index 96%
rename from packages/web-visualization/src/chart/legend/__tests__/Legend.test.tsx
rename to packages/web/src/visualizations/chart/legend/__tests__/Legend.test.tsx
index c0423d8183..7fc8296218 100644
--- a/packages/web-visualization/src/chart/legend/__tests__/Legend.test.tsx
+++ b/packages/web/src/visualizations/chart/legend/__tests__/Legend.test.tsx
@@ -1,11 +1,11 @@
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { render, screen } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../../utils/test';
 import { CartesianChart } from '../../CartesianChart';
 import { Line } from '../../line/Line';
 import { Legend } from '../Legend';
 
-jest.mock('@coinbase/cds-web/hooks/useDimensions', () => ({
+jest.mock('../../../../hooks/useDimensions', () => ({
   useDimensions: jest.fn(() => ({
     observe: jest.fn(),
     width: 600,
diff --git a/packages/web-visualization/src/chart/legend/index.ts b/packages/web/src/visualizations/chart/legend/index.ts
similarity index 100%
rename from packages/web-visualization/src/chart/legend/index.ts
rename to packages/web/src/visualizations/chart/legend/index.ts
diff --git a/packages/web-visualization/src/chart/line/DefaultReferenceLineLabel.tsx b/packages/web/src/visualizations/chart/line/DefaultReferenceLineLabel.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/line/DefaultReferenceLineLabel.tsx
rename to packages/web/src/visualizations/chart/line/DefaultReferenceLineLabel.tsx
diff --git a/packages/web-visualization/src/chart/line/DottedLine.tsx b/packages/web/src/visualizations/chart/line/DottedLine.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/line/DottedLine.tsx
rename to packages/web/src/visualizations/chart/line/DottedLine.tsx
diff --git a/packages/web-visualization/src/chart/line/Line.tsx b/packages/web/src/visualizations/chart/line/Line.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/line/Line.tsx
rename to packages/web/src/visualizations/chart/line/Line.tsx
diff --git a/packages/web-visualization/src/chart/line/LineChart.tsx b/packages/web/src/visualizations/chart/line/LineChart.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/line/LineChart.tsx
rename to packages/web/src/visualizations/chart/line/LineChart.tsx
index 6a5a76b040..c2d85af258 100644
--- a/packages/web-visualization/src/chart/line/LineChart.tsx
+++ b/packages/web/src/visualizations/chart/line/LineChart.tsx
@@ -175,12 +175,12 @@ export const LineChart = memo(
 
       return (
         <CartesianChart
-          {...chartProps}
           ref={ref}
           inset={inset}
           series={chartSeries}
           xAxis={xAxisConfig}
           yAxis={yAxisConfig}
+          {...chartProps}
         >
           {/* Render axes first for grid lines to appear behind everything else */}
           {showXAxis && <XAxis axisId={xAxisId} {...xAxisVisualProps} />}
diff --git a/packages/web-visualization/src/chart/line/ReferenceLine.tsx b/packages/web/src/visualizations/chart/line/ReferenceLine.tsx
similarity index 99%
rename from packages/web-visualization/src/chart/line/ReferenceLine.tsx
rename to packages/web/src/visualizations/chart/line/ReferenceLine.tsx
index 054911c6c5..852292f710 100644
--- a/packages/web-visualization/src/chart/line/ReferenceLine.tsx
+++ b/packages/web/src/visualizations/chart/line/ReferenceLine.tsx
@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import type { SharedProps } from '@coinbase/cds-common/types';
-import { cx } from '@coinbase/cds-web';
 
+import { cx } from '../../../index';
 import { useCartesianChartContext } from '../ChartProvider';
 import type {
   ChartTextChildren,
diff --git a/packages/web-visualization/src/chart/line/SolidLine.tsx b/packages/web/src/visualizations/chart/line/SolidLine.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/line/SolidLine.tsx
rename to packages/web/src/visualizations/chart/line/SolidLine.tsx
diff --git a/packages/web-visualization/src/chart/line/__stories__/LineChart.stories.tsx b/packages/web/src/visualizations/chart/line/__stories__/LineChart.stories.tsx
similarity index 99%
rename from packages/web-visualization/src/chart/line/__stories__/LineChart.stories.tsx
rename to packages/web/src/visualizations/chart/line/__stories__/LineChart.stories.tsx
index 973d9ab7e0..69d33c4b48 100644
--- a/packages/web-visualization/src/chart/line/__stories__/LineChart.stories.tsx
+++ b/packages/web/src/visualizations/chart/line/__stories__/LineChart.stories.tsx
@@ -15,22 +15,22 @@ import { prices } from '@coinbase/cds-common/internal/data/prices';
 import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
-import { DataCard } from '@coinbase/cds-web/alpha/data-card/DataCard';
-import { ListCell } from '@coinbase/cds-web/cells';
-import { useBreakpoints } from '@coinbase/cds-web/hooks/useBreakpoints';
-import { Box, HStack, VStack } from '@coinbase/cds-web/layout';
-import { Avatar, RemoteImage } from '@coinbase/cds-web/media';
-import { SectionHeader } from '@coinbase/cds-web/section-header/SectionHeader';
-import { Pressable } from '@coinbase/cds-web/system';
+import { m } from 'framer-motion';
+
+import { DataCard } from '../../../../alpha/data-card/DataCard';
+import { ListCell } from '../../../../cells';
+import { useBreakpoints } from '../../../../hooks/useBreakpoints';
+import { Box, HStack, VStack } from '../../../../layout';
+import { Avatar, RemoteImage } from '../../../../media';
+import { SectionHeader } from '../../../../section-header/SectionHeader';
+import { Pressable } from '../../../../system';
 import {
   SegmentedTab,
   type SegmentedTabProps,
   type TabComponent,
   type TabsActiveIndicatorProps,
-} from '@coinbase/cds-web/tabs';
-import { Text } from '@coinbase/cds-web/typography';
-import { m } from 'framer-motion';
-
+} from '../../../../tabs';
+import { Text } from '../../../../typography';
 import {
   DefaultScrubberBeacon,
   defaultTransition,
diff --git a/packages/web-visualization/src/chart/line/__stories__/ReferenceLine.stories.tsx b/packages/web/src/visualizations/chart/line/__stories__/ReferenceLine.stories.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/line/__stories__/ReferenceLine.stories.tsx
rename to packages/web/src/visualizations/chart/line/__stories__/ReferenceLine.stories.tsx
index 040ae41f6d..95f8e413a7 100644
--- a/packages/web-visualization/src/chart/line/__stories__/ReferenceLine.stories.tsx
+++ b/packages/web/src/visualizations/chart/line/__stories__/ReferenceLine.stories.tsx
@@ -1,10 +1,10 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
-import { useTheme } from '@coinbase/cds-web';
-import { VStack } from '@coinbase/cds-web/layout';
-import { Text } from '@coinbase/cds-web/typography';
 
+import { useTheme } from '../../../../index';
+import { VStack } from '../../../../layout';
+import { Text } from '../../../../typography';
 import { useCartesianChartContext } from '../../ChartProvider';
 import { Scrubber } from '../../scrubber';
 import { ChartText } from '../../text/ChartText';
@@ -149,7 +149,7 @@ const DraggableReferenceLine = memo(
   }: {
     baselineAmount: number;
     startAmount: number;
-    chartRef: React.RefObject<SVGSVGElement>;
+    chartRef: React.RefObject<SVGSVGElement | null>;
   }) => {
     const theme = useTheme();
 
diff --git a/packages/web-visualization/src/chart/line/__tests__/LineChart.test.tsx b/packages/web/src/visualizations/chart/line/__tests__/LineChart.test.tsx
similarity index 99%
rename from packages/web-visualization/src/chart/line/__tests__/LineChart.test.tsx
rename to packages/web/src/visualizations/chart/line/__tests__/LineChart.test.tsx
index a0458a870d..468ff40271 100644
--- a/packages/web-visualization/src/chart/line/__tests__/LineChart.test.tsx
+++ b/packages/web/src/visualizations/chart/line/__tests__/LineChart.test.tsx
@@ -1,10 +1,10 @@
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { render, screen } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../../utils/test';
 import type { LineComponentProps } from '../Line';
 import { LineChart } from '../LineChart';
 
-jest.mock('@coinbase/cds-web/hooks/useDimensions', () => ({
+jest.mock('../../../../hooks/useDimensions', () => ({
   useDimensions: jest.fn(() => ({
     observe: jest.fn(),
     width: 600,
diff --git a/packages/web-visualization/src/chart/line/__tests__/ReferenceLine.test.tsx b/packages/web/src/visualizations/chart/line/__tests__/ReferenceLine.test.tsx
similarity index 96%
rename from packages/web-visualization/src/chart/line/__tests__/ReferenceLine.test.tsx
rename to packages/web/src/visualizations/chart/line/__tests__/ReferenceLine.test.tsx
index 91cdf4bc7e..59d4764287 100644
--- a/packages/web-visualization/src/chart/line/__tests__/ReferenceLine.test.tsx
+++ b/packages/web/src/visualizations/chart/line/__tests__/ReferenceLine.test.tsx
@@ -1,10 +1,10 @@
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { render, screen } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../../utils/test';
 import { CartesianChart } from '../../CartesianChart';
 import { ReferenceLine } from '../ReferenceLine';
 
-jest.mock('@coinbase/cds-web/hooks/useDimensions', () => ({
+jest.mock('../../../../hooks/useDimensions', () => ({
   useDimensions: jest.fn(() => ({
     observe: jest.fn(),
     width: 600,
diff --git a/packages/web-visualization/src/chart/line/index.ts b/packages/web/src/visualizations/chart/line/index.ts
similarity index 100%
rename from packages/web-visualization/src/chart/line/index.ts
rename to packages/web/src/visualizations/chart/line/index.ts
diff --git a/packages/web-visualization/src/chart/point/DefaultPointLabel.tsx b/packages/web/src/visualizations/chart/point/DefaultPointLabel.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/point/DefaultPointLabel.tsx
rename to packages/web/src/visualizations/chart/point/DefaultPointLabel.tsx
index e978f7524b..c93c3e4488 100644
--- a/packages/web-visualization/src/chart/point/DefaultPointLabel.tsx
+++ b/packages/web/src/visualizations/chart/point/DefaultPointLabel.tsx
@@ -26,11 +26,11 @@ export const DefaultPointLabel = memo<DefaultPointLabelProps>(
 
     return (
       <ChartText
-        {...props}
         horizontalAlignment={horizontalAlignment}
         verticalAlignment={verticalAlignment}
         x={labelCoordinates.x}
         y={labelCoordinates.y}
+        {...props}
       >
         {children}
       </ChartText>
diff --git a/packages/web-visualization/src/chart/point/Point.tsx b/packages/web/src/visualizations/chart/point/Point.tsx
similarity index 96%
rename from packages/web-visualization/src/chart/point/Point.tsx
rename to packages/web/src/visualizations/chart/point/Point.tsx
index aa42a4d395..f01a7bf33f 100644
--- a/packages/web-visualization/src/chart/point/Point.tsx
+++ b/packages/web/src/visualizations/chart/point/Point.tsx
@@ -1,9 +1,9 @@
 import React, { memo, type SVGProps, useMemo } from 'react';
 import type { SharedProps } from '@coinbase/cds-common/types';
-import { cx } from '@coinbase/cds-web';
 import { css } from '@linaria/core';
 import { m as motion, type Transition } from 'framer-motion';
 
+import { cx } from '../../../index';
 import { useCartesianChartContext } from '../ChartProvider';
 import type { ChartTextChildren, ChartTextProps } from '../text/ChartText';
 import {
@@ -385,7 +385,14 @@ export const Point = memo<PointProps>(
 
       return (
         <motion.circle
-          animate={{
+          // TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility
+          {...{
+            animate: {
+              cx: pixelCoordinate.x,
+              cy: pixelCoordinate.y,
+            },
+            'aria-label': accessibilityLabel,
+            className: cx(innerPointCss, className, classNames?.point),
             cx: pixelCoordinate.x,
             cy: pixelCoordinate.y,
           }}
diff --git a/packages/web-visualization/src/chart/point/__tests__/Point.test.tsx b/packages/web/src/visualizations/chart/point/__tests__/Point.test.tsx
similarity index 96%
rename from packages/web-visualization/src/chart/point/__tests__/Point.test.tsx
rename to packages/web/src/visualizations/chart/point/__tests__/Point.test.tsx
index ee79ad2799..43d4f7ac17 100644
--- a/packages/web-visualization/src/chart/point/__tests__/Point.test.tsx
+++ b/packages/web/src/visualizations/chart/point/__tests__/Point.test.tsx
@@ -1,10 +1,10 @@
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { fireEvent, render, screen } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../../utils/test';
 import { CartesianChart } from '../../CartesianChart';
 import { Point } from '../Point';
 
-jest.mock('@coinbase/cds-web/hooks/useDimensions', () => ({
+jest.mock('../../../../hooks/useDimensions', () => ({
   useDimensions: jest.fn(() => ({
     observe: jest.fn(),
     width: 600,
diff --git a/packages/web-visualization/src/chart/point/index.ts b/packages/web/src/visualizations/chart/point/index.ts
similarity index 100%
rename from packages/web-visualization/src/chart/point/index.ts
rename to packages/web/src/visualizations/chart/point/index.ts
diff --git a/packages/web-visualization/src/chart/scrubber/DefaultScrubberBeacon.tsx b/packages/web/src/visualizations/chart/scrubber/DefaultScrubberBeacon.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/scrubber/DefaultScrubberBeacon.tsx
rename to packages/web/src/visualizations/chart/scrubber/DefaultScrubberBeacon.tsx
diff --git a/packages/web-visualization/src/chart/scrubber/DefaultScrubberBeaconLabel.tsx b/packages/web/src/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/scrubber/DefaultScrubberBeaconLabel.tsx
rename to packages/web/src/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.tsx
diff --git a/packages/web-visualization/src/chart/scrubber/DefaultScrubberLabel.tsx b/packages/web/src/visualizations/chart/scrubber/DefaultScrubberLabel.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/scrubber/DefaultScrubberLabel.tsx
rename to packages/web/src/visualizations/chart/scrubber/DefaultScrubberLabel.tsx
diff --git a/packages/web-visualization/src/chart/scrubber/Scrubber.tsx b/packages/web/src/visualizations/chart/scrubber/Scrubber.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/scrubber/Scrubber.tsx
rename to packages/web/src/visualizations/chart/scrubber/Scrubber.tsx
diff --git a/packages/web-visualization/src/chart/scrubber/ScrubberBeaconGroup.tsx b/packages/web/src/visualizations/chart/scrubber/ScrubberBeaconGroup.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/scrubber/ScrubberBeaconGroup.tsx
rename to packages/web/src/visualizations/chart/scrubber/ScrubberBeaconGroup.tsx
diff --git a/packages/web-visualization/src/chart/scrubber/ScrubberBeaconLabelGroup.tsx b/packages/web/src/visualizations/chart/scrubber/ScrubberBeaconLabelGroup.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/scrubber/ScrubberBeaconLabelGroup.tsx
rename to packages/web/src/visualizations/chart/scrubber/ScrubberBeaconLabelGroup.tsx
diff --git a/packages/web-visualization/src/chart/scrubber/ScrubberProvider.tsx b/packages/web/src/visualizations/chart/scrubber/ScrubberProvider.tsx
similarity index 99%
rename from packages/web-visualization/src/chart/scrubber/ScrubberProvider.tsx
rename to packages/web/src/visualizations/chart/scrubber/ScrubberProvider.tsx
index e47a3881bc..cb4c59066a 100644
--- a/packages/web-visualization/src/chart/scrubber/ScrubberProvider.tsx
+++ b/packages/web/src/visualizations/chart/scrubber/ScrubberProvider.tsx
@@ -15,7 +15,7 @@ export type ScrubberProviderProps = Partial<
   /**
    * A reference to the root SVG element, where interaction event handlers will be attached.
    */
-  svgRef: React.RefObject<SVGSVGElement> | null;
+  svgRef: React.RefObject<SVGSVGElement | null> | null;
 };
 
 /**
diff --git a/packages/web-visualization/src/chart/scrubber/__stories__/Scrubber.stories.tsx b/packages/web/src/visualizations/chart/scrubber/__stories__/Scrubber.stories.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/scrubber/__stories__/Scrubber.stories.tsx
rename to packages/web/src/visualizations/chart/scrubber/__stories__/Scrubber.stories.tsx
index c001e402de..c32e7a42a3 100644
--- a/packages/web-visualization/src/chart/scrubber/__stories__/Scrubber.stories.tsx
+++ b/packages/web/src/visualizations/chart/scrubber/__stories__/Scrubber.stories.tsx
@@ -1,12 +1,12 @@
 import { memo, StrictMode, useCallback, useMemo, useRef } from 'react';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import type { Rect } from '@coinbase/cds-common/types';
-import { Button } from '@coinbase/cds-web/buttons';
-import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
-import { Box, VStack } from '@coinbase/cds-web/layout';
-import { Text } from '@coinbase/cds-web/typography';
 import { m as motion } from 'framer-motion';
 
+import { Button } from '../../../../buttons';
+import { useTheme } from '../../../../hooks/useTheme';
+import { Box, VStack } from '../../../../layout';
+import { Text } from '../../../../typography';
 import {
   ChartText,
   type ChartTextChildren,
diff --git a/packages/web-visualization/src/chart/scrubber/__tests__/Scrubber.test.tsx b/packages/web/src/visualizations/chart/scrubber/__tests__/Scrubber.test.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/scrubber/__tests__/Scrubber.test.tsx
rename to packages/web/src/visualizations/chart/scrubber/__tests__/Scrubber.test.tsx
index df4ece3dd2..87799bee0e 100644
--- a/packages/web-visualization/src/chart/scrubber/__tests__/Scrubber.test.tsx
+++ b/packages/web/src/visualizations/chart/scrubber/__tests__/Scrubber.test.tsx
@@ -1,6 +1,6 @@
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { render, screen } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../../utils/test';
 import { CartesianChart } from '../../CartesianChart';
 import { Line } from '../../line/Line';
 import { ReferenceLine } from '../../line/ReferenceLine';
@@ -8,7 +8,7 @@ import { DefaultScrubberBeacon } from '../DefaultScrubberBeacon';
 import { DefaultScrubberLabel } from '../DefaultScrubberLabel';
 import { Scrubber } from '../Scrubber';
 
-jest.mock('@coinbase/cds-web/hooks/useDimensions', () => ({
+jest.mock('../../../../hooks/useDimensions', () => ({
   useDimensions: jest.fn(() => ({
     observe: jest.fn(),
     width: 600,
diff --git a/packages/web-visualization/src/chart/scrubber/index.ts b/packages/web/src/visualizations/chart/scrubber/index.ts
similarity index 100%
rename from packages/web-visualization/src/chart/scrubber/index.ts
rename to packages/web/src/visualizations/chart/scrubber/index.ts
diff --git a/packages/web-visualization/src/chart/text/ChartText.tsx b/packages/web/src/visualizations/chart/text/ChartText.tsx
similarity index 98%
rename from packages/web-visualization/src/chart/text/ChartText.tsx
rename to packages/web/src/visualizations/chart/text/ChartText.tsx
index ddc125f855..a60da097f9 100644
--- a/packages/web-visualization/src/chart/text/ChartText.tsx
+++ b/packages/web/src/visualizations/chart/text/ChartText.tsx
@@ -1,10 +1,10 @@
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import type { Rect, SharedProps } from '@coinbase/cds-common/types';
-import { cx } from '@coinbase/cds-web';
-import { Box, type BoxProps } from '@coinbase/cds-web/layout';
-import { Text } from '@coinbase/cds-web/typography';
 import { m as motion } from 'framer-motion';
 
+import { cx } from '../../../index';
+import { Box, type BoxProps } from '../../../layout';
+import { Text } from '../../../typography';
 import { useCartesianChartContext } from '../ChartProvider';
 import { type ChartInset, getChartInset } from '../utils';
 import { accessoryFadeTransitionDuration } from '../utils/transition';
diff --git a/packages/web-visualization/src/chart/text/ChartTextGroup.tsx b/packages/web/src/visualizations/chart/text/ChartTextGroup.tsx
similarity index 100%
rename from packages/web-visualization/src/chart/text/ChartTextGroup.tsx
rename to packages/web/src/visualizations/chart/text/ChartTextGroup.tsx
diff --git a/packages/web-visualization/src/chart/text/index.ts b/packages/web/src/visualizations/chart/text/index.ts
similarity index 100%
rename from packages/web-visualization/src/chart/text/index.ts
rename to packages/web/src/visualizations/chart/text/index.ts
diff --git a/packages/web-visualization/src/chart/utils/__tests__/axis.test.ts b/packages/web/src/visualizations/chart/utils/__tests__/axis.test.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/__tests__/axis.test.ts
rename to packages/web/src/visualizations/chart/utils/__tests__/axis.test.ts
diff --git a/packages/web-visualization/src/chart/utils/__tests__/bar.test.ts b/packages/web/src/visualizations/chart/utils/__tests__/bar.test.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/__tests__/bar.test.ts
rename to packages/web/src/visualizations/chart/utils/__tests__/bar.test.ts
diff --git a/packages/web-visualization/src/chart/utils/__tests__/chart.test.ts b/packages/web/src/visualizations/chart/utils/__tests__/chart.test.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/__tests__/chart.test.ts
rename to packages/web/src/visualizations/chart/utils/__tests__/chart.test.ts
diff --git a/packages/web-visualization/src/chart/utils/__tests__/gradient.test.ts b/packages/web/src/visualizations/chart/utils/__tests__/gradient.test.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/__tests__/gradient.test.ts
rename to packages/web/src/visualizations/chart/utils/__tests__/gradient.test.ts
diff --git a/packages/web-visualization/src/chart/utils/__tests__/path.test.ts b/packages/web/src/visualizations/chart/utils/__tests__/path.test.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/__tests__/path.test.ts
rename to packages/web/src/visualizations/chart/utils/__tests__/path.test.ts
diff --git a/packages/web-visualization/src/chart/utils/__tests__/point.test.ts b/packages/web/src/visualizations/chart/utils/__tests__/point.test.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/__tests__/point.test.ts
rename to packages/web/src/visualizations/chart/utils/__tests__/point.test.ts
diff --git a/packages/web-visualization/src/chart/utils/__tests__/scale.test.ts b/packages/web/src/visualizations/chart/utils/__tests__/scale.test.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/__tests__/scale.test.ts
rename to packages/web/src/visualizations/chart/utils/__tests__/scale.test.ts
diff --git a/packages/web-visualization/src/chart/utils/__tests__/scrubber.test.ts b/packages/web/src/visualizations/chart/utils/__tests__/scrubber.test.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/__tests__/scrubber.test.ts
rename to packages/web/src/visualizations/chart/utils/__tests__/scrubber.test.ts
diff --git a/packages/web-visualization/src/chart/utils/__tests__/transition.test.ts b/packages/web/src/visualizations/chart/utils/__tests__/transition.test.ts
similarity index 98%
rename from packages/web-visualization/src/chart/utils/__tests__/transition.test.ts
rename to packages/web/src/visualizations/chart/utils/__tests__/transition.test.ts
index 4cf33e82d4..6b335c2cbb 100644
--- a/packages/web-visualization/src/chart/utils/__tests__/transition.test.ts
+++ b/packages/web/src/visualizations/chart/utils/__tests__/transition.test.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import type { MotionValue } from 'framer-motion';
 
 import { defaultTransition, getTransition, usePathTransition } from '../transition';
@@ -162,10 +162,10 @@ describe('usePathTransition', () => {
   });
 
   it('supports React Strict Mode when currentPath changes', () => {
-    const Strict = (props: { path: string; children?: React.ReactNode }) =>
-      React.createElement(React.StrictMode, null, props.children);
+    const Strict = ({ children }: { children?: React.ReactNode }) =>
+      React.createElement(React.StrictMode, null, children);
 
-    const { result, rerender } = renderHook<{ path: string }, MotionValue<string>>(
+    const { result, rerender } = renderHook<MotionValue<string>, { path: string }>(
       ({ path }) => usePathTransition({ currentPath: path }),
       {
         wrapper: Strict,
diff --git a/packages/web-visualization/src/chart/utils/axis.ts b/packages/web/src/visualizations/chart/utils/axis.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/axis.ts
rename to packages/web/src/visualizations/chart/utils/axis.ts
diff --git a/packages/web-visualization/src/chart/utils/bar.ts b/packages/web/src/visualizations/chart/utils/bar.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/bar.ts
rename to packages/web/src/visualizations/chart/utils/bar.ts
diff --git a/packages/web-visualization/src/chart/utils/chart.ts b/packages/web/src/visualizations/chart/utils/chart.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/chart.ts
rename to packages/web/src/visualizations/chart/utils/chart.ts
diff --git a/packages/web-visualization/src/chart/utils/context.ts b/packages/web/src/visualizations/chart/utils/context.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/context.ts
rename to packages/web/src/visualizations/chart/utils/context.ts
diff --git a/packages/web-visualization/src/chart/utils/gradient.ts b/packages/web/src/visualizations/chart/utils/gradient.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/gradient.ts
rename to packages/web/src/visualizations/chart/utils/gradient.ts
diff --git a/packages/web-visualization/src/chart/utils/index.ts b/packages/web/src/visualizations/chart/utils/index.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/index.ts
rename to packages/web/src/visualizations/chart/utils/index.ts
diff --git a/packages/web-visualization/src/chart/utils/interpolate.ts b/packages/web/src/visualizations/chart/utils/interpolate.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/interpolate.ts
rename to packages/web/src/visualizations/chart/utils/interpolate.ts
diff --git a/packages/web-visualization/src/chart/utils/path.ts b/packages/web/src/visualizations/chart/utils/path.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/path.ts
rename to packages/web/src/visualizations/chart/utils/path.ts
diff --git a/packages/web-visualization/src/chart/utils/point.ts b/packages/web/src/visualizations/chart/utils/point.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/point.ts
rename to packages/web/src/visualizations/chart/utils/point.ts
diff --git a/packages/web-visualization/src/chart/utils/scale.ts b/packages/web/src/visualizations/chart/utils/scale.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/scale.ts
rename to packages/web/src/visualizations/chart/utils/scale.ts
diff --git a/packages/web-visualization/src/chart/utils/scrubber.ts b/packages/web/src/visualizations/chart/utils/scrubber.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/scrubber.ts
rename to packages/web/src/visualizations/chart/utils/scrubber.ts
diff --git a/packages/web-visualization/src/chart/utils/transition.ts b/packages/web/src/visualizations/chart/utils/transition.ts
similarity index 100%
rename from packages/web-visualization/src/chart/utils/transition.ts
rename to packages/web/src/visualizations/chart/utils/transition.ts
diff --git a/packages/web/src/visualizations/index.ts b/packages/web/src/visualizations/index.ts
index a7cb81333e..de3db37ca7 100644
--- a/packages/web/src/visualizations/index.ts
+++ b/packages/web/src/visualizations/index.ts
@@ -1,3 +1,4 @@
+export * from './chart';
 export * from './DefaultProgressCircleContent';
 export * from './getProgressBarLabelParts';
 export * from './ProgressBar';
@@ -5,3 +6,4 @@ export * from './ProgressBarWithFixedLabels';
 export * from './ProgressBarWithFloatLabel';
 export * from './ProgressCircle';
 export * from './ProgressContainerWithButtons';
+export * from './sparkline';
diff --git a/packages/web-visualization/src/sparkline/Counter.tsx b/packages/web/src/visualizations/sparkline/Counter.tsx
similarity index 93%
rename from packages/web-visualization/src/sparkline/Counter.tsx
rename to packages/web/src/visualizations/sparkline/Counter.tsx
index 9e58654092..8d9af209c6 100644
--- a/packages/web-visualization/src/sparkline/Counter.tsx
+++ b/packages/web/src/visualizations/sparkline/Counter.tsx
@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
 import { useCounter } from '@coinbase/cds-common/visualizations/useCounter';
-import type { CounterBaseProps } from '@coinbase/cds-web/visualizations/Counter';
 import { css } from '@linaria/core';
 
+import type { CounterBaseProps } from '../Counter';
+
 const containerCss = css`
   position: relative;
   display: inline-flex;
diff --git a/packages/web-visualization/src/sparkline/Sparkline.tsx b/packages/web/src/visualizations/sparkline/Sparkline.tsx
similarity index 99%
rename from packages/web-visualization/src/sparkline/Sparkline.tsx
rename to packages/web/src/visualizations/sparkline/Sparkline.tsx
index e70de260b0..fff7b63b27 100644
--- a/packages/web-visualization/src/sparkline/Sparkline.tsx
+++ b/packages/web/src/visualizations/sparkline/Sparkline.tsx
@@ -5,7 +5,8 @@ import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColo
 import { getSparklineRange } from '@coinbase/cds-common/visualizations/getSparklineRange';
 import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
 import { generateRandomId } from '@coinbase/cds-utils';
-import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
+
+import { useTheme } from '../../hooks/useTheme';
 
 import { generateSparklineAreaWithId } from './generateSparklineWithId';
 import type { SparklineAreaBaseProps } from './SparklineArea';
diff --git a/packages/web-visualization/src/sparkline/SparklineArea.tsx b/packages/web/src/visualizations/sparkline/SparklineArea.tsx
similarity index 100%
rename from packages/web-visualization/src/sparkline/SparklineArea.tsx
rename to packages/web/src/visualizations/sparkline/SparklineArea.tsx
diff --git a/packages/web-visualization/src/sparkline/SparklineAreaPattern.tsx b/packages/web/src/visualizations/sparkline/SparklineAreaPattern.tsx
similarity index 93%
rename from packages/web-visualization/src/sparkline/SparklineAreaPattern.tsx
rename to packages/web/src/visualizations/sparkline/SparklineAreaPattern.tsx
index 1cda892ecc..c5a2ed863a 100644
--- a/packages/web-visualization/src/sparkline/SparklineAreaPattern.tsx
+++ b/packages/web/src/visualizations/sparkline/SparklineAreaPattern.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useSparklineAreaOpacity } from '@coinbase/cds-common/visualizations/useSparklineAreaOpacity';
-import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
+
+import { useTheme } from '../../hooks/useTheme';
 
 export type SparklineAreaPatternBaseProps = {
   color: string;
diff --git a/packages/web-visualization/src/sparkline/SparklineGradient.tsx b/packages/web/src/visualizations/sparkline/SparklineGradient.tsx
similarity index 100%
rename from packages/web-visualization/src/sparkline/SparklineGradient.tsx
rename to packages/web/src/visualizations/sparkline/SparklineGradient.tsx
diff --git a/packages/web-visualization/src/sparkline/SparklinePath.tsx b/packages/web/src/visualizations/sparkline/SparklinePath.tsx
similarity index 100%
rename from packages/web-visualization/src/sparkline/SparklinePath.tsx
rename to packages/web/src/visualizations/sparkline/SparklinePath.tsx
diff --git a/packages/web-visualization/src/sparkline/__figma__/Sparkline.figma.tsx b/packages/web/src/visualizations/sparkline/__figma__/Sparkline.figma.tsx
similarity index 89%
rename from packages/web-visualization/src/sparkline/__figma__/Sparkline.figma.tsx
rename to packages/web/src/visualizations/sparkline/__figma__/Sparkline.figma.tsx
index 5eb3660f1d..ec28638a4a 100644
--- a/packages/web-visualization/src/sparkline/__figma__/Sparkline.figma.tsx
+++ b/packages/web/src/visualizations/sparkline/__figma__/Sparkline.figma.tsx
@@ -10,7 +10,7 @@ figma.connect(
   'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-15040&m=dev',
   {
     imports: [
-      "import { Sparkline } from '@coinbase/cds-web-visualization'",
+      "import { Sparkline } from '@coinbase/cds-web/visualizations/sparkline'",
       "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath'",
     ],
     example: () => {
diff --git a/packages/web-visualization/src/sparkline/generateSparklineWithId.ts b/packages/web/src/visualizations/sparkline/generateSparklineWithId.ts
similarity index 100%
rename from packages/web-visualization/src/sparkline/generateSparklineWithId.ts
rename to packages/web/src/visualizations/sparkline/generateSparklineWithId.ts
diff --git a/packages/web/src/visualizations/sparkline/index.ts b/packages/web/src/visualizations/sparkline/index.ts
new file mode 100644
index 0000000000..5eab72d409
--- /dev/null
+++ b/packages/web/src/visualizations/sparkline/index.ts
@@ -0,0 +1,5 @@
+export * from './Sparkline';
+export * from './sparkline-interactive/SparklineInteractive';
+export * from './sparkline-interactive-header/SparklineInteractiveHeader';
+export * from './SparklineArea';
+export * from './SparklineGradient';
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx
similarity index 97%
rename from packages/web-visualization/src/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx
index 577e61b2e7..3ecd6768f9 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx
@@ -7,9 +7,10 @@ import type {
   SparklineInteractiveHeaderVariant,
 } from '@coinbase/cds-common/types';
 import { debounce } from '@coinbase/cds-common/utils/debounce';
-import { AccessibilityAnnouncer } from '@coinbase/cds-web/AccessibilityAnnouncer/AccessibilityAnnouncer';
-import { VStack } from '@coinbase/cds-web/layout';
-import { Text } from '@coinbase/cds-web/typography/Text';
+
+import { AccessibilityAnnouncer } from '../../../AccessibilityAnnouncer/AccessibilityAnnouncer';
+import { VStack } from '../../../layout';
+import { Text } from '../../../typography/Text';
 
 export * from '@coinbase/cds-common/types/SparklineInteractiveHeaderBaseProps';
 
@@ -161,6 +162,7 @@ const SparklineInteractiveHeaderStable = memo(
           }, 500),
         [],
       );
+      // eslint-disable-next-line react-hooks/use-memo
       const safelyUpdateSubHeadA11yRef = useCallback(debouncedUpdateMessage, [
         debouncedUpdateMessage,
       ]);
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx
similarity index 96%
rename from packages/web-visualization/src/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx
index 76482c7a5e..ce59cd7f6d 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx
@@ -9,8 +9,8 @@ figma.connect(
   'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14931&m=dev',
   {
     imports: [
-      "import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization'",
-      "import { SparklineInteractive } from '@coinbase/cds-web-visualization'",
+      "import { SparklineInteractiveHeader } from '@coinbase/cds-web/visualizations/sparkline'",
+      "import { SparklineInteractive } from '@coinbase/cds-web/visualizations/sparkline'",
     ],
     props: {
       compact: figma.boolean('compact'),
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx
similarity index 98%
rename from packages/web-visualization/src/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx
index fb8a111d0d..b2994d0f82 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import type { ChartDataPoint, ChartScrubParams } from '@coinbase/cds-common';
 import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
-import { Icon } from '@coinbase/cds-web/icons';
-import { HStack } from '@coinbase/cds-web/layout';
-import { Text } from '@coinbase/cds-web/typography';
 
+import { Icon } from '../../../../icons';
+import { HStack } from '../../../../layout';
+import { Text } from '../../../../typography';
 import { SparklineInteractive } from '../../sparkline-interactive/SparklineInteractive';
 import {
   SparklineInteractiveHeader,
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx
similarity index 97%
rename from packages/web-visualization/src/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx
index f39f3ad71e..c63ce3cdf8 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx
@@ -1,6 +1,6 @@
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { render, screen } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../../utils/test';
 import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
 
 const defaultSubHead = {
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/InnerSparklineInteractiveProvider.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/InnerSparklineInteractiveProvider.tsx
similarity index 100%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/InnerSparklineInteractiveProvider.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/InnerSparklineInteractiveProvider.tsx
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractive.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractive.tsx
similarity index 97%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractive.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractive.tsx
index 2f3e3b72c4..eb2ce19de2 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractive.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractive.tsx
@@ -14,18 +14,19 @@ import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColo
 import { useSparklineCoordinates } from '@coinbase/cds-common/visualizations/useSparklineCoordinates';
 import { chartFallbackNegative, chartFallbackPositive } from '@coinbase/cds-lottie-files';
 import { emptyArray, isStorybook, noop } from '@coinbase/cds-utils';
-import { cx, useTheme } from '@coinbase/cds-web';
-import { Lottie } from '@coinbase/cds-web/animation';
-import { useDimensions } from '@coinbase/cds-web/hooks/useDimensions';
-import { HStack, VStack } from '@coinbase/cds-web/layout';
-import { Box } from '@coinbase/cds-web/layout/Box';
-import { getBrowserGlobals } from '@coinbase/cds-web/utils/browser';
+import isEqual from 'lodash/isEqual';
+import isObject from 'lodash/isObject';
+
+import { Lottie } from '../../../animation';
+import { useDimensions } from '../../../hooks/useDimensions';
+import { cx, useTheme } from '../../../index';
+import { HStack, VStack } from '../../../layout';
+import { Box } from '../../../layout/Box';
+import { getBrowserGlobals } from '../../../utils/browser';
 import {
   VisualizationContainer,
   type VisualizationContainerDimension,
-} from '@coinbase/cds-web/visualizations/VisualizationContainer';
-import isEqual from 'lodash/isEqual';
-import isObject from 'lodash/isObject';
+} from '../../VisualizationContainer';
 
 import { InnerSparklineInteractiveProvider } from './InnerSparklineInteractiveProvider';
 import { SparklineInteractiveHoverDate } from './SparklineInteractiveHoverDate';
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.tsx
similarity index 100%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.tsx
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.tsx
similarity index 83%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.tsx
index 1d5f1490ff..0698ffb8be 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverDate.tsx
@@ -1,8 +1,9 @@
 import React, { memo, useCallback } from 'react';
-import { cx } from '@coinbase/cds-web';
-import { TextLabel2 } from '@coinbase/cds-web/typography/TextLabel2';
 import { css } from '@linaria/core';
 
+import { cx } from '../../../index';
+import { Text } from '../../../typography/Text';
+
 import { useSparklineInteractiveScrubContext } from './SparklineInteractiveScrubProvider';
 
 const resetFadeCss = css`
@@ -26,11 +27,11 @@ export const SparklineInteractiveHoverDate = memo(() => {
   );
 
   return (
-    <TextLabel2 tabularNumbers as="div">
+    <Text tabularNumbers as="div" font="label2">
       <span ref={setupDateRef} className={cx(resetFadeCss, textCss)}>
         {/* prevent the container vertical jump by stubbing out a date with no opacity */}
         {dateString}
       </span>
-    </TextLabel2>
+    </Text>
   );
 });
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveHoverPrice.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverPrice.tsx
similarity index 82%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveHoverPrice.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverPrice.tsx
index bf216c63f8..dd465e8a29 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveHoverPrice.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveHoverPrice.tsx
@@ -1,8 +1,9 @@
 import React, { memo, useCallback } from 'react';
-import { cx } from '@coinbase/cds-web';
-import { TextLabel2 } from '@coinbase/cds-web/typography/TextLabel2';
 import { css } from '@linaria/core';
 
+import { cx } from '../../../index';
+import { Text } from '../../../typography/Text';
+
 import { useSparklineInteractiveScrubContext } from './SparklineInteractiveScrubProvider';
 
 const resetFadeCss = css`
@@ -25,10 +26,10 @@ export const SparklineInteractiveHoverPrice = memo(() => {
   );
 
   return (
-    <TextLabel2 tabularNumbers as="div">
+    <Text tabularNumbers as="div" font="label2">
       <span ref={setupPriceRef} className={cx(resetFadeCss, textCss)}>
         {/* prevent the container vertical jump by stubbing out a price with no opacity */}
       </span>
-    </TextLabel2>
+    </Text>
   );
 });
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.tsx
similarity index 98%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.tsx
index d0f20647e0..58b90444b0 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveLineVertical.tsx
@@ -1,8 +1,9 @@
 import React, { memo, useCallback } from 'react';
 import { borderWidth, lineDashArray } from '@coinbase/cds-common/tokens/sparkline';
-import { cx } from '@coinbase/cds-web';
 import { css } from '@linaria/core';
 
+import { cx } from '../../../index';
+
 import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
 import { useSparklineInteractiveScrubContext } from './SparklineInteractiveScrubProvider';
 
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.tsx
similarity index 91%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.tsx
index ca021ec738..edeb3a17bc 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.tsx
@@ -2,12 +2,13 @@ import React, { memo, useCallback, useMemo, useState } from 'react';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { fadeDuration } from '@coinbase/cds-common/tokens/sparkline';
 import { useDateLookup } from '@coinbase/cds-common/visualizations/useDateLookup';
-import { cubicBezier } from '@coinbase/cds-web/animation/convertMotionConfig';
-import { HStack } from '@coinbase/cds-web/layout';
-import { TextLabel2 } from '@coinbase/cds-web/typography/TextLabel2';
 import { css } from '@linaria/core';
 import times from 'lodash/times';
 
+import { cubicBezier } from '../../../animation/convertMotionConfig';
+import { HStack } from '../../../layout';
+import { Text } from '../../../typography/Text';
+
 import type { ChartFormatDate, ChartGetMarker } from './SparklineInteractive';
 
 const fadeInCss = css`
@@ -51,9 +52,9 @@ const SparklineInteractiveMarkerDate: React.FunctionComponent<
   const fallback = <span style={{ visibility: 'hidden' }}>-</span>;
   return (
     <span ref={setupRef}>
-      <TextLabel2 as="span" color="fgMuted" textAlign="center">
+      <Text as="span" color="fgMuted" font="label2" textAlign="center">
         {dateStr || fallback}
-      </TextLabel2>
+      </Text>
     </span>
   );
 });
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractivePaths.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractivePaths.tsx
similarity index 100%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractivePaths.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractivePaths.tsx
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.tsx
similarity index 90%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.tsx
index 383712cf2b..930c088571 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.tsx
@@ -1,10 +1,11 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { periodLabelMap } from '@coinbase/cds-common/tokens/sparkline';
 import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
-import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
-import { Box, HStack } from '@coinbase/cds-web/layout';
-import { Pressable } from '@coinbase/cds-web/system/Pressable';
-import { TextLabel1 } from '@coinbase/cds-web/typography/TextLabel1';
+
+import { useTheme } from '../../../hooks/useTheme';
+import { Box, HStack } from '../../../layout';
+import { Pressable } from '../../../system/Pressable';
+import { Text } from '../../../typography/Text';
 
 export type SparklineInteractivePeriodSelectorProps<Period extends string> = {
   selectedPeriod: Period;
@@ -44,16 +45,17 @@ function SparklineInteractivePeriodWithGeneric<Period extends string>({
         borderRadius={200}
         onClick={handleOnClick}
       >
-        <TextLabel1
+        <Text
           noWrap
           as="span"
           dangerouslySetColor={isSelected ? color : 'var(--color-fgMuted)'}
           display="block"
+          font="label1"
           paddingX={2}
           paddingY={1}
         >
           {period.label}
-        </TextLabel1>
+        </Text>
       </Pressable>
     </Box>
   );
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveProvider.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveProvider.tsx
similarity index 100%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveProvider.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveProvider.tsx
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveScrubHandler.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveScrubHandler.tsx
similarity index 97%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveScrubHandler.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveScrubHandler.tsx
index 4f8ffe9237..fc53abd2cc 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveScrubHandler.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveScrubHandler.tsx
@@ -4,11 +4,12 @@ import type { ChartGetMarker } from '@coinbase/cds-common';
 import { fadeDuration, maskOpacity } from '@coinbase/cds-common/tokens/sparkline';
 import { debounce } from '@coinbase/cds-common/utils/debounce';
 import { noop } from '@coinbase/cds-utils';
-import { cx } from '@coinbase/cds-web';
-import { cubicBezier } from '@coinbase/cds-web/animation/convertMotionConfig';
-import { useDimensions } from '@coinbase/cds-web/hooks/useDimensions';
 import { css } from '@linaria/core';
 
+import { cubicBezier } from '../../../animation/convertMotionConfig';
+import { useDimensions } from '../../../hooks/useDimensions';
+import { cx } from '../../../index';
+
 import { fadeIn, fadeOut } from './fade';
 import type { SparklineInteractiveBaseProps } from './SparklineInteractive';
 import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
@@ -146,6 +147,7 @@ const SparklineInteractiveScrubHandlerWithGeneric = <Period extends string>({
     [setXPos],
   );
 
+  // eslint-disable-next-line react-hooks/use-memo
   const safelyUpdatePosition = useCallback(debouncedUpdatePositionHandler, [
     debouncedUpdatePositionHandler,
   ]);
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveScrubProvider.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveScrubProvider.tsx
similarity index 100%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveScrubProvider.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveScrubProvider.tsx
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx
similarity index 98%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx
index cbefa735e4..44e8843f7a 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.tsx
@@ -4,11 +4,11 @@ import type { ChartDataPoint, ChartTimeseries } from '@coinbase/cds-common/types
 import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
 import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
 import { useTimeseriesPaths } from '@coinbase/cds-common/visualizations/useTimeseriesPaths';
-import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
 import { interpolatePath } from 'd3-interpolate-path';
 import { select } from 'd3-selection';
 import type { Area, Line } from 'd3-shape';
 
+import { useTheme } from '../../../hooks/useTheme';
 import { SparklinePath } from '../SparklinePath';
 
 const { duration, easing } = animatedPathConfig;
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx
similarity index 98%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx
index bea24790c1..71ccb6e281 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.tsx
@@ -7,7 +7,7 @@ figma.connect(
   SparklineInteractive,
   'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14858&m=dev',
   {
-    imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization'"],
+    imports: ["import { SparklineInteractive } from '@coinbase/cds-web/visualizations/sparkline'"],
     props: {
       compact: figma.boolean('compact'),
       disableScrubbing: figma.boolean('scrubbing', {
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx
similarity index 99%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx
index e1c3d5bf36..f35aa5db03 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx
@@ -4,9 +4,9 @@ import {
   sparklineInteractiveData,
   sparklineInteractiveHoverData,
 } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
-import { Box, VStack } from '@coinbase/cds-web/layout';
 import { css } from '@linaria/core';
 
+import { Box, VStack } from '../../../../layout';
 import {
   SparklineInteractiveHeader,
   type SparklineInteractiveHeaderRef,
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx
similarity index 96%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx
index e5ff2fe3ce..7c07343c73 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx
@@ -1,7 +1,7 @@
 import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { render, screen } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../../utils/test';
 import { SparklineInteractiveHeader } from '../..';
 import { SparklineInteractive } from '../SparklineInteractive';
 
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx b/packages/web/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx
similarity index 95%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx
index dd8ec5a574..bd5410baed 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx
@@ -1,6 +1,6 @@
-import { DefaultThemeProvider } from '@coinbase/cds-web/utils/test';
 import { fireEvent, render, screen } from '@testing-library/react';
 
+import { DefaultThemeProvider } from '../../../../utils/test';
 import { SparklineInteractivePeriodSelector } from '../SparklineInteractivePeriodSelector';
 
 const periods = [
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/fade.ts b/packages/web/src/visualizations/sparkline/sparkline-interactive/fade.ts
similarity index 92%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/fade.ts
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/fade.ts
index e7e578df85..1d269b96cc 100644
--- a/packages/web-visualization/src/sparkline/sparkline-interactive/fade.ts
+++ b/packages/web/src/visualizations/sparkline/sparkline-interactive/fade.ts
@@ -1,7 +1,8 @@
 import { fadeDuration } from '@coinbase/cds-common/tokens/sparkline';
-import { cubicBezier } from '@coinbase/cds-web/animation/convertMotionConfig';
 import { css } from '@linaria/core';
 
+import { cubicBezier } from '../../../animation/convertMotionConfig';
+
 // keyframes are global so they should be namespaced
 const fadeInCss = css`
   && {
diff --git a/packages/web-visualization/src/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts b/packages/web/src/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts
similarity index 100%
rename from packages/web-visualization/src/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts
rename to packages/web/src/visualizations/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts
diff --git a/templates/expo-app/components/AssetCarousel.tsx b/templates/expo-app/components/AssetCarousel.tsx
index 7bf31422f7..a48b68b6bb 100644
--- a/templates/expo-app/components/AssetCarousel.tsx
+++ b/templates/expo-app/components/AssetCarousel.tsx
@@ -17,7 +17,6 @@ export function AssetCarousel() {
   return (
     <Carousel
       loop
-      paginationVariant="dot"
       title="Explore Assets"
       snapMode="item"
       styles={{
diff --git a/templates/expo-app/components/AssetChart.tsx b/templates/expo-app/components/AssetChart.tsx
index 3a465f47fe..8a7a6e0eab 100644
--- a/templates/expo-app/components/AssetChart.tsx
+++ b/templates/expo-app/components/AssetChart.tsx
@@ -13,7 +13,7 @@ import {
   LineChart,
   PeriodSelector,
   PeriodSelectorActiveIndicator,
-} from '@coinbase/cds-mobile-visualization';
+} from '@coinbase/cds-mobile/visualizations/chart';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 
@@ -40,7 +40,7 @@ const BTCTab = memo(
 
     const wrappedLabel =
       typeof label === 'string' ? (
-        <Text font="label1" dangerouslySetColor={isActive ? btcColor : theme.color.fg}>
+        <Text font="label1" style={{ color: isActive ? btcColor : theme.color.fg }}>
           {label}
         </Text>
       ) : (
diff --git a/templates/expo-app/components/CardList.tsx b/templates/expo-app/components/CardList.tsx
index 01652763ff..d48b212332 100644
--- a/templates/expo-app/components/CardList.tsx
+++ b/templates/expo-app/components/CardList.tsx
@@ -17,7 +17,6 @@ export function CardList() {
 
   return (
     <Carousel
-      paginationVariant="dot"
       title="For you"
       styles={{
         root: { paddingHorizontal: horizontalPadding },
diff --git a/templates/expo-app/package.json b/templates/expo-app/package.json
index 4be2c0d201..cc5ca00c8c 100644
--- a/templates/expo-app/package.json
+++ b/templates/expo-app/package.json
@@ -8,37 +8,33 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@expo-google-fonts/inter": "^0.2.3",
     "@coinbase/cds-common": "^8",
     "@coinbase/cds-icons": "^5",
     "@coinbase/cds-illustrations": "^4",
     "@coinbase/cds-mobile": "^8",
-    "@coinbase/cds-mobile-visualization": "beta",
-    "@dotlottie/react-player": "1.6.1",
-    "@lottiefiles/dotlottie-react": "0.6.5",
-    "@lottiefiles/react-lottie-player": "3.5.3",
+    "@expo-google-fonts/inter": "^0.3.0",
     "@react-navigation/native": "6.1.17",
     "@react-navigation/native-stack": "6.9.26",
-    "@react-navigation/stack": "6.4.1",
-    "@shopify/react-native-skia": "1.2.3",
-    "expo": "~51.0.28",
-    "expo-status-bar": "~1.12.1",
-    "lottie-react-native": "6.7.0",
-    "metro": "0.80.12",
-    "react": "18.2.0",
-    "react-native": "0.74.5",
-    "react-native-gesture-handler": "~2.16.1",
+    "@shopify/react-native-skia": "2.2.12",
+    "expo": "54.0.32",
+    "expo-font": "14.0.11",
+    "expo-splash-screen": "31.0.13",
+    "expo-status-bar": "3.0.9",
+    "lottie-react-native": "7.3.1",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "2.28.0",
     "react-native-inappbrowser-reborn": "3.7.0",
-    "react-native-linear-gradient": "2.8.3",
     "react-native-navigation-bar-color": "2.0.2",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
-    "react-native-svg": "15.2.0"
+    "react-native-reanimated": "4.1.1",
+    "react-native-safe-area-context": "5.6.0",
+    "react-native-screens": "4.16.0",
+    "react-native-svg": "15.12.1",
+    "react-native-worklets": "0.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/react": "~18.2.0",
+    "@types/react": "~19.0.0",
     "typescript": "~5.3.0"
   },
   "private": true,
diff --git a/templates/next-app/package.json b/templates/next-app/package.json
index 1ef1724e63..d75d19ee51 100644
--- a/templates/next-app/package.json
+++ b/templates/next-app/package.json
@@ -14,11 +14,10 @@
     "@coinbase/cds-icons": "^5",
     "@coinbase/cds-illustrations": "^4",
     "@coinbase/cds-web": "^8",
-    "@coinbase/cds-web-visualization": "^3",
     "framer-motion": "^10",
     "next": "15.4.8",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "19.1.2",
+    "react-dom": "19.1.2"
   },
   "devDependencies": {
     "@types/node": "^22",
diff --git a/templates/next-app/src/app/components/CardList/ETHStakingCard.tsx b/templates/next-app/src/app/components/CardList/ETHStakingCard.tsx
index f62a58757e..2d0f25cf41 100644
--- a/templates/next-app/src/app/components/CardList/ETHStakingCard.tsx
+++ b/templates/next-app/src/app/components/CardList/ETHStakingCard.tsx
@@ -6,7 +6,7 @@ import { Text } from '@coinbase/cds-web/typography';
 export const ETHStakingCard = () => {
   return (
     <UpsellCard
-      dangerouslySetBackground="rgb(var(--purple70))"
+      background="accentBoldPurple"
       title={
         <Text as="h3" font="headline" color="fgInverse">
           Up to 3.29% APR on ETHs
diff --git a/templates/vite-app/index.html b/templates/vite-app/index.html
index c19f9c4a27..a14497510e 100644
--- a/templates/vite-app/index.html
+++ b/templates/vite-app/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CDS Vite App</title>
   </head>
diff --git a/templates/vite-app/package.json b/templates/vite-app/package.json
index 926334e870..f352bdf6e2 100644
--- a/templates/vite-app/package.json
+++ b/templates/vite-app/package.json
@@ -15,17 +15,16 @@
     "@coinbase/cds-icons": "^5",
     "@coinbase/cds-illustrations": "^4",
     "@coinbase/cds-web": "^8",
-    "@coinbase/cds-web-visualization": "^3",
     "framer-motion": "^10",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "19.1.2",
+    "react-dom": "19.1.2"
   },
   "devDependencies": {
     "@types/node": "^22",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "@vitejs/plugin-react": "^5.0.0",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
+    "@vitejs/plugin-react": "^5.1.2",
     "typescript": "~5.9.2",
-    "vite": "^7.1.2"
+    "vite": "^7.3.1"
   }
 }
diff --git a/templates/vite-app/src/components/CardList/ETHStakingCard.tsx b/templates/vite-app/src/components/CardList/ETHStakingCard.tsx
index f62a58757e..4cc23ffc69 100644
--- a/templates/vite-app/src/components/CardList/ETHStakingCard.tsx
+++ b/templates/vite-app/src/components/CardList/ETHStakingCard.tsx
@@ -6,7 +6,7 @@ import { Text } from '@coinbase/cds-web/typography';
 export const ETHStakingCard = () => {
   return (
     <UpsellCard
-      dangerouslySetBackground="rgb(var(--purple70))"
+      style={{ backgroundColor: 'rgb(var(--purple70))' }}
       title={
         <Text as="h3" font="headline" color="fgInverse">
           Up to 3.29% APR on ETHs
diff --git a/templates/vite-app/tsconfig.app.json b/templates/vite-app/tsconfig.app.json
index 480184d2bb..7095ff0cd5 100644
--- a/templates/vite-app/tsconfig.app.json
+++ b/templates/vite-app/tsconfig.app.json
@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
+    "target": "ES2022",
     "useDefineForClassFields": true,
     "lib": [
-      "ES2020",
+      "ES2022",
       "DOM",
       "DOM.Iterable"
     ],
diff --git a/templates/webpack-app/package.json b/templates/webpack-app/package.json
index 354e3acdfe..72a992bd5b 100644
--- a/templates/webpack-app/package.json
+++ b/templates/webpack-app/package.json
@@ -15,10 +15,9 @@
     "@coinbase/cds-icons": "^5",
     "@coinbase/cds-illustrations": "^4",
     "@coinbase/cds-web": "^8",
-    "@coinbase/cds-web-visualization": "^3",
     "framer-motion": "^10",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "19.1.2",
+    "react-dom": "19.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
@@ -26,15 +25,15 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@types/node": "^22",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
     "babel-loader": "^10.0.0",
     "css-loader": "^7.1.2",
-    "html-webpack-plugin": "^5.6.3",
-    "mini-css-extract-plugin": "^2.9.3",
+    "html-webpack-plugin": "^5.6.5",
+    "mini-css-extract-plugin": "^2.9.4",
     "typescript": "~5.9.2",
     "webpack": "^5.101.0",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2"
+    "webpack-dev-server": "^5.2.3"
   }
 }
diff --git a/templates/webpack-app/src/components/CardList/ETHStakingCard.tsx b/templates/webpack-app/src/components/CardList/ETHStakingCard.tsx
index f62a58757e..4cc23ffc69 100644
--- a/templates/webpack-app/src/components/CardList/ETHStakingCard.tsx
+++ b/templates/webpack-app/src/components/CardList/ETHStakingCard.tsx
@@ -6,7 +6,7 @@ import { Text } from '@coinbase/cds-web/typography';
 export const ETHStakingCard = () => {
   return (
     <UpsellCard
-      dangerouslySetBackground="rgb(var(--purple70))"
+      style={{ backgroundColor: 'rgb(var(--purple70))' }}
       title={
         <Text as="h3" font="headline" color="fgInverse">
           Up to 3.29% APR on ETHs
diff --git a/templates/webpack-app/tsconfig.json b/templates/webpack-app/tsconfig.json
index d873ba82de..16e99b66bb 100644
--- a/templates/webpack-app/tsconfig.json
+++ b/templates/webpack-app/tsconfig.json
@@ -1,21 +1,21 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2022",
     "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
+      "DOM",
+      "DOM.Iterable",
+      "ES2022"
     ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
+    "module": "ESNext",
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true
   },
   "include": [
diff --git a/tools/depcheck.mjs b/tools/depcheck.mjs
index 7a97faa2e8..ba1e993af1 100644
--- a/tools/depcheck.mjs
+++ b/tools/depcheck.mjs
@@ -1,8 +1,8 @@
 import depcheck from 'depcheck';
+import { diffLines } from 'diff';
 import { globSync } from 'glob';
 import fs from 'node:fs';
 import path from 'node:path';
-import { diffLines } from 'diff';
 
 // See the depcheck docs for info about ignoring files and deps https://www.npmjs.com/package/depcheck
 const ignorePatterns = [];
diff --git a/tsconfig.base.json b/tsconfig.base.json
index ab501faff0..b01e146d02 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -108,12 +108,6 @@
       "@coinbase/docusaurus-plugin-kbar/*": [
         "libs/docusaurus-plugin-kbar/src/*"
       ],
-      "@coinbase/ui-mobile-playground": [
-        "packages/ui-mobile-playground/src"
-      ],
-      "@coinbase/ui-mobile-playground/*": [
-        "packages/ui-mobile-playground/src/*"
-      ],
       "@site/*": [
         "apps/docs/*"
       ]
diff --git a/tsconfig.json b/tsconfig.json
index 3fc85ce323..b6647f3801 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,10 +7,10 @@
       "path": "apps/docs"
     },
     {
-      "path": "apps/mobile-app"
+      "path": "apps/storybook"
     },
     {
-      "path": "apps/storybook"
+      "path": "apps/expo-app"
     },
     {
       "path": "apps/vite-app"
@@ -60,9 +60,6 @@
     {
       "path": "packages/mobile-visualization"
     },
-    {
-      "path": "packages/ui-mobile-playground"
-    },
     {
       "path": "packages/utils"
     },
diff --git a/yarn.config.cjs b/yarn.config.cjs
index ed5d3462d1..ec5c501d63 100644
--- a/yarn.config.cjs
+++ b/yarn.config.cjs
@@ -11,21 +11,59 @@ const isOptionalDependency = (dependency) => {
   );
 };
 
+/**
+ * Workspaces that are excluded from dependency version consistency checks.
+ * These packages are allowed to have different versions of dependencies
+ * for specific testing or compatibility purposes.
+ */
+const CONSTRAINT_EXCLUDED_WORKSPACES = new Set([
+  // This app validates React 18 compatibility and must stay on React 18
+  // even when other packages upgrade to React 19
+  'react18-compat-test',
+]);
+
+/**
+ * Checks if a workspace is excluded from consistency constraints.
+ * @param {import('@yarnpkg/types').Yarn.Constraints.Dependency} dependency
+ * @returns {boolean}
+ */
+const isExcludedWorkspace = (dependency) => {
+  return CONSTRAINT_EXCLUDED_WORKSPACES.has(dependency.workspace.ident);
+};
+
 /**
  * This rule will enforce that a workspace MUST depend on the same version of
  * a dependency as the one used by the other workspaces.
  *
  * @param {import('@yarnpkg/types').Yarn.Constraints.Context} context
  */
-const enforceConsistentDependenciesAcrossTheProject = ({ Yarn }) => {
-  for (const dependency of Yarn.dependencies()) {
-    if (dependency.type === `peerDependencies`) continue;
-    // There's a bug in yarn constraint dependency.update where the update function expects
-    // the dependency to be part of dependencies instead of optionalDependencies.
-    if (isOptionalDependency(dependency)) continue;
-    for (const otherDependency of Yarn.dependencies({ ident: dependency.ident })) {
-      if (otherDependency.type === `peerDependencies`) continue;
-      dependency.update(otherDependency.range);
+const reportMismatchedDependencies = ({ Yarn }) => {
+  const registry = new Map();
+
+  // 1. Collect every instance of every dependency
+  for (const dep of Yarn.dependencies()) {
+    if (dep.type === 'peerDependencies') continue;
+    if (isOptionalDependency(dep)) continue;
+    if (isExcludedWorkspace(dep)) continue;
+
+    if (!registry.has(dep.ident)) registry.set(dep.ident, []);
+    registry.get(dep.ident).push(dep);
+  }
+
+  // 2. Check for mismatches and report them pivoted
+  for (const [ident, instances] of registry) {
+    const uniqueRanges = new Set(instances.map((d) => d.range));
+
+    if (uniqueRanges.size > 1) {
+      // Create a string that lists all versions used in the repo
+      const versionSummary = instances.map((d) => `${d.workspace.ident} (${d.range})`).join(', ');
+
+      for (const dep of instances) {
+        // We report an error on the specific dependency instance
+        dep.error(
+          `Version mismatch for ${ident}. Current: ${dep.range}. Versions found in repo: [${versionSummary}]`,
+        );
+      }
     }
   }
 };
@@ -45,9 +83,39 @@ const enforceWorkspaceDependenciesWhereAvailable = ({ Yarn }) => {
   }
 };
 
+/**
+ * Enforces that every peerDependency is present in devDependencies.
+ * If missing, it copies the peer range. If it exists, it stays as is
+ * to allow for specific dev versions that satisfy the peer range.
+ * * * @param {import('@yarnpkg/types').Yarn.Constraints.Context} context
+ */
+const enforcePeerDevSync = ({ Yarn }) => {
+  for (const workspace of Yarn.workspaces()) {
+    // Get all peer dependencies for this specific workspace
+    const peerDeps = Yarn.dependencies({ workspace, type: 'peerDependencies' });
+
+    for (const peerDep of peerDeps) {
+      // Check if this package is already in devDependencies
+      const hasDevDep =
+        Yarn.dependencies({
+          workspace,
+          ident: peerDep.ident,
+          type: 'devDependencies',
+        }).length > 0;
+
+      if (!hasDevDep) {
+        // Only set it if it's missing.
+        // This avoids fighting with specific versions you might have set manually.
+        workspace.set(['devDependencies', peerDep.ident], peerDep.range);
+      }
+    }
+  }
+};
+
 module.exports = defineConfig({
   async constraints(context) {
-    enforceConsistentDependenciesAcrossTheProject(context);
+    reportMismatchedDependencies(context);
     enforceWorkspaceDependenciesWhereAvailable(context);
+    enforcePeerDevSync(context);
   },
 });
diff --git a/yarn.lock b/yarn.lock
index c91341810e..56324b032f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,15 +5,15 @@ __metadata:
   version: 8
   cacheKey: 10c0
 
-"@0no-co/graphql.web@npm:^1.0.5":
-  version: 1.0.8
-  resolution: "@0no-co/graphql.web@npm:1.0.8"
+"@0no-co/graphql.web@npm:^1.0.13, @0no-co/graphql.web@npm:^1.0.8":
+  version: 1.2.0
+  resolution: "@0no-co/graphql.web@npm:1.2.0"
   peerDependencies:
     graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
   peerDependenciesMeta:
     graphql:
       optional: true
-  checksum: 10c0/06504e14955cc88ebf5debd1caa58f6f7f33f195a749d75d13e91fd7e448957590d3b790f6a002bdca4a81af7a13d8ff05b471802dd02bd29f3c8853533c950b
+  checksum: 10c0/4eed600962bfab42afb49cddcfb31a47b00502f59707609cf160559920ce0f5cf8874791e4cafc465ede30ae291992f3f892bc757b2a989e80e50e358f71c518
   languageName: node
   linkType: hard
 
@@ -275,7 +275,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.28.6, @babel/code-frame@npm:^7.29.0, @babel/code-frame@npm:^7.5.5, @babel/code-frame@npm:^7.8.3":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.20.0, @babel/code-frame@npm:^7.24.7, @babel/code-frame@npm:^7.28.6, @babel/code-frame@npm:^7.29.0, @babel/code-frame@npm:^7.8.3":
   version: 7.29.0
   resolution: "@babel/code-frame@npm:7.29.0"
   dependencies:
@@ -293,31 +293,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:7.12.9":
-  version: 7.12.9
-  resolution: "@babel/core@npm:7.12.9"
-  dependencies:
-    "@babel/code-frame": "npm:^7.10.4"
-    "@babel/generator": "npm:^7.12.5"
-    "@babel/helper-module-transforms": "npm:^7.12.1"
-    "@babel/helpers": "npm:^7.12.5"
-    "@babel/parser": "npm:^7.12.7"
-    "@babel/template": "npm:^7.12.7"
-    "@babel/traverse": "npm:^7.12.9"
-    "@babel/types": "npm:^7.12.7"
-    convert-source-map: "npm:^1.7.0"
-    debug: "npm:^4.1.0"
-    gensync: "npm:^1.0.0-beta.1"
-    json5: "npm:^2.1.2"
-    lodash: "npm:^4.17.19"
-    resolve: "npm:^1.3.2"
-    semver: "npm:^5.4.1"
-    source-map: "npm:^0.5.0"
-  checksum: 10c0/c11d26f5a33a29c94fdd1c492dfd723f48926c51e975448dda57c081c0d74c7b03298642b2651559e0d330ec868b5757b60f9648c71cf7f89fddf79a17cf006f
-  languageName: node
-  linkType: hard
-
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.15.5, @babel/core@npm:^7.18.2, @babel/core@npm:^7.18.5, @babel/core@npm:^7.20.0, @babel/core@npm:^7.21.3, @babel/core@npm:^7.23.2, @babel/core@npm:^7.25.9, @babel/core@npm:^7.28.0, @babel/core@npm:^7.7.5":
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.15.5, @babel/core@npm:^7.18.2, @babel/core@npm:^7.18.5, @babel/core@npm:^7.20.0, @babel/core@npm:^7.21.3, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.24.4, @babel/core@npm:^7.25.2, @babel/core@npm:^7.25.9, @babel/core@npm:^7.28.0, @babel/core@npm:^7.29.0":
   version: 7.29.0
   resolution: "@babel/core@npm:7.29.0"
   dependencies:
@@ -340,20 +316,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:7.2.0":
-  version: 7.2.0
-  resolution: "@babel/generator@npm:7.2.0"
-  dependencies:
-    "@babel/types": "npm:^7.2.0"
-    jsesc: "npm:^2.5.1"
-    lodash: "npm:^4.17.10"
-    source-map: "npm:^0.5.0"
-    trim-right: "npm:^1.0.1"
-  checksum: 10c0/cbcc4a5380976c68b1725f8e1566f0f0706464628d42931f836e1034a06e3dfffac17283ebb37cc0e5dc38db39af0aa1ed29c9c3686ea028b8e105e23cc14436
-  languageName: node
-  linkType: hard
-
-"@babel/generator@npm:>=7, @babel/generator@npm:^7.12.11, @babel/generator@npm:^7.12.5, @babel/generator@npm:^7.20.0, @babel/generator@npm:^7.20.5, @babel/generator@npm:^7.22.15, @babel/generator@npm:^7.25.9, @babel/generator@npm:^7.29.0, @babel/generator@npm:^7.7.2":
+"@babel/generator@npm:>=7, @babel/generator@npm:^7.20.5, @babel/generator@npm:^7.22.15, @babel/generator@npm:^7.25.0, @babel/generator@npm:^7.25.9, @babel/generator@npm:^7.29.0, @babel/generator@npm:^7.29.1, @babel/generator@npm:^7.7.2":
   version: 7.29.1
   resolution: "@babel/generator@npm:7.29.1"
   dependencies:
@@ -377,7 +340,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-annotate-as-pure@npm:^7.16.0, @babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.27.1, @babel/helper-annotate-as-pure@npm:^7.27.3":
+"@babel/helper-annotate-as-pure@npm:^7.16.0, @babel/helper-annotate-as-pure@npm:^7.27.1, @babel/helper-annotate-as-pure@npm:^7.27.3":
   version: 7.27.3
   resolution: "@babel/helper-annotate-as-pure@npm:7.27.3"
   dependencies:
@@ -386,7 +349,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.13.0, @babel/helper-compilation-targets@npm:^7.20.7, @babel/helper-compilation-targets@npm:^7.27.1, @babel/helper-compilation-targets@npm:^7.27.2, @babel/helper-compilation-targets@npm:^7.28.6":
+"@babel/helper-compilation-targets@npm:^7.20.7, @babel/helper-compilation-targets@npm:^7.27.1, @babel/helper-compilation-targets@npm:^7.27.2, @babel/helper-compilation-targets@npm:^7.28.6":
   version: 7.28.6
   resolution: "@babel/helper-compilation-targets@npm:7.28.6"
   dependencies:
@@ -429,24 +392,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-define-polyfill-provider@npm:^0.1.5":
-  version: 0.1.5
-  resolution: "@babel/helper-define-polyfill-provider@npm:0.1.5"
-  dependencies:
-    "@babel/helper-compilation-targets": "npm:^7.13.0"
-    "@babel/helper-module-imports": "npm:^7.12.13"
-    "@babel/helper-plugin-utils": "npm:^7.13.0"
-    "@babel/traverse": "npm:^7.13.0"
-    debug: "npm:^4.1.1"
-    lodash.debounce: "npm:^4.0.8"
-    resolve: "npm:^1.14.2"
-    semver: "npm:^6.1.2"
-  peerDependencies:
-    "@babel/core": ^7.4.0-0
-  checksum: 10c0/b83aa728cc2fd4882a82ce67c300407024a05adc3f88c461a02438b2ab50c66e711f8ba36ef622637eb7af4d40aaafa0d70e77e0da9adc5710f190a686082f94
-  languageName: node
-  linkType: hard
-
 "@babel/helper-define-polyfill-provider@npm:^0.6.5":
   version: 0.6.5
   resolution: "@babel/helper-define-polyfill-provider@npm:0.6.5"
@@ -462,13 +407,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-environment-visitor@npm:^7.18.9":
-  version: 7.22.20
-  resolution: "@babel/helper-environment-visitor@npm:7.22.20"
-  checksum: 10c0/e762c2d8f5d423af89bd7ae9abe35bd4836d2eb401af868a63bbb63220c513c783e25ef001019418560b3fdc6d9a6fb67e6c0b650bcdeb3a2ac44b5c3d2bdd94
-  languageName: node
-  linkType: hard
-
 "@babel/helper-globals@npm:^7.28.0":
   version: 7.28.0
   resolution: "@babel/helper-globals@npm:7.28.0"
@@ -486,7 +424,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.12.13, @babel/helper-module-imports@npm:^7.16.0, @babel/helper-module-imports@npm:^7.18.6, @babel/helper-module-imports@npm:^7.28.6":
+"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.16.0, @babel/helper-module-imports@npm:^7.18.6, @babel/helper-module-imports@npm:^7.25.9, @babel/helper-module-imports@npm:^7.28.6":
   version: 7.28.6
   resolution: "@babel/helper-module-imports@npm:7.28.6"
   dependencies:
@@ -496,7 +434,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.12.1, @babel/helper-module-transforms@npm:^7.27.1, @babel/helper-module-transforms@npm:^7.28.6":
+"@babel/helper-module-transforms@npm:^7.27.1, @babel/helper-module-transforms@npm:^7.28.6":
   version: 7.28.6
   resolution: "@babel/helper-module-transforms@npm:7.28.6"
   dependencies:
@@ -518,21 +456,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:7.10.4":
-  version: 7.10.4
-  resolution: "@babel/helper-plugin-utils@npm:7.10.4"
-  checksum: 10c0/113d0405281f5490658f7c1c3a81b4a37927375e1ebcccd2fd90be538a102da0c2d6024561aaf26bd1c71ef7688b5a8b96a87d938db8d9774454ab635011fc7f
-  languageName: node
-  linkType: hard
-
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.13.0, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.19.0, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.25.9, @babel/helper-plugin-utils@npm:^7.27.1, @babel/helper-plugin-utils@npm:^7.28.6, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.25.9, @babel/helper-plugin-utils@npm:^7.27.1, @babel/helper-plugin-utils@npm:^7.28.6, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
   version: 7.28.6
   resolution: "@babel/helper-plugin-utils@npm:7.28.6"
   checksum: 10c0/3f5f8acc152fdbb69a84b8624145ff4f9b9f6e776cb989f9f968f8606eb7185c5c3cfcf3ba08534e37e1e0e1c118ac67080610333f56baa4f7376c99b5f1143d
   languageName: node
   linkType: hard
 
-"@babel/helper-remap-async-to-generator@npm:^7.18.9, @babel/helper-remap-async-to-generator@npm:^7.27.1":
+"@babel/helper-remap-async-to-generator@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-remap-async-to-generator@npm:7.27.1"
   dependencies:
@@ -600,7 +531,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.12.5, @babel/helpers@npm:^7.28.6":
+"@babel/helpers@npm:^7.28.6":
   version: 7.28.6
   resolution: "@babel/helpers@npm:7.28.6"
   dependencies:
@@ -622,14 +553,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.12.11, @babel/parser@npm:^7.12.7, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.0, @babel/parser@npm:^7.20.13, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.28.6, @babel/parser@npm:^7.29.0":
-  version: 7.29.2
-  resolution: "@babel/parser@npm:7.29.2"
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.13, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.24.4, @babel/parser@npm:^7.25.3, @babel/parser@npm:^7.28.6, @babel/parser@npm:^7.29.0":
+  version: 7.29.0
+  resolution: "@babel/parser@npm:7.29.0"
   dependencies:
     "@babel/types": "npm:^7.29.0"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10c0/e5a4e69e3ac7acdde995f37cf299a68458cfe7009dff66bd0962fd04920bef287201169006af365af479c08ff216bfefbb595e331f87f6ae7283858aebbc3317
+  checksum: 10c0/333b2aa761264b91577a74bee86141ef733f9f9f6d4fc52548e4847dc35dfbf821f58c46832c637bfa761a6d9909d6a68f7d1ed59e17e4ffbb958dc510c17b62
   languageName: node
   linkType: hard
 
@@ -703,21 +634,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-async-generator-functions@npm:^7.0.0":
-  version: 7.20.1
-  resolution: "@babel/plugin-proposal-async-generator-functions@npm:7.20.1"
-  dependencies:
-    "@babel/helper-environment-visitor": "npm:^7.18.9"
-    "@babel/helper-plugin-utils": "npm:^7.19.0"
-    "@babel/helper-remap-async-to-generator": "npm:^7.18.9"
-    "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/b99ba70c51143921bc84f37b59cf1cbb6b264301e49048fcc4964a15865e865c3ddb48d4ac7a3d2a48c186eb8964ff975370a99082b23484b046d3206f988590
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-class-properties@npm:^7.0.0, @babel/plugin-proposal-class-properties@npm:^7.12.1, @babel/plugin-proposal-class-properties@npm:^7.13.0, @babel/plugin-proposal-class-properties@npm:^7.18.0, @babel/plugin-proposal-class-properties@npm:^7.18.6":
+"@babel/plugin-proposal-class-properties@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6"
   dependencies:
@@ -729,7 +646,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-decorators@npm:^7.12.12, @babel/plugin-proposal-decorators@npm:^7.12.9, @babel/plugin-proposal-decorators@npm:^7.22.7":
+"@babel/plugin-proposal-decorators@npm:^7.12.9, @babel/plugin-proposal-decorators@npm:^7.22.7":
   version: 7.25.9
   resolution: "@babel/plugin-proposal-decorators@npm:7.25.9"
   dependencies:
@@ -742,15 +659,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-export-default-from@npm:^7.0.0, @babel/plugin-proposal-export-default-from@npm:^7.12.1":
-  version: 7.16.7
-  resolution: "@babel/plugin-proposal-export-default-from@npm:7.16.7"
+"@babel/plugin-proposal-export-default-from@npm:^7.24.7":
+  version: 7.27.1
+  resolution: "@babel/plugin-proposal-export-default-from@npm:7.27.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.16.7"
-    "@babel/plugin-syntax-export-default-from": "npm:^7.16.7"
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/49c483adae17478e0d326fba11144e4dbdd90b44115de14151882dc136697fe2b61b2b245335402b52fb49d7a79ea543b0749b59f7a312ee23f6a0b5be1da779
+  checksum: 10c0/6e0756e0692245854028caea113dad2dc11fcdd479891a59d9a614a099e7e321f2bd25a1e3dd6f3b36ba9506a76f072f63adbf676e5ed51e7eeac277612e3db2
   languageName: node
   linkType: hard
 
@@ -766,19 +682,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-logical-assignment-operators@npm:^7.18.0":
-  version: 7.20.7
-  resolution: "@babel/plugin-proposal-logical-assignment-operators@npm:7.20.7"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.20.2"
-    "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/436c1ee9f983813fc52788980a7231414351bd34d80b16b83bddb09115386292fe4912cc6d172304eabbaf0c4813625331b9b5bc798acb0e8925cf0d2b394d4d
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.12.1, @babel/plugin-proposal-nullish-coalescing-operator@npm:^7.12.13, @babel/plugin-proposal-nullish-coalescing-operator@npm:^7.13.8, @babel/plugin-proposal-nullish-coalescing-operator@npm:^7.18.0":
+"@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.12.13":
   version: 7.18.6
   resolution: "@babel/plugin-proposal-nullish-coalescing-operator@npm:7.18.6"
   dependencies:
@@ -790,32 +694,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-numeric-separator@npm:^7.0.0":
-  version: 7.18.6
-  resolution: "@babel/plugin-proposal-numeric-separator@npm:7.18.6"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.18.6"
-    "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/a83a65c6ec0d2293d830e9db61406d246f22d8ea03583d68460cb1b6330c6699320acce1b45f66ba3c357830720e49267e3d99f95088be457c66e6450fbfe3fa
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-object-rest-spread@npm:7.12.1":
-  version: 7.12.1
-  resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.12.1"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.0"
-    "@babel/plugin-transform-parameters": "npm:^7.12.1"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/f773d59ead8b056b646d585e95d610cca2f0aeaa2eeaad74b3eb9e25821b06f27e361dd0aac9a088a10c22fee1ead8863f82a2be073e28eb04ca9a330a00941e
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-object-rest-spread@npm:^7.0.0, @babel/plugin-proposal-object-rest-spread@npm:^7.12.1, @babel/plugin-proposal-object-rest-spread@npm:^7.20.0, @babel/plugin-proposal-object-rest-spread@npm:^7.20.7":
+"@babel/plugin-proposal-object-rest-spread@npm:^7.20.7":
   version: 7.20.7
   resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.20.7"
   dependencies:
@@ -830,19 +709,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-optional-catch-binding@npm:^7.0.0":
-  version: 7.18.6
-  resolution: "@babel/plugin-proposal-optional-catch-binding@npm:7.18.6"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.18.6"
-    "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/ab20153d9e95e0b73004fdf86b6a2d219be2a0ace9ca76cd9eccddb680c913fec173bca54d761b1bc6044edde0a53811f3e515908c3b16d2d81cfec1e2e17391
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-optional-chaining@npm:^7.12.16, @babel/plugin-proposal-optional-chaining@npm:^7.12.7, @babel/plugin-proposal-optional-chaining@npm:^7.13.12, @babel/plugin-proposal-optional-chaining@npm:^7.20.0":
+"@babel/plugin-proposal-optional-chaining@npm:^7.12.16":
   version: 7.21.0
   resolution: "@babel/plugin-proposal-optional-chaining@npm:7.21.0"
   dependencies:
@@ -855,18 +722,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-private-methods@npm:^7.12.1":
-  version: 7.18.6
-  resolution: "@babel/plugin-proposal-private-methods@npm:7.18.6"
-  dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.18.6"
-    "@babel/helper-plugin-utils": "npm:^7.18.6"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/1c273d0ec3d49d0fe80bd754ec0191016e5b3ab4fb1e162ac0c014e9d3c1517a5d973afbf8b6dc9f9c98a8605c79e5f9e8b5ee158a4313fa68d1ff7b02084b6a
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-private-property-in-object@npm:7.21.0-placeholder-for-preset-env.2":
   version: 7.21.0-placeholder-for-preset-env.2
   resolution: "@babel/plugin-proposal-private-property-in-object@npm:7.21.0-placeholder-for-preset-env.2"
@@ -876,20 +731,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-private-property-in-object@npm:^7.12.1":
-  version: 7.18.6
-  resolution: "@babel/plugin-proposal-private-property-in-object@npm:7.18.6"
-  dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.18.6"
-    "@babel/helper-create-class-features-plugin": "npm:^7.18.6"
-    "@babel/helper-plugin-utils": "npm:^7.18.6"
-    "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/173496cb8b16879cf3dd09d91bd246c6db3dc2b4320950a5a4dc4d4395e7c9d7407e5e5313242bbafcb9466540ddcb36f7b07f279dd471c6585592a141ddae51
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-syntax-async-generators@npm:^7.8.4":
   version: 7.8.4
   resolution: "@babel/plugin-syntax-async-generators@npm:7.8.4"
@@ -912,7 +753,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-class-properties@npm:^7.0.0, @babel/plugin-syntax-class-properties@npm:^7.8.3":
+"@babel/plugin-syntax-class-properties@npm:^7.8.3":
   version: 7.12.13
   resolution: "@babel/plugin-syntax-class-properties@npm:7.12.13"
   dependencies:
@@ -934,7 +775,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-dynamic-import@npm:>=7, @babel/plugin-syntax-dynamic-import@npm:^7.8.0, @babel/plugin-syntax-dynamic-import@npm:^7.8.3":
+"@babel/plugin-syntax-dynamic-import@npm:>=7, @babel/plugin-syntax-dynamic-import@npm:^7.8.3":
   version: 7.8.3
   resolution: "@babel/plugin-syntax-dynamic-import@npm:7.8.3"
   dependencies:
@@ -945,14 +786,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-export-default-from@npm:^7.0.0, @babel/plugin-syntax-export-default-from@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-syntax-export-default-from@npm:7.16.7"
+"@babel/plugin-syntax-export-default-from@npm:^7.24.7":
+  version: 7.28.6
+  resolution: "@babel/plugin-syntax-export-default-from@npm:7.28.6"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.16.7"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/67b171b0791c561f58bf4024e8ab3c6b5ac29b87f8cc6b5a916fe5036e1b908ed12acf1deeab44077144f0753e951be9a489b33f425a8bf9e44714a604ecf29b
+  checksum: 10c0/7d01ef992ab7e1c8a08c9e5ebacc2ff82e10592d9bc7964c9903a6766f01d371e45c25848f793393795d603d63f54dd0626b0a148df003f2a234a0a90bb31e93
   languageName: node
   linkType: hard
 
@@ -967,7 +808,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-flow@npm:^7.0.0, @babel/plugin-syntax-flow@npm:^7.12.1, @babel/plugin-syntax-flow@npm:^7.18.0, @babel/plugin-syntax-flow@npm:^7.27.1":
+"@babel/plugin-syntax-flow@npm:^7.12.1, @babel/plugin-syntax-flow@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-syntax-flow@npm:7.27.1"
   dependencies:
@@ -1000,7 +841,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-meta@npm:^7.10.4, @babel/plugin-syntax-import-meta@npm:^7.8.3":
+"@babel/plugin-syntax-import-meta@npm:^7.8.3":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4"
   dependencies:
@@ -1022,18 +863,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:7.12.1":
-  version: 7.12.1
-  resolution: "@babel/plugin-syntax-jsx@npm:7.12.1"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.10.4"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/11d435f9e4e71c0f00e5bc295b40747c2c42341b7f38ddc5f8ac41d49ddfa247514dbe91932fa3dabd65581b4c7a9fe5b3d1c2b285e5ca32f4e5296cc185d40c
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.27.1, @babel/plugin-syntax-jsx@npm:^7.28.6, @babel/plugin-syntax-jsx@npm:^7.7.2":
+"@babel/plugin-syntax-jsx@npm:^7.27.1, @babel/plugin-syntax-jsx@npm:^7.28.6, @babel/plugin-syntax-jsx@npm:^7.7.2":
   version: 7.28.6
   resolution: "@babel/plugin-syntax-jsx@npm:7.28.6"
   dependencies:
@@ -1044,7 +874,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4, @babel/plugin-syntax-logical-assignment-operators@npm:^7.8.3":
+"@babel/plugin-syntax-logical-assignment-operators@npm:^7.8.3":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4"
   dependencies:
@@ -1055,7 +885,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-nullish-coalescing-operator@npm:^7.0.0, @babel/plugin-syntax-nullish-coalescing-operator@npm:^7.8.3":
+"@babel/plugin-syntax-nullish-coalescing-operator@npm:^7.8.3":
   version: 7.8.3
   resolution: "@babel/plugin-syntax-nullish-coalescing-operator@npm:7.8.3"
   dependencies:
@@ -1066,7 +896,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-numeric-separator@npm:^7.10.4, @babel/plugin-syntax-numeric-separator@npm:^7.8.3":
+"@babel/plugin-syntax-numeric-separator@npm:^7.8.3":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-numeric-separator@npm:7.10.4"
   dependencies:
@@ -1077,7 +907,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-object-rest-spread@npm:7.8.3, @babel/plugin-syntax-object-rest-spread@npm:^7.0.0, @babel/plugin-syntax-object-rest-spread@npm:^7.8.0, @babel/plugin-syntax-object-rest-spread@npm:^7.8.3":
+"@babel/plugin-syntax-object-rest-spread@npm:^7.8.3":
   version: 7.8.3
   resolution: "@babel/plugin-syntax-object-rest-spread@npm:7.8.3"
   dependencies:
@@ -1099,7 +929,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-optional-chaining@npm:^7.0.0, @babel/plugin-syntax-optional-chaining@npm:^7.8.3":
+"@babel/plugin-syntax-optional-chaining@npm:^7.8.3":
   version: 7.8.3
   resolution: "@babel/plugin-syntax-optional-chaining@npm:7.8.3"
   dependencies:
@@ -1110,17 +940,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-private-property-in-object@npm:^7.14.5":
-  version: 7.14.5
-  resolution: "@babel/plugin-syntax-private-property-in-object@npm:7.14.5"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.14.5"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/69822772561706c87f0a65bc92d0772cea74d6bc0911537904a676d5ff496a6d3ac4e05a166d8125fce4a16605bace141afc3611074e170a994e66e5397787f3
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-syntax-top-level-await@npm:^7.8.3":
   version: 7.14.5
   resolution: "@babel/plugin-syntax-top-level-await@npm:7.14.5"
@@ -1132,7 +951,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-typescript@npm:^7.27.1, @babel/plugin-syntax-typescript@npm:^7.3.3, @babel/plugin-syntax-typescript@npm:^7.7.2":
+"@babel/plugin-syntax-typescript@npm:^7.28.6, @babel/plugin-syntax-typescript@npm:^7.3.3, @babel/plugin-syntax-typescript@npm:^7.7.2":
   version: 7.28.6
   resolution: "@babel/plugin-syntax-typescript@npm:7.28.6"
   dependencies:
@@ -1155,7 +974,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.0.0, @babel/plugin-transform-arrow-functions@npm:^7.0.0-0, @babel/plugin-transform-arrow-functions@npm:^7.12.1, @babel/plugin-transform-arrow-functions@npm:^7.27.1":
+"@babel/plugin-transform-arrow-functions@npm:^7.0.0-0, @babel/plugin-transform-arrow-functions@npm:^7.24.7, @babel/plugin-transform-arrow-functions@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-arrow-functions@npm:7.27.1"
   dependencies:
@@ -1166,20 +985,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:^7.28.0":
-  version: 7.28.0
-  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.28.0"
+"@babel/plugin-transform-async-generator-functions@npm:^7.25.4, @babel/plugin-transform-async-generator-functions@npm:^7.28.0":
+  version: 7.29.0
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.29.0"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
     "@babel/helper-remap-async-to-generator": "npm:^7.27.1"
-    "@babel/traverse": "npm:^7.28.0"
+    "@babel/traverse": "npm:^7.29.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/739d577e649d7d7b9845dc309e132964327ab3eaea43ad04d04a7dcb977c63f9aa9a423d1ca39baf10939128d02f52e6fda39c834fb9f1753785b1497e72c4dc
+  checksum: 10c0/4080fc5e7dad7761bfebbb4fbe06bdfeb3a8bf0c027bcb4373e59e6b3dc7c5002eca7cbb1afba801d6439df8f92f7bcb3fb862e8fbbe43a9e59bb5653dcc0568
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-to-generator@npm:^7.20.0, @babel/plugin-transform-async-to-generator@npm:^7.27.1":
+"@babel/plugin-transform-async-to-generator@npm:^7.24.7, @babel/plugin-transform-async-to-generator@npm:^7.27.1":
   version: 7.28.6
   resolution: "@babel/plugin-transform-async-to-generator@npm:7.28.6"
   dependencies:
@@ -1192,7 +1011,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoped-functions@npm:^7.0.0, @babel/plugin-transform-block-scoped-functions@npm:^7.27.1":
+"@babel/plugin-transform-block-scoped-functions@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.27.1"
   dependencies:
@@ -1203,7 +1022,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.0.0, @babel/plugin-transform-block-scoping@npm:^7.12.12, @babel/plugin-transform-block-scoping@npm:^7.28.0":
+"@babel/plugin-transform-block-scoping@npm:^7.25.0, @babel/plugin-transform-block-scoping@npm:^7.28.0":
   version: 7.28.6
   resolution: "@babel/plugin-transform-block-scoping@npm:7.28.6"
   dependencies:
@@ -1214,15 +1033,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-transform-class-properties@npm:7.27.1"
+"@babel/plugin-transform-class-properties@npm:^7.0.0-0, @babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.25.4, @babel/plugin-transform-class-properties@npm:^7.27.1":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-class-properties@npm:7.28.6"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
-    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-create-class-features-plugin": "npm:^7.28.6"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/cc0662633c0fe6df95819fef223506ddf26c369c8d64ab21a728d9007ec866bf9436a253909819216c24a82186b6ccbc1ec94d7aaf3f82df227c7c02fa6a704b
+  checksum: 10c0/c4327fcd730c239d9f173f9b695b57b801729e273b4848aef1f75818069dfd31d985d75175db188d947b9b1bbe5353dae298849042026a5e4fcf07582ff3f9f1
   languageName: node
   linkType: hard
 
@@ -1238,7 +1057,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.0.0, @babel/plugin-transform-classes@npm:^7.12.1, @babel/plugin-transform-classes@npm:^7.28.0":
+"@babel/plugin-transform-classes@npm:^7.0.0-0, @babel/plugin-transform-classes@npm:^7.25.4, @babel/plugin-transform-classes@npm:^7.28.0":
   version: 7.28.6
   resolution: "@babel/plugin-transform-classes@npm:7.28.6"
   dependencies:
@@ -1254,7 +1073,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-computed-properties@npm:^7.0.0, @babel/plugin-transform-computed-properties@npm:^7.27.1":
+"@babel/plugin-transform-computed-properties@npm:^7.24.7, @babel/plugin-transform-computed-properties@npm:^7.27.1":
   version: 7.28.6
   resolution: "@babel/plugin-transform-computed-properties@npm:7.28.6"
   dependencies:
@@ -1266,7 +1085,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.0.0, @babel/plugin-transform-destructuring@npm:^7.12.1, @babel/plugin-transform-destructuring@npm:^7.20.0, @babel/plugin-transform-destructuring@npm:^7.28.0, @babel/plugin-transform-destructuring@npm:^7.28.5":
+"@babel/plugin-transform-destructuring@npm:^7.24.8, @babel/plugin-transform-destructuring@npm:^7.28.0, @babel/plugin-transform-destructuring@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/plugin-transform-destructuring@npm:7.28.5"
   dependencies:
@@ -1347,7 +1166,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-export-namespace-from@npm:^7.22.11, @babel/plugin-transform-export-namespace-from@npm:^7.27.1":
+"@babel/plugin-transform-export-namespace-from@npm:^7.25.9, @babel/plugin-transform-export-namespace-from@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-export-namespace-from@npm:7.27.1"
   dependencies:
@@ -1358,7 +1177,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-flow-strip-types@npm:^7.0.0, @babel/plugin-transform-flow-strip-types@npm:^7.20.0, @babel/plugin-transform-flow-strip-types@npm:^7.27.1":
+"@babel/plugin-transform-flow-strip-types@npm:^7.25.2, @babel/plugin-transform-flow-strip-types@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-flow-strip-types@npm:7.27.1"
   dependencies:
@@ -1370,7 +1189,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-for-of@npm:^7.0.0, @babel/plugin-transform-for-of@npm:^7.12.1, @babel/plugin-transform-for-of@npm:^7.27.1":
+"@babel/plugin-transform-for-of@npm:^7.24.7, @babel/plugin-transform-for-of@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-for-of@npm:7.27.1"
   dependencies:
@@ -1382,7 +1201,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-function-name@npm:^7.0.0, @babel/plugin-transform-function-name@npm:^7.27.1":
+"@babel/plugin-transform-function-name@npm:^7.25.1, @babel/plugin-transform-function-name@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-function-name@npm:7.27.1"
   dependencies:
@@ -1406,7 +1225,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-literals@npm:^7.0.0, @babel/plugin-transform-literals@npm:^7.27.1":
+"@babel/plugin-transform-literals@npm:^7.25.2, @babel/plugin-transform-literals@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-literals@npm:7.27.1"
   dependencies:
@@ -1417,18 +1236,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.27.1"
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.24.7, @babel/plugin-transform-logical-assignment-operators@npm:^7.27.1":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.28.6"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/5b0abc7c0d09d562bf555c646dce63a30288e5db46fd2ce809a61d064415da6efc3b2b3c59b8e4fe98accd072c89a2f7c3765b400e4bf488651735d314d9feeb
+  checksum: 10c0/4632a35453d2131f0be466681d0a33e3db44d868ff51ec46cd87e0ebd1e47c6a39b894f7d1c9b06f931addf6efa9d30e60c4cdedeb4f69d426f683e11f8490cf
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-member-expression-literals@npm:^7.0.0, @babel/plugin-transform-member-expression-literals@npm:^7.27.1":
+"@babel/plugin-transform-member-expression-literals@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-member-expression-literals@npm:7.27.1"
   dependencies:
@@ -1451,7 +1270,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-commonjs@npm:^7.0.0, @babel/plugin-transform-modules-commonjs@npm:^7.12.13, @babel/plugin-transform-modules-commonjs@npm:^7.13.8, @babel/plugin-transform-modules-commonjs@npm:^7.18.2, @babel/plugin-transform-modules-commonjs@npm:^7.27.1":
+"@babel/plugin-transform-modules-commonjs@npm:^7.12.13, @babel/plugin-transform-modules-commonjs@npm:^7.18.2, @babel/plugin-transform-modules-commonjs@npm:^7.23.0, @babel/plugin-transform-modules-commonjs@npm:^7.24.8, @babel/plugin-transform-modules-commonjs@npm:^7.27.1":
   version: 7.28.6
   resolution: "@babel/plugin-transform-modules-commonjs@npm:7.28.6"
   dependencies:
@@ -1489,7 +1308,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.0.0, @babel/plugin-transform-named-capturing-groups-regex@npm:^7.27.1":
+"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.24.7, @babel/plugin-transform-named-capturing-groups-regex@npm:^7.27.1":
   version: 7.29.0
   resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.29.0"
   dependencies:
@@ -1512,29 +1331,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.0.0-0, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.27.1"
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.0.0-0, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.7, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.28.6"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/a435fc03aaa65c6ef8e99b2d61af0994eb5cdd4a28562d78c3b0b0228ca7e501aa255e1dff091a6996d7d3ea808eb5a65fd50ecd28dfb10687a8a1095dcadc7a
+  checksum: 10c0/6607f2201d66ccb688f0b1db09475ef995837df19f14705da41f693b669f834c206147a854864ab107913d7b4f4748878b0cd9fe9ca8bfd1bee0c206fc027b49
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-numeric-separator@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-transform-numeric-separator@npm:7.27.1"
+"@babel/plugin-transform-numeric-separator@npm:^7.24.7, @babel/plugin-transform-numeric-separator@npm:^7.27.1":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-numeric-separator@npm:7.28.6"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/b72cbebbfe46fcf319504edc1cf59f3f41c992dd6840db766367f6a1d232cd2c52143c5eaf57e0316710bee251cae94be97c6d646b5022fcd9274ccb131b470c
+  checksum: 10c0/191097d8d2753cdd16d1acca65a945d1645ab20b65655c2f5b030a9e38967a52e093dcb21ebf391e342222705c6ffe5dea15dafd6257f7b51b77fb64a830b637
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:^7.12.13, @babel/plugin-transform-object-rest-spread@npm:^7.28.0":
+"@babel/plugin-transform-object-rest-spread@npm:^7.24.7, @babel/plugin-transform-object-rest-spread@npm:^7.28.0":
   version: 7.28.6
   resolution: "@babel/plugin-transform-object-rest-spread@npm:7.28.6"
   dependencies:
@@ -1549,7 +1368,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-super@npm:^7.0.0, @babel/plugin-transform-object-super@npm:^7.27.1":
+"@babel/plugin-transform-object-super@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-object-super@npm:7.27.1"
   dependencies:
@@ -1561,30 +1380,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-catch-binding@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.27.1"
+"@babel/plugin-transform-optional-catch-binding@npm:^7.24.7, @babel/plugin-transform-optional-catch-binding@npm:^7.27.1":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.28.6"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/807a4330f1fac08e2682d57bc82e714868fc651c8876f9a8b3a3fd8f53c129e87371f8243e712ac7dae11e090b737a2219a02fe1b6459a29e664fa073c3277bb
+  checksum: 10c0/36e8face000ee65e478a55febf687ce9be7513ad498c60dfe585851555565e0c28e7cb891b3c59709318539ce46f7697d5f42130eb18f385cd47e47cfa297446
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.0.0-0, @babel/plugin-transform-optional-chaining@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-transform-optional-chaining@npm:7.27.1"
+"@babel/plugin-transform-optional-chaining@npm:^7.0.0-0, @babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.24.8, @babel/plugin-transform-optional-chaining@npm:^7.27.1":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.28.6"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/5b18ff5124e503f0a25d6b195be7351a028b3992d6f2a91fb4037e2a2c386400d66bc1df8f6df0a94c708524f318729e81a95c41906e5a7919a06a43e573a525
+  checksum: 10c0/c159cc74115c2266be21791f192dd079e2aeb65c8731157e53b80fcefa41e8e28ad370021d4dfbdb31f25e5afa0322669a8eb2d032cd96e65ac37e020324c763
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.0.0, @babel/plugin-transform-parameters@npm:^7.12.1, @babel/plugin-transform-parameters@npm:^7.20.7, @babel/plugin-transform-parameters@npm:^7.22.15, @babel/plugin-transform-parameters@npm:^7.27.7":
+"@babel/plugin-transform-parameters@npm:^7.20.7, @babel/plugin-transform-parameters@npm:^7.24.7, @babel/plugin-transform-parameters@npm:^7.27.7":
   version: 7.27.7
   resolution: "@babel/plugin-transform-parameters@npm:7.27.7"
   dependencies:
@@ -1595,19 +1414,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-transform-private-methods@npm:7.27.1"
+"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.24.7, @babel/plugin-transform-private-methods@npm:^7.27.1":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-private-methods@npm:7.28.6"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
-    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-create-class-features-plugin": "npm:^7.28.6"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/232bedfe9d28df215fb03cc7623bdde468b1246bdd6dc24465ff4bf9cc5f5a256ae33daea1fafa6cc59705e4d29da9024bb79baccaa5cd92811ac5db9b9244f2
+  checksum: 10c0/fb504e2bfdcf3f734d2a90ab20d61427c58385f57f950d3de6ff4e6d12dd4aa7d552147312d218367e129b7920dccfc3230ba554de861986cda38921bad84067
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-property-in-object@npm:^7.22.11, @babel/plugin-transform-private-property-in-object@npm:^7.27.1":
+"@babel/plugin-transform-private-property-in-object@npm:^7.24.7, @babel/plugin-transform-private-property-in-object@npm:^7.27.1":
   version: 7.28.6
   resolution: "@babel/plugin-transform-private-property-in-object@npm:7.28.6"
   dependencies:
@@ -1620,7 +1439,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-property-literals@npm:^7.0.0, @babel/plugin-transform-property-literals@npm:^7.27.1":
+"@babel/plugin-transform-property-literals@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-property-literals@npm:7.27.1"
   dependencies:
@@ -1642,7 +1461,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-display-name@npm:^7.0.0, @babel/plugin-transform-react-display-name@npm:^7.28.0":
+"@babel/plugin-transform-react-display-name@npm:^7.24.7, @babel/plugin-transform-react-display-name@npm:^7.28.0":
   version: 7.28.0
   resolution: "@babel/plugin-transform-react-display-name@npm:7.28.0"
   dependencies:
@@ -1664,7 +1483,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-self@npm:^7.0.0, @babel/plugin-transform-react-jsx-self@npm:^7.27.1":
+"@babel/plugin-transform-react-jsx-self@npm:^7.24.7, @babel/plugin-transform-react-jsx-self@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-react-jsx-self@npm:7.27.1"
   dependencies:
@@ -1675,7 +1494,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-source@npm:^7.0.0, @babel/plugin-transform-react-jsx-source@npm:^7.27.1":
+"@babel/plugin-transform-react-jsx-source@npm:^7.24.7, @babel/plugin-transform-react-jsx-source@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-react-jsx-source@npm:7.27.1"
   dependencies:
@@ -1686,7 +1505,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.12.12, @babel/plugin-transform-react-jsx@npm:^7.27.1":
+"@babel/plugin-transform-react-jsx@npm:^7.25.2, @babel/plugin-transform-react-jsx@npm:^7.27.1":
   version: 7.28.6
   resolution: "@babel/plugin-transform-react-jsx@npm:7.28.6"
   dependencies:
@@ -1713,14 +1532,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.28.0":
-  version: 7.28.1
-  resolution: "@babel/plugin-transform-regenerator@npm:7.28.1"
+"@babel/plugin-transform-regenerator@npm:^7.24.7, @babel/plugin-transform-regenerator@npm:^7.28.0":
+  version: 7.29.0
+  resolution: "@babel/plugin-transform-regenerator@npm:7.29.0"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/6c9e6eb80ce9c0bde0876c80979e078fbc85dc802272cba4ee72b5b1c858472e38167c418917e4f0d4384ce888706d95544a8d266880c0e199e167e078168b67
+  checksum: 10c0/86c7db9b97f85ee47c0fae0528802cbc06e5775e61580ee905335c16bb971270086764a3859873d9adcd7d0f913a5b93eb0dc271aec8fb9e93e090e4ac95e29e
   languageName: node
   linkType: hard
 
@@ -1747,7 +1566,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-runtime@npm:>=7, @babel/plugin-transform-runtime@npm:^7.0.0, @babel/plugin-transform-runtime@npm:^7.23.2, @babel/plugin-transform-runtime@npm:^7.25.9":
+"@babel/plugin-transform-runtime@npm:>=7, @babel/plugin-transform-runtime@npm:^7.23.2, @babel/plugin-transform-runtime@npm:^7.24.7, @babel/plugin-transform-runtime@npm:^7.25.9":
   version: 7.29.0
   resolution: "@babel/plugin-transform-runtime@npm:7.29.0"
   dependencies:
@@ -1763,7 +1582,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.0.0, @babel/plugin-transform-shorthand-properties@npm:^7.0.0-0, @babel/plugin-transform-shorthand-properties@npm:^7.12.1, @babel/plugin-transform-shorthand-properties@npm:^7.27.1":
+"@babel/plugin-transform-shorthand-properties@npm:^7.0.0-0, @babel/plugin-transform-shorthand-properties@npm:^7.24.7, @babel/plugin-transform-shorthand-properties@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-shorthand-properties@npm:7.27.1"
   dependencies:
@@ -1774,7 +1593,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-spread@npm:^7.0.0, @babel/plugin-transform-spread@npm:^7.12.1, @babel/plugin-transform-spread@npm:^7.27.1":
+"@babel/plugin-transform-spread@npm:^7.24.7, @babel/plugin-transform-spread@npm:^7.27.1":
   version: 7.28.6
   resolution: "@babel/plugin-transform-spread@npm:7.28.6"
   dependencies:
@@ -1786,7 +1605,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-sticky-regex@npm:^7.0.0, @babel/plugin-transform-sticky-regex@npm:^7.27.1":
+"@babel/plugin-transform-sticky-regex@npm:^7.24.7, @babel/plugin-transform-sticky-regex@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-sticky-regex@npm:7.27.1"
   dependencies:
@@ -1797,7 +1616,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:>=7, @babel/plugin-transform-template-literals@npm:^7.0.0, @babel/plugin-transform-template-literals@npm:^7.0.0-0, @babel/plugin-transform-template-literals@npm:^7.12.1, @babel/plugin-transform-template-literals@npm:^7.27.1":
+"@babel/plugin-transform-template-literals@npm:>=7, @babel/plugin-transform-template-literals@npm:^7.0.0-0, @babel/plugin-transform-template-literals@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-template-literals@npm:7.27.1"
   dependencies:
@@ -1819,18 +1638,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typescript@npm:^7.27.1, @babel/plugin-transform-typescript@npm:^7.5.0":
-  version: 7.28.0
-  resolution: "@babel/plugin-transform-typescript@npm:7.28.0"
+"@babel/plugin-transform-typescript@npm:^7.25.2, @babel/plugin-transform-typescript@npm:^7.27.1":
+  version: 7.28.6
+  resolution: "@babel/plugin-transform-typescript@npm:7.28.6"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.27.3"
-    "@babel/helper-create-class-features-plugin": "npm:^7.27.1"
-    "@babel/helper-plugin-utils": "npm:^7.27.1"
+    "@babel/helper-create-class-features-plugin": "npm:^7.28.6"
+    "@babel/helper-plugin-utils": "npm:^7.28.6"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
-    "@babel/plugin-syntax-typescript": "npm:^7.27.1"
+    "@babel/plugin-syntax-typescript": "npm:^7.28.6"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/049c2bd3407bbf5041d8c95805a4fadee6d176e034f6b94ce7967b92a846f1e00f323cf7dfbb2d06c93485f241fb8cf4c10520e30096a6059d251b94e80386e9
+  checksum: 10c0/72dbfd3e5f71c4e30445e610758ec0eef65347fafd72bd46f4903733df0d537663a72a81c1626f213a0feab7afc68ba83f1648ffece888dd0868115c9cb748f6
   languageName: node
   linkType: hard
 
@@ -1857,7 +1676,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-regex@npm:^7.0.0, @babel/plugin-transform-unicode-regex@npm:^7.27.1":
+"@babel/plugin-transform-unicode-regex@npm:^7.0.0-0, @babel/plugin-transform-unicode-regex@npm:^7.24.7, @babel/plugin-transform-unicode-regex@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-unicode-regex@npm:7.27.1"
   dependencies:
@@ -1881,7 +1700,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:>=7, @babel/preset-env@npm:^7.12.11, @babel/preset-env@npm:^7.15.6, @babel/preset-env@npm:^7.20.2, @babel/preset-env@npm:^7.23.2, @babel/preset-env@npm:^7.25.9, @babel/preset-env@npm:^7.28.0":
+"@babel/preset-env@npm:>=7, @babel/preset-env@npm:^7.15.6, @babel/preset-env@npm:^7.20.2, @babel/preset-env@npm:^7.23.2, @babel/preset-env@npm:^7.25.9, @babel/preset-env@npm:^7.28.0":
   version: 7.28.0
   resolution: "@babel/preset-env@npm:7.28.0"
   dependencies:
@@ -1961,7 +1780,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-flow@npm:^7.12.1, @babel/preset-flow@npm:^7.13.13":
+"@babel/preset-flow@npm:^7.22.15":
   version: 7.27.1
   resolution: "@babel/preset-flow@npm:7.27.1"
   dependencies:
@@ -1987,7 +1806,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-react@npm:^7.12.10, @babel/preset-react@npm:^7.14.5, @babel/preset-react@npm:^7.18.6, @babel/preset-react@npm:^7.22.15, @babel/preset-react@npm:^7.25.9, @babel/preset-react@npm:^7.27.1":
+"@babel/preset-react@npm:^7.14.5, @babel/preset-react@npm:^7.18.6, @babel/preset-react@npm:^7.22.15, @babel/preset-react@npm:^7.25.9, @babel/preset-react@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/preset-react@npm:7.28.5"
   dependencies:
@@ -2003,7 +1822,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.12.16, @babel/preset-typescript@npm:^7.12.7, @babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.15.0, @babel/preset-typescript@npm:^7.16.7, @babel/preset-typescript@npm:^7.21.0, @babel/preset-typescript@npm:^7.22.5, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.25.9, @babel/preset-typescript@npm:^7.27.1":
+"@babel/preset-typescript@npm:^7.12.16, @babel/preset-typescript@npm:^7.15.0, @babel/preset-typescript@npm:^7.16.7, @babel/preset-typescript@npm:^7.21.0, @babel/preset-typescript@npm:^7.22.5, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.25.9, @babel/preset-typescript@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/preset-typescript@npm:7.27.1"
   dependencies:
@@ -2018,7 +1837,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/register@npm:^7.12.1, @babel/register@npm:^7.13.16, @babel/register@npm:^7.18.9":
+"@babel/register@npm:^7.18.9, @babel/register@npm:^7.22.15":
   version: 7.28.6
   resolution: "@babel/register@npm:7.28.6"
   dependencies:
@@ -2043,14 +1862,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.10.3, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.25.9, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.28.2, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.10.3, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.25.9, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.28.2, @babel/runtime@npm:^7.9.2":
   version: 7.28.6
   resolution: "@babel/runtime@npm:7.28.6"
   checksum: 10c0/358cf2429992ac1c466df1a21c1601d595c46930a13c1d4662fde908d44ee78ec3c183aaff513ecb01ef8c55c3624afe0309eeeb34715672dbfadb7feedb2c0d
   languageName: node
   linkType: hard
 
-"@babel/template@npm:>=7, @babel/template@npm:^7.0.0, @babel/template@npm:^7.12.7, @babel/template@npm:^7.20.7, @babel/template@npm:^7.25.9, @babel/template@npm:^7.27.1, @babel/template@npm:^7.28.6, @babel/template@npm:^7.3.3":
+"@babel/template@npm:>=7, @babel/template@npm:^7.20.7, @babel/template@npm:^7.25.0, @babel/template@npm:^7.25.9, @babel/template@npm:^7.27.1, @babel/template@npm:^7.28.6, @babel/template@npm:^7.3.3":
   version: 7.28.6
   resolution: "@babel/template@npm:7.28.6"
   dependencies:
@@ -2061,7 +1880,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:>=7, @babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.11.5, @babel/traverse@npm:^7.12.11, @babel/traverse@npm:^7.12.9, @babel/traverse@npm:^7.13.0, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.20.0, @babel/traverse@npm:^7.22.15, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.25.9, @babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.5, @babel/traverse@npm:^7.28.6, @babel/traverse@npm:^7.29.0, @babel/traverse@npm:^7.4.5":
+"@babel/traverse--for-generate-function-map@npm:@babel/traverse@^7.25.3, @babel/traverse@npm:>=7, @babel/traverse@npm:^7.11.5, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.22.15, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.25.3, @babel/traverse@npm:^7.25.9, @babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.5, @babel/traverse@npm:^7.28.6, @babel/traverse@npm:^7.29.0, @babel/traverse@npm:^7.4.5":
   version: 7.29.0
   resolution: "@babel/traverse@npm:7.29.0"
   dependencies:
@@ -2076,7 +1895,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.12.11, @babel/types@npm:^7.12.17, @babel/types@npm:^7.12.7, @babel/types@npm:^7.18.4, @babel/types@npm:^7.19.0, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.5, @babel/types@npm:^7.28.6, @babel/types@npm:^7.29.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.12.17, @babel/types@npm:^7.18.4, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.25.2, @babel/types@npm:^7.26.0, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.5, @babel/types@npm:^7.28.6, @babel/types@npm:^7.29.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
   version: 7.29.0
   resolution: "@babel/types@npm:7.29.0"
   dependencies:
@@ -2086,13 +1905,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@base2/pretty-print-object@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@base2/pretty-print-object@npm:1.0.1"
-  checksum: 10c0/98f77ea185a30c854897feb2a68fe51be8451a1a0b531bac61a5dd67033926a0ba0c9be6e0f819b8cb72ca349b3e7648bf81c12fd21df0b45219c75a3a75784b
-  languageName: node
-  linkType: hard
-
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -2107,146 +1919,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@bugsnag/core@npm:^7.25.0":
-  version: 7.25.0
-  resolution: "@bugsnag/core@npm:7.25.0"
-  dependencies:
-    "@bugsnag/cuid": "npm:^3.0.0"
-    "@bugsnag/safe-json-stringify": "npm:^6.0.0"
-    error-stack-parser: "npm:^2.0.3"
-    iserror: "npm:0.0.2"
-    stack-generator: "npm:^2.0.3"
-  checksum: 10c0/baf1e4f19ad59e173385d6e45c1f3a413fbcdf6dde3752d1828e303ceecb0ea073232c3de0aeab99a94146e0d9aa16590741a36c36434ef7161008d00ac00a40
-  languageName: node
-  linkType: hard
-
-"@bugsnag/cuid@npm:^3.0.0":
-  version: 3.0.2
-  resolution: "@bugsnag/cuid@npm:3.0.2"
-  checksum: 10c0/b95217503877a632ede48b1d5566b0d95ab1eac11c767241996db1db1ae0f24312335264895ee93ea15b5cc6eb37b538ad13dd612e815e2a49bd5477723dc214
-  languageName: node
-  linkType: hard
-
-"@bugsnag/delivery-react-native@npm:^7.25.0":
-  version: 7.25.0
-  resolution: "@bugsnag/delivery-react-native@npm:7.25.0"
-  peerDependencies:
-    "@bugsnag/core": ^7.0.0
-  checksum: 10c0/8510ff72449854d00a4e4578880cb25922e8adc159e436e13c9ea7daff02823b72766485260774702a835a27d1163cf250ac35d56ba0c71401c73f374307aa26
-  languageName: node
-  linkType: hard
-
-"@bugsnag/plugin-console-breadcrumbs@npm:^7.25.0":
-  version: 7.25.0
-  resolution: "@bugsnag/plugin-console-breadcrumbs@npm:7.25.0"
-  peerDependencies:
-    "@bugsnag/core": ^7.0.0
-  checksum: 10c0/3ebbebae7ded8b55b2a2b834779b971785b2be9f3d2eec2d293b340d223970bfee521bb383c21e57ac2f90185bfd87c9a2ed390b204d7eb7342cae33ff4e307e
-  languageName: node
-  linkType: hard
-
-"@bugsnag/plugin-network-breadcrumbs@npm:^7.25.0":
-  version: 7.25.0
-  resolution: "@bugsnag/plugin-network-breadcrumbs@npm:7.25.0"
-  peerDependencies:
-    "@bugsnag/core": ^7.0.0
-  checksum: 10c0/aa742b7f2a1b37fc8fd22cd4dfa63f698da0925062ef8496bf324f93007e2f02c296b9de40dce1f986e0c561d5cc127fcc5eefc476fffa9e73c80da0cc931ec9
-  languageName: node
-  linkType: hard
-
-"@bugsnag/plugin-react-native-client-sync@npm:^7.25.0":
-  version: 7.25.0
-  resolution: "@bugsnag/plugin-react-native-client-sync@npm:7.25.0"
-  peerDependencies:
-    "@bugsnag/core": ^7.0.0
-  checksum: 10c0/483d5476891fee6ad598f9a9bf4dacf6e93ca250ba1cf96c6de23ea64e1cf4f65f6554d5acd08d5137555cb1d43a113412d7c4ba3e3e91bf48665c0e4290c49c
-  languageName: node
-  linkType: hard
-
-"@bugsnag/plugin-react-native-event-sync@npm:^7.25.0":
-  version: 7.25.0
-  resolution: "@bugsnag/plugin-react-native-event-sync@npm:7.25.0"
-  peerDependencies:
-    "@bugsnag/core": ^7.0.0
-  checksum: 10c0/6a04fc909a9ea26cdbf92ba65ca77ad3d55803201623a042e786ce19daf943f4911867e7161a396458cd19db04c9a4df24793187346d8fb2b1ca38666bee49e7
-  languageName: node
-  linkType: hard
-
-"@bugsnag/plugin-react-native-global-error-handler@npm:^7.25.0":
-  version: 7.25.0
-  resolution: "@bugsnag/plugin-react-native-global-error-handler@npm:7.25.0"
-  peerDependencies:
-    "@bugsnag/core": ^7.0.0
-  checksum: 10c0/93cc86804759193579cd91b903e2f113d284e10b6e897499cfdf48545444b99c4c58e25d9d61478e922ce66229c6fac5a22986734770ad642091db53adbcbe4c
-  languageName: node
-  linkType: hard
-
-"@bugsnag/plugin-react-native-hermes@npm:^7.25.0":
-  version: 7.25.0
-  resolution: "@bugsnag/plugin-react-native-hermes@npm:7.25.0"
-  peerDependencies:
-    "@bugsnag/core": ^7.0.0
-  checksum: 10c0/9f8bceb1ce6ecb0e69abfd8cedee09797cf4c8e843ec8fcf15bd5d43ae2108e06a30c2ab3ebe425c592111310b74f472381ee90200e82f0a495dc5b4cdb1603b
-  languageName: node
-  linkType: hard
-
-"@bugsnag/plugin-react-native-session@npm:^7.25.0":
-  version: 7.25.0
-  resolution: "@bugsnag/plugin-react-native-session@npm:7.25.0"
-  peerDependencies:
-    "@bugsnag/core": ^7.0.0
-  checksum: 10c0/30edaea17191b60848fee404ac9c3d804b7cab0d7c625734e25216b6beb29ca076a9fc20381fabf9bc85de1d2f997a5414b75a12628353368ae23c2416e2a7f4
-  languageName: node
-  linkType: hard
-
-"@bugsnag/plugin-react-native-unhandled-rejection@npm:^7.25.0":
-  version: 7.25.0
-  resolution: "@bugsnag/plugin-react-native-unhandled-rejection@npm:7.25.0"
-  peerDependencies:
-    "@bugsnag/core": ^7.0.0
-  checksum: 10c0/185749bf39da986b6b5a1c06d31e9e88f76cabf411144a6ca3de8c9c9acfed9e17f202e7ded334811dd7951ab8a0d484d943c27d494b79e2d733424bcc6a9b3b
-  languageName: node
-  linkType: hard
-
-"@bugsnag/plugin-react@npm:^7.25.0":
-  version: 7.25.0
-  resolution: "@bugsnag/plugin-react@npm:7.25.0"
-  peerDependencies:
-    "@bugsnag/core": ^7.0.0
-  peerDependenciesMeta:
-    "@bugsnag/core":
-      optional: true
-  checksum: 10c0/7b901435d1bf3e725a0db7d7d8d6cbd7548433ac19a301ae3a3c7315356452167f7b0a8430ff1450bff605cd908a29d7af8bbf09a085204e53a671c679626245
-  languageName: node
-  linkType: hard
-
-"@bugsnag/react-native@npm:^7.18.0":
-  version: 7.25.1
-  resolution: "@bugsnag/react-native@npm:7.25.1"
-  dependencies:
-    "@bugsnag/core": "npm:^7.25.0"
-    "@bugsnag/delivery-react-native": "npm:^7.25.0"
-    "@bugsnag/plugin-console-breadcrumbs": "npm:^7.25.0"
-    "@bugsnag/plugin-network-breadcrumbs": "npm:^7.25.0"
-    "@bugsnag/plugin-react": "npm:^7.25.0"
-    "@bugsnag/plugin-react-native-client-sync": "npm:^7.25.0"
-    "@bugsnag/plugin-react-native-event-sync": "npm:^7.25.0"
-    "@bugsnag/plugin-react-native-global-error-handler": "npm:^7.25.0"
-    "@bugsnag/plugin-react-native-hermes": "npm:^7.25.0"
-    "@bugsnag/plugin-react-native-session": "npm:^7.25.0"
-    "@bugsnag/plugin-react-native-unhandled-rejection": "npm:^7.25.0"
-    iserror: "npm:^0.0.2"
-  checksum: 10c0/18e7265db382c15314221d1aa4d73530cec32ab73df1412a608a44d9da86a3340619ed65c280e1363a869cba1ca5175e81a32bd97be73d1fa4fe88a73d6411d8
-  languageName: node
-  linkType: hard
-
-"@bugsnag/safe-json-stringify@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "@bugsnag/safe-json-stringify@npm:6.0.0"
-  checksum: 10c0/817945431d269dc74e6cc6cd6e615b151a71ffc048ba428ab9eefea40e659631543be4a5c307aa37ed20c643344ff980c13b1fd604821a9c945b8508ecb0902b
-  languageName: node
-  linkType: hard
-
 "@callstack/reassure-cli@npm:0.7.0":
   version: 0.7.0
   resolution: "@callstack/reassure-cli@npm:0.7.0"
@@ -2307,18 +1979,13 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     "@coinbase/cds-utils": "workspace:^"
-    "@k-vyn/coloralgorithm": "npm:^1.0.0"
     chalk: "npm:^4.1.2"
     ejs: "npm:^3.1.7"
-    enquirer: "npm:^2.3.6"
     fast-glob: "npm:^3.2.11"
-    hygen: "patch:hygen@^6.2.0#./patches/hygen.patch"
     semver: "npm:^7.5.4"
-    yargs: "npm:^17.5.1"
-    yargs-parser: "npm:^21.0.1"
   languageName: unknown
   linkType: soft
 
@@ -2334,14 +2001,15 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     "@coinbase/cds-icons": "workspace:^"
     "@coinbase/cds-illustrations": "workspace:^"
     "@coinbase/cds-mcp-server": "workspace:^"
     "@coinbase/cds-utils": "workspace:^"
     "@modelcontextprotocol/sdk": "npm:^1.13.1"
-    "@types/react": "npm:^18.3.12"
+    "@types/react": "npm:19.1.2"
+    "@types/react-is": "npm:^19.0.0"
     d3-array: "npm:^3.2.4"
     d3-color: "npm:^3.1.0"
     d3-interpolate: "npm:^3.0.1"
@@ -2349,12 +2017,12 @@ __metadata:
     d3-shape: "npm:^3.2.0"
     jest-date-mock: "npm:^1.0.8"
     lodash: "npm:^4.17.21"
-    react-is: "npm:^17.0.2"
+    react: "npm:19.1.2"
+    react-is: "npm:19.1.2"
     type-fest: "npm:^2.19.0"
     zod: "npm:^3.23.8"
   peerDependencies:
-    react: ^18.3.1
-    react-dom: ^18.3.1
+    react: ^18.0.0 || ~19.1.2
   languageName: unknown
   linkType: soft
 
@@ -2364,7 +2032,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     chalk: "npm:^4.1.2"
     prettier: "npm:^3.6.2"
@@ -2377,7 +2045,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     chalk: "npm:^4.1.2"
     prettier: "npm:^3.6.2"
@@ -2390,7 +2058,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
   languageName: unknown
   linkType: soft
@@ -2412,39 +2080,63 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@coinbase/cds-mobile-visualization@workspace:^, @coinbase/cds-mobile-visualization@workspace:packages/mobile-visualization":
+"@coinbase/cds-migrator@workspace:^, @coinbase/cds-migrator@workspace:packages/migrator":
+  version: 0.0.0-use.local
+  resolution: "@coinbase/cds-migrator@workspace:packages/migrator"
+  dependencies:
+    "@babel/core": "npm:^7.28.0"
+    "@babel/preset-env": "npm:^7.28.0"
+    "@babel/preset-react": "npm:^7.28.5"
+    "@babel/preset-typescript": "npm:^7.27.1"
+    "@types/inquirer": "npm:^9.0.7"
+    "@types/jscodeshift": "npm:^0.11.10"
+    commander: "npm:^11.1.0"
+    fast-glob: "npm:^3.2.11"
+    inquirer: "npm:^12.1.0"
+    jscodeshift: "npm:^0.15.1"
+  bin:
+    cds-migrate: ./cjs/cli.js
+  languageName: unknown
+  linkType: soft
+
+"@coinbase/cds-mobile-visualization@workspace:packages/mobile-visualization":
   version: 0.0.0-use.local
   resolution: "@coinbase/cds-mobile-visualization@workspace:packages/mobile-visualization"
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     "@coinbase/cds-common": "workspace:^"
     "@coinbase/cds-lottie-files": "workspace:^"
     "@coinbase/cds-mobile": "workspace:^"
     "@coinbase/cds-utils": "workspace:^"
-    "@shopify/react-native-skia": "npm:1.12.4"
-    "@types/react": "npm:^18.3.12"
+    "@shopify/react-native-skia": "npm:2.2.12"
+    "@testing-library/react-native": "npm:^13.3.3"
+    "@types/react": "npm:19.1.2"
     d3-interpolate-path: "npm:^2.3.0"
     lodash: "npm:^4.17.21"
-    react-native-gesture-handler: "npm:2.16.2"
-    react-native-reanimated: "npm:3.14.0"
-    react-native-safe-area-context: "npm:4.10.5"
-    react-native-svg: "npm:14.1.0"
-    react-test-renderer: "npm:^18.3.1"
+    react: "npm:19.1.2"
+    react-native: "npm:0.81.5"
+    react-native-gesture-handler: "npm:2.28.0"
+    react-native-reanimated: "npm:4.1.1"
+    react-native-safe-area-context: "npm:5.6.0"
+    react-native-svg: "npm:15.12.1"
+    react-native-worklets: "npm:0.5.2"
+    react-test-renderer: "npm:19.1.2"
   peerDependencies:
     "@coinbase/cds-common": "workspace:^"
     "@coinbase/cds-lottie-files": "workspace:^"
     "@coinbase/cds-mobile": "workspace:^"
     "@coinbase/cds-utils": "workspace:^"
-    "@shopify/react-native-skia": ^1.12.4 || ^2.0.0
-    react: ^18.3.1
-    react-native: ^0.74.5
-    react-native-gesture-handler: ^2.16.2
-    react-native-reanimated: ^3.14.0
-    react-native-safe-area-context: ^4.10.5
-    react-native-svg: ^14.1.0
+    "@shopify/react-native-skia": 2.2.12
+    react: ~19.1.2
+    react-native: ~0.81.5
+    react-native-gesture-handler: 2.28.0
+    react-native-reanimated: 4.1.1
+    react-native-safe-area-context: 5.6.0
+    react-native-svg: 15.12.1
+    react-native-worklets: 0.5.2
   languageName: unknown
   linkType: soft
 
@@ -2454,7 +2146,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     "@coinbase/cds-common": "workspace:^"
     "@coinbase/cds-icons": "workspace:^"
@@ -2463,41 +2155,39 @@ __metadata:
     "@coinbase/cds-utils": "workspace:^"
     "@floating-ui/react-native": "npm:^0.10.5"
     "@react-native-community/netinfo": "npm:^7.1.7"
-    "@react-navigation/native-stack": "npm:^6.9.26"
-    "@react-spring/native": "npm:^9.7.4"
-    "@testing-library/react-native": "npm:^11.3.0"
+    "@react-spring/native": "npm:^10.0.3"
+    "@shopify/react-native-skia": "npm:2.2.12"
+    "@testing-library/react-native": "npm:^13.3.3"
     "@types/d3-color": "npm:^3.1.3"
-    "@types/react": "npm:^18.3.12"
-    "@types/react-test-renderer": "npm:^18.3.0"
-    eslint-plugin-reanimated: "npm:^2.0.1"
+    "@types/react": "npm:19.1.2"
+    d3-interpolate-path: "npm:^2.3.0"
     fuse.js: "npm:^7.1.0"
     lodash: "npm:^4.17.21"
-    lottie-react-native: "npm:6.7.0"
-    react-native-accessibility-engine: "npm:^3.2.0"
-    react-native-gesture-handler: "npm:2.16.2"
+    lottie-react-native: "npm:7.3.1"
+    react: "npm:19.1.2"
+    react-native: "npm:0.81.5"
+    react-native-gesture-handler: "npm:2.28.0"
     react-native-inappbrowser-reborn: "npm:3.7.0"
     react-native-navigation-bar-color: "npm:2.0.2"
-    react-native-reanimated: "npm:3.14.0"
-    react-native-safe-area-context: "npm:4.10.5"
-    react-native-screens: "npm:3.32.0"
-    react-native-svg: "npm:14.1.0"
-    react-test-renderer: "npm:^18.3.1"
+    react-native-reanimated: "npm:4.1.1"
+    react-native-safe-area-context: "npm:5.6.0"
+    react-native-svg: "npm:15.12.1"
+    react-native-worklets: "npm:0.5.2"
+    react-test-renderer: "npm:19.1.2"
     type-fest: "npm:^2.19.0"
     zustand: "npm:^5.0.12"
   peerDependencies:
-    "@react-navigation/native": ^6.1.6
-    "@react-navigation/native-stack": ^6.9.26
-    "@react-navigation/stack": ^6.3.16
-    lottie-react-native: ^6.7.0
-    react: ^18.3.1
-    react-native: ^0.74.5
-    react-native-gesture-handler: ^2.16.2
+    "@shopify/react-native-skia": 2.2.12
+    lottie-react-native: 7.3.1
+    react: ~19.1.2
+    react-native: ~0.81.5
+    react-native-gesture-handler: 2.28.0
     react-native-inappbrowser-reborn: ^3.7.0
     react-native-navigation-bar-color: ^2.0.2
-    react-native-reanimated: ^3.14.0
-    react-native-safe-area-context: ^4.10.5
-    react-native-screens: ^3.32.0
-    react-native-svg: ^14.1.0
+    react-native-reanimated: 4.1.1
+    react-native-safe-area-context: 5.6.0
+    react-native-svg: 15.12.1
+    react-native-worklets: 0.5.2
   languageName: unknown
   linkType: soft
 
@@ -2509,34 +2199,33 @@ __metadata:
     "@coinbase/cds-icons": "workspace:^"
     "@coinbase/cds-illustrations": "workspace:^"
     "@coinbase/cds-web": "workspace:^"
-    "@coinbase/cds-web-visualization": "workspace:^"
     "@linaria/babel-preset": "npm:^3.0.0-beta.22"
     "@linaria/core": "npm:^3.0.0-beta.22"
     "@linaria/rollup": "npm:^3.0.0-beta.22"
     "@percy/cli": "npm:^1.31.1"
-    "@percy/storybook": "npm:^9.0.0"
+    "@percy/storybook": "npm:^9.1.0"
     "@shopify/storybook-a11y-test": "npm:^1.2.1"
     "@storybook-community/storybook-dark-mode": "npm:^6.0.0"
     "@storybook/addon-a11y": "npm:^9.1.19"
-    "@storybook/addon-storysource": "npm:^8.6.14"
+    "@storybook/addon-docs": "npm:9.1.17"
     "@storybook/addon-vitest": "npm:^9.1.2"
     "@storybook/jest": "npm:^0.2.3"
-    "@storybook/react-vite": "npm:^9.1.2"
+    "@storybook/react-vite": "npm:9.1.17"
     "@storybook/testing-library": "npm:^0.2.2"
     "@types/diff": "npm:^5.0.9"
-    "@types/react": "npm:^18.3.12"
-    "@types/react-dom": "npm:^18.3.1"
-    "@vitejs/plugin-react": "npm:^5.0.0"
+    "@types/react": "npm:19.1.2"
+    "@types/react-dom": "npm:19.1.2"
+    "@vitejs/plugin-react": "npm:^5.1.2"
     "@vitest/browser-playwright": "npm:^4.0.18"
     "@vitest/coverage-v8": "npm:^4.0.18"
     diff: "npm:^5.1.0"
     playwright: "npm:^1.58.2"
-    react: "npm:^18.3.1"
-    react-dom: "npm:^18.3.1"
+    react: "npm:19.1.2"
+    react-dom: "npm:19.1.2"
     rollup-plugin-visualizer: "npm:^6.0.3"
-    storybook: "npm:^9.1.2"
+    storybook: "npm:9.1.17"
     typescript: "npm:~5.9.2"
-    vite: "npm:^7.1.2"
+    vite: "npm:^7.3.1"
     vitest: "npm:^4.0.18"
   languageName: unknown
   linkType: soft
@@ -2547,7 +2236,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     humps: "npm:^2.0.1"
     type-fest: "npm:^2.19.0"
@@ -2582,11 +2271,11 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     "@babel/types": "npm:^7.20.7"
     "@linaria/babel-preset": "npm:^3.0.0-beta.22"
-    "@testing-library/react": "npm:^16.0.1"
+    "@testing-library/react": "npm:^16.3.2"
     chalk: "npm:^4.1.2"
     jest-axe: "npm:^10.0.0"
     source-map: "npm:^0.7.3"
@@ -2595,21 +2284,22 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@coinbase/cds-web-visualization@workspace:^, @coinbase/cds-web-visualization@workspace:packages/web-visualization":
+"@coinbase/cds-web-visualization@workspace:packages/web-visualization":
   version: 0.0.0-use.local
   resolution: "@coinbase/cds-web-visualization@workspace:packages/web-visualization"
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     "@coinbase/cds-common": "workspace:^"
     "@coinbase/cds-lottie-files": "workspace:^"
     "@coinbase/cds-utils": "workspace:^"
     "@coinbase/cds-web": "workspace:^"
     "@linaria/core": "npm:^3.0.0-beta.22"
-    "@types/react": "npm:^18.3.12"
-    "@types/react-dom": "npm:^18.3.1"
+    "@testing-library/react": "npm:^16.3.2"
+    "@types/react": "npm:19.1.2"
+    "@types/react-dom": "npm:19.1.2"
     d3-color: "npm:^3.1.0"
     d3-interpolate: "npm:^3.0.1"
     d3-interpolate-path: "npm:^2.3.0"
@@ -2617,14 +2307,16 @@ __metadata:
     d3-transition: "npm:^3.0.1"
     framer-motion: "npm:^10.18.0"
     lodash: "npm:^4.17.21"
+    react: "npm:19.1.2"
+    react-dom: "npm:19.1.2"
   peerDependencies:
     "@coinbase/cds-common": "workspace:^"
     "@coinbase/cds-lottie-files": "workspace:^"
     "@coinbase/cds-utils": "workspace:^"
     "@coinbase/cds-web": "workspace:^"
     framer-motion: ^10.18.0
-    react: ^18.3.1
-    react-dom: ^18.3.1
+    react: ^18.0.0 || ~19.1.2
+    react-dom: ^18.0.0 || ~19.1.2
   languageName: unknown
   linkType: soft
 
@@ -2634,7 +2326,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     "@coinbase/cds-common": "workspace:^"
     "@coinbase/cds-icons": "workspace:^"
@@ -2648,30 +2340,35 @@ __metadata:
     "@popperjs/core": "npm:^2.9.0"
     "@react-spring/web": "npm:^9.7.4"
     "@storybook/jest": "npm:^0.2.3"
-    "@storybook/react": "npm:^6.5.17-alpha.0"
+    "@storybook/react": "npm:^9.1.2"
     "@storybook/testing-library": "npm:^0.2.2"
-    "@types/react": "npm:^18.3.12"
-    "@types/react-dom": "npm:^18.3.1"
+    "@testing-library/react": "npm:^16.3.2"
+    "@testing-library/user-event": "npm:^14.0.4"
+    "@types/react": "npm:19.1.2"
+    "@types/react-dom": "npm:19.1.2"
     csstype: "npm:^3.1.3"
+    d3-color: "npm:^3.1.0"
     d3-interpolate: "npm:^3.0.1"
     d3-interpolate-path: "npm:^2.3.0"
     d3-selection: "npm:^3.0.0"
+    d3-transition: "npm:^3.0.1"
     framer-motion: "npm:^10.18.0"
     fuse.js: "npm:^7.1.0"
     glob: "npm:^10.3.10"
     lodash: "npm:^4.17.21"
     lottie-web: "npm:^5.13.0"
+    react: "npm:19.1.2"
+    react-dom: "npm:19.1.2"
     react-popper: "npm:^2.2.4"
-    react-use-measure: "npm:^2"
+    react-use-measure: "npm:^2.1.7"
     storybook-addon-performance: "npm:^0.16.1"
     typescript: "npm:~5.9.2"
-    vite: "npm:^7.1.2"
     zustand: "npm:^5.0.12"
     zx: "npm:^8.1.9"
   peerDependencies:
     framer-motion: ^10.18.0
-    react: ^18.3.1
-    react-dom: ^18.3.1
+    react: ^18.0.0 || ~19.1.2
+    react-dom: ^18.0.0 || ~19.1.2
   languageName: unknown
   linkType: soft
 
@@ -2681,7 +2378,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     "@docusaurus/logger": "npm:~3.7.0"
     "@docusaurus/types": "npm:~3.7.0"
@@ -2689,7 +2386,11 @@ __metadata:
     "@types/ejs": "npm:^3.1.0"
     "@types/lodash": "npm:^4.14.178"
     ejs: "npm:^3.1.7"
+    fast-glob: "npm:^3.2.11"
+    lodash: "npm:^4.17.21"
+    prettier: "npm:^3.6.2"
     react-docgen-typescript: "npm:^2.4.0"
+    type-fest: "npm:^2.19.0"
   peerDependencies:
     fast-glob: ^3.2.11
     lodash: ^4.17.21
@@ -2704,7 +2405,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     "@coinbase/cds-common": "workspace:^"
     "@docusaurus/logger": "npm:~3.7.0"
@@ -2722,7 +2423,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     "@docusaurus/types": "npm:~3.7.0"
     "@types/express": "npm:^4.17.21"
@@ -2736,12 +2437,16 @@ __metadata:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
     "@babel/preset-typescript": "npm:^7.27.1"
+    "@coinbase/cds-common": "workspace:^"
+    "@coinbase/cds-mobile": "workspace:^"
+    "@coinbase/cds-web": "workspace:^"
     "@rollup/plugin-babel": "npm:^6.0.4"
     "@rollup/plugin-node-resolve": "npm:^15.3.0"
     "@rollup/plugin-terser": "npm:^0.4.4"
     "@types/eslint-plugin-jsx-a11y": "npm:^6.10.0"
     "@typescript-eslint/rule-tester": "npm:^8.29.0"
     "@typescript-eslint/utils": "npm:^8.29.0"
+    eslint: "npm:^9.22.0"
     eslint-plugin-jsx-a11y: "npm:^6.10.2"
     eslint-plugin-react-native-a11y: "npm:^3.5.1"
     jest: "npm:^29.7.0"
@@ -2782,33 +2487,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@coinbase/ui-mobile-playground@workspace:^, @coinbase/ui-mobile-playground@workspace:packages/ui-mobile-playground":
-  version: 0.0.0-use.local
-  resolution: "@coinbase/ui-mobile-playground@workspace:packages/ui-mobile-playground"
-  dependencies:
-    "@babel/core": "npm:^7.28.0"
-    "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
-    "@babel/preset-typescript": "npm:^7.27.1"
-    "@react-navigation/elements": "npm:^1.3.17"
-    "@react-navigation/native": "npm:^6.1.6"
-    "@react-navigation/stack": "npm:^6.3.16"
-    "@types/react": "npm:^18.3.12"
-    lodash: "npm:^4.17.21"
-    react-native-safe-area-context: "npm:4.10.5"
-  peerDependencies:
-    "@coinbase/cds-common": "workspace:^"
-    "@coinbase/cds-mobile": "workspace:^"
-    "@coinbase/cds-mobile-visualization": "workspace:^"
-    "@react-navigation/elements": ^1.3.17
-    "@react-navigation/native": ^6.1.6
-    "@react-navigation/stack": ^6.3.16
-    react: ^18.3.1
-    react-native: ^0.74.5
-    react-native-safe-area-context: ^4.10.5
-  languageName: unknown
-  linkType: soft
-
 "@colors/colors@npm:1.5.0":
   version: 1.5.0
   resolution: "@colors/colors@npm:1.5.0"
@@ -2816,17 +2494,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@config-plugins/detox@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "@config-plugins/detox@npm:6.0.0"
-  dependencies:
-    expo-build-properties: "npm:~0.8.3"
-  peerDependencies:
-    expo: ^49
-  checksum: 10c0/231c2e9c0f5eee1dfb5095036a67ad1aae27f67f52cb0be72fcc04a19e14a33b288e8ff331c29f29d817caae2355438cfea0f1f2ed19a0f880dd5b0888d17911
-  languageName: node
-  linkType: hard
-
 "@csstools/cascade-layer-name-parser@npm:^2.0.4":
   version: 2.0.4
   resolution: "@csstools/cascade-layer-name-parser@npm:2.0.4"
@@ -3368,7 +3035,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@discoveryjs/json-ext@npm:0.5.7, @discoveryjs/json-ext@npm:^0.5.3":
+"@discoveryjs/json-ext@npm:0.5.7":
   version: 0.5.7
   resolution: "@discoveryjs/json-ext@npm:0.5.7"
   checksum: 10c0/e10f1b02b78e4812646ddf289b7d9f2cb567d336c363b266bd50cd223cf3de7c2c74018d91cd2613041568397ef3a4a2b500aba588c6e5bd78c38374ba68f38c
@@ -4783,468 +4450,463 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/bunyan@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "@expo/bunyan@npm:4.0.0"
-  dependencies:
-    mv: "npm:~2"
-    safe-json-stringify: "npm:~1"
-    uuid: "npm:^8.0.0"
-  dependenciesMeta:
-    mv:
-      optional: true
-    safe-json-stringify:
-      optional: true
-  checksum: 10c0/2f9de15556708ef8e2fb7cc9264ef79ec7525e3906d1a095af1fcad5edac6d6f0da5e47d2ab4c3f67f0a71b5b7422dedfa5b3d6a3dfdd1fa0c614c8535c171aa
-  languageName: node
-  linkType: hard
-
-"@expo/cli@npm:0.18.29":
-  version: 0.18.29
-  resolution: "@expo/cli@npm:0.18.29"
-  dependencies:
-    "@babel/runtime": "npm:^7.20.0"
-    "@expo/code-signing-certificates": "npm:0.0.5"
-    "@expo/config": "npm:~9.0.0-beta.0"
-    "@expo/config-plugins": "npm:~8.0.8"
-    "@expo/devcert": "npm:^1.0.0"
-    "@expo/env": "npm:~0.3.0"
-    "@expo/image-utils": "npm:^0.5.0"
-    "@expo/json-file": "npm:^8.3.0"
-    "@expo/metro-config": "npm:0.18.11"
-    "@expo/osascript": "npm:^2.0.31"
-    "@expo/package-manager": "npm:^1.5.0"
-    "@expo/plist": "npm:^0.1.0"
-    "@expo/prebuild-config": "npm:7.0.8"
-    "@expo/rudder-sdk-node": "npm:1.1.1"
+"@expo/cli@npm:54.0.22":
+  version: 54.0.22
+  resolution: "@expo/cli@npm:54.0.22"
+  dependencies:
+    "@0no-co/graphql.web": "npm:^1.0.8"
+    "@expo/code-signing-certificates": "npm:^0.0.6"
+    "@expo/config": "npm:~12.0.13"
+    "@expo/config-plugins": "npm:~54.0.4"
+    "@expo/devcert": "npm:^1.2.1"
+    "@expo/env": "npm:~2.0.8"
+    "@expo/image-utils": "npm:^0.8.8"
+    "@expo/json-file": "npm:^10.0.8"
+    "@expo/metro": "npm:~54.2.0"
+    "@expo/metro-config": "npm:~54.0.14"
+    "@expo/osascript": "npm:^2.3.8"
+    "@expo/package-manager": "npm:^1.9.10"
+    "@expo/plist": "npm:^0.4.8"
+    "@expo/prebuild-config": "npm:^54.0.8"
+    "@expo/schema-utils": "npm:^0.1.8"
     "@expo/spawn-async": "npm:^1.7.2"
+    "@expo/ws-tunnel": "npm:^1.0.1"
     "@expo/xcpretty": "npm:^4.3.0"
-    "@react-native/dev-middleware": "npm:0.74.85"
-    "@urql/core": "npm:2.3.6"
-    "@urql/exchange-retry": "npm:0.3.0"
+    "@react-native/dev-middleware": "npm:0.81.5"
+    "@urql/core": "npm:^5.0.6"
+    "@urql/exchange-retry": "npm:^1.3.0"
     accepts: "npm:^1.3.8"
-    arg: "npm:5.0.2"
+    arg: "npm:^5.0.2"
     better-opn: "npm:~3.0.2"
-    bplist-creator: "npm:0.0.7"
+    bplist-creator: "npm:0.1.0"
     bplist-parser: "npm:^0.3.1"
-    cacache: "npm:^18.0.2"
     chalk: "npm:^4.0.0"
     ci-info: "npm:^3.3.0"
+    compression: "npm:^1.7.4"
     connect: "npm:^3.7.0"
     debug: "npm:^4.3.4"
     env-editor: "npm:^0.4.1"
-    fast-glob: "npm:^3.3.2"
-    find-yarn-workspace-root: "npm:~2.0.0"
-    form-data: "npm:^3.0.1"
-    freeport-async: "npm:2.0.0"
-    fs-extra: "npm:~8.1.0"
-    getenv: "npm:^1.0.0"
-    glob: "npm:^7.1.7"
-    graphql: "npm:15.8.0"
-    graphql-tag: "npm:^2.10.1"
-    https-proxy-agent: "npm:^5.0.1"
-    internal-ip: "npm:4.3.0"
-    is-docker: "npm:^2.0.0"
-    is-wsl: "npm:^2.1.1"
-    js-yaml: "npm:^3.13.1"
-    json-schema-deref-sync: "npm:^0.13.0"
-    lodash.debounce: "npm:^4.0.8"
-    md5hex: "npm:^1.0.0"
-    minimatch: "npm:^3.0.4"
-    node-fetch: "npm:^2.6.7"
-    node-forge: "npm:^1.3.1"
-    npm-package-arg: "npm:^7.0.0"
-    open: "npm:^8.3.0"
-    ora: "npm:3.4.0"
+    expo-server: "npm:^1.0.5"
+    freeport-async: "npm:^2.0.0"
+    getenv: "npm:^2.0.0"
+    glob: "npm:^13.0.0"
+    lan-network: "npm:^0.1.6"
+    minimatch: "npm:^9.0.0"
+    node-forge: "npm:^1.3.3"
+    npm-package-arg: "npm:^11.0.0"
+    ora: "npm:^3.4.0"
     picomatch: "npm:^3.0.1"
-    pretty-bytes: "npm:5.6.0"
-    progress: "npm:2.0.3"
+    pretty-bytes: "npm:^5.6.0"
+    pretty-format: "npm:^29.7.0"
+    progress: "npm:^2.0.3"
     prompts: "npm:^2.3.2"
     qrcode-terminal: "npm:0.11.0"
     require-from-string: "npm:^2.0.2"
     requireg: "npm:^0.2.2"
     resolve: "npm:^1.22.2"
     resolve-from: "npm:^5.0.0"
-    resolve.exports: "npm:^2.0.2"
+    resolve.exports: "npm:^2.0.3"
     semver: "npm:^7.6.0"
-    send: "npm:^0.18.0"
+    send: "npm:^0.19.0"
     slugify: "npm:^1.3.4"
     source-map-support: "npm:~0.5.21"
     stacktrace-parser: "npm:^0.1.10"
     structured-headers: "npm:^0.4.1"
-    tar: "npm:^6.0.5"
-    temp-dir: "npm:^2.0.0"
-    tempy: "npm:^0.7.1"
+    tar: "npm:^7.5.2"
     terminal-link: "npm:^2.1.1"
-    text-table: "npm:^0.2.0"
-    url-join: "npm:4.0.0"
+    undici: "npm:^6.18.2"
     wrap-ansi: "npm:^7.0.0"
     ws: "npm:^8.12.1"
+  peerDependencies:
+    expo: "*"
+    expo-router: "*"
+    react-native: "*"
+  peerDependenciesMeta:
+    expo-router:
+      optional: true
+    react-native:
+      optional: true
   bin:
     expo-internal: build/bin/cli
-  checksum: 10c0/6e9e86f37b84da600db01cdd554cd76ea6a94a50103fa54731d441dfb1b3a81ef25760c14da99cf6590588e001f5abbacec1b43b3414b61f862b491c12cf2568
-  languageName: node
-  linkType: hard
-
-"@expo/cli@patch:@expo/cli@npm:0.18.29#.yarn/patches/@expo-cli-npm-0.18.29-f58906fdfb.patch::locator=design-system%40workspace%3A.":
-  version: 0.18.29
-  resolution: "@expo/cli@patch:@expo/cli@npm%3A0.18.29#.yarn/patches/@expo-cli-npm-0.18.29-f58906fdfb.patch::version=0.18.29&hash=560293&locator=design-system%40workspace%3A."
-  dependencies:
-    "@babel/runtime": "npm:^7.20.0"
-    "@expo/code-signing-certificates": "npm:0.0.5"
-    "@expo/config": "npm:~9.0.0-beta.0"
-    "@expo/config-plugins": "npm:~8.0.8"
-    "@expo/devcert": "npm:^1.0.0"
-    "@expo/env": "npm:~0.3.0"
-    "@expo/image-utils": "npm:^0.5.0"
-    "@expo/json-file": "npm:^8.3.0"
-    "@expo/metro-config": "npm:0.18.11"
-    "@expo/osascript": "npm:^2.0.31"
-    "@expo/package-manager": "npm:^1.5.0"
-    "@expo/plist": "npm:^0.1.0"
-    "@expo/prebuild-config": "npm:7.0.8"
-    "@expo/rudder-sdk-node": "npm:1.1.1"
+  checksum: 10c0/ad95665fa6d91fb2cc3dc813c1563bf6cd6b3883e1ab69546e5cac041bcdfb033e90201e394c2b0ce3011e81f82bc3bb4cc9f551029debeaef0a42152b280ca3
+  languageName: node
+  linkType: hard
+
+"@expo/cli@patch:@expo/cli@npm:54.0.22#.yarn/patches/@expo-cli-npm-54.0.22-eb5155f2b5.patch::locator=design-system%40workspace%3A.":
+  version: 54.0.22
+  resolution: "@expo/cli@patch:@expo/cli@npm%3A54.0.22#.yarn/patches/@expo-cli-npm-54.0.22-eb5155f2b5.patch::version=54.0.22&hash=72ff90&locator=design-system%40workspace%3A."
+  dependencies:
+    "@0no-co/graphql.web": "npm:^1.0.8"
+    "@expo/code-signing-certificates": "npm:^0.0.6"
+    "@expo/config": "npm:~12.0.13"
+    "@expo/config-plugins": "npm:~54.0.4"
+    "@expo/devcert": "npm:^1.2.1"
+    "@expo/env": "npm:~2.0.8"
+    "@expo/image-utils": "npm:^0.8.8"
+    "@expo/json-file": "npm:^10.0.8"
+    "@expo/metro": "npm:~54.2.0"
+    "@expo/metro-config": "npm:~54.0.14"
+    "@expo/osascript": "npm:^2.3.8"
+    "@expo/package-manager": "npm:^1.9.10"
+    "@expo/plist": "npm:^0.4.8"
+    "@expo/prebuild-config": "npm:^54.0.8"
+    "@expo/schema-utils": "npm:^0.1.8"
     "@expo/spawn-async": "npm:^1.7.2"
+    "@expo/ws-tunnel": "npm:^1.0.1"
     "@expo/xcpretty": "npm:^4.3.0"
-    "@react-native/dev-middleware": "npm:0.74.85"
-    "@urql/core": "npm:2.3.6"
-    "@urql/exchange-retry": "npm:0.3.0"
+    "@react-native/dev-middleware": "npm:0.81.5"
+    "@urql/core": "npm:^5.0.6"
+    "@urql/exchange-retry": "npm:^1.3.0"
     accepts: "npm:^1.3.8"
-    arg: "npm:5.0.2"
+    arg: "npm:^5.0.2"
     better-opn: "npm:~3.0.2"
-    bplist-creator: "npm:0.0.7"
+    bplist-creator: "npm:0.1.0"
     bplist-parser: "npm:^0.3.1"
-    cacache: "npm:^18.0.2"
     chalk: "npm:^4.0.0"
     ci-info: "npm:^3.3.0"
+    compression: "npm:^1.7.4"
     connect: "npm:^3.7.0"
     debug: "npm:^4.3.4"
     env-editor: "npm:^0.4.1"
-    fast-glob: "npm:^3.3.2"
-    find-yarn-workspace-root: "npm:~2.0.0"
-    form-data: "npm:^3.0.1"
-    freeport-async: "npm:2.0.0"
-    fs-extra: "npm:~8.1.0"
-    getenv: "npm:^1.0.0"
-    glob: "npm:^7.1.7"
-    graphql: "npm:15.8.0"
-    graphql-tag: "npm:^2.10.1"
-    https-proxy-agent: "npm:^5.0.1"
-    internal-ip: "npm:4.3.0"
-    is-docker: "npm:^2.0.0"
-    is-wsl: "npm:^2.1.1"
-    js-yaml: "npm:^3.13.1"
-    json-schema-deref-sync: "npm:^0.13.0"
-    lodash.debounce: "npm:^4.0.8"
-    md5hex: "npm:^1.0.0"
-    minimatch: "npm:^3.0.4"
-    node-fetch: "npm:^2.6.7"
-    node-forge: "npm:^1.3.1"
-    npm-package-arg: "npm:^7.0.0"
-    open: "npm:^8.3.0"
-    ora: "npm:3.4.0"
+    expo-server: "npm:^1.0.5"
+    freeport-async: "npm:^2.0.0"
+    getenv: "npm:^2.0.0"
+    glob: "npm:^13.0.0"
+    lan-network: "npm:^0.1.6"
+    minimatch: "npm:^9.0.0"
+    node-forge: "npm:^1.3.3"
+    npm-package-arg: "npm:^11.0.0"
+    ora: "npm:^3.4.0"
     picomatch: "npm:^3.0.1"
-    pretty-bytes: "npm:5.6.0"
-    progress: "npm:2.0.3"
+    pretty-bytes: "npm:^5.6.0"
+    pretty-format: "npm:^29.7.0"
+    progress: "npm:^2.0.3"
     prompts: "npm:^2.3.2"
     qrcode-terminal: "npm:0.11.0"
     require-from-string: "npm:^2.0.2"
     requireg: "npm:^0.2.2"
     resolve: "npm:^1.22.2"
     resolve-from: "npm:^5.0.0"
-    resolve.exports: "npm:^2.0.2"
+    resolve.exports: "npm:^2.0.3"
     semver: "npm:^7.6.0"
-    send: "npm:^0.18.0"
+    send: "npm:^0.19.0"
     slugify: "npm:^1.3.4"
     source-map-support: "npm:~0.5.21"
     stacktrace-parser: "npm:^0.1.10"
     structured-headers: "npm:^0.4.1"
-    tar: "npm:^6.0.5"
-    temp-dir: "npm:^2.0.0"
-    tempy: "npm:^0.7.1"
+    tar: "npm:^7.5.2"
     terminal-link: "npm:^2.1.1"
-    text-table: "npm:^0.2.0"
-    url-join: "npm:4.0.0"
+    undici: "npm:^6.18.2"
     wrap-ansi: "npm:^7.0.0"
     ws: "npm:^8.12.1"
+  peerDependencies:
+    expo: "*"
+    expo-router: "*"
+    react-native: "*"
+  peerDependenciesMeta:
+    expo-router:
+      optional: true
+    react-native:
+      optional: true
   bin:
     expo-internal: build/bin/cli
-  checksum: 10c0/3916aadeda3be6a5946dda940946aeb295650bafab403b1ed3645c352ab34a3b4256827be8e7201565a6426d19abfbeebf8139e2f436ffd96bc7eff5a9c948a2
+  checksum: 10c0/87c11be13373426f6f92e8eadd8000e1b46b48553470e1d3087e48a06624b6b254b6ea6f1ad93be54cb00dec2e54dcd1f9acbea7ccf12c908bf3d643e8414929
   languageName: node
   linkType: hard
 
-"@expo/code-signing-certificates@npm:0.0.5":
-  version: 0.0.5
-  resolution: "@expo/code-signing-certificates@npm:0.0.5"
+"@expo/code-signing-certificates@npm:^0.0.6":
+  version: 0.0.6
+  resolution: "@expo/code-signing-certificates@npm:0.0.6"
   dependencies:
-    node-forge: "npm:^1.2.1"
-    nullthrows: "npm:^1.1.1"
-  checksum: 10c0/98c908c54f92d6782ae01fef47dd858140dc6013e5376ee3faf9b243327f2b16279441fec171cbde45d0e3ebd0bf72db57b4d4c2a0c4f952285b0b377b2b356b
+    node-forge: "npm:^1.3.3"
+  checksum: 10c0/3c60be55fb056ccebf7355c1dbe959cee191eaa1c33c6ff5a7331c1ffe1cfa66edc6b62e8005b4a9023bbd40462d81d35284e79eaa8893facb2493801685bbea
   languageName: node
   linkType: hard
 
-"@expo/config-plugins@npm:8.0.10, @expo/config-plugins@npm:~8.0.0-beta.0, @expo/config-plugins@npm:~8.0.8":
-  version: 8.0.10
-  resolution: "@expo/config-plugins@npm:8.0.10"
+"@expo/config-plugins@npm:~54.0.4":
+  version: 54.0.4
+  resolution: "@expo/config-plugins@npm:54.0.4"
   dependencies:
-    "@expo/config-types": "npm:^51.0.3"
-    "@expo/json-file": "npm:~8.3.0"
-    "@expo/plist": "npm:^0.1.0"
+    "@expo/config-types": "npm:^54.0.10"
+    "@expo/json-file": "npm:~10.0.8"
+    "@expo/plist": "npm:^0.4.8"
     "@expo/sdk-runtime-versions": "npm:^1.0.0"
     chalk: "npm:^4.1.2"
-    debug: "npm:^4.3.1"
-    find-up: "npm:~5.0.0"
-    getenv: "npm:^1.0.0"
-    glob: "npm:7.1.6"
+    debug: "npm:^4.3.5"
+    getenv: "npm:^2.0.0"
+    glob: "npm:^13.0.0"
     resolve-from: "npm:^5.0.0"
     semver: "npm:^7.5.4"
     slash: "npm:^3.0.0"
     slugify: "npm:^1.6.6"
     xcode: "npm:^3.0.1"
     xml2js: "npm:0.6.0"
-  checksum: 10c0/840c556b8ceb771acf0fba4f27f7330818fc7bf2db1ccd271b51532266a3daaa6a216d26f533f989ab11abab3c84e8921a943ed448079f6733184fdfacdd9f0b
+  checksum: 10c0/c7537485a0e883d8a98f1fb93335a1f56d4be2c2a4b5676ba09a8e9253190996241022f841c437e64578fa63b20b6ecf843d88b52930b890fa199d7aa188253f
   languageName: node
   linkType: hard
 
-"@expo/config-types@npm:^51.0.0-unreleased, @expo/config-types@npm:^51.0.3, @expo/config-types@npm:~51.0.2":
-  version: 51.0.3
-  resolution: "@expo/config-types@npm:51.0.3"
-  checksum: 10c0/bd87a729da985b0097ab29367c0473a2bced5ff211d416f342729e1b2631a7c00d62878e05cdee49ece7e3b65d3296957917f24380d57e2faef2cf220194fdec
+"@expo/config-types@npm:^54.0.10":
+  version: 54.0.10
+  resolution: "@expo/config-types@npm:54.0.10"
+  checksum: 10c0/a304e18314937cbe3a146fe7daf23d5b78049676dabc14b1e181330f9e74ab2f4ada288f23999f254b59ee7c59380f895ffcb536f537e9039cd10336b1c1d7bc
   languageName: node
   linkType: hard
 
-"@expo/config@npm:9.0.4, @expo/config@npm:~9.0.0, @expo/config@npm:~9.0.0-beta.0":
-  version: 9.0.4
-  resolution: "@expo/config@npm:9.0.4"
+"@expo/config@npm:~12.0.11, @expo/config@npm:~12.0.13":
+  version: 12.0.13
+  resolution: "@expo/config@npm:12.0.13"
   dependencies:
     "@babel/code-frame": "npm:~7.10.4"
-    "@expo/config-plugins": "npm:~8.0.8"
-    "@expo/config-types": "npm:^51.0.3"
-    "@expo/json-file": "npm:^8.3.0"
-    getenv: "npm:^1.0.0"
-    glob: "npm:7.1.6"
+    "@expo/config-plugins": "npm:~54.0.4"
+    "@expo/config-types": "npm:^54.0.10"
+    "@expo/json-file": "npm:^10.0.8"
+    deepmerge: "npm:^4.3.1"
+    getenv: "npm:^2.0.0"
+    glob: "npm:^13.0.0"
     require-from-string: "npm:^2.0.2"
     resolve-from: "npm:^5.0.0"
+    resolve-workspace-root: "npm:^2.0.0"
     semver: "npm:^7.6.0"
     slugify: "npm:^1.3.4"
-    sucrase: "npm:3.34.0"
-  checksum: 10c0/3ff42bed172be89652e0e3b1171e7acb20b28314b72cac3b26b1da53b0d6753485502ff1786e05c02ede312e3ff839732c2637ff828bdfe58bcbb91c1669f297
+    sucrase: "npm:~3.35.1"
+  checksum: 10c0/c81494670424251b629f3c1a3ff8eb76e40b51838dbeaa793f6f763d0252fa506d5c7bf60dc358555a64bded7e9c33731169675a56604ff439510359e41b6d10
   languageName: node
   linkType: hard
 
-"@expo/devcert@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "@expo/devcert@npm:1.1.0"
+"@expo/devcert@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@expo/devcert@npm:1.2.1"
   dependencies:
-    application-config-path: "npm:^0.1.0"
-    command-exists: "npm:^1.2.4"
+    "@expo/sudo-prompt": "npm:^9.3.1"
     debug: "npm:^3.1.0"
-    eol: "npm:^0.9.1"
-    get-port: "npm:^3.2.0"
-    glob: "npm:^7.1.2"
-    lodash: "npm:^4.17.4"
-    mkdirp: "npm:^0.5.1"
-    password-prompt: "npm:^1.0.4"
-    rimraf: "npm:^2.6.2"
-    sudo-prompt: "npm:^8.2.0"
-    tmp: "npm:^0.0.33"
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/4ac22ccc3a8d5c6ccbb724551fedcc28c4bef598583fc7fdb615eb1f13205bfc1cb09cff2aaf410880e5ef19b90c344d362e804f79ea2019bd15a3f54c15a46a
+  checksum: 10c0/7c5cb4fa74a14702a44b4772a56f27fd191b6cd08988f3da01323f6d592623c80247171b7d66b2c0a32408f48a0814162dbb2764042444887f27e38b89ad1051
   languageName: node
   linkType: hard
 
-"@expo/env@npm:~0.3.0":
-  version: 0.3.0
-  resolution: "@expo/env@npm:0.3.0"
+"@expo/devtools@npm:0.1.8":
+  version: 0.1.8
+  resolution: "@expo/devtools@npm:0.1.8"
+  dependencies:
+    chalk: "npm:^4.1.2"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-native:
+      optional: true
+  checksum: 10c0/dc4e095e5f4508370ae2258f23370a295b9400c87f29aee2338caa3ca3733d789ba3ff1bfafbf5fa285ac6974aec89b3cbf363fca5885eb9be3973ac1a7d7fa8
+  languageName: node
+  linkType: hard
+
+"@expo/env@npm:~2.0.8":
+  version: 2.0.11
+  resolution: "@expo/env@npm:2.0.11"
   dependencies:
     chalk: "npm:^4.0.0"
     debug: "npm:^4.3.4"
     dotenv: "npm:~16.4.5"
     dotenv-expand: "npm:~11.0.6"
-    getenv: "npm:^1.0.0"
-  checksum: 10c0/cb8ee6406083c41b55f58da9bc7ab4b1e38227220d72aa22b5f11b5d22756014c61c327f3f214dcd8eb4b6f1a10162745a921ebe7b0d8d841f40a6ece320f07b
+    getenv: "npm:^2.0.0"
+  checksum: 10c0/a112f3165f2323d69bac2a1a953032667bb469c9c37403e9a6145a19ef6a92e5476279f12f5a4e1b20ebe1f22d9faa77f4ff250a370d09c32cd62c0d8033eb98
   languageName: node
   linkType: hard
 
-"@expo/image-utils@npm:^0.5.0":
-  version: 0.5.1
-  resolution: "@expo/image-utils@npm:0.5.1"
+"@expo/fingerprint@npm:0.15.4":
+  version: 0.15.4
+  resolution: "@expo/fingerprint@npm:0.15.4"
   dependencies:
     "@expo/spawn-async": "npm:^1.7.2"
-    chalk: "npm:^4.0.0"
-    fs-extra: "npm:9.0.0"
-    getenv: "npm:^1.0.0"
-    jimp-compact: "npm:0.16.1"
-    node-fetch: "npm:^2.6.0"
-    parse-png: "npm:^2.1.0"
+    arg: "npm:^5.0.2"
+    chalk: "npm:^4.1.2"
+    debug: "npm:^4.3.4"
+    getenv: "npm:^2.0.0"
+    glob: "npm:^13.0.0"
+    ignore: "npm:^5.3.1"
+    minimatch: "npm:^9.0.0"
+    p-limit: "npm:^3.1.0"
     resolve-from: "npm:^5.0.0"
     semver: "npm:^7.6.0"
-    tempy: "npm:0.3.0"
-  checksum: 10c0/611a0c4833abb9fd5a4c65265d85c032271746b806700c8e4df24cfa427fe666722a74f4acfa81779497a726221c3539599570e4a2817f5b8b29310c37e16ed5
+  bin:
+    fingerprint: bin/cli.js
+  checksum: 10c0/fe5aa9eff4f649cc58aa0b67cd6b93845ddc81b49a61f03c50632405bf2b99fc83ecbb15c527bfddc0156f8fad297f066dd46edf4cfa17580025fb192d7a98ee
   languageName: node
   linkType: hard
 
-"@expo/image-utils@npm:~0.4.2":
-  version: 0.4.2
-  resolution: "@expo/image-utils@npm:0.4.2"
+"@expo/image-utils@npm:^0.8.8":
+  version: 0.8.12
+  resolution: "@expo/image-utils@npm:0.8.12"
   dependencies:
-    "@expo/spawn-async": "npm:1.5.0"
+    "@expo/spawn-async": "npm:^1.7.2"
     chalk: "npm:^4.0.0"
-    fs-extra: "npm:9.0.0"
-    getenv: "npm:^1.0.0"
+    getenv: "npm:^2.0.0"
     jimp-compact: "npm:0.16.1"
-    node-fetch: "npm:^2.6.0"
     parse-png: "npm:^2.1.0"
     resolve-from: "npm:^5.0.0"
-    semver: "npm:7.3.2"
-    tempy: "npm:0.3.0"
-  checksum: 10c0/379b5dc6482ffdda2456f4eda7a674feb91777afee502a81d07f5713e9671d444e58de4dac42b370924bbdcde90b13e7864d390b93730484adfd840f03d7d82b
+    semver: "npm:^7.6.0"
+  checksum: 10c0/f9ea7b8ac746602e824e6f5005242a400fce59f776caed05d27e3aa8a8354059ce44d0c3d50f6c1aa4e3256282f504150d0ea62c86e6cae5bacc626d530a35f6
   languageName: node
   linkType: hard
 
-"@expo/json-file@npm:^8.3.0, @expo/json-file@npm:~8.3.0":
-  version: 8.3.3
-  resolution: "@expo/json-file@npm:8.3.3"
+"@expo/json-file@npm:^10.0.12, @expo/json-file@npm:^10.0.8, @expo/json-file@npm:~10.0.8":
+  version: 10.0.12
+  resolution: "@expo/json-file@npm:10.0.12"
   dependencies:
-    "@babel/code-frame": "npm:~7.10.4"
-    json5: "npm:^2.2.2"
-    write-file-atomic: "npm:^2.3.0"
-  checksum: 10c0/3b1b593a2fe6cb297713fbe2d1002bbc8d469fc55219343bffcce1b1abe941aace1b239d0afc1a3cf15b7ceed91e8da4ca36cb83b586f3bf9f05856e1ad560d3
+    "@babel/code-frame": "npm:^7.20.0"
+    json5: "npm:^2.2.3"
+  checksum: 10c0/52131a6426e96208ff1b295d580fc70eebb8e292b29fde1db016b2f21a0942a7521feec96b3f58efe5b32dcc1642d569b4211d651146fcdb9bf7e5f08b635878
   languageName: node
   linkType: hard
 
-"@expo/json-file@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "@expo/json-file@npm:9.0.0"
+"@expo/metro-config@npm:54.0.14":
+  version: 54.0.14
+  resolution: "@expo/metro-config@npm:54.0.14"
   dependencies:
-    "@babel/code-frame": "npm:~7.10.4"
-    json5: "npm:^2.2.3"
-    write-file-atomic: "npm:^2.3.0"
-  checksum: 10c0/1ae75cc118f2902f0efc1a1240a31e6bc38200d68c9d42ba2c2fd0a87290c31cd57c9feae77789a16accc8dc0756eedc39cd456c21dd5be3b13f1e2eff3db152
+    "@babel/code-frame": "npm:^7.20.0"
+    "@babel/core": "npm:^7.20.0"
+    "@babel/generator": "npm:^7.20.5"
+    "@expo/config": "npm:~12.0.13"
+    "@expo/env": "npm:~2.0.8"
+    "@expo/json-file": "npm:~10.0.8"
+    "@expo/metro": "npm:~54.2.0"
+    "@expo/spawn-async": "npm:^1.7.2"
+    browserslist: "npm:^4.25.0"
+    chalk: "npm:^4.1.0"
+    debug: "npm:^4.3.2"
+    dotenv: "npm:~16.4.5"
+    dotenv-expand: "npm:~11.0.6"
+    getenv: "npm:^2.0.0"
+    glob: "npm:^13.0.0"
+    hermes-parser: "npm:^0.29.1"
+    jsc-safe-url: "npm:^0.2.4"
+    lightningcss: "npm:^1.30.1"
+    minimatch: "npm:^9.0.0"
+    postcss: "npm:~8.4.32"
+    resolve-from: "npm:^5.0.0"
+  peerDependencies:
+    expo: "*"
+  peerDependenciesMeta:
+    expo:
+      optional: true
+  checksum: 10c0/a8213d3167c39ff3fd7973e4de35fc12ee0b56564ff9f8def3b92ec7204a92174f6bbd7036bc87c893d0a82583c92c7f81271c58f366c26e4c11ab2b86642fb7
   languageName: node
   linkType: hard
 
-"@expo/metro-config@npm:0.18.11":
-  version: 0.18.11
-  resolution: "@expo/metro-config@npm:0.18.11"
+"@expo/metro-config@patch:@expo/metro-config@npm:54.0.14#.yarn/patches/@expo-metro-config-npm-54.0.14-88915da766.patch::locator=design-system%40workspace%3A.":
+  version: 54.0.14
+  resolution: "@expo/metro-config@patch:@expo/metro-config@npm%3A54.0.14#.yarn/patches/@expo-metro-config-npm-54.0.14-88915da766.patch::version=54.0.14&hash=d961c2&locator=design-system%40workspace%3A."
   dependencies:
+    "@babel/code-frame": "npm:^7.20.0"
     "@babel/core": "npm:^7.20.0"
     "@babel/generator": "npm:^7.20.5"
-    "@babel/parser": "npm:^7.20.0"
-    "@babel/types": "npm:^7.20.0"
-    "@expo/config": "npm:~9.0.0-beta.0"
-    "@expo/env": "npm:~0.3.0"
-    "@expo/json-file": "npm:~8.3.0"
+    "@expo/config": "npm:~12.0.13"
+    "@expo/env": "npm:~2.0.8"
+    "@expo/json-file": "npm:~10.0.8"
+    "@expo/metro": "npm:~54.2.0"
     "@expo/spawn-async": "npm:^1.7.2"
+    browserslist: "npm:^4.25.0"
     chalk: "npm:^4.1.0"
     debug: "npm:^4.3.2"
-    find-yarn-workspace-root: "npm:~2.0.0"
-    fs-extra: "npm:^9.1.0"
-    getenv: "npm:^1.0.0"
-    glob: "npm:^7.2.3"
+    dotenv: "npm:~16.4.5"
+    dotenv-expand: "npm:~11.0.6"
+    getenv: "npm:^2.0.0"
+    glob: "npm:^13.0.0"
+    hermes-parser: "npm:^0.29.1"
     jsc-safe-url: "npm:^0.2.4"
-    lightningcss: "npm:~1.19.0"
+    lightningcss: "npm:^1.30.1"
+    minimatch: "npm:^9.0.0"
     postcss: "npm:~8.4.32"
     resolve-from: "npm:^5.0.0"
-  checksum: 10c0/775990b6e58e8f1a4bb7215bfa341315e599df8a6ca4f5c0cc12122ac953703627cbe5ca3339ee61e1bc1b91bfbe1c4ae5999b37fe68e2fa65cbbd9889a7536c
+  peerDependencies:
+    expo: "*"
+  peerDependenciesMeta:
+    expo:
+      optional: true
+  checksum: 10c0/9cf719edf168175c7dc68ec2eb02c766a7fb0f17c2e15dafea57ee99822b429ceb8cd8638ca02a3553d2bce1f26074d854e17971a0e3cce5fee204c31b8ee351
   languageName: node
   linkType: hard
 
-"@expo/osascript@npm:^2.0.31":
-  version: 2.0.33
-  resolution: "@expo/osascript@npm:2.0.33"
+"@expo/metro@npm:~54.2.0":
+  version: 54.2.0
+  resolution: "@expo/metro@npm:54.2.0"
   dependencies:
-    "@expo/spawn-async": "npm:^1.5.0"
-    exec-async: "npm:^2.2.0"
-  checksum: 10c0/3075d2206e0e46783fde23eafe427673ddf58b955ca9893d23f2b2134a7bad6e89e50bdb895e6c22d3c8ca15fbcb3a267c6a4eb6372b304755e3dc1fb6fb59d8
+    metro: "npm:0.83.3"
+    metro-babel-transformer: "npm:0.83.3"
+    metro-cache: "npm:0.83.3"
+    metro-cache-key: "npm:0.83.3"
+    metro-config: "npm:0.83.3"
+    metro-core: "npm:0.83.3"
+    metro-file-map: "npm:0.83.3"
+    metro-minify-terser: "npm:0.83.3"
+    metro-resolver: "npm:0.83.3"
+    metro-runtime: "npm:0.83.3"
+    metro-source-map: "npm:0.83.3"
+    metro-symbolicate: "npm:0.83.3"
+    metro-transform-plugins: "npm:0.83.3"
+    metro-transform-worker: "npm:0.83.3"
+  checksum: 10c0/5114ac19021094e19fcbd383778748451bdf78c904cb9be831b04d44880b4ca05071c1e045e5ccf8076418e32a87de2e5163529f1d91fed4bdda2184958e8a61
   languageName: node
   linkType: hard
 
-"@expo/package-manager@npm:^1.5.0":
-  version: 1.6.0
-  resolution: "@expo/package-manager@npm:1.6.0"
+"@expo/osascript@npm:^2.3.8":
+  version: 2.4.2
+  resolution: "@expo/osascript@npm:2.4.2"
   dependencies:
-    "@expo/json-file": "npm:^9.0.0"
     "@expo/spawn-async": "npm:^1.7.2"
-    ansi-regex: "npm:^5.0.0"
+  checksum: 10c0/80adc04b4a6f0695d00a88dcfe3336b395d6431fdccb9e8316c2ec1819ae6524a7063d7c8f4da7f1f3718e57637204c62c2383b7488b0008410efeb7108aa00f
+  languageName: node
+  linkType: hard
+
+"@expo/package-manager@npm:^1.9.10":
+  version: 1.10.3
+  resolution: "@expo/package-manager@npm:1.10.3"
+  dependencies:
+    "@expo/json-file": "npm:^10.0.12"
+    "@expo/spawn-async": "npm:^1.7.2"
     chalk: "npm:^4.0.0"
-    find-up: "npm:^5.0.0"
-    js-yaml: "npm:^3.13.1"
-    micromatch: "npm:^4.0.2"
     npm-package-arg: "npm:^11.0.0"
     ora: "npm:^3.4.0"
     resolve-workspace-root: "npm:^2.0.0"
-    split: "npm:^1.0.1"
-    sudo-prompt: "npm:9.1.1"
-  checksum: 10c0/7a02102b2a266cc8ba83129d83802695b3f40547cebd9ee03420f7121b46be5a0bad94867b2697577e315985eca5b9ea383711ed1900f3d4b2ef126242a48f44
+  checksum: 10c0/b9e6071b9f29f20ef4aae06390c207f22b17eced1fa2d77903100ab7efefe0951a8735dee997ac434550938d939d132a5b1f3f35344bfe9e40344c090d0ebedc
   languageName: node
   linkType: hard
 
-"@expo/plist@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "@expo/plist@npm:0.1.0"
+"@expo/plist@npm:^0.4.8":
+  version: 0.4.8
+  resolution: "@expo/plist@npm:0.4.8"
   dependencies:
-    "@xmldom/xmldom": "npm:~0.7.7"
+    "@xmldom/xmldom": "npm:^0.8.8"
     base64-js: "npm:^1.2.3"
-    xmlbuilder: "npm:^14.0.0"
-  checksum: 10c0/9985b58ee24fe62d65793d01a4b0c97c7136e9672e8a0450db83e2a41910b60e5da224d25553ff145bb3bc97fa41dbd9aa52a5bd6410a84e147e543be3e1b549
-  languageName: node
-  linkType: hard
-
-"@expo/prebuild-config@npm:7.0.6":
-  version: 7.0.6
-  resolution: "@expo/prebuild-config@npm:7.0.6"
-  dependencies:
-    "@expo/config": "npm:~9.0.0-beta.0"
-    "@expo/config-plugins": "npm:~8.0.0-beta.0"
-    "@expo/config-types": "npm:^51.0.0-unreleased"
-    "@expo/image-utils": "npm:^0.5.0"
-    "@expo/json-file": "npm:^8.3.0"
-    "@react-native/normalize-colors": "npm:0.74.84"
-    debug: "npm:^4.3.1"
-    fs-extra: "npm:^9.0.0"
-    resolve-from: "npm:^5.0.0"
-    semver: "npm:^7.6.0"
-    xml2js: "npm:0.6.0"
-  peerDependencies:
-    expo-modules-autolinking: ">=0.8.1"
-  checksum: 10c0/a76cc895f532640767d3063a2e657469c879c6b3cef1dfb982499fe0b3a40ecad333daf7ff98e98adae8f015ee030eb625634fec046b5c01f0f3a09ce53dd57f
+    xmlbuilder: "npm:^15.1.1"
+  checksum: 10c0/5bacdb6f8c5e0e56da07f4504290036e3a5433164a29bea7857e72234137d8eaa04adb319221fcc1ec7f931d40d7f9f6fc9528fa601ed18c308a4cf8179f7783
   languageName: node
   linkType: hard
 
-"@expo/prebuild-config@npm:7.0.8":
-  version: 7.0.8
-  resolution: "@expo/prebuild-config@npm:7.0.8"
+"@expo/prebuild-config@npm:^54.0.8":
+  version: 54.0.8
+  resolution: "@expo/prebuild-config@npm:54.0.8"
   dependencies:
-    "@expo/config": "npm:~9.0.0-beta.0"
-    "@expo/config-plugins": "npm:~8.0.8"
-    "@expo/config-types": "npm:^51.0.0-unreleased"
-    "@expo/image-utils": "npm:^0.5.0"
-    "@expo/json-file": "npm:^8.3.0"
-    "@react-native/normalize-colors": "npm:0.74.85"
+    "@expo/config": "npm:~12.0.13"
+    "@expo/config-plugins": "npm:~54.0.4"
+    "@expo/config-types": "npm:^54.0.10"
+    "@expo/image-utils": "npm:^0.8.8"
+    "@expo/json-file": "npm:^10.0.8"
+    "@react-native/normalize-colors": "npm:0.81.5"
     debug: "npm:^4.3.1"
-    fs-extra: "npm:^9.0.0"
     resolve-from: "npm:^5.0.0"
     semver: "npm:^7.6.0"
     xml2js: "npm:0.6.0"
   peerDependencies:
-    expo-modules-autolinking: ">=0.8.1"
-  checksum: 10c0/aca22d101c0662abb7a7a02a05214a340c8b342569df71eb0b08328d4889a90ee495542c8f955538be2f8bc6b07a85dad63c6e6d13c7156b6b300a77ae0da124
+    expo: "*"
+  checksum: 10c0/70bef3fe360a7035b449e9f137e5046c6fe9137f2220f87bb563af2c34de4593034cd68cea5716ae98930e43a63331659795d1ec2af0f9a905565f2086f7c1a1
   languageName: node
   linkType: hard
 
-"@expo/rudder-sdk-node@npm:1.1.1":
-  version: 1.1.1
-  resolution: "@expo/rudder-sdk-node@npm:1.1.1"
-  dependencies:
-    "@expo/bunyan": "npm:^4.0.0"
-    "@segment/loosely-validate-event": "npm:^2.0.0"
-    fetch-retry: "npm:^4.1.1"
-    md5: "npm:^2.2.1"
-    node-fetch: "npm:^2.6.1"
-    remove-trailing-slash: "npm:^0.1.0"
-    uuid: "npm:^8.3.2"
-  checksum: 10c0/1a13089bc2b8d437c45be64051f6e819966a7b8875bab4587c34c0841374a7b00ade7b76fa09d961a1e31343d5b3423f3a5f65658dcc883fd8b3dbddc53a8f7d
+"@expo/schema-utils@npm:^0.1.8":
+  version: 0.1.8
+  resolution: "@expo/schema-utils@npm:0.1.8"
+  checksum: 10c0/9a600ac858bcd1bd24ccac3e86cbef996c2c58cb20ce61fb1fc753f36dce4a000510e61b803ad5cb221a16caa38b54b243f08ac08e0de69e4aa556798d877f02
   languageName: node
   linkType: hard
 
@@ -5255,16 +4917,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/spawn-async@npm:1.5.0":
-  version: 1.5.0
-  resolution: "@expo/spawn-async@npm:1.5.0"
-  dependencies:
-    cross-spawn: "npm:^6.0.5"
-  checksum: 10c0/122a6d9a678d69084455fd4e56874460d2937c6116c0228d879da9e8112e731f2540c1018911cef62e7d5cca4fa1d596e74f72bac4094f3d575a4d33fbd73833
-  languageName: node
-  linkType: hard
-
-"@expo/spawn-async@npm:^1.5.0, @expo/spawn-async@npm:^1.7.2":
+"@expo/spawn-async@npm:^1.7.2":
   version: 1.7.2
   resolution: "@expo/spawn-async@npm:1.7.2"
   dependencies:
@@ -5273,12 +4926,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/vector-icons@npm:^14.0.3":
-  version: 14.0.4
-  resolution: "@expo/vector-icons@npm:14.0.4"
-  dependencies:
-    prop-types: "npm:^15.8.1"
-  checksum: 10c0/230543be93212f538200b5a6d708a22697c29c00faf054b5c224e5a1fde1feacf96d04ab870d780e1351975503035084fd2187acca2cc2bbd09d8935b2efbfa0
+"@expo/sudo-prompt@npm:^9.3.1":
+  version: 9.3.2
+  resolution: "@expo/sudo-prompt@npm:9.3.2"
+  checksum: 10c0/032652bf1c3f326c9c194f336de5821b9ece9d48b22e3e277950d939fcd728c85459680a9771705904d375f128221cca2e1e91c5d7a85cf3c07fe6f88c361e9d
+  languageName: node
+  linkType: hard
+
+"@expo/vector-icons@npm:^15.0.3":
+  version: 15.1.1
+  resolution: "@expo/vector-icons@npm:15.1.1"
+  peerDependencies:
+    expo-font: ">=14.0.4"
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/fdd50c90484934204b90d345904fa69ca788a5de704d62b3cb580c52aa4cf4bffe1c05c509d043cf2b6842f1bdad6b78585524f3c6ae5f77e36385d83c0aa577
+  languageName: node
+  linkType: hard
+
+"@expo/ws-tunnel@npm:^1.0.1":
+  version: 1.0.6
+  resolution: "@expo/ws-tunnel@npm:1.0.6"
+  checksum: 10c0/050eb7fbd54b636c97c818e7ec5402ce616cae655290386a51600b200947e281cdd12d182251c07fab449e11a732135d61429b738cd03945e94757061e652ecd
   languageName: node
   linkType: hard
 
@@ -5328,13 +4997,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@flatten-js/interval-tree@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "@flatten-js/interval-tree@npm:1.1.2"
-  checksum: 10c0/543a3a460a8a5eeda5be5ffd22a5df2a3176298c0e52b5ea3266312b955ab30f2bdd991f1e9f1df22ca825c4432f283ee9e216e39bad54825de082e42268719d
-  languageName: node
-  linkType: hard
-
 "@floating-ui/core@npm:^1.0.0":
   version: 1.6.1
   resolution: "@floating-ui/core@npm:1.6.1"
@@ -5524,15 +5186,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graphql-typed-document-node/core@npm:^3.1.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: 10c0/94e9d75c1f178bbae8d874f5a9361708a3350c8def7eaeb6920f2c820e82403b7d4f55b3735856d68e145e86c85cbfe2adc444fdc25519cd51f108697e99346c
-  languageName: node
-  linkType: hard
-
 "@hapi/hoek@npm:^9.0.0, @hapi/hoek@npm:^9.3.0":
   version: 9.3.0
   resolution: "@hapi/hoek@npm:9.3.0"
@@ -5674,24 +5327,24 @@ __metadata:
   linkType: hard
 
 "@inquirer/external-editor@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "@inquirer/external-editor@npm:1.0.1"
+  version: 1.0.3
+  resolution: "@inquirer/external-editor@npm:1.0.3"
   dependencies:
-    chardet: "npm:^2.1.0"
-    iconv-lite: "npm:^0.6.3"
+    chardet: "npm:^2.1.1"
+    iconv-lite: "npm:^0.7.0"
   peerDependencies:
     "@types/node": ">=18"
   peerDependenciesMeta:
     "@types/node":
       optional: true
-  checksum: 10c0/bdac4395e0bba7065d39b141d618bfc06369f246c402c511396a5238baf2657f3038ccba8438521a49e5cb602f4302b9d1f46b52b647b27af2c9911720022118
+  checksum: 10c0/82951cb7f3762dd78cca2ea291396841e3f4adfe26004b5badfed1cec4b6a04bb567dff94d0e41b35c61bdd7957317c64c22f58074d14b238d44e44d9e420019
   languageName: node
   linkType: hard
 
 "@inquirer/figures@npm:^1.0.13":
-  version: 1.0.13
-  resolution: "@inquirer/figures@npm:1.0.13"
-  checksum: 10c0/23700a4a0627963af5f51ef4108c338ae77bdd90393164b3fdc79a378586e1f5531259882b7084c690167bf5a36e83033e45aca0321570ba810890abe111014f
+  version: 1.0.15
+  resolution: "@inquirer/figures@npm:1.0.15"
+  checksum: 10c0/6e39a040d260ae234ae220180b7994ff852673e20be925f8aa95e78c7934d732b018cbb4d0ec39e600a410461bcb93dca771e7de23caa10630d255692e440f69
   languageName: node
   linkType: hard
 
@@ -5932,7 +5585,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/create-cache-key-function@npm:^29.6.3":
+"@jest/create-cache-key-function@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/create-cache-key-function@npm:29.7.0"
   dependencies:
@@ -5941,6 +5594,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/diff-sequences@npm:30.0.1":
+  version: 30.0.1
+  resolution: "@jest/diff-sequences@npm:30.0.1"
+  checksum: 10c0/3a840404e6021725ef7f86b11f7b2d13dd02846481264db0e447ee33b7ee992134e402cdc8b8b0ac969d37c6c0183044e382dedee72001cdf50cfb3c8088de74
+  languageName: node
+  linkType: hard
+
 "@jest/environment@npm:^29.5.0, @jest/environment@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/environment@npm:29.7.0"
@@ -5995,6 +5655,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/get-type@npm:30.1.0":
+  version: 30.1.0
+  resolution: "@jest/get-type@npm:30.1.0"
+  checksum: 10c0/3e65fd5015f551c51ec68fca31bbd25b466be0e8ee8075d9610fa1c686ea1e70a942a0effc7b10f4ea9a338c24337e1ad97ff69d3ebacc4681b7e3e80d1b24ac
+  languageName: node
+  linkType: hard
+
 "@jest/globals@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/globals@npm:29.7.0"
@@ -6044,6 +5711,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/schemas@npm:30.0.5":
+  version: 30.0.5
+  resolution: "@jest/schemas@npm:30.0.5"
+  dependencies:
+    "@sinclair/typebox": "npm:^0.34.0"
+  checksum: 10c0/449dcd7ec5c6505e9ac3169d1143937e67044ae3e66a729ce4baf31812dfd30535f2b3b2934393c97cfdf5984ff581120e6b38f62b8560c8b5b7cc07f4175f65
+  languageName: node
+  linkType: hard
+
 "@jest/schemas@npm:^28.1.3":
   version: 28.1.3
   resolution: "@jest/schemas@npm:28.1.3"
@@ -6120,17 +5796,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/types@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/types@npm:24.9.0"
-  dependencies:
-    "@types/istanbul-lib-coverage": "npm:^2.0.0"
-    "@types/istanbul-reports": "npm:^1.1.1"
-    "@types/yargs": "npm:^13.0.0"
-  checksum: 10c0/990b03f5e27de292a7fea6b12cd87256dd281263afe37020cad5dceb0b775945a528bafdbc2e41bf8a29c346f94a7aa5580517c5c65a2b33f245f43d3b9b4694
-  languageName: node
-  linkType: hard
-
 "@jest/types@npm:^26.6.2":
   version: 26.6.2
   resolution: "@jest/types@npm:26.6.2"
@@ -6311,16 +5976,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@k-vyn/coloralgorithm@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "@k-vyn/coloralgorithm@npm:1.0.0"
-  dependencies:
-    bezier-easing: "npm:^2.1.0"
-    chroma-js: "npm:^2.1.0"
-  checksum: 10c0/855677ae5c9b8cb2c8eddbcfe291b1681f010a7ee470b336228516b83bf4d971d34141ddeaf888fbf10e78b32af999755a10cd49153a06fbb0572885b7b962b6
-  languageName: node
-  linkType: hard
-
 "@kwsites/file-exists@npm:^1.1.1":
   version: 1.1.1
   resolution: "@kwsites/file-exists@npm:1.1.1"
@@ -6493,33 +6148,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdx-js/mdx@npm:^1.6.22":
-  version: 1.6.22
-  resolution: "@mdx-js/mdx@npm:1.6.22"
-  dependencies:
-    "@babel/core": "npm:7.12.9"
-    "@babel/plugin-syntax-jsx": "npm:7.12.1"
-    "@babel/plugin-syntax-object-rest-spread": "npm:7.8.3"
-    "@mdx-js/util": "npm:1.6.22"
-    babel-plugin-apply-mdx-type-prop: "npm:1.6.22"
-    babel-plugin-extract-import-names: "npm:1.6.22"
-    camelcase-css: "npm:2.0.1"
-    detab: "npm:2.0.4"
-    hast-util-raw: "npm:6.0.1"
-    lodash.uniq: "npm:4.5.0"
-    mdast-util-to-hast: "npm:10.0.1"
-    remark-footnotes: "npm:2.0.0"
-    remark-mdx: "npm:1.6.22"
-    remark-parse: "npm:8.0.3"
-    remark-squeeze-paragraphs: "npm:4.0.0"
-    style-to-object: "npm:0.3.0"
-    unified: "npm:9.2.0"
-    unist-builder: "npm:2.0.3"
-    unist-util-visit: "npm:2.0.3"
-  checksum: 10c0/7f4c38911fc269159834240d3cc9279839145022a992bd61657530750c7ab5d0f674e8d6319b6e2e426d0e1adc6cc5ab1876e57548208783d8a3d1b8ef73ebca
-  languageName: node
-  linkType: hard
-
 "@mdx-js/mdx@npm:^3.0.0":
   version: 3.1.0
   resolution: "@mdx-js/mdx@npm:3.1.0"
@@ -6564,13 +6192,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdx-js/util@npm:1.6.22":
-  version: 1.6.22
-  resolution: "@mdx-js/util@npm:1.6.22"
-  checksum: 10c0/2ee8da6afea0f42297ea31f52b1d50d228744d2895cce7cc9571b7d5ce97c7c96037c80b6dbcded9caa8099c9a994eda62980099eabe1c000aaa792816c66f10
-  languageName: node
-  linkType: hard
-
 "@mediapipe/tasks-vision@npm:0.10.17":
   version: 0.10.17
   resolution: "@mediapipe/tasks-vision@npm:0.10.17"
@@ -6655,16 +6276,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mrmlnc/readdir-enhanced@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "@mrmlnc/readdir-enhanced@npm:2.2.1"
-  dependencies:
-    call-me-maybe: "npm:^1.0.1"
-    glob-to-regexp: "npm:^0.3.0"
-  checksum: 10c0/01840f3c85e9a7cd0ed5e038cc00e7518809b9edda950598e22b1c9804832e39a75707aaa6eb0b023e72182a85e00041c7a01483e425b16257bd3d5e4c788d86
-  languageName: node
-  linkType: hard
-
 "@napi-rs/wasm-runtime@npm:0.2.4":
   version: 0.2.4
   resolution: "@napi-rs/wasm-runtime@npm:0.2.4"
@@ -6700,13 +6311,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nodelib/fs.stat@npm:^1.1.2":
-  version: 1.1.3
-  resolution: "@nodelib/fs.stat@npm:1.1.3"
-  checksum: 10c0/dc28ccae626e817a61b1544285b0f86c4e94a4a23db777c2949f78866ec57b1e1ccd5554bc3ed8e965df0646b1019e184315d32e98428c15eef7409974b17598
-  languageName: node
-  linkType: hard
-
 "@nodelib/fs.walk@npm:^1.2.3":
   version: 1.2.8
   resolution: "@nodelib/fs.walk@npm:1.2.8"
@@ -6734,15 +6338,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@npmcli/fs@npm:^3.1.0":
-  version: 3.1.1
-  resolution: "@npmcli/fs@npm:3.1.1"
-  dependencies:
-    semver: "npm:^7.3.5"
-  checksum: 10c0/c37a5b4842bfdece3d14dfdb054f73fe15ed2d3da61b34ff76629fb5b1731647c49166fd2a8bf8b56fcfa51200382385ea8909a3cbecdad612310c114d3f6c99
-  languageName: node
-  linkType: hard
-
 "@npmcli/move-file@npm:^1.0.1":
   version: 1.1.2
   resolution: "@npmcli/move-file@npm:1.1.2"
@@ -7217,16 +6812,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@percy/storybook@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "@percy/storybook@npm:9.0.0"
+"@percy/storybook@npm:^9.1.0":
+  version: 9.1.0
+  resolution: "@percy/storybook@npm:9.1.0"
   dependencies:
     "@percy/cli-command": "npm:^1.30.7"
     cross-spawn: "npm:^7.0.3"
     qs: "npm:^6.11.0"
   bin:
     percy-storybook: bin/percy-storybook.cjs
-  checksum: 10c0/67f3909247d874baa6bbba3424b1739c814a268b945642449d2e08944e7655559c2904d05e620dc83f999386ac54927b5ecc253245b420cab1ac3f8b2fbeebef
+  checksum: 10c0/f290c6a5d46699d1302fef1f5e5efbab3da824d50cf32ea495854d24bcc0caed07e8590087de21fa6603f98019b11e85d67bdce9757592a9a718983248359bc1
   languageName: node
   linkType: hard
 
@@ -7277,45 +6872,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.3":
-  version: 0.5.7
-  resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.7"
-  dependencies:
-    ansi-html-community: "npm:^0.0.8"
-    common-path-prefix: "npm:^3.0.0"
-    core-js-pure: "npm:^3.8.1"
-    error-stack-parser: "npm:^2.0.6"
-    find-up: "npm:^5.0.0"
-    html-entities: "npm:^2.1.0"
-    loader-utils: "npm:^2.0.0"
-    schema-utils: "npm:^3.0.0"
-    source-map: "npm:^0.7.3"
-  peerDependencies:
-    "@types/webpack": 4.x || 5.x
-    react-refresh: ">=0.10.0 <1.0.0"
-    sockjs-client: ^1.4.0
-    type-fest: ">=0.17.0 <3.0.0"
-    webpack: ">=4.43.0 <6.0.0"
-    webpack-dev-server: 3.x || 4.x
-    webpack-hot-middleware: 2.x
-    webpack-plugin-serve: 0.x || 1.x
-  peerDependenciesMeta:
-    "@types/webpack":
-      optional: true
-    sockjs-client:
-      optional: true
-    type-fest:
-      optional: true
-    webpack-dev-server:
-      optional: true
-    webpack-hot-middleware:
-      optional: true
-    webpack-plugin-serve:
-      optional: true
-  checksum: 10c0/11bc7e2223eda628ee90164b2dbdc8e3c7a83c4d43871c3ed217e3cae6f70df76e7e2270da9377c77ca7ef14e3886654e8497cce3792011f34dd07730fc59706
-  languageName: node
-  linkType: hard
-
 "@pnpm/config.env-replace@npm:^1.1.0":
   version: 1.1.0
   resolution: "@pnpm/config.env-replace@npm:1.1.0"
@@ -7358,9 +6914,9 @@ __metadata:
   linkType: hard
 
 "@popperjs/core@npm:^2.9.0":
-  version: 2.11.2
-  resolution: "@popperjs/core@npm:2.11.2"
-  checksum: 10c0/b06f65fcef9dbfe7487fd53e38f12684267e91c8bc667a6c9621c207f42ee97d48059039ee8dae0327df509234b6f09bf5b940b34b71ee453d307f53d84e99b2
+  version: 2.11.8
+  resolution: "@popperjs/core@npm:2.11.8"
+  checksum: 10c0/4681e682abc006d25eb380d0cf3efc7557043f53b6aea7a5057d0d1e7df849a00e281cd8ea79c902a35a414d7919621fc2ba293ecec05f413598e0b23d5a1e63
   languageName: node
   linkType: hard
 
@@ -7451,187 +7007,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-community/cli-clean@npm:13.6.9":
-  version: 13.6.9
-  resolution: "@react-native-community/cli-clean@npm:13.6.9"
-  dependencies:
-    "@react-native-community/cli-tools": "npm:13.6.9"
-    chalk: "npm:^4.1.2"
-    execa: "npm:^5.0.0"
-    fast-glob: "npm:^3.3.2"
-  checksum: 10c0/b40e4f0479c7ee419f1ce33f1d1278c2cf4d74fd9402852479a052f91ce56ee2e0b849e8d5cafea13f9fe246202823d5b2f8e1773eff610fcd84c1e190871624
-  languageName: node
-  linkType: hard
-
-"@react-native-community/cli-config@npm:13.6.9":
-  version: 13.6.9
-  resolution: "@react-native-community/cli-config@npm:13.6.9"
-  dependencies:
-    "@react-native-community/cli-tools": "npm:13.6.9"
-    chalk: "npm:^4.1.2"
-    cosmiconfig: "npm:^5.1.0"
-    deepmerge: "npm:^4.3.0"
-    fast-glob: "npm:^3.3.2"
-    joi: "npm:^17.2.1"
-  checksum: 10c0/f5635c1a02964d6ad36231acd1e0eda5bd0a47306939721bdc1f0c2258d989c3bcee1b5b77c5addb036d7846ec5c87fec72059e77f6b0d68815f079ef5d7d960
-  languageName: node
-  linkType: hard
-
-"@react-native-community/cli-debugger-ui@npm:13.6.9":
-  version: 13.6.9
-  resolution: "@react-native-community/cli-debugger-ui@npm:13.6.9"
-  dependencies:
-    serve-static: "npm:^1.13.1"
-  checksum: 10c0/9673c6ab96c84319e8b4b9df7b608fbf4bac1611e60b6363778aa0cec3ac2135d04212cc114122aee6007b3954054c5df27cc1fa59fe5edb2be2f0a4b9442afc
-  languageName: node
-  linkType: hard
-
-"@react-native-community/cli-doctor@npm:13.6.9":
-  version: 13.6.9
-  resolution: "@react-native-community/cli-doctor@npm:13.6.9"
-  dependencies:
-    "@react-native-community/cli-config": "npm:13.6.9"
-    "@react-native-community/cli-platform-android": "npm:13.6.9"
-    "@react-native-community/cli-platform-apple": "npm:13.6.9"
-    "@react-native-community/cli-platform-ios": "npm:13.6.9"
-    "@react-native-community/cli-tools": "npm:13.6.9"
-    chalk: "npm:^4.1.2"
-    command-exists: "npm:^1.2.8"
-    deepmerge: "npm:^4.3.0"
-    envinfo: "npm:^7.10.0"
-    execa: "npm:^5.0.0"
-    hermes-profile-transformer: "npm:^0.0.6"
-    node-stream-zip: "npm:^1.9.1"
-    ora: "npm:^5.4.1"
-    semver: "npm:^7.5.2"
-    strip-ansi: "npm:^5.2.0"
-    wcwidth: "npm:^1.0.1"
-    yaml: "npm:^2.2.1"
-  checksum: 10c0/d39e5e31e58e849fa70c2430c83af6f1ec4468bd0995ebf944b2d9cdda008b82b347f15deef1aa026dbe4502691aabf9698f022c0739b980a73a07c3f6c090f0
-  languageName: node
-  linkType: hard
-
-"@react-native-community/cli-hermes@npm:13.6.9":
-  version: 13.6.9
-  resolution: "@react-native-community/cli-hermes@npm:13.6.9"
-  dependencies:
-    "@react-native-community/cli-platform-android": "npm:13.6.9"
-    "@react-native-community/cli-tools": "npm:13.6.9"
-    chalk: "npm:^4.1.2"
-    hermes-profile-transformer: "npm:^0.0.6"
-  checksum: 10c0/8e182570a65a1e57bde9dcaafe2d19741feac83a5e64f9c1828d0b24adcc78ea837720a12ad98769aab972647955f3b46c28b3ca2f465390c1ed44186d2d1b8e
-  languageName: node
-  linkType: hard
-
-"@react-native-community/cli-platform-android@npm:13.6.9":
-  version: 13.6.9
-  resolution: "@react-native-community/cli-platform-android@npm:13.6.9"
-  dependencies:
-    "@react-native-community/cli-tools": "npm:13.6.9"
-    chalk: "npm:^4.1.2"
-    execa: "npm:^5.0.0"
-    fast-glob: "npm:^3.3.2"
-    fast-xml-parser: "npm:^4.2.4"
-    logkitty: "npm:^0.7.1"
-  checksum: 10c0/6083fe862e2166982b844d7b50d121ddf6e2a12c221b5e4ad950db3da4c2c6f92e030447eb301e254b7a43e593a6f4436dd34cad136d9cd8182517032264c409
-  languageName: node
-  linkType: hard
-
-"@react-native-community/cli-platform-apple@npm:13.6.9":
-  version: 13.6.9
-  resolution: "@react-native-community/cli-platform-apple@npm:13.6.9"
-  dependencies:
-    "@react-native-community/cli-tools": "npm:13.6.9"
-    chalk: "npm:^4.1.2"
-    execa: "npm:^5.0.0"
-    fast-glob: "npm:^3.3.2"
-    fast-xml-parser: "npm:^4.0.12"
-    ora: "npm:^5.4.1"
-  checksum: 10c0/3a9c900ebbb141083f5d7ebc2494a580010a9df73d2bd589f7707d23e6b3feacdf259c98c8cc774851e3fea21aab6366e255bf489c710dd5712b33c984f58812
-  languageName: node
-  linkType: hard
-
-"@react-native-community/cli-platform-ios@npm:13.6.9":
-  version: 13.6.9
-  resolution: "@react-native-community/cli-platform-ios@npm:13.6.9"
-  dependencies:
-    "@react-native-community/cli-platform-apple": "npm:13.6.9"
-  checksum: 10c0/e4d9b47a3ca945ab58c5087cbe6740f22b1f3ccf4e5d48250bfbb7d57d20026e8c1d5216618047f0ddf82a77b387910b6f2f7c73d5d4d44d0702096e380b4f96
-  languageName: node
-  linkType: hard
-
-"@react-native-community/cli-server-api@npm:13.6.9":
-  version: 13.6.9
-  resolution: "@react-native-community/cli-server-api@npm:13.6.9"
-  dependencies:
-    "@react-native-community/cli-debugger-ui": "npm:13.6.9"
-    "@react-native-community/cli-tools": "npm:13.6.9"
-    compression: "npm:^1.7.1"
-    connect: "npm:^3.6.5"
-    errorhandler: "npm:^1.5.1"
-    nocache: "npm:^3.0.1"
-    pretty-format: "npm:^26.6.2"
-    serve-static: "npm:^1.13.1"
-    ws: "npm:^6.2.2"
-  checksum: 10c0/4061c25e66f5eaf5b397ae776feb4c5fcd1ee0ed4748e0694ba387870e67519145f255b69c2ea0583e8704580f3c7ba12d9e0181f80cc6f5e739c9c4f4f4e407
-  languageName: node
-  linkType: hard
-
-"@react-native-community/cli-tools@npm:13.6.9":
-  version: 13.6.9
-  resolution: "@react-native-community/cli-tools@npm:13.6.9"
-  dependencies:
-    appdirsjs: "npm:^1.2.4"
-    chalk: "npm:^4.1.2"
-    execa: "npm:^5.0.0"
-    find-up: "npm:^5.0.0"
-    mime: "npm:^2.4.1"
-    node-fetch: "npm:^2.6.0"
-    open: "npm:^6.2.0"
-    ora: "npm:^5.4.1"
-    semver: "npm:^7.5.2"
-    shell-quote: "npm:^1.7.3"
-    sudo-prompt: "npm:^9.0.0"
-  checksum: 10c0/a9b85cae49202aae81db33d3b62d06574c504bce634fbf0939dfa6ad6cae8f1b2728d4873fb5115023757a500280237992317c245e1b54dd96ca8c63c0f2582e
-  languageName: node
-  linkType: hard
-
-"@react-native-community/cli-types@npm:13.6.9":
-  version: 13.6.9
-  resolution: "@react-native-community/cli-types@npm:13.6.9"
-  dependencies:
-    joi: "npm:^17.2.1"
-  checksum: 10c0/07be9711034265e6d602c659319ac3663adcc95b4633fd235ea6ce697681aaa3980c0bd13aa2e82e5f1309e21010619fef1e580e672f4649a7d4a91146c9a666
-  languageName: node
-  linkType: hard
-
-"@react-native-community/cli@npm:13.6.9":
-  version: 13.6.9
-  resolution: "@react-native-community/cli@npm:13.6.9"
-  dependencies:
-    "@react-native-community/cli-clean": "npm:13.6.9"
-    "@react-native-community/cli-config": "npm:13.6.9"
-    "@react-native-community/cli-debugger-ui": "npm:13.6.9"
-    "@react-native-community/cli-doctor": "npm:13.6.9"
-    "@react-native-community/cli-hermes": "npm:13.6.9"
-    "@react-native-community/cli-server-api": "npm:13.6.9"
-    "@react-native-community/cli-tools": "npm:13.6.9"
-    "@react-native-community/cli-types": "npm:13.6.9"
-    chalk: "npm:^4.1.2"
-    commander: "npm:^9.4.1"
-    deepmerge: "npm:^4.3.0"
-    execa: "npm:^5.0.0"
-    find-up: "npm:^4.1.0"
-    fs-extra: "npm:^8.1.0"
-    graceful-fs: "npm:^4.1.3"
-    prompts: "npm:^2.4.2"
-    semver: "npm:^7.5.2"
-  bin:
-    rnc-cli: build/bin.js
-  checksum: 10c0/4f2404301e7d12134dfa3f540d89f6a7b0ee9dd2125fe67d8c91a75cb6aa53367fc4db834c840b484cf1781cf5f4370b26ff9289beeba0e143b5febfadfd305d
-  languageName: node
-  linkType: hard
-
 "@react-native-community/netinfo@npm:^7.1.7":
   version: 7.1.12
   resolution: "@react-native-community/netinfo@npm:7.1.12"
@@ -7641,254 +7016,183 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/assets-registry@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/assets-registry@npm:0.74.87"
-  checksum: 10c0/3a074d492ecc87916ad8a857969e23242f506d331776fc4128aa5be52feb3f035750ddcca6d57adce912fa774538366ed7e3dab9a39416d241f220f5f48d29c8
+"@react-native/assets-registry@npm:0.81.5":
+  version: 0.81.5
+  resolution: "@react-native/assets-registry@npm:0.81.5"
+  checksum: 10c0/88edc316ccccc9e86f03cb591696b02cac541808d89a7480450fd529b1a7363373411018720b492352805f867003f6a71ac1e6363d7b797d3502ea89bcbb2a47
   languageName: node
   linkType: hard
 
-"@react-native/babel-plugin-codegen@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/babel-plugin-codegen@npm:0.74.87"
+"@react-native/babel-plugin-codegen@npm:0.81.5":
+  version: 0.81.5
+  resolution: "@react-native/babel-plugin-codegen@npm:0.81.5"
   dependencies:
-    "@react-native/codegen": "npm:0.74.87"
-  checksum: 10c0/9c299db211c607d6ddfd96577fdda5990909ee833590650f250a6fa01b07c414d240b2637e714a852dab5fba28a4056b42e5e023661eb54743cc4269bbe5e693
+    "@babel/traverse": "npm:^7.25.3"
+    "@react-native/codegen": "npm:0.81.5"
+  checksum: 10c0/54971e723480bf5e169e1075a9525274e024c94c4286953c699ddb5f82e6229895147f19723b9f1319b55e0eaaa10389a19f349b6c0ac8451d72941a7d9f448b
   languageName: node
   linkType: hard
 
-"@react-native/babel-preset@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/babel-preset@npm:0.74.87"
+"@react-native/babel-preset@npm:0.81.5":
+  version: 0.81.5
+  resolution: "@react-native/babel-preset@npm:0.81.5"
   dependencies:
-    "@babel/core": "npm:^7.20.0"
-    "@babel/plugin-proposal-async-generator-functions": "npm:^7.0.0"
-    "@babel/plugin-proposal-class-properties": "npm:^7.18.0"
-    "@babel/plugin-proposal-export-default-from": "npm:^7.0.0"
-    "@babel/plugin-proposal-logical-assignment-operators": "npm:^7.18.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator": "npm:^7.18.0"
-    "@babel/plugin-proposal-numeric-separator": "npm:^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread": "npm:^7.20.0"
-    "@babel/plugin-proposal-optional-catch-binding": "npm:^7.0.0"
-    "@babel/plugin-proposal-optional-chaining": "npm:^7.20.0"
-    "@babel/plugin-syntax-dynamic-import": "npm:^7.8.0"
-    "@babel/plugin-syntax-export-default-from": "npm:^7.0.0"
-    "@babel/plugin-syntax-flow": "npm:^7.18.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.0.0"
-    "@babel/plugin-syntax-optional-chaining": "npm:^7.0.0"
-    "@babel/plugin-transform-arrow-functions": "npm:^7.0.0"
-    "@babel/plugin-transform-async-to-generator": "npm:^7.20.0"
-    "@babel/plugin-transform-block-scoping": "npm:^7.0.0"
-    "@babel/plugin-transform-classes": "npm:^7.0.0"
-    "@babel/plugin-transform-computed-properties": "npm:^7.0.0"
-    "@babel/plugin-transform-destructuring": "npm:^7.20.0"
-    "@babel/plugin-transform-flow-strip-types": "npm:^7.20.0"
-    "@babel/plugin-transform-function-name": "npm:^7.0.0"
-    "@babel/plugin-transform-literals": "npm:^7.0.0"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.0.0"
-    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.0.0"
-    "@babel/plugin-transform-parameters": "npm:^7.0.0"
-    "@babel/plugin-transform-private-methods": "npm:^7.22.5"
-    "@babel/plugin-transform-private-property-in-object": "npm:^7.22.11"
-    "@babel/plugin-transform-react-display-name": "npm:^7.0.0"
-    "@babel/plugin-transform-react-jsx": "npm:^7.0.0"
-    "@babel/plugin-transform-react-jsx-self": "npm:^7.0.0"
-    "@babel/plugin-transform-react-jsx-source": "npm:^7.0.0"
-    "@babel/plugin-transform-runtime": "npm:^7.0.0"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.0.0"
-    "@babel/plugin-transform-spread": "npm:^7.0.0"
-    "@babel/plugin-transform-sticky-regex": "npm:^7.0.0"
-    "@babel/plugin-transform-typescript": "npm:^7.5.0"
-    "@babel/plugin-transform-unicode-regex": "npm:^7.0.0"
-    "@babel/template": "npm:^7.0.0"
-    "@react-native/babel-plugin-codegen": "npm:0.74.87"
+    "@babel/core": "npm:^7.25.2"
+    "@babel/plugin-proposal-export-default-from": "npm:^7.24.7"
+    "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
+    "@babel/plugin-syntax-export-default-from": "npm:^7.24.7"
+    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.24.7"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.25.4"
+    "@babel/plugin-transform-async-to-generator": "npm:^7.24.7"
+    "@babel/plugin-transform-block-scoping": "npm:^7.25.0"
+    "@babel/plugin-transform-class-properties": "npm:^7.25.4"
+    "@babel/plugin-transform-classes": "npm:^7.25.4"
+    "@babel/plugin-transform-computed-properties": "npm:^7.24.7"
+    "@babel/plugin-transform-destructuring": "npm:^7.24.8"
+    "@babel/plugin-transform-flow-strip-types": "npm:^7.25.2"
+    "@babel/plugin-transform-for-of": "npm:^7.24.7"
+    "@babel/plugin-transform-function-name": "npm:^7.25.1"
+    "@babel/plugin-transform-literals": "npm:^7.25.2"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.24.7"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.8"
+    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.24.7"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.24.7"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.24.7"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.24.7"
+    "@babel/plugin-transform-optional-catch-binding": "npm:^7.24.7"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.24.8"
+    "@babel/plugin-transform-parameters": "npm:^7.24.7"
+    "@babel/plugin-transform-private-methods": "npm:^7.24.7"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.24.7"
+    "@babel/plugin-transform-react-display-name": "npm:^7.24.7"
+    "@babel/plugin-transform-react-jsx": "npm:^7.25.2"
+    "@babel/plugin-transform-react-jsx-self": "npm:^7.24.7"
+    "@babel/plugin-transform-react-jsx-source": "npm:^7.24.7"
+    "@babel/plugin-transform-regenerator": "npm:^7.24.7"
+    "@babel/plugin-transform-runtime": "npm:^7.24.7"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.24.7"
+    "@babel/plugin-transform-spread": "npm:^7.24.7"
+    "@babel/plugin-transform-sticky-regex": "npm:^7.24.7"
+    "@babel/plugin-transform-typescript": "npm:^7.25.2"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.24.7"
+    "@babel/template": "npm:^7.25.0"
+    "@react-native/babel-plugin-codegen": "npm:0.81.5"
+    babel-plugin-syntax-hermes-parser: "npm:0.29.1"
     babel-plugin-transform-flow-enums: "npm:^0.0.2"
     react-refresh: "npm:^0.14.0"
   peerDependencies:
     "@babel/core": "*"
-  checksum: 10c0/b8db68da99891eeea3991e74bde06fa07e5668106c6e0dbee03458a58005111004e426fedb750b888a19310037335caace14ef324245d3a7469808b9f7e822f3
+  checksum: 10c0/f3146982c329f7fa7554195e6f8689275cb737856da192a934e7b509f0a5fe07c77c24993801d44914c5c6405799e9b500d227bd1deddf19947c28af6e14ad91
   languageName: node
   linkType: hard
 
-"@react-native/codegen@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/codegen@npm:0.74.87"
+"@react-native/codegen@npm:0.81.5":
+  version: 0.81.5
+  resolution: "@react-native/codegen@npm:0.81.5"
   dependencies:
-    "@babel/parser": "npm:^7.20.0"
+    "@babel/core": "npm:^7.25.2"
+    "@babel/parser": "npm:^7.25.3"
     glob: "npm:^7.1.1"
-    hermes-parser: "npm:0.19.1"
+    hermes-parser: "npm:0.29.1"
     invariant: "npm:^2.2.4"
-    jscodeshift: "npm:^0.14.0"
-    mkdirp: "npm:^0.5.1"
     nullthrows: "npm:^1.1.1"
+    yargs: "npm:^17.6.2"
   peerDependencies:
-    "@babel/preset-env": ^7.1.6
-  checksum: 10c0/753f55ab78c05e9eb2cae4e8f01e48f173de2dc75b56edd9003dad31e2bde3eaab592dfce95fa43cb2ab0468d9130d107ce854c1ed2eceb23b94122d897ed4ce
+    "@babel/core": "*"
+  checksum: 10c0/047a29fadb51f6c58ff6fbad8be3ffc395c1492a869befacd74e11df5a9fa164b15b135824404e34af409c88f722874f9311966ebe4de3dcf10846abfcce0574
   languageName: node
   linkType: hard
 
-"@react-native/community-cli-plugin@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/community-cli-plugin@npm:0.74.87"
+"@react-native/community-cli-plugin@npm:0.81.5":
+  version: 0.81.5
+  resolution: "@react-native/community-cli-plugin@npm:0.81.5"
   dependencies:
-    "@react-native-community/cli-server-api": "npm:13.6.9"
-    "@react-native-community/cli-tools": "npm:13.6.9"
-    "@react-native/dev-middleware": "npm:0.74.87"
-    "@react-native/metro-babel-transformer": "npm:0.74.87"
-    chalk: "npm:^4.0.0"
-    execa: "npm:^5.1.1"
-    metro: "npm:^0.80.3"
-    metro-config: "npm:^0.80.3"
-    metro-core: "npm:^0.80.3"
-    node-fetch: "npm:^2.2.0"
-    querystring: "npm:^0.2.1"
-    readline: "npm:^1.3.0"
-  checksum: 10c0/7db54907075a48707d55028557258120d4600b4131c7163acd147177cced638184371756e47101555b9636f3803c0f9df611a5c0383492a13d17e45addb07236
-  languageName: node
-  linkType: hard
-
-"@react-native/debugger-frontend@npm:0.74.85":
-  version: 0.74.85
-  resolution: "@react-native/debugger-frontend@npm:0.74.85"
-  checksum: 10c0/66d0bc2c969aead72259ccdc3b865c55777ff66354004c4fbd52e5db23a41e792ab861c45dc052bf031a4465edecfacd8f73ffbb89f2e7986bd78dac5e30a49e
-  languageName: node
-  linkType: hard
-
-"@react-native/debugger-frontend@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/debugger-frontend@npm:0.74.87"
-  checksum: 10c0/9b2bf0a2d1598d96af56d57226b5f6448c7ff63a7395226bd4c68f2319f1b4591468bb71e5aeeb2a2508d639d7752bbd036aa3f86a7a71436f9acbe6f1431b36
+    "@react-native/dev-middleware": "npm:0.81.5"
+    debug: "npm:^4.4.0"
+    invariant: "npm:^2.2.4"
+    metro: "npm:^0.83.1"
+    metro-config: "npm:^0.83.1"
+    metro-core: "npm:^0.83.1"
+    semver: "npm:^7.1.3"
+  peerDependencies:
+    "@react-native-community/cli": "*"
+    "@react-native/metro-config": "*"
+  peerDependenciesMeta:
+    "@react-native-community/cli":
+      optional: true
+    "@react-native/metro-config":
+      optional: true
+  checksum: 10c0/754afa13dbaae2892864439878068a5858c88474c5fc041d0d085ac7b2cd1a4b04993d07c6e274790855ed06bba8b08bf0081fb76ab2b08d1aa8d665e58ddaa3
   languageName: node
   linkType: hard
 
-"@react-native/dev-middleware@npm:0.74.85":
-  version: 0.74.85
-  resolution: "@react-native/dev-middleware@npm:0.74.85"
-  dependencies:
-    "@isaacs/ttlcache": "npm:^1.4.1"
-    "@react-native/debugger-frontend": "npm:0.74.85"
-    "@rnx-kit/chromium-edge-launcher": "npm:^1.0.0"
-    chrome-launcher: "npm:^0.15.2"
-    connect: "npm:^3.6.5"
-    debug: "npm:^2.2.0"
-    node-fetch: "npm:^2.2.0"
-    nullthrows: "npm:^1.1.1"
-    open: "npm:^7.0.3"
-    selfsigned: "npm:^2.4.1"
-    serve-static: "npm:^1.13.1"
-    temp-dir: "npm:^2.0.0"
-    ws: "npm:^6.2.2"
-  checksum: 10c0/e46be4530872eb859e94ff25793a5d4c7264a40e3dfae99b5f751bcb2704201acedaa59b06ed68ef549eaf0f2f4b28e0f21f1b25bc03566f4b5719d0d53f6f73
+"@react-native/debugger-frontend@npm:0.81.5":
+  version: 0.81.5
+  resolution: "@react-native/debugger-frontend@npm:0.81.5"
+  checksum: 10c0/6c8769526373314956ec53584b49d3ac94aace4232ba77cfdd96edaf346be8a648e2d877c719e7edaa4c1dcd6a09376012f35b25ca6498679b115815cc6940c3
   languageName: node
   linkType: hard
 
-"@react-native/dev-middleware@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/dev-middleware@npm:0.74.87"
+"@react-native/dev-middleware@npm:0.81.5":
+  version: 0.81.5
+  resolution: "@react-native/dev-middleware@npm:0.81.5"
   dependencies:
     "@isaacs/ttlcache": "npm:^1.4.1"
-    "@react-native/debugger-frontend": "npm:0.74.87"
-    "@rnx-kit/chromium-edge-launcher": "npm:^1.0.0"
+    "@react-native/debugger-frontend": "npm:0.81.5"
     chrome-launcher: "npm:^0.15.2"
+    chromium-edge-launcher: "npm:^0.2.0"
     connect: "npm:^3.6.5"
-    debug: "npm:^2.2.0"
-    node-fetch: "npm:^2.2.0"
+    debug: "npm:^4.4.0"
+    invariant: "npm:^2.2.4"
     nullthrows: "npm:^1.1.1"
     open: "npm:^7.0.3"
-    selfsigned: "npm:^2.4.1"
-    serve-static: "npm:^1.13.1"
-    temp-dir: "npm:^2.0.0"
-    ws: "npm:^6.2.2"
-  checksum: 10c0/d641799b9e0a8918e6e3b7500d376f11d3a33d736d03ed90b3cf55c6df45788bcf8aae047ca00b1e5f269fdf44d4884676bc0f397e9be3bbcec3a53a2db4d15f
-  languageName: node
-  linkType: hard
-
-"@react-native/gradle-plugin@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/gradle-plugin@npm:0.74.87"
-  checksum: 10c0/99865aab4e7aeafa053b3b2cd4871ebddebd771ae747c0104e740bb592083162a53dba274199e87b5bed4a5b8fe2d99c0eeda4eeaa228304192a38a6406479b3
-  languageName: node
-  linkType: hard
-
-"@react-native/js-polyfills@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/js-polyfills@npm:0.74.87"
-  checksum: 10c0/8cfc367fd31798f13a4a6a379d91c21149632bb6d200873e26a4448cd37a18ee8c6d9ea08a71ba3e7c5f5aedbc0b41454e4d60e920e00727fef52f0820b9642d
-  languageName: node
-  linkType: hard
-
-"@react-native/js-polyfills@npm:^0.72.1":
-  version: 0.72.1
-  resolution: "@react-native/js-polyfills@npm:0.72.1"
-  checksum: 10c0/e4a77d6c8b35da0fede25fcdb97cbd6f332554d06542d48709dbbe9029fde43b3a3063f60da609b94640c19e85eddf1ef554f848eab72e64008a74c03a238279
-  languageName: node
-  linkType: hard
-
-"@react-native/metro-babel-transformer@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/metro-babel-transformer@npm:0.74.87"
-  dependencies:
-    "@babel/core": "npm:^7.20.0"
-    "@react-native/babel-preset": "npm:0.74.87"
-    hermes-parser: "npm:0.19.1"
-    nullthrows: "npm:^1.1.1"
-  peerDependencies:
-    "@babel/core": "*"
-  checksum: 10c0/d5f62d268e6e18db0fb290017f8f168dcf9b7399df3f3772655b69d8e14752f786ef0bffc5ea079b4abdc16f9913b2163b966e0aa2022f1c5bb506055eda47b5
-  languageName: node
-  linkType: hard
-
-"@react-native/metro-config@npm:^0.72.9":
-  version: 0.72.9
-  resolution: "@react-native/metro-config@npm:0.72.9"
-  dependencies:
-    "@react-native/js-polyfills": "npm:^0.72.1"
-    metro-config: "npm:0.76.7"
-    metro-react-native-babel-transformer: "npm:0.76.7"
-    metro-runtime: "npm:0.76.7"
-  checksum: 10c0/ad332462cb01eb10f0e797b088116c3436ee62a2a7fb69c4dfc3316c6dcb29fac52382ee26be66ea2888e661832dc1aef22413643acd78c042d441ec635c402f
+    serve-static: "npm:^1.16.2"
+    ws: "npm:^6.2.3"
+  checksum: 10c0/d057b320940626d41db7f02ac249b9fdba2569ea3167864986bfe61028c4f890cefe24a5b8d4cd1b33c8c33ab547aa361d13a6cdaf991475302eb83a4ab3372a
   languageName: node
   linkType: hard
 
-"@react-native/normalize-colors@npm:0.74.84":
-  version: 0.74.84
-  resolution: "@react-native/normalize-colors@npm:0.74.84"
-  checksum: 10c0/9046b848db5ba0001cb4817faebba18366c5fc7c86a72836685867868e0019d40477d0dd6a7cdddf305a2156b5bda0b569116d2446d873e6e0d79c3c85a6517e
+"@react-native/gradle-plugin@npm:0.81.5":
+  version: 0.81.5
+  resolution: "@react-native/gradle-plugin@npm:0.81.5"
+  checksum: 10c0/0acb06543b4a42daa49c437b608170d25efd3214cf01706b4138a7fb52604f590a680c7d4a4574b43983af80406f781bd3ef692208b4f237dc9902aa14037f6b
   languageName: node
   linkType: hard
 
-"@react-native/normalize-colors@npm:0.74.85":
-  version: 0.74.85
-  resolution: "@react-native/normalize-colors@npm:0.74.85"
-  checksum: 10c0/44fbb2e78ed4656b78b32aa41b79e2e8b6264e1577b892a6f81205a7991490aad62ae96b3900d6f6e1609ffd5bab7ed1760aa814f119a90c05d13ab80942fda7
+"@react-native/js-polyfills@npm:0.81.5":
+  version: 0.81.5
+  resolution: "@react-native/js-polyfills@npm:0.81.5"
+  checksum: 10c0/337d0f263a94f9f38a39efba5081481fe7ff0b6499f77708d97aa3d18cad527adec7f94a21f9af62ec4d78448a39f545223b52cca8c07c10a52b0468b456dd46
   languageName: node
   linkType: hard
 
-"@react-native/normalize-colors@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/normalize-colors@npm:0.74.87"
-  checksum: 10c0/7ab19e1d8df02d2c724d527993dc4f62f977b7836fa9648134e84d387d0af3a7697a688b19129223f23b972c37dd06ce753d914b5aa1667d25f0e8852eb7c335
+"@react-native/normalize-colors@npm:0.81.5":
+  version: 0.81.5
+  resolution: "@react-native/normalize-colors@npm:0.81.5"
+  checksum: 10c0/827b120eedd0bf90ab3113e5a74900d15f73bfd826451d493f8047f78824894c516ccaf85bb02fcbe5f11b9f8852c1266593f1999e46a5752ff34b0a2db89a97
   languageName: node
   linkType: hard
 
-"@react-native/virtualized-lists@npm:0.74.87":
-  version: 0.74.87
-  resolution: "@react-native/virtualized-lists@npm:0.74.87"
+"@react-native/virtualized-lists@npm:0.81.5":
+  version: 0.81.5
+  resolution: "@react-native/virtualized-lists@npm:0.81.5"
   dependencies:
     invariant: "npm:^2.2.4"
     nullthrows: "npm:^1.1.1"
   peerDependencies:
-    "@types/react": ^18.2.6
+    "@types/react": ^19.1.0
     react: "*"
     react-native: "*"
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/0082a658efb2369f2c2bf052a8e842fd22b6895e1f25dfaae8220819aee1df4cd466c0b521bdd0cc5f6f1e505c6c1a56f97b998521e49898badf7e06b5da1907
+  checksum: 10c0/2f38e73d850e4c7f8bf9e6598ebdf97c524d6ddfa720044798e827aaa613ff6dc47dbdb8e440ce370f92f7ff932f0ac3204328287e79d7e3b8ac8db5651d0b4d
   languageName: node
   linkType: hard
 
-"@react-navigation/core@npm:^6.4.16, @react-navigation/core@npm:^6.4.8":
+"@react-navigation/core@npm:^6.4.16":
   version: 6.4.17
   resolution: "@react-navigation/core@npm:6.4.17"
   dependencies:
@@ -7904,7 +7208,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-navigation/elements@npm:^1.3.17, @react-navigation/elements@npm:^1.3.31":
+"@react-navigation/elements@npm:^1.3.30":
   version: 1.3.31
   resolution: "@react-navigation/elements@npm:1.3.31"
   peerDependencies:
@@ -7916,11 +7220,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-navigation/native-stack@npm:^6.9.26":
-  version: 6.11.0
-  resolution: "@react-navigation/native-stack@npm:6.11.0"
+"@react-navigation/native-stack@npm:6.9.26":
+  version: 6.9.26
+  resolution: "@react-navigation/native-stack@npm:6.9.26"
   dependencies:
-    "@react-navigation/elements": "npm:^1.3.31"
+    "@react-navigation/elements": "npm:^1.3.30"
     warn-once: "npm:^0.1.0"
   peerDependencies:
     "@react-navigation/native": ^6.0.0
@@ -7928,22 +7232,22 @@ __metadata:
     react-native: "*"
     react-native-safe-area-context: ">= 3.0.0"
     react-native-screens: ">= 3.0.0"
-  checksum: 10c0/fd4072cae0a72f2f3521de2b80c13b61e7d3bca5214e0d92eead162e7a669e417ffdeab9d937f6acf7d2074bb409cc33782a1ce23db6e1f00cb4001b30893938
+  checksum: 10c0/fcac18ee3e6ab62b3cc4b128c8720ad8d5ccf68c33c22937392aaab920a2d25cd8615b674ef2246dd2653dc32ee5439d82d6f026eed867a3abdbfd45bd45593c
   languageName: node
   linkType: hard
 
-"@react-navigation/native@npm:^6.1.6":
-  version: 6.1.6
-  resolution: "@react-navigation/native@npm:6.1.6"
+"@react-navigation/native@npm:6.1.17":
+  version: 6.1.17
+  resolution: "@react-navigation/native@npm:6.1.17"
   dependencies:
-    "@react-navigation/core": "npm:^6.4.8"
+    "@react-navigation/core": "npm:^6.4.16"
     escape-string-regexp: "npm:^4.0.0"
     fast-deep-equal: "npm:^3.1.3"
     nanoid: "npm:^3.1.23"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10c0/85ad9d76b2ca5403373b7b2a847977ab5245f0120d5a6b2bfd5d40a767ec2361d327b2ba25f023783572683bcbba2305dbce89ebc5551f40a40ad7cfe2c727f5
+  checksum: 10c0/54ff0978d94cf373ce6650be6ae8b28a4f0fbb5b329b1d540d8606083ebf9531bf34d4d77beb797462890959cef3c078580258e13267dde95d310ffbec56d16e
   languageName: node
   linkType: hard
 
@@ -7956,21 +7260,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-navigation/stack@npm:^6.3.16":
-  version: 6.3.16
-  resolution: "@react-navigation/stack@npm:6.3.16"
+"@react-spring/animated@npm:~10.0.3":
+  version: 10.0.3
+  resolution: "@react-spring/animated@npm:10.0.3"
   dependencies:
-    "@react-navigation/elements": "npm:^1.3.17"
-    color: "npm:^4.2.3"
-    warn-once: "npm:^0.1.0"
+    "@react-spring/shared": "npm:~10.0.3"
+    "@react-spring/types": "npm:~10.0.3"
   peerDependencies:
-    "@react-navigation/native": ^6.0.0
-    react: "*"
-    react-native: "*"
-    react-native-gesture-handler: ">= 1.0.0"
-    react-native-safe-area-context: ">= 3.0.0"
-    react-native-screens: ">= 3.0.0"
-  checksum: 10c0/875350ff3c739de85aabe2d5923901c0a08b3414c21593e6e08d9da7eab0367cb21fcbeeaacc77bb81babbd91ca0a8eaed01f88a84af82e3b4967785b15dfcc9
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/6142522f310926729a92009a108ec1bd0d1fe3dca7e9aa0c49692c82fbed28f70c0ea9808fc7452f04bb688ae34333e780f794495906fa4b0efbfc7d53a19b6b
   languageName: node
   linkType: hard
 
@@ -7986,6 +7284,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-spring/core@npm:~10.0.3":
+  version: 10.0.3
+  resolution: "@react-spring/core@npm:10.0.3"
+  dependencies:
+    "@react-spring/animated": "npm:~10.0.3"
+    "@react-spring/shared": "npm:~10.0.3"
+    "@react-spring/types": "npm:~10.0.3"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/d941541d4a40a5229f488e78b414149d54238065178fdd14db307a851d285d521ab1914c0d426b102e0190651dbe752aeb743cee4cd497f5c066be937f2d1790
+  languageName: node
+  linkType: hard
+
 "@react-spring/core@npm:~9.7.4, @react-spring/core@npm:~9.7.5":
   version: 9.7.5
   resolution: "@react-spring/core@npm:9.7.5"
@@ -7999,18 +7310,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-spring/native@npm:^9.7.4":
-  version: 9.7.4
-  resolution: "@react-spring/native@npm:9.7.4"
+"@react-spring/native@npm:^10.0.3":
+  version: 10.0.3
+  resolution: "@react-spring/native@npm:10.0.3"
   dependencies:
-    "@react-spring/animated": "npm:~9.7.4"
-    "@react-spring/core": "npm:~9.7.4"
-    "@react-spring/shared": "npm:~9.7.4"
-    "@react-spring/types": "npm:~9.7.4"
+    "@react-spring/animated": "npm:~10.0.3"
+    "@react-spring/core": "npm:~10.0.3"
+    "@react-spring/shared": "npm:~10.0.3"
+    "@react-spring/types": "npm:~10.0.3"
   peerDependencies:
-    react: 16.8.0  || >=17.0.0 || >=18.0.0
-    react-native: ">=0.58"
-  checksum: 10c0/b050ca225471f11b19fc2abab8c73ade1550b0fc08f5aab38cb85e5c7a585e06138264e8482be00e93b1d2c873866eb52ea3a30a257a3737018477be7d81efb6
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-native: ">=0.78"
+  checksum: 10c0/20a7ca49941f0f00eae11ef775d14bf02af4ba5e825de65a88fbb004ec43ae36fa0567e9bbc54e0be093e4044cdb60b461eeb64c4a7886cf38332dc77a108e5a
+  languageName: node
+  linkType: hard
+
+"@react-spring/rafz@npm:~10.0.3":
+  version: 10.0.3
+  resolution: "@react-spring/rafz@npm:10.0.3"
+  checksum: 10c0/4cf6f710e2be64a3d94e90a20a24a93c68a89b618538d32aaf0079217f9fbed610395051a181d2d010c7ed6898cb7239a3f2ced1d91dd93e4138563ffd2d44ce
   languageName: node
   linkType: hard
 
@@ -8021,6 +7339,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-spring/shared@npm:~10.0.3":
+  version: 10.0.3
+  resolution: "@react-spring/shared@npm:10.0.3"
+  dependencies:
+    "@react-spring/rafz": "npm:~10.0.3"
+    "@react-spring/types": "npm:~10.0.3"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/d8b33b2390792924d0ff2b57b3098d1c6b688a788fc67e83b168928659aad7435dd2c399925a765ffa5080182634dde8f9f76c919f2c259a33af15319187f72f
+  languageName: node
+  linkType: hard
+
 "@react-spring/shared@npm:~9.7.4, @react-spring/shared@npm:~9.7.5":
   version: 9.7.5
   resolution: "@react-spring/shared@npm:9.7.5"
@@ -8049,6 +7379,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-spring/types@npm:~10.0.3":
+  version: 10.0.3
+  resolution: "@react-spring/types@npm:10.0.3"
+  checksum: 10c0/f9bc2619dc9997fe93ebab90fd98118106e53bc45c9c279caaa7081b69d3ed0186d603d5ed445e56bb8ad0075553d15908a2a54e3a0a36ef7cd43a03c1650b02
+  languageName: node
+  linkType: hard
+
 "@react-spring/types@npm:~9.7.4, @react-spring/types@npm:~9.7.5":
   version: 9.7.5
   resolution: "@react-spring/types@npm:9.7.5"
@@ -8150,24 +7487,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rnx-kit/chromium-edge-launcher@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "@rnx-kit/chromium-edge-launcher@npm:1.0.0"
-  dependencies:
-    "@types/node": "npm:^18.0.0"
-    escape-string-regexp: "npm:^4.0.0"
-    is-wsl: "npm:^2.2.0"
-    lighthouse-logger: "npm:^1.0.0"
-    mkdirp: "npm:^1.0.4"
-    rimraf: "npm:^3.0.2"
-  checksum: 10c0/21182379a914ad244b556e794eb6bc6dc63a099cbd2f3eb315a13bd431dc6f24ca096ffb465ad76465144d02969f538a93ef7ef1b2280135174fdae4db5206b3
-  languageName: node
-  linkType: hard
-
-"@rolldown/pluginutils@npm:1.0.0-beta.30":
-  version: 1.0.0-beta.30
-  resolution: "@rolldown/pluginutils@npm:1.0.0-beta.30"
-  checksum: 10c0/aff8b532cb9d82d94c9a4101fa12ecb10620ad47d52dbb9135a5c65bde1ad19895b41026b821f4d607083699239a5d0010198401b6a6a54ab6a10d0015302768
+"@rolldown/pluginutils@npm:1.0.0-rc.3":
+  version: 1.0.0-rc.3
+  resolution: "@rolldown/pluginutils@npm:1.0.0-rc.3"
+  checksum: 10c0/3928b6282a30f307d1b075d2f217180ae173ea9e00638ce46ab65f089bd5f7a0b2c488ae1ce530f509387793c656a2910337c4cd68fa9d37d7e439365989e699
   languageName: node
   linkType: hard
 
@@ -8554,26 +7877,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@segment/loosely-validate-event@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@segment/loosely-validate-event@npm:2.0.0"
-  dependencies:
-    component-type: "npm:^1.2.1"
-    join-component: "npm:^1.1.0"
-  checksum: 10c0/c083c70c5f0a42a2bc5b685f82830b968d01b5b8de2a9a1c362a3952c6bb33ffbdfcf8196c8ce110a5050f78ff9dcf395832eb55687843c80dc77dfe659b0803
-  languageName: node
-  linkType: hard
-
-"@shopify/react-native-skia@npm:1.12.4":
-  version: 1.12.4
-  resolution: "@shopify/react-native-skia@npm:1.12.4"
+"@shopify/react-native-skia@npm:2.2.12":
+  version: 2.2.12
+  resolution: "@shopify/react-native-skia@npm:2.2.12"
   dependencies:
     canvaskit-wasm: "npm:0.40.0"
-    react-reconciler: "npm:0.27.0"
+    react-reconciler: "npm:0.31.0"
   peerDependencies:
-    react: ">=18.0 <19.0.0"
-    react-native: ">=0.64 <0.78.0"
-    react-native-reanimated: ">=2.0.0"
+    react: ">=19.0"
+    react-native: ">=0.78"
+    react-native-reanimated: ">=3.19.1"
   peerDependenciesMeta:
     react-native:
       optional: true
@@ -8581,7 +7894,7 @@ __metadata:
       optional: true
   bin:
     setup-skia-web: scripts/setup-canvaskit.js
-  checksum: 10c0/479c8b2b5f83c497cc54a103f7365b505306e7a35f6eada93250a3ef2ae62533db13d1f96acacde3094980d34bf97cca3d34166a2308bba7e0565e8d40b43cf3
+  checksum: 10c0/57b175f8c8e44b3910a3f73f397b4db155540ba4648cd957b7f6fd24397e0f88670d7c43d3b98bd650685caa0241b5cb7d1bd0e60e8cfaab60acbf34edd4c5af
   languageName: node
   linkType: hard
 
@@ -8639,6 +7952,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sinclair/typebox@npm:^0.34.0":
+  version: 0.34.48
+  resolution: "@sinclair/typebox@npm:0.34.48"
+  checksum: 10c0/e09f26d8ad471a07ee64004eea7c4ec185349a1f61c03e87e71ea33cbe98e97959940076c2e52968a955ffd4c215bf5ba7035e77079511aac7935f25e989e29d
+  languageName: node
+  linkType: hard
+
 "@sindresorhus/is@npm:^4.6.0":
   version: 4.6.0
   resolution: "@sindresorhus/is@npm:4.6.0"
@@ -8724,16 +8044,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-storysource@npm:^8.6.14":
-  version: 8.6.14
-  resolution: "@storybook/addon-storysource@npm:8.6.14"
+"@storybook/addon-docs@npm:9.1.17":
+  version: 9.1.17
+  resolution: "@storybook/addon-docs@npm:9.1.17"
   dependencies:
-    "@storybook/source-loader": "npm:8.6.14"
-    estraverse: "npm:^5.2.0"
-    tiny-invariant: "npm:^1.3.1"
+    "@mdx-js/react": "npm:^3.0.0"
+    "@storybook/csf-plugin": "npm:9.1.17"
+    "@storybook/icons": "npm:^1.4.0"
+    "@storybook/react-dom-shim": "npm:9.1.17"
+    react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^8.6.14
-  checksum: 10c0/5d8a6322477b3773eacdceef47456c2125b91e0dd0846b415679f83a6263b04d60ce8a3372d844030c63ea59d1c368c5f21793a397411c6feed913a6ee1309ef
+    storybook: ^9.1.17
+  checksum: 10c0/1d0cbe44b697c35529b2d6e89c9557dc797051d791a89539b90eccc4f10038d40fcca8339683ea15f9430c6121a9d461899f62406cff2ac5e6a623073de6aae3
   languageName: node
   linkType: hard
 
@@ -8764,28 +8088,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addons@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/addons@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/api": "npm:6.5.17-alpha.0"
-    "@storybook/channels": "npm:6.5.17-alpha.0"
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    "@storybook/core-events": "npm:6.5.17-alpha.0"
-    "@storybook/csf": "npm:0.0.2--canary.4566f4d.1"
-    "@storybook/router": "npm:6.5.17-alpha.0"
-    "@storybook/theming": "npm:6.5.17-alpha.0"
-    "@types/webpack-env": "npm:^1.16.0"
-    core-js: "npm:^3.8.2"
-    global: "npm:^4.4.0"
-    regenerator-runtime: "npm:^0.13.7"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/af8d3d1b876e1c74e91836211369ad82ef20a7dcdc3ddf436061fba3f5a6ea7d22993cd96e4557970bfa894776500c45d1ce33c3931316f9d9524df24541008c
-  languageName: node
-  linkType: hard
-
 "@storybook/addons@npm:^6.2.9":
   version: 6.5.16
   resolution: "@storybook/addons@npm:6.5.16"
@@ -8836,133 +8138,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/api@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/api@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/channels": "npm:6.5.17-alpha.0"
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    "@storybook/core-events": "npm:6.5.17-alpha.0"
-    "@storybook/csf": "npm:0.0.2--canary.4566f4d.1"
-    "@storybook/router": "npm:6.5.17-alpha.0"
-    "@storybook/semver": "npm:^7.3.2"
-    "@storybook/theming": "npm:6.5.17-alpha.0"
-    core-js: "npm:^3.8.2"
-    fast-deep-equal: "npm:^3.1.3"
-    global: "npm:^4.4.0"
-    lodash: "npm:^4.17.21"
-    memoizerific: "npm:^1.11.3"
-    regenerator-runtime: "npm:^0.13.7"
-    store2: "npm:^2.12.0"
-    telejson: "npm:^6.0.8"
-    ts-dedent: "npm:^2.0.0"
-    util-deprecate: "npm:^1.0.2"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/7e4211692c1a815f7e4d11fb211f98997d579e0970b8c7050690c55467813c1d3aa159732acd87620abb3131d45863b84d263477bdcda4ffdedc264ff22cc462
-  languageName: node
-  linkType: hard
-
-"@storybook/builder-vite@npm:9.1.2":
-  version: 9.1.2
-  resolution: "@storybook/builder-vite@npm:9.1.2"
+"@storybook/builder-vite@npm:9.1.17":
+  version: 9.1.17
+  resolution: "@storybook/builder-vite@npm:9.1.17"
   dependencies:
-    "@storybook/csf-plugin": "npm:9.1.2"
+    "@storybook/csf-plugin": "npm:9.1.17"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^9.1.2
+    storybook: ^9.1.17
     vite: ^5.0.0 || ^6.0.0 || ^7.0.0
-  checksum: 10c0/2411e593903bc61336f2a2c6f48e7314dcc8c776346eff0f6fec28e9fc8e3a90d3f8d6561f30d1caf490349d34c7690f8addf4c56fa1fd778f0dfda49cf3aa97
-  languageName: node
-  linkType: hard
-
-"@storybook/builder-webpack4@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/builder-webpack4@npm:6.5.17-alpha.0"
-  dependencies:
-    "@babel/core": "npm:^7.12.10"
-    "@storybook/addons": "npm:6.5.17-alpha.0"
-    "@storybook/api": "npm:6.5.17-alpha.0"
-    "@storybook/channel-postmessage": "npm:6.5.17-alpha.0"
-    "@storybook/channels": "npm:6.5.17-alpha.0"
-    "@storybook/client-api": "npm:6.5.17-alpha.0"
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    "@storybook/components": "npm:6.5.17-alpha.0"
-    "@storybook/core-common": "npm:6.5.17-alpha.0"
-    "@storybook/core-events": "npm:6.5.17-alpha.0"
-    "@storybook/node-logger": "npm:6.5.17-alpha.0"
-    "@storybook/preview-web": "npm:6.5.17-alpha.0"
-    "@storybook/router": "npm:6.5.17-alpha.0"
-    "@storybook/semver": "npm:^7.3.2"
-    "@storybook/store": "npm:6.5.17-alpha.0"
-    "@storybook/theming": "npm:6.5.17-alpha.0"
-    "@storybook/ui": "npm:6.5.17-alpha.0"
-    "@types/node": "npm:^14.0.10 || ^16.0.0"
-    "@types/webpack": "npm:^4.41.26"
-    autoprefixer: "npm:^9.8.6"
-    babel-loader: "npm:^8.0.0"
-    case-sensitive-paths-webpack-plugin: "npm:^2.3.0"
-    core-js: "npm:^3.8.2"
-    css-loader: "npm:^3.6.0"
-    file-loader: "npm:^6.2.0"
-    find-up: "npm:^5.0.0"
-    fork-ts-checker-webpack-plugin: "npm:^4.1.6"
-    glob: "npm:^7.1.6"
-    glob-promise: "npm:^3.4.0"
-    global: "npm:^4.4.0"
-    html-webpack-plugin: "npm:^4.0.0"
-    pnp-webpack-plugin: "npm:1.6.4"
-    postcss: "npm:^7.0.36"
-    postcss-flexbugs-fixes: "npm:^4.2.1"
-    postcss-loader: "npm:^4.2.0"
-    raw-loader: "npm:^4.0.2"
-    stable: "npm:^0.1.8"
-    style-loader: "npm:^1.3.0"
-    terser-webpack-plugin: "npm:^4.2.3"
-    ts-dedent: "npm:^2.0.0"
-    url-loader: "npm:^4.1.1"
-    util-deprecate: "npm:^1.0.2"
-    webpack: "npm:4"
-    webpack-dev-middleware: "npm:^3.7.3"
-    webpack-filter-warnings-plugin: "npm:^1.2.1"
-    webpack-hot-middleware: "npm:^2.25.1"
-    webpack-virtual-modules: "npm:^0.2.2"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/d89de5f576ebc4e7642509f13a082451b6f8f5deba03c2d5b0592a5ec32525d60f5351ca9036faded5cacfd1c605bd814b256e5c68318cceb0f3c76824d97a19
-  languageName: node
-  linkType: hard
-
-"@storybook/channel-postmessage@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/channel-postmessage@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/channels": "npm:6.5.17-alpha.0"
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    "@storybook/core-events": "npm:6.5.17-alpha.0"
-    core-js: "npm:^3.8.2"
-    global: "npm:^4.4.0"
-    qs: "npm:^6.10.0"
-    telejson: "npm:^6.0.8"
-  checksum: 10c0/2021e8846cd82941ef1d6a6a9e5a79ddc8dbdd670a5062012d8a4c27b5f1aff4445999d3feb2fd029d88828c9d17af0662b11303e47f7abf7085399724390698
-  languageName: node
-  linkType: hard
-
-"@storybook/channel-websocket@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/channel-websocket@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/channels": "npm:6.5.17-alpha.0"
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    core-js: "npm:^3.8.2"
-    global: "npm:^4.4.0"
-    telejson: "npm:^6.0.8"
-  checksum: 10c0/c74a35a4a46382de64947a9c72ee979059001e5893198fcf158dbc9ef4a272a17166e94705108ea753a891c0b74f647a19022535d24028d9b38f6f042b901f8c
+  checksum: 10c0/86dbca316bf5e0156b0a22b79e1d6d4eccc7dc57c3c7b04273b6608792c83fc1ff9eebe2be4401ce9e5c54a1383d1f64e9c7558f80d05b9adc555c53da8ee653
   languageName: node
   linkType: hard
 
@@ -8977,48 +8162,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/channels@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/channels@npm:6.5.17-alpha.0"
-  dependencies:
-    core-js: "npm:^3.8.2"
-    ts-dedent: "npm:^2.0.0"
-    util-deprecate: "npm:^1.0.2"
-  checksum: 10c0/6979feaa8bbcd7152ada12dbd20a6ef5744da5e0d4e0323664983c053e9413d5b9e4dc15ff4c6f2d9cff4052cabcf55857b9324150c18feefe3c143613139934
-  languageName: node
-  linkType: hard
-
-"@storybook/client-api@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/client-api@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/addons": "npm:6.5.17-alpha.0"
-    "@storybook/channel-postmessage": "npm:6.5.17-alpha.0"
-    "@storybook/channels": "npm:6.5.17-alpha.0"
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    "@storybook/core-events": "npm:6.5.17-alpha.0"
-    "@storybook/csf": "npm:0.0.2--canary.4566f4d.1"
-    "@storybook/store": "npm:6.5.17-alpha.0"
-    "@types/qs": "npm:^6.9.5"
-    "@types/webpack-env": "npm:^1.16.0"
-    core-js: "npm:^3.8.2"
-    fast-deep-equal: "npm:^3.1.3"
-    global: "npm:^4.4.0"
-    lodash: "npm:^4.17.21"
-    memoizerific: "npm:^1.11.3"
-    qs: "npm:^6.10.0"
-    regenerator-runtime: "npm:^0.13.7"
-    store2: "npm:^2.12.0"
-    synchronous-promise: "npm:^2.0.15"
-    ts-dedent: "npm:^2.0.0"
-    util-deprecate: "npm:^1.0.2"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/ca21b743b6815653ac1f4168a6ea25a924e91864ed183ca8192f4ed70d829a1a6157e13a2384ce63c76f3dc726b102218f7cf1262caa7107099bae4cc593d2a3
-  languageName: node
-  linkType: hard
-
 "@storybook/client-logger@npm:6.5.12":
   version: 6.5.12
   resolution: "@storybook/client-logger@npm:6.5.12"
@@ -9039,35 +8182,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/client-logger@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/client-logger@npm:6.5.17-alpha.0"
-  dependencies:
-    core-js: "npm:^3.8.2"
-    global: "npm:^4.4.0"
-  checksum: 10c0/74031f2b862ed2dee5ad6fc152d5e99d149cc145837ba460a5ba086a58638b135a8ad291e6e060c1e145e26af742b2b09eada24d8f1598b57b4177ab3d1412f9
-  languageName: node
-  linkType: hard
-
-"@storybook/components@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/components@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    "@storybook/csf": "npm:0.0.2--canary.4566f4d.1"
-    "@storybook/theming": "npm:6.5.17-alpha.0"
-    core-js: "npm:^3.8.2"
-    memoizerific: "npm:^1.11.3"
-    qs: "npm:^6.10.0"
-    regenerator-runtime: "npm:^0.13.7"
-    util-deprecate: "npm:^1.0.2"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/0e0fd2d2bf4b2c63b2347a9058af54c9249fddfc789bfaafd7848c8569f2f047912f23558dc345df86d8ee0da9f1b85a0fd39049a0dbafdff86fa83c4ee9144a
-  languageName: node
-  linkType: hard
-
 "@storybook/components@npm:^6.2.9":
   version: 6.5.12
   resolution: "@storybook/components@npm:6.5.12"
@@ -9087,105 +8201,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-client@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/core-client@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/addons": "npm:6.5.17-alpha.0"
-    "@storybook/channel-postmessage": "npm:6.5.17-alpha.0"
-    "@storybook/channel-websocket": "npm:6.5.17-alpha.0"
-    "@storybook/client-api": "npm:6.5.17-alpha.0"
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    "@storybook/core-events": "npm:6.5.17-alpha.0"
-    "@storybook/csf": "npm:0.0.2--canary.4566f4d.1"
-    "@storybook/preview-web": "npm:6.5.17-alpha.0"
-    "@storybook/store": "npm:6.5.17-alpha.0"
-    "@storybook/ui": "npm:6.5.17-alpha.0"
-    airbnb-js-shims: "npm:^2.2.1"
-    ansi-to-html: "npm:^0.6.11"
-    core-js: "npm:^3.8.2"
-    global: "npm:^4.4.0"
-    lodash: "npm:^4.17.21"
-    qs: "npm:^6.10.0"
-    regenerator-runtime: "npm:^0.13.7"
-    ts-dedent: "npm:^2.0.0"
-    unfetch: "npm:^4.2.0"
-    util-deprecate: "npm:^1.0.2"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    webpack: "*"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/e3009419443090d5057b69d4207a0b8cd0c24ad50a10013b5ac6e81b3d379dd98bf48802491ce88101fb7193fbc5cb53bd5fa99796e0765d1ceab168eca90b41
-  languageName: node
-  linkType: hard
-
-"@storybook/core-common@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/core-common@npm:6.5.17-alpha.0"
-  dependencies:
-    "@babel/core": "npm:^7.12.10"
-    "@babel/plugin-proposal-class-properties": "npm:^7.12.1"
-    "@babel/plugin-proposal-decorators": "npm:^7.12.12"
-    "@babel/plugin-proposal-export-default-from": "npm:^7.12.1"
-    "@babel/plugin-proposal-nullish-coalescing-operator": "npm:^7.12.1"
-    "@babel/plugin-proposal-object-rest-spread": "npm:^7.12.1"
-    "@babel/plugin-proposal-optional-chaining": "npm:^7.12.7"
-    "@babel/plugin-proposal-private-methods": "npm:^7.12.1"
-    "@babel/plugin-proposal-private-property-in-object": "npm:^7.12.1"
-    "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
-    "@babel/plugin-transform-arrow-functions": "npm:^7.12.1"
-    "@babel/plugin-transform-block-scoping": "npm:^7.12.12"
-    "@babel/plugin-transform-classes": "npm:^7.12.1"
-    "@babel/plugin-transform-destructuring": "npm:^7.12.1"
-    "@babel/plugin-transform-for-of": "npm:^7.12.1"
-    "@babel/plugin-transform-parameters": "npm:^7.12.1"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.12.1"
-    "@babel/plugin-transform-spread": "npm:^7.12.1"
-    "@babel/preset-env": "npm:^7.12.11"
-    "@babel/preset-react": "npm:^7.12.10"
-    "@babel/preset-typescript": "npm:^7.12.7"
-    "@babel/register": "npm:^7.12.1"
-    "@storybook/node-logger": "npm:6.5.17-alpha.0"
-    "@storybook/semver": "npm:^7.3.2"
-    "@types/node": "npm:^14.0.10 || ^16.0.0"
-    "@types/pretty-hrtime": "npm:^1.0.0"
-    babel-loader: "npm:^8.0.0"
-    babel-plugin-macros: "npm:^3.0.1"
-    babel-plugin-polyfill-corejs3: "npm:^0.1.0"
-    chalk: "npm:^4.1.0"
-    core-js: "npm:^3.8.2"
-    express: "npm:^4.17.1"
-    file-system-cache: "npm:^1.0.5"
-    find-up: "npm:^5.0.0"
-    fork-ts-checker-webpack-plugin: "npm:^6.0.4"
-    fs-extra: "npm:^9.0.1"
-    glob: "npm:^7.1.6"
-    handlebars: "npm:^4.7.7"
-    interpret: "npm:^2.2.0"
-    json5: "npm:^2.2.3"
-    lazy-universal-dotenv: "npm:^3.0.1"
-    picomatch: "npm:^2.3.0"
-    pkg-dir: "npm:^5.0.0"
-    pretty-hrtime: "npm:^1.0.3"
-    resolve-from: "npm:^5.0.0"
-    slash: "npm:^3.0.0"
-    telejson: "npm:^6.0.8"
-    ts-dedent: "npm:^2.0.0"
-    util-deprecate: "npm:^1.0.2"
-    webpack: "npm:4"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/3eb111fb0926e9fc4fad0fb433c6bfcbf6bfa548d4d59fabe12c7cd5e1f25168c684a5fb39eba5101b8fc8e8d6239fda96952786fae1fb24bf1a59177b10c79a
-  languageName: node
-  linkType: hard
-
 "@storybook/core-events@npm:6.5.16, @storybook/core-events@npm:^6.2.9":
   version: 6.5.16
   resolution: "@storybook/core-events@npm:6.5.16"
@@ -9195,134 +8210,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-events@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/core-events@npm:6.5.17-alpha.0"
-  dependencies:
-    core-js: "npm:^3.8.2"
-  checksum: 10c0/c05c3c95d2d846678d0bf6ec5aca7e7fb310f92582e0c3c16c8a600ec84ead3326084e92b3a8cc45c83f3e879d7fd787747404b9f4c335f73825ad6210adc445
-  languageName: node
-  linkType: hard
-
-"@storybook/core-server@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/core-server@npm:6.5.17-alpha.0"
-  dependencies:
-    "@discoveryjs/json-ext": "npm:^0.5.3"
-    "@storybook/builder-webpack4": "npm:6.5.17-alpha.0"
-    "@storybook/core-client": "npm:6.5.17-alpha.0"
-    "@storybook/core-common": "npm:6.5.17-alpha.0"
-    "@storybook/core-events": "npm:6.5.17-alpha.0"
-    "@storybook/csf": "npm:0.0.2--canary.4566f4d.1"
-    "@storybook/csf-tools": "npm:6.5.17-alpha.0"
-    "@storybook/manager-webpack4": "npm:6.5.17-alpha.0"
-    "@storybook/node-logger": "npm:6.5.17-alpha.0"
-    "@storybook/semver": "npm:^7.3.2"
-    "@storybook/store": "npm:6.5.17-alpha.0"
-    "@storybook/telemetry": "npm:6.5.17-alpha.0"
-    "@types/node": "npm:^14.0.10 || ^16.0.0"
-    "@types/node-fetch": "npm:^2.5.7"
-    "@types/pretty-hrtime": "npm:^1.0.0"
-    "@types/webpack": "npm:^4.41.26"
-    better-opn: "npm:^2.1.1"
-    boxen: "npm:^5.1.2"
-    chalk: "npm:^4.1.0"
-    cli-table3: "npm:^0.6.1"
-    commander: "npm:^6.2.1"
-    compression: "npm:^1.7.4"
-    core-js: "npm:^3.8.2"
-    cpy: "npm:^8.1.2"
-    detect-port: "npm:^1.3.0"
-    express: "npm:^4.17.1"
-    fs-extra: "npm:^9.0.1"
-    global: "npm:^4.4.0"
-    globby: "npm:^11.0.2"
-    ip: "npm:^2.0.0"
-    lodash: "npm:^4.17.21"
-    node-fetch: "npm:^2.6.7"
-    open: "npm:^8.4.0"
-    pretty-hrtime: "npm:^1.0.3"
-    prompts: "npm:^2.4.0"
-    regenerator-runtime: "npm:^0.13.7"
-    serve-favicon: "npm:^2.5.0"
-    slash: "npm:^3.0.0"
-    telejson: "npm:^6.0.8"
-    ts-dedent: "npm:^2.0.0"
-    util-deprecate: "npm:^1.0.2"
-    watchpack: "npm:^2.2.0"
-    webpack: "npm:4"
-    ws: "npm:^8.2.3"
-    x-default-browser: "npm:^0.4.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@storybook/builder-webpack5":
-      optional: true
-    "@storybook/manager-webpack5":
-      optional: true
-    typescript:
-      optional: true
-  checksum: 10c0/826022487c3d01fe6aabaad9741d1280d967b656d7cf868982ac3024d210d6567fb54cf44144bfdd0aa8db88b89277ded080d0fcdf1f48aa4e5ca12b8b441add
-  languageName: node
-  linkType: hard
-
-"@storybook/core@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/core@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/core-client": "npm:6.5.17-alpha.0"
-    "@storybook/core-server": "npm:6.5.17-alpha.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    webpack: "*"
-  peerDependenciesMeta:
-    "@storybook/builder-webpack5":
-      optional: true
-    "@storybook/manager-webpack5":
-      optional: true
-    typescript:
-      optional: true
-  checksum: 10c0/3d839c7af22ed4eb455000e31afa7c42c352c0a25440e408d2b2c6c872b884abbe5cc261278345995bb9c2a5d9e80d203f29a735f6f369e537a3f4d9dc692ea7
-  languageName: node
-  linkType: hard
-
-"@storybook/csf-plugin@npm:9.1.2":
-  version: 9.1.2
-  resolution: "@storybook/csf-plugin@npm:9.1.2"
+"@storybook/csf-plugin@npm:9.1.17":
+  version: 9.1.17
+  resolution: "@storybook/csf-plugin@npm:9.1.17"
   dependencies:
     unplugin: "npm:^1.3.1"
   peerDependencies:
-    storybook: ^9.1.2
-  checksum: 10c0/a145da545844b9b2af345d43d8f2c035dd801bd6414b4a9a2037dfa950250d08133a956226c49c36a79ffda171ad9388a0f1621c04cfed77e5c342817f4a275e
-  languageName: node
-  linkType: hard
-
-"@storybook/csf-tools@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/csf-tools@npm:6.5.17-alpha.0"
-  dependencies:
-    "@babel/core": "npm:^7.12.10"
-    "@babel/generator": "npm:^7.12.11"
-    "@babel/parser": "npm:^7.12.11"
-    "@babel/plugin-transform-react-jsx": "npm:^7.12.12"
-    "@babel/preset-env": "npm:^7.12.11"
-    "@babel/traverse": "npm:^7.12.11"
-    "@babel/types": "npm:^7.12.11"
-    "@storybook/csf": "npm:0.0.2--canary.4566f4d.1"
-    "@storybook/mdx1-csf": "npm:^0.0.1"
-    core-js: "npm:^3.8.2"
-    fs-extra: "npm:^9.0.1"
-    global: "npm:^4.4.0"
-    regenerator-runtime: "npm:^0.13.7"
-    ts-dedent: "npm:^2.0.0"
-  peerDependencies:
-    "@storybook/mdx2-csf": ^0.0.3
-  peerDependenciesMeta:
-    "@storybook/mdx2-csf":
-      optional: true
-  checksum: 10c0/a00872c224c46ed82b64a84c1a8b91d9d8c4942dadbcb9dbdf5119534cbcbc6a0ade2b876672eb718dfa9144ac5e71d003c897d9d0b376777f1b42ed37bd8190
+    storybook: ^9.1.17
+  checksum: 10c0/bbbaf788e954930c5bb48731a29e605ceae3e8c0463a330e6ac64a9b7ec7b06e6d2d11faec0c9767e8cf4447936f7fc61835dcb0ad5a5a4908a79eabb0eaf5f3
   languageName: node
   linkType: hard
 
@@ -9335,21 +8230,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-tools@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/docs-tools@npm:6.5.17-alpha.0"
-  dependencies:
-    "@babel/core": "npm:^7.12.10"
-    "@storybook/csf": "npm:0.0.2--canary.4566f4d.1"
-    "@storybook/store": "npm:6.5.17-alpha.0"
-    core-js: "npm:^3.8.2"
-    doctrine: "npm:^3.0.0"
-    lodash: "npm:^4.17.21"
-    regenerator-runtime: "npm:^0.13.7"
-  checksum: 10c0/607da7ed5595e7f0aaf0ea3f4fa3b3377f19a3c978b43c1665878309adc3e5a498ae3e9c8ba7b3fb65c67e2d4290c114dd305804dcbcd812cc28d5c1fe32358f
-  languageName: node
-  linkType: hard
-
 "@storybook/expect@npm:storybook-jest":
   version: 27.5.2-0
   resolution: "@storybook/expect@npm:27.5.2-0"
@@ -9388,151 +8268,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-webpack4@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/manager-webpack4@npm:6.5.17-alpha.0"
-  dependencies:
-    "@babel/core": "npm:^7.12.10"
-    "@babel/plugin-transform-template-literals": "npm:^7.12.1"
-    "@babel/preset-react": "npm:^7.12.10"
-    "@storybook/addons": "npm:6.5.17-alpha.0"
-    "@storybook/core-client": "npm:6.5.17-alpha.0"
-    "@storybook/core-common": "npm:6.5.17-alpha.0"
-    "@storybook/node-logger": "npm:6.5.17-alpha.0"
-    "@storybook/theming": "npm:6.5.17-alpha.0"
-    "@storybook/ui": "npm:6.5.17-alpha.0"
-    "@types/node": "npm:^14.0.10 || ^16.0.0"
-    "@types/webpack": "npm:^4.41.26"
-    babel-loader: "npm:^8.0.0"
-    case-sensitive-paths-webpack-plugin: "npm:^2.3.0"
-    chalk: "npm:^4.1.0"
-    core-js: "npm:^3.8.2"
-    css-loader: "npm:^3.6.0"
-    express: "npm:^4.17.1"
-    file-loader: "npm:^6.2.0"
-    find-up: "npm:^5.0.0"
-    fs-extra: "npm:^9.0.1"
-    html-webpack-plugin: "npm:^4.0.0"
-    node-fetch: "npm:^2.6.7"
-    pnp-webpack-plugin: "npm:1.6.4"
-    read-pkg-up: "npm:^7.0.1"
-    regenerator-runtime: "npm:^0.13.7"
-    resolve-from: "npm:^5.0.0"
-    style-loader: "npm:^1.3.0"
-    telejson: "npm:^6.0.8"
-    terser-webpack-plugin: "npm:^4.2.3"
-    ts-dedent: "npm:^2.0.0"
-    url-loader: "npm:^4.1.1"
-    util-deprecate: "npm:^1.0.2"
-    webpack: "npm:4"
-    webpack-dev-middleware: "npm:^3.7.3"
-    webpack-virtual-modules: "npm:^0.2.2"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/dfb94aee275631110ba55bfde337f09922690aeabe4ccaa3456c7403bc3c04f283694efcb529e23c21363665c721253c25f8cebfc0419693c99c9bcdd6c5ffc7
-  languageName: node
-  linkType: hard
-
-"@storybook/mdx1-csf@npm:^0.0.1":
-  version: 0.0.1
-  resolution: "@storybook/mdx1-csf@npm:0.0.1"
-  dependencies:
-    "@babel/generator": "npm:^7.12.11"
-    "@babel/parser": "npm:^7.12.11"
-    "@babel/preset-env": "npm:^7.12.11"
-    "@babel/types": "npm:^7.12.11"
-    "@mdx-js/mdx": "npm:^1.6.22"
-    "@types/lodash": "npm:^4.14.167"
-    js-string-escape: "npm:^1.0.1"
-    loader-utils: "npm:^2.0.0"
-    lodash: "npm:^4.17.21"
-    prettier: "npm:>=2.2.1 <=2.3.0"
-    ts-dedent: "npm:^2.0.0"
-  checksum: 10c0/c25a4ad1356ce65950483bd85f37ba93237149fd782360e3548a86dafd9753674ddebb03a8665ed78f99bc1533e87ba2a0605c2fc984a5ad19662fd4b930db78
-  languageName: node
-  linkType: hard
-
-"@storybook/node-logger@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/node-logger@npm:6.5.17-alpha.0"
-  dependencies:
-    "@types/npmlog": "npm:^4.1.2"
-    chalk: "npm:^4.1.0"
-    core-js: "npm:^3.8.2"
-    npmlog: "npm:^5.0.1"
-    pretty-hrtime: "npm:^1.0.3"
-  checksum: 10c0/4520f4a5e0b961a487c2660b7a41cbd7cd0b044736dd39de1efdd5d2ce58337c1930c55a6b7615202cd1d1df00e5aa0ccbd0365d3c94822bb153ad69c2e1679a
-  languageName: node
-  linkType: hard
-
-"@storybook/preview-web@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/preview-web@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/addons": "npm:6.5.17-alpha.0"
-    "@storybook/channel-postmessage": "npm:6.5.17-alpha.0"
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    "@storybook/core-events": "npm:6.5.17-alpha.0"
-    "@storybook/csf": "npm:0.0.2--canary.4566f4d.1"
-    "@storybook/store": "npm:6.5.17-alpha.0"
-    ansi-to-html: "npm:^0.6.11"
-    core-js: "npm:^3.8.2"
-    global: "npm:^4.4.0"
-    lodash: "npm:^4.17.21"
-    qs: "npm:^6.10.0"
-    regenerator-runtime: "npm:^0.13.7"
-    synchronous-promise: "npm:^2.0.15"
-    ts-dedent: "npm:^2.0.0"
-    unfetch: "npm:^4.2.0"
-    util-deprecate: "npm:^1.0.2"
+"@storybook/react-dom-shim@npm:9.1.17":
+  version: 9.1.17
+  resolution: "@storybook/react-dom-shim@npm:9.1.17"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/d98714d2d969b494cb9187df59d0bac0b2e523bf1329bfc9931868c865cbc4bd2d16febc01653ed6ed21e059f5483f601519ab713d2e26c08313709b909e3f1d
-  languageName: node
-  linkType: hard
-
-"@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.630821.0":
-  version: 1.0.6--canary.9.630821.0
-  resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.630821.0"
-  dependencies:
-    debug: "npm:^4.1.1"
-    endent: "npm:^2.0.1"
-    find-cache-dir: "npm:^3.3.1"
-    flat-cache: "npm:^3.0.4"
-    micromatch: "npm:^4.0.2"
-    react-docgen-typescript: "npm:^2.2.2"
-    tslib: "npm:^2.0.0"
-  peerDependencies:
-    typescript: ">= 4.x"
-    webpack: ">= 4"
-  checksum: 10c0/e444a6f2ef67a631ebd35f78a1637c2adbb964d5063a4a088ccf3027c65ca2430826906c70e4972049ef1603aa01ce9c38393704fc2d6de293a627cc40ddc3b2
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    storybook: ^9.1.17
+  checksum: 10c0/7484ea12ac772b744215ba0b70c041299e75e2732c1f7f74a9027e1378cd064e0b29309263507d7fb14570484dafee9bb5d3b20127ff18f78b4dee54e39ce121
   languageName: node
   linkType: hard
 
-"@storybook/react-dom-shim@npm:9.1.2":
-  version: 9.1.2
-  resolution: "@storybook/react-dom-shim@npm:9.1.2"
+"@storybook/react-dom-shim@npm:9.1.19":
+  version: 9.1.19
+  resolution: "@storybook/react-dom-shim@npm:9.1.19"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^9.1.2
-  checksum: 10c0/7547cb0fdcf8098c00017cbfb501f11a34ae73b9e13984520b8143e709b4b8ec1acf7fed9ce51dbb5b5af5dcd657396da17ef1f262f60efdd4956f3e26b3c704
+    storybook: ^9.1.19
+  checksum: 10c0/6de069249a76f104da9b6bd5dc64ffcdec9e11be4ec70de04dbd874f475998ef8b0336648323130bea4dd35ceab49b9b5af1d8b3f8bf34a5510d14f2a6ceb965
   languageName: node
   linkType: hard
 
-"@storybook/react-vite@npm:^9.1.2":
-  version: 9.1.2
-  resolution: "@storybook/react-vite@npm:9.1.2"
+"@storybook/react-vite@npm:9.1.17":
+  version: 9.1.17
+  resolution: "@storybook/react-vite@npm:9.1.17"
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.6.1"
     "@rollup/pluginutils": "npm:^5.0.2"
-    "@storybook/builder-vite": "npm:9.1.2"
-    "@storybook/react": "npm:9.1.2"
+    "@storybook/builder-vite": "npm:9.1.17"
+    "@storybook/react": "npm:9.1.17"
     find-up: "npm:^7.0.0"
     magic-string: "npm:^0.30.0"
     react-docgen: "npm:^8.0.0"
@@ -9541,92 +8306,45 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^9.1.2
+    storybook: ^9.1.17
     vite: ^5.0.0 || ^6.0.0 || ^7.0.0
-  checksum: 10c0/afed36a0219599577b255042a9c9ac1af0106003ac37e2e9b5846a42b4e8729ff0e8b7ae6018d3ac85b69e918c2a20d554cd484de7345e5fb4974df92914e059
+  checksum: 10c0/4cc49dab274c051f6c63a67c47c50bb2b0a1e6a3043106207bfae371e3015f43db8cd3125d6dccfe229cb8ada0c951a5eb1120e400ed07afec9d4b2aabb5ba28
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:9.1.2":
-  version: 9.1.2
-  resolution: "@storybook/react@npm:9.1.2"
+"@storybook/react@npm:9.1.17":
+  version: 9.1.17
+  resolution: "@storybook/react@npm:9.1.17"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/react-dom-shim": "npm:9.1.2"
+    "@storybook/react-dom-shim": "npm:9.1.17"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^9.1.2
+    storybook: ^9.1.17
     typescript: ">= 4.9.x"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/ea3d9fa25825fde5022942579db9a57154e57cb37244b0d54bb189679a37f20c20906041898f5fcfd4867043ea789384c2d968f334f9d0c55958add0b18fb6ea
+  checksum: 10c0/52139a2a079dae4aa904e00cf06f6e6023b7c7f6492e011d6c30866f9ad25b000d06a05a3505779b32ae57d9627bf5c6b522065d99dab499c5d582672c80fbff
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:^6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/react@npm:6.5.17-alpha.0"
+"@storybook/react@npm:^9.1.2":
+  version: 9.1.19
+  resolution: "@storybook/react@npm:9.1.19"
   dependencies:
-    "@babel/preset-flow": "npm:^7.12.1"
-    "@babel/preset-react": "npm:^7.12.10"
-    "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.3"
-    "@storybook/addons": "npm:6.5.17-alpha.0"
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    "@storybook/core": "npm:6.5.17-alpha.0"
-    "@storybook/core-common": "npm:6.5.17-alpha.0"
-    "@storybook/csf": "npm:0.0.2--canary.4566f4d.1"
-    "@storybook/docs-tools": "npm:6.5.17-alpha.0"
-    "@storybook/node-logger": "npm:6.5.17-alpha.0"
-    "@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.630821.0"
-    "@storybook/semver": "npm:^7.3.2"
-    "@storybook/store": "npm:6.5.17-alpha.0"
-    "@types/estree": "npm:^0.0.51"
-    "@types/node": "npm:^14.14.20 || ^16.0.0"
-    "@types/webpack-env": "npm:^1.16.0"
-    acorn: "npm:^7.4.1"
-    acorn-jsx: "npm:^5.3.1"
-    acorn-walk: "npm:^7.2.0"
-    babel-plugin-add-react-displayname: "npm:^0.0.5"
-    babel-plugin-react-docgen: "npm:^4.2.1"
-    core-js: "npm:^3.8.2"
-    escodegen: "npm:^2.0.0"
-    fs-extra: "npm:^9.0.1"
-    global: "npm:^4.4.0"
-    html-tags: "npm:^3.1.0"
-    lodash: "npm:^4.17.21"
-    prop-types: "npm:^15.7.2"
-    react-element-to-jsx-string: "npm:^14.3.4"
-    react-refresh: "npm:^0.11.0"
-    read-pkg-up: "npm:^7.0.1"
-    regenerator-runtime: "npm:^0.13.7"
-    ts-dedent: "npm:^2.0.0"
-    util-deprecate: "npm:^1.0.2"
-    webpack: "npm:>=4.43.0 <6.0.0"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/react-dom-shim": "npm:9.1.19"
   peerDependencies:
-    "@babel/core": ^7.11.5
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    require-from-string: ^2.0.2
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    storybook: ^9.1.19
+    typescript: ">= 4.9.x"
   peerDependenciesMeta:
-    "@babel/core":
-      optional: true
-    "@storybook/builder-webpack4":
-      optional: true
-    "@storybook/builder-webpack5":
-      optional: true
-    "@storybook/manager-webpack4":
-      optional: true
-    "@storybook/manager-webpack5":
-      optional: true
     typescript:
       optional: true
-  bin:
-    build-storybook: bin/build.js
-    start-storybook: bin/index.js
-    storybook-server: bin/index.js
-  checksum: 10c0/13af0c012a775e908a338fb634eb0a8999e4edb1ff08064e79293b9f4b7f27ebc22067e6dffc311414b59b532278352f5254e6e0b886a9d8f68210574df1289b
+  checksum: 10c0/4276fa4d83719f2321089af70b952329914f6dad7bb5d340235f936409da3474d56dcd260d7277c2aed019088f3249be91674a451c8a99d036eb4371403885b5
   languageName: node
   linkType: hard
 
@@ -9646,22 +8364,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/router@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/router@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    core-js: "npm:^3.8.2"
-    memoizerific: "npm:^1.11.3"
-    qs: "npm:^6.10.0"
-    regenerator-runtime: "npm:^0.13.7"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/0cf83082222bf64151bf8669493f2ef0ee3af705899f1a39d49ffde0b80c0296e5cda123ac4d11434fb3dda4bc48b0cf5ecd8bc89ee6e434c8f02fee5d8e215a
-  languageName: node
-  linkType: hard
-
 "@storybook/semver@npm:^7.3.2":
   version: 7.3.2
   resolution: "@storybook/semver@npm:7.3.2"
@@ -9674,65 +8376,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/source-loader@npm:8.6.14":
-  version: 8.6.14
-  resolution: "@storybook/source-loader@npm:8.6.14"
-  dependencies:
-    es-toolkit: "npm:^1.22.0"
-    estraverse: "npm:^5.2.0"
-    prettier: "npm:^3.1.1"
-  peerDependencies:
-    storybook: ^8.6.14
-  checksum: 10c0/66304a3724047eafab7d11bd50e439b1ebfedb3ef4ef314424777e512b0241cb50e9c82c3dc7b27e87afa1f040227ffa73e235520c26ab2b0b75cb7c33923dc8
-  languageName: node
-  linkType: hard
-
-"@storybook/store@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/store@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/addons": "npm:6.5.17-alpha.0"
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    "@storybook/core-events": "npm:6.5.17-alpha.0"
-    "@storybook/csf": "npm:0.0.2--canary.4566f4d.1"
-    core-js: "npm:^3.8.2"
-    fast-deep-equal: "npm:^3.1.3"
-    global: "npm:^4.4.0"
-    lodash: "npm:^4.17.21"
-    memoizerific: "npm:^1.11.3"
-    regenerator-runtime: "npm:^0.13.7"
-    slash: "npm:^3.0.0"
-    stable: "npm:^0.1.8"
-    synchronous-promise: "npm:^2.0.15"
-    ts-dedent: "npm:^2.0.0"
-    util-deprecate: "npm:^1.0.2"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/573e9fd952575f682847fecf7bd2268e11d056e72503623898672a547e587b77b6b74e162d90a412bcefa463ab786c84c263bee15edb796235b0e8d9626b2956
-  languageName: node
-  linkType: hard
-
-"@storybook/telemetry@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/telemetry@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    "@storybook/core-common": "npm:6.5.17-alpha.0"
-    chalk: "npm:^4.1.0"
-    core-js: "npm:^3.8.2"
-    detect-package-manager: "npm:^2.0.1"
-    fetch-retry: "npm:^5.0.2"
-    fs-extra: "npm:^9.0.1"
-    global: "npm:^4.4.0"
-    isomorphic-unfetch: "npm:^3.1.0"
-    nanoid: "npm:^3.3.1"
-    read-pkg-up: "npm:^7.0.1"
-    regenerator-runtime: "npm:^0.13.7"
-  checksum: 10c0/85e9d2c80e79179be35d80b933a8abbfa85132d0d01ac91fa8450e4cd42e29496214e4445addf02978b4f7661f4d4fa9ea5dabb8d8c85823734c758ca8c3521d
-  languageName: node
-  linkType: hard
-
 "@storybook/testing-library@npm:^0.2.2":
   version: 0.2.2
   resolution: "@storybook/testing-library@npm:0.2.2"
@@ -9774,46 +8417,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/theming@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    core-js: "npm:^3.8.2"
-    memoizerific: "npm:^1.11.3"
-    regenerator-runtime: "npm:^0.13.7"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/dd691aa38217715b314c1a344cc200a9cc1b1e686f1cad2cfb0018c6e244310b7afc014f4aff200715df365dad7ff176999f8138ff56e06fa14053b0072d5776
-  languageName: node
-  linkType: hard
-
-"@storybook/ui@npm:6.5.17-alpha.0":
-  version: 6.5.17-alpha.0
-  resolution: "@storybook/ui@npm:6.5.17-alpha.0"
-  dependencies:
-    "@storybook/addons": "npm:6.5.17-alpha.0"
-    "@storybook/api": "npm:6.5.17-alpha.0"
-    "@storybook/channels": "npm:6.5.17-alpha.0"
-    "@storybook/client-logger": "npm:6.5.17-alpha.0"
-    "@storybook/components": "npm:6.5.17-alpha.0"
-    "@storybook/core-events": "npm:6.5.17-alpha.0"
-    "@storybook/router": "npm:6.5.17-alpha.0"
-    "@storybook/semver": "npm:^7.3.2"
-    "@storybook/theming": "npm:6.5.17-alpha.0"
-    core-js: "npm:^3.8.2"
-    memoizerific: "npm:^1.11.3"
-    qs: "npm:^6.10.0"
-    regenerator-runtime: "npm:^0.13.7"
-    resolve-from: "npm:^5.0.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/8c20c5564a0371d8ec60b3aa12074c6e9295b4e2bae4863644ae2ae9689ee370a71c6b4ad63cb3474a01c6dd284eedc1f2bd2944ecad02723e1fae54ca541dc0
-  languageName: node
-  linkType: hard
-
 "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0":
   version: 8.0.0
   resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0"
@@ -10438,79 +9041,43 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/jest-native@npm:^5.4.3":
-  version: 5.4.3
-  resolution: "@testing-library/jest-native@npm:5.4.3"
+"@testing-library/react-native@npm:^13.3.3":
+  version: 13.3.3
+  resolution: "@testing-library/react-native@npm:13.3.3"
   dependencies:
-    chalk: "npm:^4.1.2"
-    jest-diff: "npm:^29.0.1"
-    jest-matcher-utils: "npm:^29.0.1"
-    pretty-format: "npm:^29.0.3"
+    jest-matcher-utils: "npm:^30.0.5"
+    picocolors: "npm:^1.1.1"
+    pretty-format: "npm:^30.0.5"
     redent: "npm:^3.0.0"
   peerDependencies:
-    react: ">=16.0.0"
-    react-native: ">=0.59"
-    react-test-renderer: ">=16.0.0"
-  checksum: 10c0/9315989dc0377a778f7ec9317b98c1dab9a7e2ebe0ca20a5c75f9dba3a4b486c02452b4399dd1aeef9ebf0007247594c6357f62089f095fde5280ce0344f5e65
-  languageName: node
-  linkType: hard
-
-"@testing-library/react-hooks@npm:^8.0.1":
-  version: 8.0.1
-  resolution: "@testing-library/react-hooks@npm:8.0.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.12.5"
-    react-error-boundary: "npm:^3.1.0"
-  peerDependencies:
-    "@types/react": ^16.9.0 || ^17.0.0
-    react: ^16.9.0 || ^17.0.0
-    react-dom: ^16.9.0 || ^17.0.0
-    react-test-renderer: ^16.9.0 || ^17.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    react-dom:
-      optional: true
-    react-test-renderer:
-      optional: true
-  checksum: 10c0/83bef2d4c437b84143213b5275ef00ef14e5bcd344f9ded12b162d253dc3c799138ead4428026b9c725e5a38dbebf611f2898aa43f3e43432bcaccbd7bf413e5
-  languageName: node
-  linkType: hard
-
-"@testing-library/react-native@npm:^11.3.0":
-  version: 11.3.0
-  resolution: "@testing-library/react-native@npm:11.3.0"
-  dependencies:
-    pretty-format: "npm:^29.0.3"
-  peerDependencies:
-    jest: ">=28.0.0"
-    react: ">=16.0.0"
-    react-native: ">=0.59"
-    react-test-renderer: ">=16.0.0"
+    jest: ">=29.0.0"
+    react: ">=18.2.0"
+    react-native: ">=0.71"
+    react-test-renderer: ">=18.2.0"
   peerDependenciesMeta:
     jest:
       optional: true
-  checksum: 10c0/8629d866c36d806e0efcc371e398329824fa9e687fdb6b5065856e7149dbadfc85da1814247c6278f35e2f38de0559a1c6fe471549aaaaea57ff9efed323d258
+  checksum: 10c0/ba13066536d5b2c0b625220d4320c6ad1e390c3df4f4b614d859ef467c4974ad52aa79269ae98efdba8f5a074644e3d11583a5485312df5a64387976ecf4225a
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:^16.0.1":
-  version: 16.0.1
-  resolution: "@testing-library/react@npm:16.0.1"
+"@testing-library/react@npm:^16.3.2":
+  version: 16.3.2
+  resolution: "@testing-library/react@npm:16.3.2"
   dependencies:
     "@babel/runtime": "npm:^7.12.5"
   peerDependencies:
     "@testing-library/dom": ^10.0.0
-    "@types/react": ^18.0.0
-    "@types/react-dom": ^18.0.0
-    react: ^18.0.0
-    react-dom: ^18.0.0
+    "@types/react": ^18.0.0 || ^19.0.0
+    "@types/react-dom": ^18.0.0 || ^19.0.0
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: 10c0/67d05dec5ad5a2e6f92b6a3234af785435c7bb62bdbf12f3bfc89c9bca0c871a189e88c4ba023ed4cea504704c87c6ac7e86e24a3962df6c521ae89b62f48ff7
+  checksum: 10c0/f9c7f0915e1b5f7b750e6c7d8b51f091b8ae7ea99bacb761d7b8505ba25de9cfcb749a0f779f1650fb268b499dd79165dc7e1ee0b8b4cb63430d3ddc81ffe044
   languageName: node
   linkType: hard
 
@@ -10911,13 +9478,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:^0.0.51":
-  version: 0.0.51
-  resolution: "@types/estree@npm:0.0.51"
-  checksum: 10c0/a70c60d5e634e752fcd45b58c9c046ef22ad59ede4bc93ad5193c7e3b736ebd6bcd788ade59d9c3b7da6eeb0939235f011d4c59bb4fc04d8c346b76035099dd1
-  languageName: node
-  linkType: hard
-
 "@types/express-serve-static-core@npm:*, @types/express-serve-static-core@npm:^4.17.21, @types/express-serve-static-core@npm:^4.17.33":
   version: 4.19.6
   resolution: "@types/express-serve-static-core@npm:4.19.6"
@@ -10952,16 +9512,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/glob@npm:*, @types/glob@npm:^7.1.1":
-  version: 7.2.0
-  resolution: "@types/glob@npm:7.2.0"
-  dependencies:
-    "@types/minimatch": "npm:*"
-    "@types/node": "npm:*"
-  checksum: 10c0/a8eb5d5cb5c48fc58c7ca3ff1e1ddf771ee07ca5043da6e4871e6757b4472e2e73b4cfef2644c38983174a4bc728c73f8da02845c28a1212f98cabd293ecae98
-  languageName: node
-  linkType: hard
-
 "@types/glob@npm:7.1.3":
   version: 7.1.3
   resolution: "@types/glob@npm:7.1.3"
@@ -10995,15 +9545,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/hast@npm:^2.0.0":
-  version: 2.3.4
-  resolution: "@types/hast@npm:2.3.4"
-  dependencies:
-    "@types/unist": "npm:*"
-  checksum: 10c0/635cfe9a8e91f6b3c15c9929455d0136ac4d75c5b7f596ce21b453cecdfda785e89b10eb2b2d9da9d43e548b1d65ba3e20c741bbaf83823575c9c45001ade4bb
-  languageName: node
-  linkType: hard
-
 "@types/hast@npm:^3.0.0":
   version: 3.0.4
   resolution: "@types/hast@npm:3.0.4"
@@ -11020,13 +9561,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/html-minifier-terser@npm:^5.0.0":
-  version: 5.1.2
-  resolution: "@types/html-minifier-terser@npm:5.1.2"
-  checksum: 10c0/13276ac71fbcc89795627cc7fa0234e95402656285df2bda4df83e3ebaa9b30f29905f52aa7786d158a887cef72748cbd897e12628dc396ba1225ce0d18159b9
-  languageName: node
-  linkType: hard
-
 "@types/html-minifier-terser@npm:^6.0.0":
   version: 6.1.0
   resolution: "@types/html-minifier-terser@npm:6.1.0"
@@ -11064,6 +9598,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/inquirer@npm:^9.0.7":
+  version: 9.0.9
+  resolution: "@types/inquirer@npm:9.0.9"
+  dependencies:
+    "@types/through": "npm:*"
+    rxjs: "npm:^7.2.0"
+  checksum: 10c0/235a02a3afa5b238ca9093ef7064e17d763ba134b1afd5a263ffc363ccdb6d1f7d64aa3866ca93e7ad52be4ff21324368a983d20d35caf21c16475cfb32db8c8
+  languageName: node
+  linkType: hard
+
 "@types/intl@npm:^1.2.0":
   version: 1.2.0
   resolution: "@types/intl@npm:1.2.0"
@@ -11094,16 +9638,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/istanbul-reports@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "@types/istanbul-reports@npm:1.1.2"
-  dependencies:
-    "@types/istanbul-lib-coverage": "npm:*"
-    "@types/istanbul-lib-report": "npm:*"
-  checksum: 10c0/80b76715f4ac74a4ddfc82d7942b2faaefbe9fdce8e7dfdfa497b3fb60a3e707b632c6e70e1565cfe30045eaebaf7aad0d6c3d102652d1da8fdb0bf095924eb3
-  languageName: node
-  linkType: hard
-
 "@types/istanbul-reports@npm:^3.0.0":
   version: 3.0.1
   resolution: "@types/istanbul-reports@npm:3.0.1"
@@ -11160,6 +9694,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jscodeshift@npm:^0.11.10":
+  version: 0.11.11
+  resolution: "@types/jscodeshift@npm:0.11.11"
+  dependencies:
+    ast-types: "npm:^0.14.1"
+    recast: "npm:^0.20.3"
+  checksum: 10c0/b3d2be46d523ae679a2c986d7f98232aabaa761c960423105286bfd682fb57f9366f6afed1e1d6b35e4923b7e038c0aa539032d7e7fd430754683078032cd578
+  languageName: node
+  linkType: hard
+
 "@types/jsdom@npm:^20.0.0":
   version: 20.0.0
   resolution: "@types/jsdom@npm:20.0.0"
@@ -11194,7 +9738,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash@npm:^4.14.167, @types/lodash@npm:^4.14.174, @types/lodash@npm:^4.14.178, @types/lodash@npm:^4.14.202":
+"@types/lodash@npm:^4.14.174, @types/lodash@npm:^4.14.178, @types/lodash@npm:^4.14.202":
   version: 4.17.16
   resolution: "@types/lodash@npm:4.17.16"
   checksum: 10c0/cf017901b8ab1d7aabc86d5189d9288f4f99f19a75caf020c0e2c77b8d4cead4db0d0b842d009b029339f92399f49f34377dd7c2721053388f251778b4c23534
@@ -11272,16 +9816,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node-fetch@npm:^2.5.7":
-  version: 2.6.12
-  resolution: "@types/node-fetch@npm:2.6.12"
-  dependencies:
-    "@types/node": "npm:*"
-    form-data: "npm:^4.0.0"
-  checksum: 10c0/7693acad5499b7df2d1727d46cff092a63896dc04645f36b973dd6dd754a59a7faba76fcb777bdaa35d80625c6a9dd7257cca9c401a4bab03b04480cda7fd1af
-  languageName: node
-  linkType: hard
-
 "@types/node-forge@npm:^1.3.0":
   version: 1.3.11
   resolution: "@types/node-forge@npm:1.3.11"
@@ -11300,29 +9834,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^14.0.10 || ^16.0.0, @types/node@npm:^14.14.20 || ^16.0.0":
-  version: 16.11.64
-  resolution: "@types/node@npm:16.11.64"
-  checksum: 10c0/4b5ee37e3d2dc3364abbffee7e9f4c27fc22b44305ff5920fcc1b7fe08343bf113fface6a565c2406f77f8818d5ddcfb31652df6a43e4ab971976256d176bf37
-  languageName: node
-  linkType: hard
-
-"@types/node@npm:^17.0.19, @types/node@npm:^17.0.5":
+"@types/node@npm:^17.0.5":
   version: 17.0.21
   resolution: "@types/node@npm:17.0.21"
   checksum: 10c0/57a9ce212da7878fddd4e9ef3f83c0f395e1e71c032b3112f4163f357a87b949c392dd9280ae806bca7edfbea335da1cd248fd316c615632b746c87ba1b2ab6e
   languageName: node
   linkType: hard
 
-"@types/node@npm:^18.0.0":
-  version: 18.19.62
-  resolution: "@types/node@npm:18.19.62"
-  dependencies:
-    undici-types: "npm:~5.26.4"
-  checksum: 10c0/b21337f972ff223718f64cee0f247cc85b1976e53af9c230e1142d822c227d46ee041550bf850548c8af84c82161e1568b4bc60f2f84bdbc81f532846021ab5b
-  languageName: node
-  linkType: hard
-
 "@types/node@npm:^20.0.0":
   version: 20.17.24
   resolution: "@types/node@npm:20.17.24"
@@ -11339,13 +9857,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/npmlog@npm:^4.1.2":
-  version: 4.1.4
-  resolution: "@types/npmlog@npm:4.1.4"
-  checksum: 10c0/5670c38db51f2c4a5da05657920d7597bf9da00615920b42a001fde9011f05ab1e8ec8cbc671abb47915028e3e0ace5c3d981c23684c202a00bf518f16ece01d
-  languageName: node
-  linkType: hard
-
 "@types/offscreencanvas@npm:^2019.6.4":
   version: 2019.7.3
   resolution: "@types/offscreencanvas@npm:2019.7.3"
@@ -11360,20 +9871,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/parse5@npm:^5.0.0":
-  version: 5.0.3
-  resolution: "@types/parse5@npm:5.0.3"
-  checksum: 10c0/7d7ebbcb704a0ef438aa0de43ea1fd9723dfa802b8fa459628ceaf063f092bd19791b2a2580265244898dcc9d40f7345588a76cf752847d29540539f802711ed
-  languageName: node
-  linkType: hard
-
-"@types/pretty-hrtime@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "@types/pretty-hrtime@npm:1.0.1"
-  checksum: 10c0/e990110a3626e987319092c5149d5ea244785b83fbbd8e62605714ec1fa4317a3524ae0b6381cdc2ca92619d9a451b3fe9ff4085c42826f5398e3380d3031bff
-  languageName: node
-  linkType: hard
-
 "@types/prismjs@npm:^1.26.0":
   version: 1.26.5
   resolution: "@types/prismjs@npm:1.26.5"
@@ -11388,7 +9885,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/qs@npm:*, @types/qs@npm:^6.9.5":
+"@types/qs@npm:*":
   version: 6.9.7
   resolution: "@types/qs@npm:6.9.7"
   checksum: 10c0/157eb05f4c75790b0ebdcf7b0547ff117feabc8cda03c3cac3d3ea82bb19a1912e76a411df3eb0bdd01026a9770f07bc0e7e3fbe39ebb31c1be4564c16be35f1
@@ -11402,21 +9899,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "@types/react-dom@npm:18.3.1"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10c0/8b416551c60bb6bd8ec10e198c957910cfb271bc3922463040b0d57cf4739cdcd24b13224f8d68f10318926e1ec3cd69af0af79f0291b599a992f8c80d47f1eb
+"@types/react-dom@npm:19.1.2":
+  version: 19.1.2
+  resolution: "@types/react-dom@npm:19.1.2"
+  peerDependencies:
+    "@types/react": ^19.0.0
+  checksum: 10c0/100c341cacba9ec8ae1d47ee051072a3450e9573bf8eeb7262490e341cb246ea0f95a07a1f2077e61cf92648f812a0324c602fcd811bd87b7ce41db2811510cd
   languageName: node
   linkType: hard
 
-"@types/react-is@npm:^17.0.2":
-  version: 17.0.3
-  resolution: "@types/react-is@npm:17.0.3"
+"@types/react-is@npm:^19.0.0":
+  version: 19.2.0
+  resolution: "@types/react-is@npm:19.2.0"
   dependencies:
     "@types/react": "npm:*"
-  checksum: 10c0/839382b66b2b2e3023647f5ba0c382ddc6aa01c1bc9f64608f82bbc871a905ba9b988838619914d8348c2a511717c6bd3701cb866bb9e4abfabdbe544efb695b
+  checksum: 10c0/ff49ac8b8d439c3377e11d2f9f491ed4f8c8ee800225a40093c7941715ca8ccbde1b3833c5435354a8e39305fd0a163019d97f033c9402bc4b46f515851d2290
   languageName: node
   linkType: hard
 
@@ -11470,15 +9967,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-test-renderer@npm:^18.3.0":
-  version: 18.3.0
-  resolution: "@types/react-test-renderer@npm:18.3.0"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10c0/3c9748be52e8e659e7adf91dea6939486463264e6f633bf21c4cb116de18af7bef0595568a1e588160420b2f65289473075dda1cb417c2875df8cf7a09f5d913
-  languageName: node
-  linkType: hard
-
 "@types/react-virtualized@npm:^9.21.13":
   version: 9.21.19
   resolution: "@types/react-virtualized@npm:9.21.19"
@@ -11489,13 +9977,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:^18.3.12":
-  version: 18.3.12
-  resolution: "@types/react@npm:18.3.12"
+"@types/react@npm:19.1.2":
+  version: 19.1.2
+  resolution: "@types/react@npm:19.1.2"
   dependencies:
-    "@types/prop-types": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: 10c0/8bae8d9a41619804561574792e29112b413044eb0d53746dde2b9720c1f9a59f71c895bbd7987cd8ce9500b00786e53bc032dced38cddf42910458e145675290
+  checksum: 10c0/76ffe71395c713d4adc3c759465012d3c956db00af35ab7c6d0d91bd07b274b7ce69caa0478c0760311587bd1e38c78ffc9688ebc629f2b266682a19d8750947
   languageName: node
   linkType: hard
 
@@ -11575,13 +10062,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/source-list-map@npm:*":
-  version: 0.1.2
-  resolution: "@types/source-list-map@npm:0.1.2"
-  checksum: 10c0/0538ce317294febf40ed3fc3a2e483fa4aee8ba85584a66e5ed9c0af9ea48a348960bc467076643cb56aeafdd7d2252e90c75e68ef664c0477ec87ea0554ffdc
-  languageName: node
-  linkType: hard
-
 "@types/stack-utils@npm:^2.0.0":
   version: 2.0.1
   resolution: "@types/stack-utils@npm:2.0.1"
@@ -11596,13 +10076,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/tapable@npm:^1, @types/tapable@npm:^1.0.5":
-  version: 1.0.8
-  resolution: "@types/tapable@npm:1.0.8"
-  checksum: 10c0/01f77d47bac8aaeee7ed298e8e74eb012a28f920106c3c359e1f2730512cd810f2c6165cd2cd769422ae1064e2bf1072778b27fb5ec1973e18c35e2cc1ed5c8d
-  languageName: node
-  linkType: hard
-
 "@types/testing-library__jest-dom@npm:^5.9.1":
   version: 5.14.2
   resolution: "@types/testing-library__jest-dom@npm:5.14.2"
@@ -11627,6 +10100,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/through@npm:*":
+  version: 0.0.33
+  resolution: "@types/through@npm:0.0.33"
+  dependencies:
+    "@types/node": "npm:*"
+  checksum: 10c0/6a8edd7f40cd7e197318e86310a40e568cddd380609dde59b30d5cc6c5f8276ddc698905eac4b3b429eb39f2e8ee326bc20dc6e95a2cdc41c4d3fc9a1ebd4929
+  languageName: node
+  linkType: hard
+
 "@types/tough-cookie@npm:*":
   version: 4.0.2
   resolution: "@types/tough-cookie@npm:4.0.2"
@@ -11634,15 +10116,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/uglify-js@npm:*":
-  version: 3.13.1
-  resolution: "@types/uglify-js@npm:3.13.1"
-  dependencies:
-    source-map: "npm:^0.6.1"
-  checksum: 10c0/a1e21ef98b6eb5d8e4d87a64313d6b7d566367dcd07ae38159bb2b23cd8ca236aaf5b5deabd3c18241b84fe45a72fb8b9bc9cfa1ffb785a6812e6fb013ea216a
-  languageName: node
-  linkType: hard
-
 "@types/unist@npm:*, @types/unist@npm:^3.0.0":
   version: 3.0.3
   resolution: "@types/unist@npm:3.0.3"
@@ -11650,7 +10123,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/unist@npm:^2.0.0, @types/unist@npm:^2.0.2, @types/unist@npm:^2.0.3":
+"@types/unist@npm:^2.0.0, @types/unist@npm:^2.0.2":
   version: 2.0.6
   resolution: "@types/unist@npm:2.0.6"
   checksum: 10c0/8690789328e8e10c487334341fcf879fd49f8987c98ce49849f9871052f95d87477735171bb661e6f551bdb95235e015dfdad1867ca1d9b5b88a053f72ac40eb
@@ -11678,31 +10151,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/webpack-sources@npm:*":
-  version: 3.2.0
-  resolution: "@types/webpack-sources@npm:3.2.0"
-  dependencies:
-    "@types/node": "npm:*"
-    "@types/source-list-map": "npm:*"
-    source-map: "npm:^0.7.3"
-  checksum: 10c0/17716e9f03fa63362f92d510bb9119313bac3a7985321e0fe9326dc30ebe598cb2c85b8c7cdc4f4d34d783c4c45e74e3ec08e209f9c9dab27bf188c3def32706
-  languageName: node
-  linkType: hard
-
-"@types/webpack@npm:^4.41.26, @types/webpack@npm:^4.41.8":
-  version: 4.41.32
-  resolution: "@types/webpack@npm:4.41.32"
-  dependencies:
-    "@types/node": "npm:*"
-    "@types/tapable": "npm:^1"
-    "@types/uglify-js": "npm:*"
-    "@types/webpack-sources": "npm:*"
-    anymatch: "npm:^3.0.0"
-    source-map: "npm:^0.6.0"
-  checksum: 10c0/7ebb64fe22eb436b42a89761b1bd67998769dfe26a6f371ac3733859414cea2f4cc743121f2dce638a280053fbd478747c9c15e8fa22644788cdc002e5a567f8
-  languageName: node
-  linkType: hard
-
 "@types/webxr@npm:*, @types/webxr@npm:^0.5.2":
   version: 0.5.22
   resolution: "@types/webxr@npm:0.5.22"
@@ -11726,15 +10174,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/yargs@npm:^13.0.0":
-  version: 13.0.12
-  resolution: "@types/yargs@npm:13.0.12"
-  dependencies:
-    "@types/yargs-parser": "npm:*"
-  checksum: 10c0/81fdac6832d69f2f2a33bb3d77887f571677d5a9ccfd5a171ff3e76252a6c6a9773850a0df6ba9ed0328433a36596488ec4e2ce5d9bc49d713a59bbfef8e12a0
-  languageName: node
-  linkType: hard
-
 "@types/yargs@npm:^15.0.0":
   version: 15.0.15
   resolution: "@types/yargs@npm:15.0.15"
@@ -11792,17 +10231,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/experimental-utils@npm:5.33.0":
-  version: 5.33.0
-  resolution: "@typescript-eslint/experimental-utils@npm:5.33.0"
-  dependencies:
-    "@typescript-eslint/utils": "npm:5.33.0"
-  peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 10c0/005e25920339b6033b0d5423230590b4bdc3e7ed1b02fe68f61b77fa4928853fa656b262638ff27663908d5696f0b890917d20e21c390706834f123bd913a1a0
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/parser@npm:8.26.1":
   version: 8.26.1
   resolution: "@typescript-eslint/parser@npm:8.26.1"
@@ -11883,16 +10311,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.33.0":
-  version: 5.33.0
-  resolution: "@typescript-eslint/scope-manager@npm:5.33.0"
-  dependencies:
-    "@typescript-eslint/types": "npm:5.33.0"
-    "@typescript-eslint/visitor-keys": "npm:5.33.0"
-  checksum: 10c0/b0e288ac77de8bde7936e6df3a9a5a2810aa39e0babd4c3bbb4e28e2f7cd5be03d383a8e10123098e646ad01a6f2b2edef19406f9ac4edfd8b5fa217ae7cc53d
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/scope-manager@npm:7.18.0":
   version: 7.18.0
   resolution: "@typescript-eslint/scope-manager@npm:7.18.0"
@@ -11982,13 +10400,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.33.0":
-  version: 5.33.0
-  resolution: "@typescript-eslint/types@npm:5.33.0"
-  checksum: 10c0/98fe88429ab1887f097b005c9b04576e379e0e436f5a7f9c934ab52359c6da848ff237ad6737738fdee4591dc19cbf9ac61b95c2f18549a848485611483f6f8c
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/types@npm:7.18.0":
   version: 7.18.0
   resolution: "@typescript-eslint/types@npm:7.18.0"
@@ -12024,24 +10435,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.33.0":
-  version: 5.33.0
-  resolution: "@typescript-eslint/typescript-estree@npm:5.33.0"
-  dependencies:
-    "@typescript-eslint/types": "npm:5.33.0"
-    "@typescript-eslint/visitor-keys": "npm:5.33.0"
-    debug: "npm:^4.3.4"
-    globby: "npm:^11.1.0"
-    is-glob: "npm:^4.0.3"
-    semver: "npm:^7.3.7"
-    tsutils: "npm:^3.21.0"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/c875fe5fed040e3fe76d476976b093f23900fb28cf41fd33ed95d37bf9ab45abda319e6be15cf2f2045e26f68bc7c241408228cdacf1df1d09b75a6152bd7c26
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/typescript-estree@npm:7.18.0":
   version: 7.18.0
   resolution: "@typescript-eslint/typescript-estree@npm:7.18.0"
@@ -12135,22 +10528,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.33.0":
-  version: 5.33.0
-  resolution: "@typescript-eslint/utils@npm:5.33.0"
-  dependencies:
-    "@types/json-schema": "npm:^7.0.9"
-    "@typescript-eslint/scope-manager": "npm:5.33.0"
-    "@typescript-eslint/types": "npm:5.33.0"
-    "@typescript-eslint/typescript-estree": "npm:5.33.0"
-    eslint-scope: "npm:^5.1.1"
-    eslint-utils: "npm:^3.0.0"
-  peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 10c0/8e9d86a69ac6478ee2b66ac299ad10e94fc376ebb45c623c455a04a0886e7e4c3408bc150d177dd0a3feefae5542299a9b1b2a60e0b9012ddbdb7aff098aeb8b
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/utils@npm:8.26.1":
   version: 8.26.1
   resolution: "@typescript-eslint/utils@npm:8.26.1"
@@ -12211,16 +10588,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.33.0":
-  version: 5.33.0
-  resolution: "@typescript-eslint/visitor-keys@npm:5.33.0"
-  dependencies:
-    "@typescript-eslint/types": "npm:5.33.0"
-    eslint-visitor-keys: "npm:^3.3.0"
-  checksum: 10c0/67f66ea35b74797e452d6516bf724614fbf1fc660161a39e30cc9109a423aa77395bab3e0bb8148fb7c4a0cb824963117324d408228fb382b7bc33400461f7e2
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/visitor-keys@npm:7.18.0":
   version: 7.18.0
   resolution: "@typescript-eslint/visitor-keys@npm:7.18.0"
@@ -12271,44 +10638,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ungap/structured-clone@npm:^1.0.0":
+"@ungap/structured-clone@npm:^1.0.0, @ungap/structured-clone@npm:^1.3.0":
   version: 1.3.0
   resolution: "@ungap/structured-clone@npm:1.3.0"
   checksum: 10c0/0fc3097c2540ada1fc340ee56d58d96b5b536a2a0dab6e3ec17d4bfc8c4c86db345f61a375a8185f9da96f01c69678f836a2b57eeaa9e4b8eeafd26428e57b0a
   languageName: node
   linkType: hard
 
-"@urql/core@npm:2.3.6":
-  version: 2.3.6
-  resolution: "@urql/core@npm:2.3.6"
-  dependencies:
-    "@graphql-typed-document-node/core": "npm:^3.1.0"
-    wonka: "npm:^4.0.14"
-  peerDependencies:
-    graphql: ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
-  checksum: 10c0/101ac57a8bd4f6b9747262ed546d236d22aa620585d979832b3d30dccf6a11400e463e72b836d850a7a603404842fca6c39107257f0c456f38605391da8cdab3
-  languageName: node
-  linkType: hard
-
-"@urql/core@npm:>=2.3.1":
-  version: 5.0.6
-  resolution: "@urql/core@npm:5.0.6"
+"@urql/core@npm:^5.0.6, @urql/core@npm:^5.1.2":
+  version: 5.2.0
+  resolution: "@urql/core@npm:5.2.0"
   dependencies:
-    "@0no-co/graphql.web": "npm:^1.0.5"
+    "@0no-co/graphql.web": "npm:^1.0.13"
     wonka: "npm:^6.3.2"
-  checksum: 10c0/126d008e34d5b1bc5118742d92222002c8c2fd357c905e5a3166ab74220854b9de7eb19d416aba2b24d9ff44ed7f90065868f0ac3ce0dc8d2c3369a4c85f0899
+  checksum: 10c0/1893a7417c6e5e3604fc3bd27e8b63b748d1817fb906fa95beba52be103d18e015d20ca740a9be570bca2bd11e98d34f605e108a4d3428678d9a1e3368ab2275
   languageName: node
   linkType: hard
 
-"@urql/exchange-retry@npm:0.3.0":
-  version: 0.3.0
-  resolution: "@urql/exchange-retry@npm:0.3.0"
+"@urql/exchange-retry@npm:^1.3.0":
+  version: 1.3.2
+  resolution: "@urql/exchange-retry@npm:1.3.2"
   dependencies:
-    "@urql/core": "npm:>=2.3.1"
-    wonka: "npm:^4.0.14"
+    "@urql/core": "npm:^5.1.2"
+    wonka: "npm:^6.3.2"
   peerDependencies:
-    graphql: ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
-  checksum: 10c0/6ea0ecbc56de94f228627d06cd084b5d71d605884a68b3f7f03873ac538c290f9500e67938635650edd7f32e53dfa9c4b6e38f5aa8fd48f061b6135c42f3a204
+    "@urql/core": ^5.0.0
+  checksum: 10c0/3d7e9879aef81714ca04c8b4dc1633d61b2090f5a6d5b8aac538633d41c26e8749e18bf66bed2936b209d038b3acdd21f20bc5ec4229a449b5a0b13d5694effe
   languageName: node
   linkType: hard
 
@@ -12330,19 +10685,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-react@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "@vitejs/plugin-react@npm:5.0.0"
+"@vitejs/plugin-react@npm:^5.1.2":
+  version: 5.1.4
+  resolution: "@vitejs/plugin-react@npm:5.1.4"
   dependencies:
-    "@babel/core": "npm:^7.28.0"
+    "@babel/core": "npm:^7.29.0"
     "@babel/plugin-transform-react-jsx-self": "npm:^7.27.1"
     "@babel/plugin-transform-react-jsx-source": "npm:^7.27.1"
-    "@rolldown/pluginutils": "npm:1.0.0-beta.30"
+    "@rolldown/pluginutils": "npm:1.0.0-rc.3"
     "@types/babel__core": "npm:^7.20.5"
-    react-refresh: "npm:^0.17.0"
+    react-refresh: "npm:^0.18.0"
   peerDependencies:
     vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
-  checksum: 10c0/e5813839d319ab5dc1b90cab40b6c08388f26e456166ba9df10ffc3c3f4ecc594cec06715b5c93390bba56140ca5f68a18f2233f7d275d77e5bbfeb979e4fd9b
+  checksum: 10c0/dd7b8f40717ecd4a5ab18f467134ea8135f9a443359333d71e4114aeacfc8b679be9fd36dc12290d076c78883a02e708bfe1f0d93411c06c9659da0879b952e3
   languageName: node
   linkType: hard
 
@@ -12546,60 +10901,60 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-core@npm:3.5.30":
-  version: 3.5.30
-  resolution: "@vue/compiler-core@npm:3.5.30"
+"@vue/compiler-core@npm:3.4.26":
+  version: 3.4.26
+  resolution: "@vue/compiler-core@npm:3.4.26"
   dependencies:
-    "@babel/parser": "npm:^7.29.0"
-    "@vue/shared": "npm:3.5.30"
-    entities: "npm:^7.0.1"
+    "@babel/parser": "npm:^7.24.4"
+    "@vue/shared": "npm:3.4.26"
+    entities: "npm:^4.5.0"
     estree-walker: "npm:^2.0.2"
-    source-map-js: "npm:^1.2.1"
-  checksum: 10c0/12dec8f8ef07665c7a97ba0606eab44989037762655b4e5f6b6cb87521ee2bf556d6efa9bbad4abd666078de30205f92181ffc9e4cc0f44fe620f3db9e016eea
+    source-map-js: "npm:^1.2.0"
+  checksum: 10c0/3591fda1b07e929b2b83eaaee67c21075d0c7676ecb8d65c9d800d0b2db5afcf1c44a98fd7ac3d00c737de5462a74fe6788672f739a998769244dfb319bacaae
   languageName: node
   linkType: hard
 
-"@vue/compiler-dom@npm:3.5.30":
-  version: 3.5.30
-  resolution: "@vue/compiler-dom@npm:3.5.30"
+"@vue/compiler-dom@npm:3.4.26":
+  version: 3.4.26
+  resolution: "@vue/compiler-dom@npm:3.4.26"
   dependencies:
-    "@vue/compiler-core": "npm:3.5.30"
-    "@vue/shared": "npm:3.5.30"
-  checksum: 10c0/c623eaba8c45cf4ef551945e4c25424a9565649d6bb88c11ee7dd64ee0b8f0d28ead56069d52c76de3ff2d579927f2ce79335092b485bfae03032c89395afaf1
+    "@vue/compiler-core": "npm:3.4.26"
+    "@vue/shared": "npm:3.4.26"
+  checksum: 10c0/3b39c5586ba0029ccef8cd6d7f7b98e1522ca8f52edba056bc46a8ec27764a6fdec2619bbe089484586cf440c07249631c9c18efe91633306cf0047f4d76d72f
   languageName: node
   linkType: hard
 
 "@vue/compiler-sfc@npm:^3.3.4":
-  version: 3.5.30
-  resolution: "@vue/compiler-sfc@npm:3.5.30"
-  dependencies:
-    "@babel/parser": "npm:^7.29.0"
-    "@vue/compiler-core": "npm:3.5.30"
-    "@vue/compiler-dom": "npm:3.5.30"
-    "@vue/compiler-ssr": "npm:3.5.30"
-    "@vue/shared": "npm:3.5.30"
+  version: 3.4.26
+  resolution: "@vue/compiler-sfc@npm:3.4.26"
+  dependencies:
+    "@babel/parser": "npm:^7.24.4"
+    "@vue/compiler-core": "npm:3.4.26"
+    "@vue/compiler-dom": "npm:3.4.26"
+    "@vue/compiler-ssr": "npm:3.4.26"
+    "@vue/shared": "npm:3.4.26"
     estree-walker: "npm:^2.0.2"
-    magic-string: "npm:^0.30.21"
-    postcss: "npm:^8.5.8"
-    source-map-js: "npm:^1.2.1"
-  checksum: 10c0/0ee774f236bea57e2af28047f55f172991625fe70c81cb09768068052a36221952832f14f7169b290400e29baecd87c35d33794320dc093f430a4f66cd0139f2
+    magic-string: "npm:^0.30.10"
+    postcss: "npm:^8.4.38"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10c0/1a00f293c5465e23d7915c3a8a98c4d97479e167b00638c5985c2fb7539762affc90d258230f95ee705989ad9a04b001af146b905143a42b52bc5b84a36e9360
   languageName: node
   linkType: hard
 
-"@vue/compiler-ssr@npm:3.5.30":
-  version: 3.5.30
-  resolution: "@vue/compiler-ssr@npm:3.5.30"
+"@vue/compiler-ssr@npm:3.4.26":
+  version: 3.4.26
+  resolution: "@vue/compiler-ssr@npm:3.4.26"
   dependencies:
-    "@vue/compiler-dom": "npm:3.5.30"
-    "@vue/shared": "npm:3.5.30"
-  checksum: 10c0/2c87fa1bd3ba5002559fa2e55d5a83e6702945c03ad92e881e6f0a2d03ee0b8b59020fb4effc38cf9e5ac1524e4ace83f5f779626d54280826bf695e75ad993d
+    "@vue/compiler-dom": "npm:3.4.26"
+    "@vue/shared": "npm:3.4.26"
+  checksum: 10c0/ba2844604060743b431ef77652c1d2624689835c08a6dd5e348172efc537ee278b16660b4100a3b88e990c6e10f290d8c878965b7701f3cf5796d849f7a411a5
   languageName: node
   linkType: hard
 
-"@vue/shared@npm:3.5.30":
-  version: 3.5.30
-  resolution: "@vue/shared@npm:3.5.30"
-  checksum: 10c0/d4fbef44001a9f0e4c07c8a25c2cd0075877579e1c6cc4241c6c0dfc77209bbca592d67c0b581073d648dbbb6659a993c484c899d6070bccee91d0acafc8fa24
+"@vue/shared@npm:3.4.26":
+  version: 3.4.26
+  resolution: "@vue/shared@npm:3.4.26"
+  checksum: 10c0/8b002badc842d94b47cf78630ca51403a8a8981bc20c35f5b669c299413f81ed5fd97dbd763d0c00fe4614c615991214bc06d709d0b57d1e5836d0262cfbebdb
   languageName: node
   linkType: hard
 
@@ -12613,17 +10968,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webassemblyjs/ast@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/ast@npm:1.9.0"
-  dependencies:
-    "@webassemblyjs/helper-module-context": "npm:1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode": "npm:1.9.0"
-    "@webassemblyjs/wast-parser": "npm:1.9.0"
-  checksum: 10c0/8246c714346cdcd3ab204a2b09904d9d36c4f7da8f30cc217b0b7272a3ef57a3c21e95d51b26601641133fb66fea5cc46c357cf897808512f13b3d1c2efe88e4
-  languageName: node
-  linkType: hard
-
 "@webassemblyjs/floating-point-hex-parser@npm:1.13.2":
   version: 1.13.2
   resolution: "@webassemblyjs/floating-point-hex-parser@npm:1.13.2"
@@ -12631,13 +10975,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webassemblyjs/floating-point-hex-parser@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/floating-point-hex-parser@npm:1.9.0"
-  checksum: 10c0/17acfdfe6650691ae8d0279e6ff4fb8b5efce64e12f3fa18c6a7d279968cc72eb21c0db7ebb5be9d627d05fa7014cef087843d999de96c917079f57d7dac8f77
-  languageName: node
-  linkType: hard
-
 "@webassemblyjs/helper-api-error@npm:1.13.2":
   version: 1.13.2
   resolution: "@webassemblyjs/helper-api-error@npm:1.13.2"
@@ -12645,13 +10982,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webassemblyjs/helper-api-error@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/helper-api-error@npm:1.9.0"
-  checksum: 10c0/892851b25cf4b4b307490328f45858414326dac667ca15244b5e959fa6e22478b29dabeb581d49ef8a2874e291d0417a3a959be70428c39cd40870e73b394dbc
-  languageName: node
-  linkType: hard
-
 "@webassemblyjs/helper-buffer@npm:1.14.1":
   version: 1.14.1
   resolution: "@webassemblyjs/helper-buffer@npm:1.14.1"
@@ -12659,38 +10989,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webassemblyjs/helper-buffer@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/helper-buffer@npm:1.9.0"
-  checksum: 10c0/b09a3e27d9127ccaab095bd171336e7675bb5b832e05b701ff174a853b763154a49f5382c4c3f2f1cc746b1cff3f2025452145cf807ddf788133bcccf5920ca8
-  languageName: node
-  linkType: hard
-
-"@webassemblyjs/helper-code-frame@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/helper-code-frame@npm:1.9.0"
-  dependencies:
-    "@webassemblyjs/wast-printer": "npm:1.9.0"
-  checksum: 10c0/010969a6c8b016680a9b1383ff4b8147c363608dd1e29602154e5460954af4fd48daed518a76b232ca43935d4b6bebf54fba38da56f809e2bd12f063d84013ec
-  languageName: node
-  linkType: hard
-
-"@webassemblyjs/helper-fsm@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/helper-fsm@npm:1.9.0"
-  checksum: 10c0/ef0c99b58716d757a1a41f99fb46578d3f07d97b60cd51deaeffdf0aad09ec47f5093ee8d098d12324d57f8812609704c377fccfe9a32d02c0a658a4a33dce94
-  languageName: node
-  linkType: hard
-
-"@webassemblyjs/helper-module-context@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/helper-module-context@npm:1.9.0"
-  dependencies:
-    "@webassemblyjs/ast": "npm:1.9.0"
-  checksum: 10c0/130a9ac1141770b9f70ad568ec2dc769e92c756f91b06ece9cda2c2a5e80e21ec9c8c2a945a5839bf379e52fa921ae134245a7492e1b9ae0e8c557bb9b4953c3
-  languageName: node
-  linkType: hard
-
 "@webassemblyjs/helper-numbers@npm:1.13.2":
   version: 1.13.2
   resolution: "@webassemblyjs/helper-numbers@npm:1.13.2"
@@ -12709,13 +11007,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webassemblyjs/helper-wasm-bytecode@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/helper-wasm-bytecode@npm:1.9.0"
-  checksum: 10c0/1741993e1c723f56b619a4981ec975f903886aa3f1f50c7bdb2eaa45ca4ad8d023d6ae7413ef643f060567b1f12a9dcfad6c43688879c46ee4f0b53aa71cd5c9
-  languageName: node
-  linkType: hard
-
 "@webassemblyjs/helper-wasm-section@npm:1.14.1":
   version: 1.14.1
   resolution: "@webassemblyjs/helper-wasm-section@npm:1.14.1"
@@ -12728,18 +11019,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webassemblyjs/helper-wasm-section@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/helper-wasm-section@npm:1.9.0"
-  dependencies:
-    "@webassemblyjs/ast": "npm:1.9.0"
-    "@webassemblyjs/helper-buffer": "npm:1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode": "npm:1.9.0"
-    "@webassemblyjs/wasm-gen": "npm:1.9.0"
-  checksum: 10c0/2a5baa7749c50a4a428f372ab88b7e52956b48798d44e7291b4aa8558b247337dba791112ce8a4f5b2281e1b9014e6d44d0141476a5fcde6016fac2e009671e8
-  languageName: node
-  linkType: hard
-
 "@webassemblyjs/ieee754@npm:1.13.2":
   version: 1.13.2
   resolution: "@webassemblyjs/ieee754@npm:1.13.2"
@@ -12749,15 +11028,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webassemblyjs/ieee754@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/ieee754@npm:1.9.0"
-  dependencies:
-    "@xtuc/ieee754": "npm:^1.2.0"
-  checksum: 10c0/0eff34ec7048400b30282ab9af6ad19d2852dab2f5ffaec8bdc697b8380bc2c9dbe6cadf65f49e68242c82ee3caa8aa6e46c89dbfdab37615189b4da2eab3819
-  languageName: node
-  linkType: hard
-
 "@webassemblyjs/leb128@npm:1.13.2":
   version: 1.13.2
   resolution: "@webassemblyjs/leb128@npm:1.13.2"
@@ -12767,15 +11037,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webassemblyjs/leb128@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/leb128@npm:1.9.0"
-  dependencies:
-    "@xtuc/long": "npm:4.2.2"
-  checksum: 10c0/441be8634733b33b710f44d4394552d6290bb1a0a8311b384b1865b58c3549d0ddeaf1c3985bbee024a8df12c597be3580fc1cde2ae003dcbf26762b493a7a2f
-  languageName: node
-  linkType: hard
-
 "@webassemblyjs/utf8@npm:1.13.2":
   version: 1.13.2
   resolution: "@webassemblyjs/utf8@npm:1.13.2"
@@ -12783,29 +11044,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webassemblyjs/utf8@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/utf8@npm:1.9.0"
-  checksum: 10c0/9566689a1bcf555d6b79d0da79e24ff2be23c0395e5a19ed3c2ceca7831e50b867e0b1c66b3ff1b1d7f297b2d2414314967a884a77634ad0acff8a78489e2b19
-  languageName: node
-  linkType: hard
-
-"@webassemblyjs/wasm-edit@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/wasm-edit@npm:1.9.0"
-  dependencies:
-    "@webassemblyjs/ast": "npm:1.9.0"
-    "@webassemblyjs/helper-buffer": "npm:1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode": "npm:1.9.0"
-    "@webassemblyjs/helper-wasm-section": "npm:1.9.0"
-    "@webassemblyjs/wasm-gen": "npm:1.9.0"
-    "@webassemblyjs/wasm-opt": "npm:1.9.0"
-    "@webassemblyjs/wasm-parser": "npm:1.9.0"
-    "@webassemblyjs/wast-printer": "npm:1.9.0"
-  checksum: 10c0/07f4cb4a73989622c524f9264b6afe664d33354f081499f04db675aed2b79498bd43600c3d7bebcb9f93ccce6a094b3c28f3f7b11ea62e9e82074c2ae68dc058
-  languageName: node
-  linkType: hard
-
 "@webassemblyjs/wasm-edit@npm:^1.14.1":
   version: 1.14.1
   resolution: "@webassemblyjs/wasm-edit@npm:1.14.1"
@@ -12835,19 +11073,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webassemblyjs/wasm-gen@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/wasm-gen@npm:1.9.0"
-  dependencies:
-    "@webassemblyjs/ast": "npm:1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode": "npm:1.9.0"
-    "@webassemblyjs/ieee754": "npm:1.9.0"
-    "@webassemblyjs/leb128": "npm:1.9.0"
-    "@webassemblyjs/utf8": "npm:1.9.0"
-  checksum: 10c0/876826bef91f3af9e48118fb269c348871d5b6f019e071065556da56a3a5818630b00133e07c9dd2cc767e7f2c70934f3ed0060330ce3e37910e9c9df25f1600
-  languageName: node
-  linkType: hard
-
 "@webassemblyjs/wasm-opt@npm:1.14.1":
   version: 1.14.1
   resolution: "@webassemblyjs/wasm-opt@npm:1.14.1"
@@ -12860,18 +11085,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webassemblyjs/wasm-opt@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/wasm-opt@npm:1.9.0"
-  dependencies:
-    "@webassemblyjs/ast": "npm:1.9.0"
-    "@webassemblyjs/helper-buffer": "npm:1.9.0"
-    "@webassemblyjs/wasm-gen": "npm:1.9.0"
-    "@webassemblyjs/wasm-parser": "npm:1.9.0"
-  checksum: 10c0/3d5558e078b660cd9777950f2df60f005f3cbdbcfa6c8c19dc0cf012f44f5bfa97c991d7ac26b3e78596bad0538e92dd00b5db4b51ebc373da8e329a03639190
-  languageName: node
-  linkType: hard
-
 "@webassemblyjs/wasm-parser@npm:1.14.1, @webassemblyjs/wasm-parser@npm:^1.14.1":
   version: 1.14.1
   resolution: "@webassemblyjs/wasm-parser@npm:1.14.1"
@@ -12886,34 +11099,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webassemblyjs/wasm-parser@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/wasm-parser@npm:1.9.0"
-  dependencies:
-    "@webassemblyjs/ast": "npm:1.9.0"
-    "@webassemblyjs/helper-api-error": "npm:1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode": "npm:1.9.0"
-    "@webassemblyjs/ieee754": "npm:1.9.0"
-    "@webassemblyjs/leb128": "npm:1.9.0"
-    "@webassemblyjs/utf8": "npm:1.9.0"
-  checksum: 10c0/1e8615b9f9c3c431c9635c9a9884bca89eff1ab2383ad849341c23e09899454482a8f8813d33bf86ee1b0acc97c7c83926961a9b34d4804fa5d559610ab0a4a2
-  languageName: node
-  linkType: hard
-
-"@webassemblyjs/wast-parser@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/wast-parser@npm:1.9.0"
-  dependencies:
-    "@webassemblyjs/ast": "npm:1.9.0"
-    "@webassemblyjs/floating-point-hex-parser": "npm:1.9.0"
-    "@webassemblyjs/helper-api-error": "npm:1.9.0"
-    "@webassemblyjs/helper-code-frame": "npm:1.9.0"
-    "@webassemblyjs/helper-fsm": "npm:1.9.0"
-    "@xtuc/long": "npm:4.2.2"
-  checksum: 10c0/c79952466fdf7816be527b1db102952b777b12318eabb5c40df074cd8361e3a7b0179a985534fa8b5a7b93668b07ba46875ffeb5da03ca5177c80ba960ebdffc
-  languageName: node
-  linkType: hard
-
 "@webassemblyjs/wast-printer@npm:1.14.1":
   version: 1.14.1
   resolution: "@webassemblyjs/wast-printer@npm:1.14.1"
@@ -12924,17 +11109,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webassemblyjs/wast-printer@npm:1.9.0":
-  version: 1.9.0
-  resolution: "@webassemblyjs/wast-printer@npm:1.9.0"
-  dependencies:
-    "@webassemblyjs/ast": "npm:1.9.0"
-    "@webassemblyjs/wast-parser": "npm:1.9.0"
-    "@xtuc/long": "npm:4.2.2"
-  checksum: 10c0/f3d106aa884cbb7687307db7adeb3b98abff9de81b9ba8c1065267340b5e9de64ffc533044ab916b1f4ce8a67fb03efa54b29b61c8e908abe4c07edf82f614cd
-  languageName: node
-  linkType: hard
-
 "@webgpu/types@npm:*":
   version: 0.1.63
   resolution: "@webgpu/types@npm:0.1.63"
@@ -12982,13 +11156,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@xmldom/xmldom@npm:^0.7.2, @xmldom/xmldom@npm:~0.7.7":
+"@xmldom/xmldom@npm:^0.7.2":
   version: 0.7.10
   resolution: "@xmldom/xmldom@npm:0.7.10"
   checksum: 10c0/034e8b800e3b38c7bb3e02126603a5cdc266503ffb32ffbfc43cae9aa5f484d9518f013f414fce393da78d805764e14c739e05d239d554913ffccbdec4c7b8bc
   languageName: node
   linkType: hard
 
+"@xmldom/xmldom@npm:^0.8.8":
+  version: 0.8.11
+  resolution: "@xmldom/xmldom@npm:0.8.11"
+  checksum: 10c0/e768623de72c95d3dae6b5da8e33dda0d81665047811b5498d23a328d45b13feb5536fe921d0308b96a4a8dd8addf80b1f6ef466508051c0b581e63e0dc74ed5
+  languageName: node
+  linkType: hard
+
 "@xstate/react@npm:^1.5.1":
   version: 1.6.3
   resolution: "@xstate/react@npm:1.6.3"
@@ -13089,7 +11270,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"accepts@npm:^1.3.7, accepts@npm:^1.3.8, accepts@npm:~1.3.4, accepts@npm:~1.3.5, accepts@npm:~1.3.7, accepts@npm:~1.3.8":
+"accepts@npm:^1.3.7, accepts@npm:^1.3.8, accepts@npm:~1.3.4, accepts@npm:~1.3.5, accepts@npm:~1.3.8":
   version: 1.3.8
   resolution: "accepts@npm:1.3.8"
   dependencies:
@@ -13146,7 +11327,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-jsx@npm:^5.0.0, acorn-jsx@npm:^5.0.1, acorn-jsx@npm:^5.3.1, acorn-jsx@npm:^5.3.2":
+"acorn-jsx@npm:^5.0.0, acorn-jsx@npm:^5.0.1, acorn-jsx@npm:^5.3.2":
   version: 5.3.2
   resolution: "acorn-jsx@npm:5.3.2"
   peerDependencies:
@@ -13155,7 +11336,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-walk@npm:^7.1.1, acorn-walk@npm:^7.2.0":
+"acorn-walk@npm:^7.1.1":
   version: 7.2.0
   resolution: "acorn-walk@npm:7.2.0"
   checksum: 10c0/ff99f3406ed8826f7d6ef6ac76b7608f099d45a1ff53229fa267125da1924188dbacf02e7903dfcfd2ae4af46f7be8847dc7d564c73c4e230dfb69c8ea8e6b4c
@@ -13169,7 +11350,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^6.1.1, acorn@npm:^6.4.1":
+"acorn@npm:^6.1.1":
   version: 6.4.2
   resolution: "acorn@npm:6.4.2"
   bin:
@@ -13178,7 +11359,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^7.1.1, acorn@npm:^7.4.1":
+"acorn@npm:^7.1.1":
   version: 7.4.1
   resolution: "acorn@npm:7.4.1"
   bin:
@@ -13187,7 +11368,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.0, acorn@npm:^8.0.4, acorn@npm:^8.14.0, acorn@npm:^8.15.0, acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2":
+"acorn@npm:^8.0.0, acorn@npm:^8.0.4, acorn@npm:^8.14.0, acorn@npm:^8.15.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2":
   version: 8.15.0
   resolution: "acorn@npm:8.15.0"
   bin:
@@ -13240,40 +11421,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"airbnb-js-shims@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "airbnb-js-shims@npm:2.2.1"
-  dependencies:
-    array-includes: "npm:^3.0.3"
-    array.prototype.flat: "npm:^1.2.1"
-    array.prototype.flatmap: "npm:^1.2.1"
-    es5-shim: "npm:^4.5.13"
-    es6-shim: "npm:^0.35.5"
-    function.prototype.name: "npm:^1.1.0"
-    globalthis: "npm:^1.0.0"
-    object.entries: "npm:^1.1.0"
-    object.fromentries: "npm:^2.0.0 || ^1.0.0"
-    object.getownpropertydescriptors: "npm:^2.0.3"
-    object.values: "npm:^1.1.0"
-    promise.allsettled: "npm:^1.0.0"
-    promise.prototype.finally: "npm:^3.1.0"
-    string.prototype.matchall: "npm:^4.0.0 || ^3.0.1"
-    string.prototype.padend: "npm:^3.0.0"
-    string.prototype.padstart: "npm:^3.0.0"
-    symbol.prototype.description: "npm:^1.0.0"
-  checksum: 10c0/55fdeb2673da440772d278816664b8e8da946b57adfd95b6635bc980ad235e388266c1488fdff3a055e95dc1c789e389821598b2711b59ce76ab4500f528216c
-  languageName: node
-  linkType: hard
-
-"ajv-errors@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "ajv-errors@npm:1.0.1"
-  peerDependencies:
-    ajv: ">=5.0.0"
-  checksum: 10c0/de2d6e8100c8707ea063ee4785d53adf599b457c0d4f72c3592244d67ad16448a6d35f7ce45f12bdd2819939447c876e8ef2f1c0800896d7f2aa25c3838acdf1
-  languageName: node
-  linkType: hard
-
 "ajv-formats@npm:^2.1.1":
   version: 2.1.1
   resolution: "ajv-formats@npm:2.1.1"
@@ -13288,7 +11435,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv-keywords@npm:^3.1.0, ajv-keywords@npm:^3.4.1, ajv-keywords@npm:^3.5.2":
+"ajv-keywords@npm:^3.4.1, ajv-keywords@npm:^3.5.2":
   version: 3.5.2
   resolution: "ajv-keywords@npm:3.5.2"
   peerDependencies:
@@ -13308,19 +11455,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:8.11.0":
-  version: 8.11.0
-  resolution: "ajv@npm:8.11.0"
-  dependencies:
-    fast-deep-equal: "npm:^3.1.1"
-    json-schema-traverse: "npm:^1.0.0"
-    require-from-string: "npm:^2.0.2"
-    uri-js: "npm:^4.2.2"
-  checksum: 10c0/8a4b1b639a53d52169b94dd1cdd03716fe7bbc1fc676006957ba82497e764f4bd44b92f75e37c8804ea3176ee3c224322e22779d071fb01cd89aefaaa42c9414
-  languageName: node
-  linkType: hard
-
-"ajv@npm:^6.1.0, ajv@npm:^6.10.2, ajv@npm:^6.12.2, ajv@npm:^6.12.4, ajv@npm:^6.12.5, ajv@npm:^6.12.6, ajv@npm:^6.14.0":
+"ajv@npm:^6.12.2, ajv@npm:^6.12.4, ajv@npm:^6.12.5, ajv@npm:^6.12.6, ajv@npm:^6.14.0":
   version: 6.14.0
   resolution: "ajv@npm:6.14.0"
   dependencies:
@@ -13332,7 +11467,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.11.0, ajv@npm:^8.6.2, ajv@npm:^8.6.3, ajv@npm:^8.9.0":
+"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.11.0, ajv@npm:^8.6.2, ajv@npm:^8.9.0":
   version: 8.18.0
   resolution: "ajv@npm:8.18.0"
   dependencies:
@@ -13393,13 +11528,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-colors@npm:^3.0.0":
-  version: 3.2.4
-  resolution: "ansi-colors@npm:3.2.4"
-  checksum: 10c0/1785466547bac3b1cb8055325a415c8c946a818669da4fd3d1247cab7617b845b221c2ae04756277074d278b52d90efd67f73d2dd927c7a0d1a10395c1b7665b
-  languageName: node
-  linkType: hard
-
 "ansi-colors@npm:^4.1.1":
   version: 4.1.1
   resolution: "ansi-colors@npm:4.1.1"
@@ -13416,18 +11544,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-fragments@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "ansi-fragments@npm:0.2.1"
-  dependencies:
-    colorette: "npm:^1.0.7"
-    slice-ansi: "npm:^2.0.0"
-    strip-ansi: "npm:^5.0.0"
-  checksum: 10c0/44e97e558ca2f0b2ca895bfd6ebebeb2e77d674d2e4198ac2d3a05b690193fa35fd185db6e16b92dd0ee854299ea8b4387a99e4155ea62bc8ad4c42154542fd4
-  languageName: node
-  linkType: hard
-
-"ansi-html-community@npm:0.0.8, ansi-html-community@npm:^0.0.8":
+"ansi-html-community@npm:^0.0.8":
   version: 0.0.8
   resolution: "ansi-html-community@npm:0.0.8"
   bin:
@@ -13436,14 +11553,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-regex@npm:^2.0.0":
-  version: 2.1.1
-  resolution: "ansi-regex@npm:2.1.1"
-  checksum: 10c0/78cebaf50bce2cb96341a7230adf28d804611da3ce6bf338efa7b72f06cc6ff648e29f80cd95e582617ba58d5fdbec38abfeed3500a98bce8381a9daec7c548b
-  languageName: node
-  linkType: hard
-
-"ansi-regex@npm:^4.0.0, ansi-regex@npm:^4.1.0":
+"ansi-regex@npm:^4.1.0":
   version: 4.1.1
   resolution: "ansi-regex@npm:4.1.1"
   checksum: 10c0/d36d34234d077e8770169d980fed7b2f3724bfa2a01da150ccd75ef9707c80e883d27cdf7a0eac2f145ac1d10a785a8a855cffd05b85f778629a0db62e7033da
@@ -13464,7 +11574,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^3.2.0, ansi-styles@npm:^3.2.1":
+"ansi-styles@npm:^3.2.1":
   version: 3.2.1
   resolution: "ansi-styles@npm:3.2.1"
   dependencies:
@@ -13482,7 +11592,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^5.0.0":
+"ansi-styles@npm:^5.0.0, ansi-styles@npm:^5.2.0":
   version: 5.2.0
   resolution: "ansi-styles@npm:5.2.0"
   checksum: 10c0/9c4ca80eb3c2fb7b33841c210d2f20807f40865d27008d7c3f707b7f95cab7d67462a565e2388ac3285b71cb3d9bb2173de8da37c57692a362885ec34d6e27df
@@ -13496,17 +11606,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-to-html@npm:^0.6.11":
-  version: 0.6.15
-  resolution: "ansi-to-html@npm:0.6.15"
-  dependencies:
-    entities: "npm:^2.0.0"
-  bin:
-    ansi-to-html: ./bin/ansi-to-html
-  checksum: 10c0/50fa836c3bec74b5f3d8ea630a86cad972e6463203be30171ed65073afa5f3e70946de2d0e129eb5cab391b489e99972aab3aa4fded3da45c4bd7c265bfae6f5
-  languageName: node
-  linkType: hard
-
 "any-promise@npm:^1.0.0":
   version: 1.3.0
   resolution: "any-promise@npm:1.3.0"
@@ -13514,17 +11613,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"anymatch@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "anymatch@npm:2.0.0"
-  dependencies:
-    micromatch: "npm:^3.1.4"
-    normalize-path: "npm:^2.1.1"
-  checksum: 10c0/a0d745e52f0233048724b9c9d7b1d8a650f7a50151a0f1d2cce1857b09fd096052d334f8c570cc88596edef8249ae778f767db94025cd00f81e154a37bb7e34e
-  languageName: node
-  linkType: hard
-
-"anymatch@npm:^3.0.0, anymatch@npm:^3.0.3, anymatch@npm:~3.1.2":
+"anymatch@npm:^3.0.3, anymatch@npm:~3.1.2":
   version: 3.1.2
   resolution: "anymatch@npm:3.1.2"
   dependencies:
@@ -13534,27 +11623,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"app-root-dir@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "app-root-dir@npm:1.0.2"
-  checksum: 10c0/0225e4be7788968a82bb76df9b14b0d7f212a5c12e8c625cdc34f80548780bcbfc5f3287d0806dddd83bf9dbf9ce302e76b2887cd3a6f4be52b79df7f3aa9e7c
-  languageName: node
-  linkType: hard
-
-"appdirsjs@npm:^1.2.4":
-  version: 1.2.6
-  resolution: "appdirsjs@npm:1.2.6"
-  checksum: 10c0/2dc087819a8acd747d08c3649af44af3d2ec1b4e67ed80779c3a7c58eecb1dc8625e0b8466cc6052ab4df1ac39c1e3bed5a50d2a0a85f4142d343343af1e13d0
-  languageName: node
-  linkType: hard
-
-"application-config-path@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "application-config-path@npm:0.1.1"
-  checksum: 10c0/32afb4d6fd66596119d37bc697353a29e0496ffcceddc60abfc954dbd063d45e4b9875b05ad413d8b0ab05e800bcb0decfb32c8c22fd1e55b5c9fba8936f0e86
-  languageName: node
-  linkType: hard
-
 "aproba@npm:^1.0.3 || ^2.0.0":
   version: 2.0.0
   resolution: "aproba@npm:2.0.0"
@@ -13562,23 +11630,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aproba@npm:^1.1.1":
-  version: 1.2.0
-  resolution: "aproba@npm:1.2.0"
-  checksum: 10c0/2d34f008c9edfa991f42fe4b667d541d38a474a39ae0e24805350486d76744cd91ee45313283c1d39a055b14026dd0fc4d0cbfc13f210855d59d7e8b5a61dc51
-  languageName: node
-  linkType: hard
-
-"are-we-there-yet@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "are-we-there-yet@npm:2.0.0"
-  dependencies:
-    delegates: "npm:^1.0.0"
-    readable-stream: "npm:^3.6.0"
-  checksum: 10c0/375f753c10329153c8d66dc95e8f8b6c7cc2aa66e05cb0960bd69092b10dae22900cacc7d653ad11d26b3ecbdbfe1e8bfb6ccf0265ba8077a7d979970f16b99c
-  languageName: node
-  linkType: hard
-
 "are-we-there-yet@npm:^3.0.0":
   version: 3.0.0
   resolution: "are-we-there-yet@npm:3.0.0"
@@ -13589,7 +11640,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arg@npm:5.0.2, arg@npm:^5.0.0":
+"arg@npm:^5.0.0, arg@npm:^5.0.2":
   version: 5.0.2
   resolution: "arg@npm:5.0.2"
   checksum: 10c0/ccaf86f4e05d342af6666c569f844bec426595c567d32a8289715087825c2ca7edd8a3d204e4d2fb2aa4602e09a57d0c13ea8c9eea75aac3dbb4af5514e6800e
@@ -13638,27 +11689,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arr-diff@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "arr-diff@npm:4.0.0"
-  checksum: 10c0/67b80067137f70c89953b95f5c6279ad379c3ee39f7143578e13bd51580a40066ee2a55da066e22d498dce10f68c2d70056d7823f972fab99dfbf4c78d0bc0f7
-  languageName: node
-  linkType: hard
-
-"arr-flatten@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "arr-flatten@npm:1.1.0"
-  checksum: 10c0/bef53be02ed3bc58f202b3861a5b1eb6e1ae4fecf39c3ad4d15b1e0433f941077d16e019a33312d820844b0661777322acbb7d0c447b04d9bdf7d6f9c532548a
-  languageName: node
-  linkType: hard
-
-"arr-union@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "arr-union@npm:3.1.0"
-  checksum: 10c0/7d5aa05894e54aa93c77c5726c1dd5d8e8d3afe4f77983c0aa8a14a8a5cbe8b18f0cf4ecaa4ac8c908ef5f744d2cbbdaa83fd6e96724d15fea56cfa7f5efdd51
-  languageName: node
-  linkType: hard
-
 "array-buffer-byte-length@npm:^1.0.0, array-buffer-byte-length@npm:^1.0.1, array-buffer-byte-length@npm:^1.0.2":
   version: 1.0.2
   resolution: "array-buffer-byte-length@npm:1.0.2"
@@ -13676,13 +11706,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-find-index@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "array-find-index@npm:1.0.2"
-  checksum: 10c0/86b9485c74ddd324feab807e10a6de3f9c1683856267236fac4bb4d4667ada6463e106db3f6c540ae6b720e0442b590ec701d13676df4c6af30ebf4da09b4f57
-  languageName: node
-  linkType: hard
-
 "array-flatten@npm:1.1.1":
   version: 1.1.1
   resolution: "array-flatten@npm:1.1.1"
@@ -13690,7 +11713,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-includes@npm:^3.0.3, array-includes@npm:^3.1.6, array-includes@npm:^3.1.8":
+"array-includes@npm:^3.1.6, array-includes@npm:^3.1.8":
   version: 3.1.8
   resolution: "array-includes@npm:3.1.8"
   dependencies:
@@ -13704,15 +11727,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-union@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "array-union@npm:1.0.2"
-  dependencies:
-    array-uniq: "npm:^1.0.1"
-  checksum: 10c0/18686767c0cfdae8dc4acf5ac119b0f0eacad82b7fcc0aa62cc41f93c5ad406d494b6a6e53d85e52e8f0349b67a4fec815feeb537e95c02510d747bc9a4157c7
-  languageName: node
-  linkType: hard
-
 "array-union@npm:^2.1.0":
   version: 2.1.0
   resolution: "array-union@npm:2.1.0"
@@ -13727,20 +11741,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-uniq@npm:^1.0.1":
-  version: 1.0.3
-  resolution: "array-uniq@npm:1.0.3"
-  checksum: 10c0/3acbaf9e6d5faeb1010e2db04ab171b8d265889e46c61762e502979bdc5e55656013726e9a61507de3c82d329a0dc1e8072630a3454b4f2b881cb19ba7fd8aa6
-  languageName: node
-  linkType: hard
-
-"array-unique@npm:^0.3.2":
-  version: 0.3.2
-  resolution: "array-unique@npm:0.3.2"
-  checksum: 10c0/dbf4462cdba8a4b85577be07705210b3d35be4b765822a3f52962d907186617638ce15e0603a4fefdcf82f4cbbc9d433f8cbbd6855148a68872fa041b6474121
-  languageName: node
-  linkType: hard
-
 "array.prototype.findlast@npm:^1.2.5":
   version: 1.2.5
   resolution: "array.prototype.findlast@npm:1.2.5"
@@ -13769,7 +11769,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.flat@npm:^1.2.1, array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.2":
+"array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.2":
   version: 1.3.2
   resolution: "array.prototype.flat@npm:1.3.2"
   dependencies:
@@ -13781,7 +11781,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.flatmap@npm:^1.2.1, array.prototype.flatmap@npm:^1.3.2, array.prototype.flatmap@npm:^1.3.3":
+"array.prototype.flatmap@npm:^1.3.2, array.prototype.flatmap@npm:^1.3.3":
   version: 1.3.3
   resolution: "array.prototype.flatmap@npm:1.3.3"
   dependencies:
@@ -13793,19 +11793,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.map@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "array.prototype.map@npm:1.0.4"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.1.3"
-    es-abstract: "npm:^1.19.0"
-    es-array-method-boxes-properly: "npm:^1.0.0"
-    is-string: "npm:^1.0.7"
-  checksum: 10c0/b42d7d91b89b3b0b2cbb0211917af5be1f100843faeed71bed0cef38d040c980d0fc6433a5df4c13eaded2cccd7b209bbbad250c27f724900cb57c0c0e289dc0
-  languageName: node
-  linkType: hard
-
 "array.prototype.tosorted@npm:^1.1.4":
   version: 1.1.4
   resolution: "array.prototype.tosorted@npm:1.1.4"
@@ -13848,35 +11835,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"asap@npm:^2.0.3, asap@npm:~2.0.3, asap@npm:~2.0.6":
+"asap@npm:^2.0.3, asap@npm:~2.0.6":
   version: 2.0.6
   resolution: "asap@npm:2.0.6"
   checksum: 10c0/c6d5e39fe1f15e4b87677460bd66b66050cd14c772269cee6688824c1410a08ab20254bb6784f9afb75af9144a9f9a7692d49547f4d19d715aeb7c0318f3136d
   languageName: node
   linkType: hard
 
-"asn1.js@npm:^5.2.0":
-  version: 5.4.1
-  resolution: "asn1.js@npm:5.4.1"
-  dependencies:
-    bn.js: "npm:^4.0.0"
-    inherits: "npm:^2.0.1"
-    minimalistic-assert: "npm:^1.0.0"
-    safer-buffer: "npm:^2.1.0"
-  checksum: 10c0/b577232fa6069cc52bb128e564002c62b2b1fe47f7137bdcd709c0b8495aa79cee0f8cc458a831b2d8675900eea0d05781b006be5e1aa4f0ae3577a73ec20324
-  languageName: node
-  linkType: hard
-
-"assert@npm:^1.1.1":
-  version: 1.5.0
-  resolution: "assert@npm:1.5.0"
-  dependencies:
-    object-assign: "npm:^4.1.1"
-    util: "npm:0.10.3"
-  checksum: 10c0/188da37d63be479a3b14657c01080db90cdf7fa004e346af916cf8beebcaffb11359c596d0c9c3cd8174c9125a6225796ef1ce533487edc97f8ce3b18c1ab590
-  languageName: node
-  linkType: hard
-
 "assertion-error@npm:^2.0.1":
   version: 2.0.1
   resolution: "assertion-error@npm:2.0.1"
@@ -13884,13 +11849,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"assign-symbols@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "assign-symbols@npm:1.0.0"
-  checksum: 10c0/29a654b8a6da6889a190d0d0efef4b1bfb5948fa06cbc245054aef05139f889f2f7c75b989917e3fde853fc4093b88048e4de8578a73a76f113d41bfd66e5775
-  languageName: node
-  linkType: hard
-
 "ast-types-flow@npm:^0.0.7":
   version: 0.0.7
   resolution: "ast-types-flow@npm:0.0.7"
@@ -13905,12 +11863,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ast-types@npm:0.15.2":
-  version: 0.15.2
-  resolution: "ast-types@npm:0.15.2"
+"ast-types@npm:0.14.2, ast-types@npm:^0.14.1":
+  version: 0.14.2
+  resolution: "ast-types@npm:0.14.2"
   dependencies:
     tslib: "npm:^2.0.1"
-  checksum: 10c0/5b26e3656e9e8d1db8c8d14971d0cb88ca0138aacce72171cb4cd4555fc8dc53c07e821c568e57fe147366931708fefd25cb9d7e880d42ce9cb569947844c962
+  checksum: 10c0/5d66d89b6c07fe092087454b6042dbaf81f2882b176db93861e2b986aafe0bce49e1f1ff59aac775d451c1426ad1e967d250e9e3548f5166ea8a3475e66c169d
   languageName: node
   linkType: hard
 
@@ -13923,15 +11881,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ast-types@npm:^0.14.2":
-  version: 0.14.2
-  resolution: "ast-types@npm:0.14.2"
-  dependencies:
-    tslib: "npm:^2.0.1"
-  checksum: 10c0/5d66d89b6c07fe092087454b6042dbaf81f2882b176db93861e2b986aafe0bce49e1f1ff59aac775d451c1426ad1e967d250e9e3548f5166ea8a3475e66c169d
-  languageName: node
-  linkType: hard
-
 "ast-types@npm:^0.16.1":
   version: 0.16.1
   resolution: "ast-types@npm:0.16.1"
@@ -13952,13 +11901,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"astral-regex@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "astral-regex@npm:1.0.0"
-  checksum: 10c0/ca460207a19d84c65671e1a85940101522d42f31a450cdb8f93b3464e6daeaf4b58a362826a6c11c57e6cd1976403d197abb0447cfc2087993a29b35c6d63b63
-  languageName: node
-  linkType: hard
-
 "astral-regex@npm:^2.0.0":
   version: 2.0.0
   resolution: "astral-regex@npm:2.0.0"
@@ -13975,13 +11917,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async-each@npm:^1.0.1":
-  version: 1.0.3
-  resolution: "async-each@npm:1.0.3"
-  checksum: 10c0/d5f0ed24792d04b747f667fdcc92c7e6972da1252525a942119f468e629adba1e235df8b8a8e75776e6c7b18ef04d68db7295350bfa1a958457b34faa9a3bd65
-  languageName: node
-  linkType: hard
-
 "async-limiter@npm:~1.0.0":
   version: 1.0.1
   resolution: "async-limiter@npm:1.0.1"
@@ -13989,7 +11924,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async@npm:^3.2.2, async@npm:^3.2.3":
+"async@npm:^3.2.3":
   version: 3.2.5
   resolution: "async@npm:3.2.5"
   checksum: 10c0/1408287b26c6db67d45cb346e34892cee555b8b59e6c68e6f8c3e495cad5ca13b4f218180e871f3c2ca30df4ab52693b66f2f6ff43644760cab0b2198bda79c1
@@ -14010,15 +11945,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"atob@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "atob@npm:2.1.2"
-  bin:
-    atob: bin/atob.js
-  checksum: 10c0/ada635b519dc0c576bb0b3ca63a73b50eefacf390abb3f062558342a8d68f2db91d0c8db54ce81b0d89de3b0f000de71f3ae7d761fd7d8cc624278fe443d6c7e
-  languageName: node
-  linkType: hard
-
 "autoprefixer@npm:^10.4.19, autoprefixer@npm:^10.4.7":
   version: 10.4.20
   resolution: "autoprefixer@npm:10.4.20"
@@ -14037,23 +11963,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autoprefixer@npm:^9.8.6":
-  version: 9.8.8
-  resolution: "autoprefixer@npm:9.8.8"
-  dependencies:
-    browserslist: "npm:^4.12.0"
-    caniuse-lite: "npm:^1.0.30001109"
-    normalize-range: "npm:^0.1.2"
-    num2fraction: "npm:^1.2.2"
-    picocolors: "npm:^0.2.1"
-    postcss: "npm:^7.0.32"
-    postcss-value-parser: "npm:^4.1.0"
-  bin:
-    autoprefixer: ./bin/autoprefixer
-  checksum: 10c0/9b2688cd0ef7252ae1a565ca935a83ddd5c38b9b4c7bf895f36d88e91dbc36d2e7ccb2d34270e436498d8f372d7320a83af6ceb5d1c3bff8f8cbeb6ff33ac837
-  languageName: node
-  linkType: hard
-
 "available-typed-arrays@npm:^1.0.7":
   version: 1.0.7
   resolution: "available-typed-arrays@npm:1.0.7"
@@ -14157,21 +12066,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-loader@npm:^8.0.0":
-  version: 8.2.5
-  resolution: "babel-loader@npm:8.2.5"
-  dependencies:
-    find-cache-dir: "npm:^3.3.1"
-    loader-utils: "npm:^2.0.0"
-    make-dir: "npm:^3.1.0"
-    schema-utils: "npm:^2.6.5"
-  peerDependencies:
-    "@babel/core": ^7.0.0
-    webpack: ">=2"
-  checksum: 10c0/6d11d59f0d8e94f230b7529ef805d03e42df5130849cbc21b0954c081bef5325390bbedf378b00355f4b447aee014012d37565777ba6fc17ffbb2352f5736601
-  languageName: node
-  linkType: hard
-
 "babel-loader@npm:^9.2.1":
   version: 9.2.1
   resolution: "babel-loader@npm:9.2.1"
@@ -14185,25 +12079,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-add-react-displayname@npm:^0.0.5":
-  version: 0.0.5
-  resolution: "babel-plugin-add-react-displayname@npm:0.0.5"
-  checksum: 10c0/96b363d613e3d25e55606546874f3ab34b45088ac5143a64e417976f1eb29ed3e4df90400daa5edb2026d6088ed172f7af469d89838aac4bc810ede377b63c63
-  languageName: node
-  linkType: hard
-
-"babel-plugin-apply-mdx-type-prop@npm:1.6.22":
-  version: 1.6.22
-  resolution: "babel-plugin-apply-mdx-type-prop@npm:1.6.22"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:7.10.4"
-    "@mdx-js/util": "npm:1.6.22"
-  peerDependencies:
-    "@babel/core": ^7.11.6
-  checksum: 10c0/d1fd88f2eee87f3d709373cfac5165f8407793b123e1c7061308311f7e6b0778e093a4a93e7130b47c5a742f2515d0c1d4f3da5097ff195ef91011688ec17ddc
-  languageName: node
-  linkType: hard
-
 "babel-plugin-const-enum@npm:^1.0.1":
   version: 1.2.0
   resolution: "babel-plugin-const-enum@npm:1.2.0"
@@ -14235,15 +12110,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-extract-import-names@npm:1.6.22":
-  version: 1.6.22
-  resolution: "babel-plugin-extract-import-names@npm:1.6.22"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:7.10.4"
-  checksum: 10c0/c7b7206222f7b70f2c9852caa621cc3742b5d9f7dd4229a6e3c560d7683b82f835a8ea46db632df5dab5ad91b1439ead3771a8576a7a14e418248c16fd1f0cc4
-  languageName: node
-  linkType: hard
-
 "babel-plugin-istanbul@npm:^6.1.1":
   version: 6.1.1
   resolution: "babel-plugin-istanbul@npm:6.1.1"
@@ -14269,7 +12135,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-macros@npm:^3.0.1, babel-plugin-macros@npm:^3.1.0":
+"babel-plugin-macros@npm:^3.1.0":
   version: 3.1.0
   resolution: "babel-plugin-macros@npm:3.1.0"
   dependencies:
@@ -14306,18 +12172,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs3@npm:^0.1.0":
-  version: 0.1.7
-  resolution: "babel-plugin-polyfill-corejs3@npm:0.1.7"
-  dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.1.5"
-    core-js-compat: "npm:^3.8.1"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/d31c7f0c210994593e2cc57d202ada8539cbbff1a112f52aa3607c8c9ba23b64e03fa52fbdc243dccbce8b8052f29f8d541bc4151e3055738cb03647708c0f42
-  languageName: node
-  linkType: hard
-
 "babel-plugin-polyfill-corejs3@npm:^0.13.0":
   version: 0.13.0
   resolution: "babel-plugin-polyfill-corejs3@npm:0.13.0"
@@ -14341,36 +12195,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-react-compiler@npm:0.0.0-experimental-592953e-20240517":
-  version: 0.0.0-experimental-592953e-20240517
-  resolution: "babel-plugin-react-compiler@npm:0.0.0-experimental-592953e-20240517"
-  dependencies:
-    "@babel/generator": "npm:7.2.0"
-    "@babel/types": "npm:^7.19.0"
-    chalk: "npm:4"
-    invariant: "npm:^2.2.4"
-    pretty-format: "npm:^24"
-    zod: "npm:^3.22.4"
-    zod-validation-error: "npm:^2.1.0"
-  checksum: 10c0/28a48cd55a3157eef5998ede92a68c3f5b081175396f1be8327f1e31eab57c1cee824897bd193db7af09bc45d7c3dcf57514305ad3f236df1bd922ade180fa2e
-  languageName: node
-  linkType: hard
-
-"babel-plugin-react-docgen@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "babel-plugin-react-docgen@npm:4.2.1"
+"babel-plugin-react-compiler@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "babel-plugin-react-compiler@npm:1.0.0"
   dependencies:
-    ast-types: "npm:^0.14.2"
-    lodash: "npm:^4.17.15"
-    react-docgen: "npm:^5.0.0"
-  checksum: 10c0/9f7af20e6ebd794beae14aa1ffe4f1c1c5855821a5a9f205099602c89b557e33b9cb3dc3fe0b3a2f2ca35007c6ab45f52da9695a681d8495ad0f5494ef78ec34
+    "@babel/types": "npm:^7.26.0"
+  checksum: 10c0/9406267ada8d7dbdfe8906b40ecadb816a5f4cee2922bee23f7729293b369624ee135b5a9b0f263851c263c9787522ac5d97016c9a2b82d1668300e42b18aff8
   languageName: node
   linkType: hard
 
-"babel-plugin-react-native-web@npm:~0.19.10":
-  version: 0.19.13
-  resolution: "babel-plugin-react-native-web@npm:0.19.13"
-  checksum: 10c0/0710db342063182163d58febfb01ef510c9460f0500f9faaf47603d06dda37554f216e6123a099a343eb2067c2dfb43c9d4ca573a9d659662ca429048db11af4
+"babel-plugin-react-native-web@npm:~0.21.0":
+  version: 0.21.2
+  resolution: "babel-plugin-react-native-web@npm:0.21.2"
+  checksum: 10c0/45fa9b2fce90cb0d962bbc9c665e944ef6720f5740a573d457adf8e2881bd4112396922d5d5c0ab7cfc706f0c457e3edebddc55289d30924e1f42b4b7d849b8e
   languageName: node
   linkType: hard
 
@@ -14395,6 +12232,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-syntax-hermes-parser@npm:0.29.1, babel-plugin-syntax-hermes-parser@npm:^0.29.1":
+  version: 0.29.1
+  resolution: "babel-plugin-syntax-hermes-parser@npm:0.29.1"
+  dependencies:
+    hermes-parser: "npm:0.29.1"
+  checksum: 10c0/a6d95e4a7079976e477636d18509272a7a185930e143c61d0421a36096e85905563630ac4f0f317518b6db37f50daaefc1828d575b3d5fb090a55e9d39d2534c
+  languageName: node
+  linkType: hard
+
 "babel-plugin-syntax-jsx@npm:^6.18.0":
   version: 6.18.0
   resolution: "babel-plugin-syntax-jsx@npm:6.18.0"
@@ -14402,13 +12248,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-syntax-trailing-function-commas@npm:^7.0.0-beta.0":
-  version: 7.0.0-beta.0
-  resolution: "babel-plugin-syntax-trailing-function-commas@npm:7.0.0-beta.0"
-  checksum: 10c0/67e3d6a706637097526b2d3046d3124d3efd3aac28b47af940c2f8df01b8d7ffeb4cdf5648f3b5eac3f098f5b61c4845e306f34301c869e5e14db6ae8b77f699
-  languageName: node
-  linkType: hard
-
 "babel-plugin-transform-flow-enums@npm:^0.0.2":
   version: 0.0.2
   resolution: "babel-plugin-transform-flow-enums@npm:0.0.2"
@@ -14430,13 +12269,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-transform-inline-environment-variables@npm:^0.4.4":
-  version: 0.4.4
-  resolution: "babel-plugin-transform-inline-environment-variables@npm:0.4.4"
-  checksum: 10c0/f1bb9d57e83184a8413939032c570a286447186e6b78fdc0d3cade4dcab51955d3b549d2a0af4f866b172221d287d67a9f4e6d742de7df4c411fe085e20aadeb
-  languageName: node
-  linkType: hard
-
 "babel-plugin-transform-react-remove-prop-types@npm:^0.4.24":
   version: 0.4.24
   resolution: "babel-plugin-transform-react-remove-prop-types@npm:0.4.24"
@@ -14475,58 +12307,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-preset-expo@npm:~11.0.15":
-  version: 11.0.15
-  resolution: "babel-preset-expo@npm:11.0.15"
+"babel-preset-expo@npm:~54.0.10":
+  version: 54.0.10
+  resolution: "babel-preset-expo@npm:54.0.10"
   dependencies:
+    "@babel/helper-module-imports": "npm:^7.25.9"
     "@babel/plugin-proposal-decorators": "npm:^7.12.9"
-    "@babel/plugin-transform-export-namespace-from": "npm:^7.22.11"
-    "@babel/plugin-transform-object-rest-spread": "npm:^7.12.13"
-    "@babel/plugin-transform-parameters": "npm:^7.22.15"
+    "@babel/plugin-proposal-export-default-from": "npm:^7.24.7"
+    "@babel/plugin-syntax-export-default-from": "npm:^7.24.7"
+    "@babel/plugin-transform-class-static-block": "npm:^7.27.1"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.25.9"
+    "@babel/plugin-transform-flow-strip-types": "npm:^7.25.2"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.8"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.24.7"
+    "@babel/plugin-transform-parameters": "npm:^7.24.7"
+    "@babel/plugin-transform-private-methods": "npm:^7.24.7"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.24.7"
+    "@babel/plugin-transform-runtime": "npm:^7.24.7"
     "@babel/preset-react": "npm:^7.22.15"
     "@babel/preset-typescript": "npm:^7.23.0"
-    "@react-native/babel-preset": "npm:0.74.87"
-    babel-plugin-react-compiler: "npm:0.0.0-experimental-592953e-20240517"
-    babel-plugin-react-native-web: "npm:~0.19.10"
-    react-refresh: "npm:^0.14.2"
-  checksum: 10c0/2e1c31e51031f83d705d3c56a7b19a51bfe8aa39408e7433e3032d74626475f842fdbe011521577878813d9a1bf50ebba128cd6dbe5c10f7feadcd030ae36abb
-  languageName: node
-  linkType: hard
-
-"babel-preset-fbjs@npm:^3.4.0":
-  version: 3.4.0
-  resolution: "babel-preset-fbjs@npm:3.4.0"
-  dependencies:
-    "@babel/plugin-proposal-class-properties": "npm:^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread": "npm:^7.0.0"
-    "@babel/plugin-syntax-class-properties": "npm:^7.0.0"
-    "@babel/plugin-syntax-flow": "npm:^7.0.0"
-    "@babel/plugin-syntax-jsx": "npm:^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread": "npm:^7.0.0"
-    "@babel/plugin-transform-arrow-functions": "npm:^7.0.0"
-    "@babel/plugin-transform-block-scoped-functions": "npm:^7.0.0"
-    "@babel/plugin-transform-block-scoping": "npm:^7.0.0"
-    "@babel/plugin-transform-classes": "npm:^7.0.0"
-    "@babel/plugin-transform-computed-properties": "npm:^7.0.0"
-    "@babel/plugin-transform-destructuring": "npm:^7.0.0"
-    "@babel/plugin-transform-flow-strip-types": "npm:^7.0.0"
-    "@babel/plugin-transform-for-of": "npm:^7.0.0"
-    "@babel/plugin-transform-function-name": "npm:^7.0.0"
-    "@babel/plugin-transform-literals": "npm:^7.0.0"
-    "@babel/plugin-transform-member-expression-literals": "npm:^7.0.0"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.0.0"
-    "@babel/plugin-transform-object-super": "npm:^7.0.0"
-    "@babel/plugin-transform-parameters": "npm:^7.0.0"
-    "@babel/plugin-transform-property-literals": "npm:^7.0.0"
-    "@babel/plugin-transform-react-display-name": "npm:^7.0.0"
-    "@babel/plugin-transform-react-jsx": "npm:^7.0.0"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.0.0"
-    "@babel/plugin-transform-spread": "npm:^7.0.0"
-    "@babel/plugin-transform-template-literals": "npm:^7.0.0"
-    babel-plugin-syntax-trailing-function-commas: "npm:^7.0.0-beta.0"
+    "@react-native/babel-preset": "npm:0.81.5"
+    babel-plugin-react-compiler: "npm:^1.0.0"
+    babel-plugin-react-native-web: "npm:~0.21.0"
+    babel-plugin-syntax-hermes-parser: "npm:^0.29.1"
+    babel-plugin-transform-flow-enums: "npm:^0.0.2"
+    debug: "npm:^4.3.4"
+    resolve-from: "npm:^5.0.0"
   peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 10c0/2be440c0fd7d1df247417be35644cb89f40a300e7fcdc44878b737ec49b04380eff422e4ebdc7bb5efd5ecfef45b634fc5fe11c3a409a50c9084e81083037902
+    "@babel/runtime": ^7.20.0
+    expo: "*"
+    react-refresh: ">=0.14.0 <1.0.0"
+  peerDependenciesMeta:
+    "@babel/runtime":
+      optional: true
+    expo:
+      optional: true
+  checksum: 10c0/aa3203d30b5c13f79cd4996431e5a1f9a8fd8b225af8ad0f1a5573c72b4fde94bf048d71fa133701b834105900b3870c7d56b5fee91a1c5b7c9c4e9ed5b1e9db
   languageName: node
   linkType: hard
 
@@ -14542,13 +12358,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bail@npm:^1.0.0":
-  version: 1.0.5
-  resolution: "bail@npm:1.0.5"
-  checksum: 10c0/4cf7d0b5c82fdc69590b3fe85c17c4ec37647681b20875551fd6187a85c122b20178dc118001d3ebd5d0ab3dc0e95637c71f889f481882ee761db43c6b16fa05
-  languageName: node
-  linkType: hard
-
 "bail@npm:^2.0.0":
   version: 2.0.2
   resolution: "bail@npm:2.0.2"
@@ -14570,28 +12379,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"base64-js@npm:^1.0.2, base64-js@npm:^1.2.3, base64-js@npm:^1.3.1, base64-js@npm:^1.5.1":
+"base64-js@npm:^1.2.3, base64-js@npm:^1.3.1, base64-js@npm:^1.5.1":
   version: 1.5.1
   resolution: "base64-js@npm:1.5.1"
   checksum: 10c0/f23823513b63173a001030fae4f2dabe283b99a9d324ade3ad3d148e218134676f1ee8568c877cd79ec1c53158dcf2d2ba527a97c606618928ba99dd930102bf
   languageName: node
   linkType: hard
 
-"base@npm:^0.11.1":
-  version: 0.11.2
-  resolution: "base@npm:0.11.2"
-  dependencies:
-    cache-base: "npm:^1.0.1"
-    class-utils: "npm:^0.3.5"
-    component-emitter: "npm:^1.2.1"
-    define-property: "npm:^1.0.0"
-    isobject: "npm:^3.0.1"
-    mixin-deep: "npm:^1.2.0"
-    pascalcase: "npm:^0.1.1"
-  checksum: 10c0/30a2c0675eb52136b05ef496feb41574d9f0bb2d6d677761da579c00a841523fccf07f1dbabec2337b5f5750f428683b8ca60d89e56a1052c4ae1c0cd05de64d
-  languageName: node
-  linkType: hard
-
 "baseline-browser-mapping@npm:^2.9.0":
   version: 2.10.0
   resolution: "baseline-browser-mapping@npm:2.10.0"
@@ -14615,15 +12409,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"better-opn@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "better-opn@npm:2.1.1"
-  dependencies:
-    open: "npm:^7.0.3"
-  checksum: 10c0/c483f52a1c71555926df37a89ae7e521cddff6509e2a02c6af83c2c500e20cb3307417579ce1d5ec4d09855cc7d30f608b20934e7cedc54218888722d5bfc1d3
-  languageName: node
-  linkType: hard
-
 "better-opn@npm:^3.0.2, better-opn@npm:~3.0.2":
   version: 3.0.2
   resolution: "better-opn@npm:3.0.2"
@@ -14633,13 +12418,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bezier-easing@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "bezier-easing@npm:2.1.0"
-  checksum: 10c0/138a160698de3c12501479cc80280d5cc0ab47df73e20d7b5058cba6d62c0876eb97e63aa1e398233269aa2a6bb396fb0ee394da391de7258c9da20729df5158
-  languageName: node
-  linkType: hard
-
 "bidi-js@npm:^1.0.2":
   version: 1.0.3
   resolution: "bidi-js@npm:1.0.3"
@@ -14649,7 +12427,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"big-integer@npm:1.6.x, big-integer@npm:^1.6.7":
+"big-integer@npm:1.6.x":
   version: 1.6.51
   resolution: "big-integer@npm:1.6.51"
   checksum: 10c0/c8139662d57f8833a44802f4b65be911679c569535ea73c5cfd3c1c8994eaead1b84b6f63e1db63833e4d4cacb6b6a9e5522178113dfdc8e4c81ed8436f1e8cc
@@ -14663,13 +12441,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"binary-extensions@npm:^1.0.0":
-  version: 1.13.1
-  resolution: "binary-extensions@npm:1.13.1"
-  checksum: 10c0/2d616938ac23d828ec3fbe0dea429b566fd2c137ddc38f166f16561ccd58029deac3fa9fddb489ab13d679c8fb5f1bd0e82824041299e5e39d8dd3cc68fbb9f9
-  languageName: node
-  linkType: hard
-
 "binary-extensions@npm:^2.0.0":
   version: 2.2.0
   resolution: "binary-extensions@npm:2.2.0"
@@ -14677,15 +12448,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bindings@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "bindings@npm:1.5.0"
-  dependencies:
-    file-uri-to-path: "npm:1.0.0"
-  checksum: 10c0/3dab2491b4bb24124252a91e656803eac24292473e56554e35bbfe3cc1875332cfa77600c3bac7564049dc95075bf6fcc63a4609920ff2d64d0fe405fcf0d4ba
-  languageName: node
-  linkType: hard
-
 "bl@npm:^4.0.3, bl@npm:^4.1.0":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
@@ -14697,20 +12459,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bluebird@npm:^3.3.5, bluebird@npm:^3.5.4, bluebird@npm:^3.5.5":
-  version: 3.7.2
-  resolution: "bluebird@npm:3.7.2"
-  checksum: 10c0/680de03adc54ff925eaa6c7bb9a47a0690e8b5de60f4792604aae8ed618c65e6b63a7893b57ca924beaf53eee69c5af4f8314148c08124c550fe1df1add897d2
-  languageName: node
-  linkType: hard
-
-"bn.js@npm:^5.2.3":
-  version: 5.2.3
-  resolution: "bn.js@npm:5.2.3"
-  checksum: 10c0/eef19cb9cf5e91e91e3e0f036b799ce6c72f79463c3934d62991c3dcdb58f6c94dc3d806495d9b0bf31cd121870ed79bb2115cea71b56c03e794fb71485031fa
-  languageName: node
-  linkType: hard
-
 "body-parser@npm:1.20.3":
   version: 1.20.3
   resolution: "body-parser@npm:1.20.3"
@@ -14781,22 +12529,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"boxen@npm:^5.1.2":
-  version: 5.1.2
-  resolution: "boxen@npm:5.1.2"
-  dependencies:
-    ansi-align: "npm:^3.0.0"
-    camelcase: "npm:^6.2.0"
-    chalk: "npm:^4.1.0"
-    cli-boxes: "npm:^2.2.1"
-    string-width: "npm:^4.2.2"
-    type-fest: "npm:^0.20.2"
-    widest-line: "npm:^3.1.0"
-    wrap-ansi: "npm:^7.0.0"
-  checksum: 10c0/71f31c2eb3dcacd5fce524ae509e0cc90421752e0bfbd0281fd3352871d106c462a0f810c85f2fdb02f3a9fab2d7a84e9718b4999384d651b76104ebe5d2c024
-  languageName: node
-  linkType: hard
-
 "boxen@npm:^6.2.1":
   version: 6.2.1
   resolution: "boxen@npm:6.2.1"
@@ -14829,12 +12561,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bplist-creator@npm:0.0.7":
-  version: 0.0.7
-  resolution: "bplist-creator@npm:0.0.7"
+"bplist-creator@npm:0.1.0":
+  version: 0.1.0
+  resolution: "bplist-creator@npm:0.1.0"
   dependencies:
-    stream-buffers: "npm:~2.2.0"
-  checksum: 10c0/37044d0070548da6b7c2eeb9c42a5a2b22b3d7eaf4b49e5b4c3ff0cd9f579902b69eb298bda9af2cbe172bc279caf8e4a889771e9e1ee9f412c1ce5afa16d4a9
+    stream-buffers: "npm:2.2.x"
+  checksum: 10c0/86f5fe95f34abd369b381abf0f726e220ecebd60a3d932568ae94895ccf1989a87553e4aee9ab3cfb4f35e6f72319f52aa73028165eec82819ed39f15189d493
   languageName: node
   linkType: hard
 
@@ -14856,15 +12588,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bplist-parser@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "bplist-parser@npm:0.1.1"
-  dependencies:
-    big-integer: "npm:^1.6.7"
-  checksum: 10c0/cd50206f956e74f6e46cb5ed14be5eb00b2e14676ea3dd36703470715177a2770fc22032eca63a36adb3b56a1e51138a95bb0fc6849a78c21e92caeedf219ea7
-  languageName: node
-  linkType: hard
-
 "brace-expansion@npm:^5.0.2":
   version: 5.0.4
   resolution: "brace-expansion@npm:5.0.4"
@@ -14874,24 +12597,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:^2.3.1, braces@npm:^2.3.2":
-  version: 2.3.2
-  resolution: "braces@npm:2.3.2"
-  dependencies:
-    arr-flatten: "npm:^1.1.0"
-    array-unique: "npm:^0.3.2"
-    extend-shallow: "npm:^2.0.1"
-    fill-range: "npm:^4.0.0"
-    isobject: "npm:^3.0.1"
-    repeat-element: "npm:^1.1.2"
-    snapdragon: "npm:^0.8.1"
-    snapdragon-node: "npm:^2.0.1"
-    split-string: "npm:^3.0.2"
-    to-regex: "npm:^3.0.1"
-  checksum: 10c0/72b27ea3ea2718f061c29e70fd6e17606e37c65f5801abddcf0b0052db1de7d60f3bf92cfc220ab57b44bd0083a5f69f9d03b3461d2816cfe9f9398207acc728
-  languageName: node
-  linkType: hard
-
 "braces@npm:^3.0.3, braces@npm:~3.0.2":
   version: 3.0.3
   resolution: "braces@npm:3.0.3"
@@ -14901,13 +12606,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"brorand@npm:^1.0.1, brorand@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "brorand@npm:1.1.0"
-  checksum: 10c0/6f366d7c4990f82c366e3878492ba9a372a73163c09871e80d82fb4ae0d23f9f8924cb8a662330308206e6b3b76ba1d528b4601c9ef73c2166b440b2ea3b7571
-  languageName: node
-  linkType: hard
-
 "browser-process-hrtime@npm:^1.0.0":
   version: 1.0.0
   resolution: "browser-process-hrtime@npm:1.0.0"
@@ -14915,80 +12613,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserify-aes@npm:^1.0.0, browserify-aes@npm:^1.0.4":
-  version: 1.2.0
-  resolution: "browserify-aes@npm:1.2.0"
-  dependencies:
-    buffer-xor: "npm:^1.0.3"
-    cipher-base: "npm:^1.0.0"
-    create-hash: "npm:^1.1.0"
-    evp_bytestokey: "npm:^1.0.3"
-    inherits: "npm:^2.0.1"
-    safe-buffer: "npm:^5.0.1"
-  checksum: 10c0/967f2ae60d610b7b252a4cbb55a7a3331c78293c94b4dd9c264d384ca93354c089b3af9c0dd023534efdc74ffbc82510f7ad4399cf82bc37bc07052eea485f18
-  languageName: node
-  linkType: hard
-
-"browserify-cipher@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "browserify-cipher@npm:1.0.1"
-  dependencies:
-    browserify-aes: "npm:^1.0.4"
-    browserify-des: "npm:^1.0.0"
-    evp_bytestokey: "npm:^1.0.0"
-  checksum: 10c0/aa256dcb42bc53a67168bbc94ab85d243b0a3b56109dee3b51230b7d010d9b78985ffc1fb36e145c6e4db151f888076c1cfc207baf1525d3e375cbe8187fe27d
-  languageName: node
-  linkType: hard
-
-"browserify-des@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "browserify-des@npm:1.0.2"
-  dependencies:
-    cipher-base: "npm:^1.0.1"
-    des.js: "npm:^1.0.0"
-    inherits: "npm:^2.0.1"
-    safe-buffer: "npm:^5.1.2"
-  checksum: 10c0/943eb5d4045eff80a6cde5be4e5fbb1f2d5002126b5a4789c3c1aae3cdddb1eb92b00fb92277f512288e5c6af330730b1dbabcf7ce0923e749e151fcee5a074d
-  languageName: node
-  linkType: hard
-
-"browserify-rsa@npm:^4.0.0, browserify-rsa@npm:^4.0.1":
-  version: 4.1.0
-  resolution: "browserify-rsa@npm:4.1.0"
-  dependencies:
-    bn.js: "npm:^5.0.0"
-    randombytes: "npm:^2.0.1"
-  checksum: 10c0/fb2b5a8279d8a567a28d8ee03fb62e448428a906bab5c3dc9e9c3253ace551b5ea271db15e566ac78f1b1d71b243559031446604168b9235c351a32cae99d02a
-  languageName: node
-  linkType: hard
-
-"browserify-sign@npm:^4.0.0":
-  version: 4.2.1
-  resolution: "browserify-sign@npm:4.2.1"
-  dependencies:
-    bn.js: "npm:^5.1.1"
-    browserify-rsa: "npm:^4.0.1"
-    create-hash: "npm:^1.2.0"
-    create-hmac: "npm:^1.1.7"
-    elliptic: "npm:^6.5.3"
-    inherits: "npm:^2.0.4"
-    parse-asn1: "npm:^5.1.5"
-    readable-stream: "npm:^3.6.0"
-    safe-buffer: "npm:^5.2.0"
-  checksum: 10c0/8f00a370e3e97060977dc58e51251d3ca398ee73523994a44430321e8de2c7d85395362d59014b2b07efe4190f369baee2ff28eb8f405ff4660b776651cf052d
-  languageName: node
-  linkType: hard
-
-"browserify-zlib@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "browserify-zlib@npm:0.2.0"
-  dependencies:
-    pako: "npm:~1.0.5"
-  checksum: 10c0/9ab10b6dc732c6c5ec8ebcbe5cb7fe1467f97402c9b2140113f47b5f187b9438f93a8e065d8baf8b929323c18324fbf1105af479ee86d9d36cab7d7ef3424ad9
-  languageName: node
-  linkType: hard
-
-"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.18.1, browserslist@npm:^4.23.0, browserslist@npm:^4.23.1, browserslist@npm:^4.23.3, browserslist@npm:^4.24.0, browserslist@npm:^4.24.2, browserslist@npm:^4.25.1":
+"browserslist@npm:^4.0.0, browserslist@npm:^4.18.1, browserslist@npm:^4.23.0, browserslist@npm:^4.23.1, browserslist@npm:^4.23.3, browserslist@npm:^4.24.0, browserslist@npm:^4.24.2, browserslist@npm:^4.25.0, browserslist@npm:^4.25.1":
   version: 4.28.1
   resolution: "browserslist@npm:4.28.1"
   dependencies:
@@ -15012,32 +12637,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"btoa@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "btoa@npm:1.2.1"
-  bin:
-    btoa: bin/btoa.js
-  checksum: 10c0/557b9682e40a68ae057af1b377e28884e6ff756ba0f499fe0f8c7b725a5bfb5c0d891604ac09944dbe330c9d43fb3976fef734f9372608d0d8e78a30eda292ae
-  languageName: node
-  linkType: hard
-
-"buffer-alloc-unsafe@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "buffer-alloc-unsafe@npm:1.1.0"
-  checksum: 10c0/06b9298c9369621a830227c3797ceb3ff5535e323946d7b39a7398fed8b3243798259b3c85e287608c5aad35ccc551cec1a0a5190cc8f39652e8eee25697fc9c
-  languageName: node
-  linkType: hard
-
-"buffer-alloc@npm:^1.1.0":
-  version: 1.2.0
-  resolution: "buffer-alloc@npm:1.2.0"
-  dependencies:
-    buffer-alloc-unsafe: "npm:^1.1.0"
-    buffer-fill: "npm:^1.0.0"
-  checksum: 10c0/09d87dd53996342ccfbeb2871257d8cdb25ce9ee2259adc95c6490200cd6e528c5fbae8f30bcc323fe8d8efb0fe541e4ac3bbe9ee3f81c6b7c4b27434cc02ab4
-  languageName: node
-  linkType: hard
-
 "buffer-crc32@npm:~0.2.3":
   version: 0.2.13
   resolution: "buffer-crc32@npm:0.2.13"
@@ -15045,13 +12644,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer-fill@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "buffer-fill@npm:1.0.0"
-  checksum: 10c0/55b5654fbbf2d7ceb4991bb537f5e5b5b5b9debca583fee416a74fcec47c16d9e7a90c15acd27577da7bd750b7fa6396e77e7c221e7af138b6d26242381c6e4d
-  languageName: node
-  linkType: hard
-
 "buffer-from@npm:^1.0.0":
   version: 1.1.2
   resolution: "buffer-from@npm:1.1.2"
@@ -15059,24 +12651,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer-xor@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "buffer-xor@npm:1.0.3"
-  checksum: 10c0/fd269d0e0bf71ecac3146187cfc79edc9dbb054e2ee69b4d97dfb857c6d997c33de391696d04bdd669272751fa48e7872a22f3a6c7b07d6c0bc31dbe02a4075c
-  languageName: node
-  linkType: hard
-
-"buffer@npm:^4.3.0":
-  version: 4.9.2
-  resolution: "buffer@npm:4.9.2"
-  dependencies:
-    base64-js: "npm:^1.0.2"
-    ieee754: "npm:^1.1.4"
-    isarray: "npm:^1.0.0"
-  checksum: 10c0/dc443d7e7caab23816b58aacdde710b72f525ad6eecd7d738fcaa29f6d6c12e8d9c13fed7219fd502be51ecf0615f5c077d4bdc6f9308dde2e53f8e5393c5b21
-  languageName: node
-  linkType: hard
-
 "buffer@npm:^5.2.1, buffer@npm:^5.4.3, buffer@npm:^5.5.0":
   version: 5.7.1
   resolution: "buffer@npm:5.7.1"
@@ -15097,20 +12671,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"builtin-status-codes@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "builtin-status-codes@npm:3.0.0"
-  checksum: 10c0/c37bbba11a34c4431e56bd681b175512e99147defbe2358318d8152b3a01df7bf25e0305873947e5b350073d5ef41a364a22b37e48f1fb6d2fe6d5286a0f348c
-  languageName: node
-  linkType: hard
-
-"builtins@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "builtins@npm:1.0.3"
-  checksum: 10c0/493afcc1db0a56d174cc85bebe5ca69144f6fdd0007d6cbe6b2434185314c79d83cb867e492b56aa5cf421b4b8a8135bf96ba4c3ce71994cf3da154d1ea59747
-  languageName: node
-  linkType: hard
-
 "bundle-name@npm:^4.1.0":
   version: 4.1.0
   resolution: "bundle-name@npm:4.1.0"
@@ -15120,84 +12680,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bunyamin@npm:^1.5.0":
-  version: 1.5.1
-  resolution: "bunyamin@npm:1.5.1"
-  dependencies:
-    "@flatten-js/interval-tree": "npm:^1.1.2"
-    multi-sort-stream: "npm:^1.0.4"
-    stream-json: "npm:^1.7.5"
-    trace-event-lib: "npm:^1.3.1"
-  peerDependencies:
-    "@types/bunyan": ^1.8.8
-    bunyan: ^1.8.15 || ^2.0.0
-  peerDependenciesMeta:
-    "@types/bunyan":
-      optional: true
-    bunyan:
-      optional: true
-  checksum: 10c0/971d1dcbaf54e1ac58fca841639ff3acc8f28b22a07efca6e4a088734503ec72b754e57e023f838f0c75e9f7e10066513ef0b1a35fa7cf79769ee8e463fdbc3f
-  languageName: node
-  linkType: hard
-
-"bunyan-debug-stream@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "bunyan-debug-stream@npm:3.1.0"
-  dependencies:
-    chalk: "npm:^4.1.2"
-  peerDependencies:
-    bunyan: "*"
-  checksum: 10c0/750822eb7d9ace42db2c59b1a49c17c12ed5132f84bf95a3622e967432192740aa42248d78364863b4d11f141a603d6d5d39e78fed175c61c726820a985300a6
-  languageName: node
-  linkType: hard
-
-"bunyan@npm:^1.8.12":
-  version: 1.8.15
-  resolution: "bunyan@npm:1.8.15"
-  dependencies:
-    dtrace-provider: "npm:~0.8"
-    moment: "npm:^2.19.3"
-    mv: "npm:~2"
-    safe-json-stringify: "npm:~1"
-  dependenciesMeta:
-    dtrace-provider:
-      optional: true
-    moment:
-      optional: true
-    mv:
-      optional: true
-    safe-json-stringify:
-      optional: true
-  bin:
-    bunyan: ./bin/bunyan
-  checksum: 10c0/c7b3adc07a4db3256f857dcba42b97dd6c35ab054cb26766643aae2b90e1b614795cdf231774ddaf374572d952f52ef4f4205047e15414e155e478aa0672e041
-  languageName: node
-  linkType: hard
-
-"bunyan@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "bunyan@npm:2.0.5"
-  dependencies:
-    dtrace-provider: "npm:~0.8"
-    exeunt: "npm:1.1.0"
-    moment: "npm:^2.19.3"
-    mv: "npm:~2"
-    safe-json-stringify: "npm:~1"
-  dependenciesMeta:
-    dtrace-provider:
-      optional: true
-    moment:
-      optional: true
-    mv:
-      optional: true
-    safe-json-stringify:
-      optional: true
-  bin:
-    bunyan: bin/bunyan
-  checksum: 10c0/b3a2f0ccc4473c7a83d94f64805dd4ae70e4f7afff8658262a782a8a41ad71e062749e67ec7be57ab3ae724d3d199247ef4b6976ac6c0c67a114f442224977aa
-  languageName: node
-  linkType: hard
-
 "bytes@npm:3.0.0":
   version: 3.0.0
   resolution: "bytes@npm:3.0.0"
@@ -15212,52 +12694,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"c8@npm:^7.6.0":
-  version: 7.11.0
-  resolution: "c8@npm:7.11.0"
-  dependencies:
-    "@bcoe/v8-coverage": "npm:^0.2.3"
-    "@istanbuljs/schema": "npm:^0.1.2"
-    find-up: "npm:^5.0.0"
-    foreground-child: "npm:^2.0.0"
-    istanbul-lib-coverage: "npm:^3.0.1"
-    istanbul-lib-report: "npm:^3.0.0"
-    istanbul-reports: "npm:^3.0.2"
-    rimraf: "npm:^3.0.0"
-    test-exclude: "npm:^6.0.0"
-    v8-to-istanbul: "npm:^8.0.0"
-    yargs: "npm:^16.2.0"
-    yargs-parser: "npm:^20.2.7"
-  bin:
-    c8: ./bin/c8.js
-  checksum: 10c0/00417d3fa03e7b16d000c9f1f7193053428c1af347c29bfdf32fa530a30d70b981ae6b6f15f585034e03922aafbdf6ebcbb746edbaf676a06b489a493cd0b9a5
-  languageName: node
-  linkType: hard
-
-"cacache@npm:^12.0.2":
-  version: 12.0.4
-  resolution: "cacache@npm:12.0.4"
-  dependencies:
-    bluebird: "npm:^3.5.5"
-    chownr: "npm:^1.1.1"
-    figgy-pudding: "npm:^3.5.1"
-    glob: "npm:^7.1.4"
-    graceful-fs: "npm:^4.1.15"
-    infer-owner: "npm:^1.0.3"
-    lru-cache: "npm:^5.1.1"
-    mississippi: "npm:^3.0.0"
-    mkdirp: "npm:^0.5.1"
-    move-concurrently: "npm:^1.0.1"
-    promise-inflight: "npm:^1.0.1"
-    rimraf: "npm:^2.6.3"
-    ssri: "npm:^6.0.1"
-    unique-filename: "npm:^1.1.1"
-    y18n: "npm:^4.0.0"
-  checksum: 10c0/b4b0aa49e3fbd3ca92f71bc62923e4afce31fd687b31d5ba524b2a54b36e96a8b027165599307dda5e4a6f7268cc951b77ca170efa00c1b72761f9daae51fdfb
-  languageName: node
-  linkType: hard
-
-"cacache@npm:^15.0.5, cacache@npm:^15.2.0":
+"cacache@npm:^15.2.0":
   version: 15.3.0
   resolution: "cacache@npm:15.3.0"
   dependencies:
@@ -15283,43 +12720,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cacache@npm:^18.0.2":
-  version: 18.0.4
-  resolution: "cacache@npm:18.0.4"
-  dependencies:
-    "@npmcli/fs": "npm:^3.1.0"
-    fs-minipass: "npm:^3.0.0"
-    glob: "npm:^10.2.2"
-    lru-cache: "npm:^10.0.1"
-    minipass: "npm:^7.0.3"
-    minipass-collect: "npm:^2.0.1"
-    minipass-flush: "npm:^1.0.5"
-    minipass-pipeline: "npm:^1.2.4"
-    p-map: "npm:^4.0.0"
-    ssri: "npm:^10.0.0"
-    tar: "npm:^6.1.11"
-    unique-filename: "npm:^3.0.0"
-  checksum: 10c0/6c055bafed9de4f3dcc64ac3dc7dd24e863210902b7c470eb9ce55a806309b3efff78033e3d8b4f7dcc5d467f2db43c6a2857aaaf26f0094b8a351d44c42179f
-  languageName: node
-  linkType: hard
-
-"cache-base@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "cache-base@npm:1.0.1"
-  dependencies:
-    collection-visit: "npm:^1.0.0"
-    component-emitter: "npm:^1.2.1"
-    get-value: "npm:^2.0.6"
-    has-value: "npm:^1.0.0"
-    isobject: "npm:^3.0.1"
-    set-value: "npm:^2.0.0"
-    to-object-path: "npm:^0.3.0"
-    union-value: "npm:^1.0.0"
-    unset-value: "npm:^1.0.0"
-  checksum: 10c0/a7142e25c73f767fa520957dcd179b900b86eac63b8cfeaa3b2a35e18c9ca5968aa4e2d2bed7a3e7efd10f13be404344cfab3a4156217e71f9bdb95940bb9c8c
-  languageName: node
-  linkType: hard
-
 "cacheable-lookup@npm:^7.0.0":
   version: 7.0.0
   resolution: "cacheable-lookup@npm:7.0.0"
@@ -15342,13 +12742,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caf@npm:^15.0.1":
-  version: 15.0.1
-  resolution: "caf@npm:15.0.1"
-  checksum: 10c0/9a852c3c93c44499ab1e2cc58c264dd99bb2eaeb17b46df84e6fa5302d6829f776e84a1c13da5bbc2830ba274087eddbde9fe23334f7eb00ce89da9333d1a5cc
-  languageName: node
-  linkType: hard
-
 "call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1, call-bind-apply-helpers@npm:^1.0.2":
   version: 1.0.2
   resolution: "call-bind-apply-helpers@npm:1.0.2"
@@ -15381,13 +12774,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-me-maybe@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "call-me-maybe@npm:1.0.1"
-  checksum: 10c0/551991433adc2d257d24a5dea5049addc75b182cc7f64860d41bb5ec2c2f1f72efcd6f34be475e70bbb62fde9f9ba380c1a52c922daf2b4111f25fee2509550f
-  languageName: node
-  linkType: hard
-
 "caller-callsite@npm:^2.0.0":
   version: 2.0.0
   resolution: "caller-callsite@npm:2.0.0"
@@ -15427,17 +12813,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camel-case@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "camel-case@npm:3.0.0"
-  dependencies:
-    no-case: "npm:^2.2.0"
-    upper-case: "npm:^1.1.1"
-  checksum: 10c0/491c6bbf986b9d8355e12cca6beb719b44c2fe96e8526c09958a1b4e0dbb081a82ea59c13b5a6ccf9158ce5979cbe56a8a10d7322bfeed2d84725c6b89d8f934
-  languageName: node
-  linkType: hard
-
-"camel-case@npm:^4.1.1, camel-case@npm:^4.1.2":
+"camel-case@npm:^4.1.2":
   version: 4.1.2
   resolution: "camel-case@npm:4.1.2"
   dependencies:
@@ -15447,23 +12823,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase-css@npm:2.0.1":
-  version: 2.0.1
-  resolution: "camelcase-css@npm:2.0.1"
-  checksum: 10c0/1a1a3137e8a781e6cbeaeab75634c60ffd8e27850de410c162cce222ea331cd1ba5364e8fb21c95e5ca76f52ac34b81a090925ca00a87221355746d049c6e273
-  languageName: node
-  linkType: hard
-
-"camelcase-keys@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "camelcase-keys@npm:2.1.0"
-  dependencies:
-    camelcase: "npm:^2.0.0"
-    map-obj: "npm:^1.0.0"
-  checksum: 10c0/d9431f8b5ac52644cfc45377c0d3897f045137d645c8890bd2bfb48c282d22e76644974198dbba3a2d96b33f9bf3af07aacb712b0dd6d2671330a7e2531b72f9
-  languageName: node
-  linkType: hard
-
 "camelcase-keys@npm:^6.2.2":
   version: 6.2.2
   resolution: "camelcase-keys@npm:6.2.2"
@@ -15487,21 +12846,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase@npm:^2.0.0":
-  version: 2.1.1
-  resolution: "camelcase@npm:2.1.1"
-  checksum: 10c0/610db65fa7dd50a400525ec2188fd65a1939dda4afe5de7d08608670013269c3743c3737fb0f138d1df8aa74e257cc83e3b756e776b604af16dac297b4a0d054
-  languageName: node
-  linkType: hard
-
-"camelcase@npm:^5.0.0, camelcase@npm:^5.3.1":
+"camelcase@npm:^5.3.1":
   version: 5.3.1
   resolution: "camelcase@npm:5.3.1"
   checksum: 10c0/92ff9b443bfe8abb15f2b1513ca182d16126359ad4f955ebc83dc4ddcc4ef3fdd2c078bc223f2673dc223488e75c99b16cc4d056624374b799e6a1555cf61b23
   languageName: node
   linkType: hard
 
-"camelcase@npm:^6.0.0, camelcase@npm:^6.2.0, camelcase@npm:^6.3.0":
+"camelcase@npm:^6.2.0, camelcase@npm:^6.3.0":
   version: 6.3.0
   resolution: "camelcase@npm:6.3.0"
   checksum: 10c0/0d701658219bd3116d12da3eab31acddb3f9440790c0792e0d398f0a520a6a4058018e546862b6fba89d7ae990efaeb97da71e1913e9ebf5a8b5621a3d55c710
@@ -15543,7 +12895,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001616, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001669, caniuse-lite@npm:^1.0.30001759":
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001616, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001669, caniuse-lite@npm:^1.0.30001759":
   version: 1.0.30001774
   resolution: "caniuse-lite@npm:1.0.30001774"
   checksum: 10c0/cc6a340a5421b9a67d8fa80889065ee27b2839ad62993571dded5296e18f02bbf685ce7094e93fe908cddc9fefdfad35d6c010b724cc3d22a6479b0d0b679f8c
@@ -15559,20 +12911,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"case-sensitive-paths-webpack-plugin@npm:^2.3.0":
-  version: 2.4.0
-  resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0"
-  checksum: 10c0/310dab619b661a7fa44ed773870be6d6d7373faff6953ad92720f9553e2579e46dda5b9a79eae6d25ff3733cc15aa466b96e5811af16213f23c115aa220b4ab4
-  languageName: node
-  linkType: hard
-
-"ccount@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "ccount@npm:1.1.0"
-  checksum: 10c0/9ccfddfa45c8d6d01411b8e30d2ce03c55c33f32a69bdb84ee44d743427cdb01b03159954917023d0dac960c34973ba42626bb9fa883491ebb663a53a6713d43
-  languageName: node
-  linkType: hard
-
 "ccount@npm:^2.0.0":
   version: 2.0.1
   resolution: "ccount@npm:2.0.1"
@@ -15600,7 +12938,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:4, chalk@npm:4.1.2, chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.2":
+"chalk@npm:4.1.2, chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.2":
   version: 4.1.2
   resolution: "chalk@npm:4.1.2"
   dependencies:
@@ -15610,7 +12948,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^2.0.1, chalk@npm:^2.4.1, chalk@npm:^2.4.2":
+"chalk@npm:^2.0.1, chalk@npm:^2.4.2":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
   dependencies:
@@ -15638,32 +12976,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"change-case@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "change-case@npm:3.1.0"
-  dependencies:
-    camel-case: "npm:^3.0.0"
-    constant-case: "npm:^2.0.0"
-    dot-case: "npm:^2.1.0"
-    header-case: "npm:^1.0.0"
-    is-lower-case: "npm:^1.1.0"
-    is-upper-case: "npm:^1.1.0"
-    lower-case: "npm:^1.1.1"
-    lower-case-first: "npm:^1.0.0"
-    no-case: "npm:^2.3.2"
-    param-case: "npm:^2.1.0"
-    pascal-case: "npm:^2.0.0"
-    path-case: "npm:^2.1.0"
-    sentence-case: "npm:^2.1.0"
-    snake-case: "npm:^2.1.0"
-    swap-case: "npm:^1.1.0"
-    title-case: "npm:^2.1.0"
-    upper-case: "npm:^1.1.1"
-    upper-case-first: "npm:^1.1.0"
-  checksum: 10c0/cb44722e596e0c69e8ba28dce664b36e537ec76c8296c0baaef11d2b3db1e4a797ed50a99ff9c98a008c69dbe0270cfb96e384417a264d33de4baa709b79b9bb
-  languageName: node
-  linkType: hard
-
 "char-regex@npm:^1.0.2":
   version: 1.0.2
   resolution: "char-regex@npm:1.0.2"
@@ -15720,17 +13032,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chardet@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "chardet@npm:2.1.0"
-  checksum: 10c0/d1b03e47371851ed72741a898281d58f8a9b577aeea6fdfa75a86832898b36c550b3ad057e66d50d774a9cebd9f56c66b6880e4fe75e387794538ba7565b0b6f
-  languageName: node
-  linkType: hard
-
-"charenc@npm:0.0.2, charenc@npm:~0.0.1":
-  version: 0.0.2
-  resolution: "charenc@npm:0.0.2"
-  checksum: 10c0/a45ec39363a16799d0f9365c8dd0c78e711415113c6f14787a22462ef451f5013efae8a28f1c058f81fc01f2a6a16955f7a5fd0cd56247ce94a45349c89877d8
+"chardet@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "chardet@npm:2.1.1"
+  checksum: 10c0/d8391dd412338442b3de0d3a488aa9327f8bcf74b62b8723d6bd0b85c4084d50b731320e0a7c710edb1d44de75969995d2784b80e4c13b004a6c7a0db4c6e793
   languageName: node
   linkType: hard
 
@@ -15789,41 +13094,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"child-process-promise@npm:^2.2.0":
-  version: 2.2.1
-  resolution: "child-process-promise@npm:2.2.1"
-  dependencies:
-    cross-spawn: "npm:^4.0.2"
-    node-version: "npm:^1.0.0"
-    promise-polyfill: "npm:^6.0.1"
-  checksum: 10c0/58e65dcb67262a5ab319f63438472534b496e59a81df5cb1b2fc3e383eb4bcce4a16253c49af416579e5264949190a33c04928b13e29da41854d535c86c0f9f0
-  languageName: node
-  linkType: hard
-
-"chokidar@npm:^2.1.8":
-  version: 2.1.8
-  resolution: "chokidar@npm:2.1.8"
-  dependencies:
-    anymatch: "npm:^2.0.0"
-    async-each: "npm:^1.0.1"
-    braces: "npm:^2.3.2"
-    fsevents: "npm:^1.2.7"
-    glob-parent: "npm:^3.1.0"
-    inherits: "npm:^2.0.3"
-    is-binary-path: "npm:^1.0.0"
-    is-glob: "npm:^4.0.0"
-    normalize-path: "npm:^3.0.0"
-    path-is-absolute: "npm:^1.0.0"
-    readdirp: "npm:^2.2.1"
-    upath: "npm:^1.1.1"
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 10c0/5631cc00080224f9482cf5418dcbea111aec02fa8d81a8cfe37e47b9cf36089e071de52d503647e3a821a01426a40adc926ba899f657af86a51b8f8d4eef12a7
-  languageName: node
-  linkType: hard
-
-"chokidar@npm:^3.3.0, chokidar@npm:^3.4.1, chokidar@npm:^3.4.2, chokidar@npm:^3.5.2, chokidar@npm:^3.5.3, chokidar@npm:^3.6.0":
+"chokidar@npm:^3.3.0, chokidar@npm:^3.4.2, chokidar@npm:^3.5.2, chokidar@npm:^3.5.3, chokidar@npm:^3.6.0":
   version: 3.6.0
   resolution: "chokidar@npm:3.6.0"
   dependencies:
@@ -15863,13 +13134,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chroma-js@npm:^2.1.0":
-  version: 2.4.2
-  resolution: "chroma-js@npm:2.4.2"
-  checksum: 10c0/5657cd10892538c4a41e8bd95524d018c3a43318b26dfb20d572b2084bc6d5af742457a6d5701ddecb4d4eceb99995873b22293c1b396ab0b35ef55a264550c8
-  languageName: node
-  linkType: hard
-
 "chrome-launcher@npm:^0.15.2":
   version: 0.15.2
   resolution: "chrome-launcher@npm:0.15.2"
@@ -15891,6 +13155,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chromium-edge-launcher@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "chromium-edge-launcher@npm:0.2.0"
+  dependencies:
+    "@types/node": "npm:*"
+    escape-string-regexp: "npm:^4.0.0"
+    is-wsl: "npm:^2.2.0"
+    lighthouse-logger: "npm:^1.0.0"
+    mkdirp: "npm:^1.0.4"
+    rimraf: "npm:^3.0.2"
+  checksum: 10c0/880972816dd9b95c0eb77d1f707569667a8cce7cc29fe9c8d199c47fdfbe4971e9da3e5a29f61c4ecec29437ac7cebbbb5afc30bec96306579d1121e7340606a
+  languageName: node
+  linkType: hard
+
 "ci-info@npm:^2.0.0":
   version: 2.0.0
   resolution: "ci-info@npm:2.0.0"
@@ -15905,16 +13183,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cipher-base@npm:^1.0.0, cipher-base@npm:^1.0.1, cipher-base@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "cipher-base@npm:1.0.4"
-  dependencies:
-    inherits: "npm:^2.0.1"
-    safe-buffer: "npm:^5.0.1"
-  checksum: 10c0/d8d005f8b64d8a77b3d3ce531301ae7b45902c9cab4ec8b66bdbd2bf2a1d9fceb9a2133c293eb3c060b2d964da0f14c47fb740366081338aa3795dd1faa8984b
-  languageName: node
-  linkType: hard
-
 "cjs-module-lexer@npm:^1.0.0":
   version: 1.2.2
   resolution: "cjs-module-lexer@npm:1.2.2"
@@ -15922,27 +13190,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"class-utils@npm:^0.3.5":
-  version: 0.3.6
-  resolution: "class-utils@npm:0.3.6"
-  dependencies:
-    arr-union: "npm:^3.1.0"
-    define-property: "npm:^0.2.5"
-    isobject: "npm:^3.0.0"
-    static-extend: "npm:^0.1.1"
-  checksum: 10c0/d44f4afc7a3e48dba4c2d3fada5f781a1adeeff371b875c3b578bc33815c6c29d5d06483c2abfd43a32d35b104b27b67bfa39c2e8a422fa858068bd756cfbd42
-  languageName: node
-  linkType: hard
-
-"clean-css@npm:^4.2.3":
-  version: 4.2.4
-  resolution: "clean-css@npm:4.2.4"
-  dependencies:
-    source-map: "npm:~0.6.0"
-  checksum: 10c0/0e41795fdc9d65e5e17a3b0016d90bf2a653e3a680829b5bcebdbab48604cfe36d96d8af6346338d2c2aca8aa9af024ac4fb752ac3eb5b71bef68a34a129b58a
-  languageName: node
-  linkType: hard
-
 "clean-css@npm:^5.2.2, clean-css@npm:^5.3.2, clean-css@npm:~5.3.2":
   version: 5.3.3
   resolution: "clean-css@npm:5.3.3"
@@ -16005,7 +13252,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cli-table3@npm:^0.6.1, cli-table3@npm:^0.6.3":
+"cli-table3@npm:^0.6.3":
   version: 0.6.5
   resolution: "cli-table3@npm:0.6.5"
   dependencies:
@@ -16025,17 +13272,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cliui@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "cliui@npm:6.0.0"
-  dependencies:
-    string-width: "npm:^4.2.0"
-    strip-ansi: "npm:^6.0.0"
-    wrap-ansi: "npm:^6.2.0"
-  checksum: 10c0/35229b1bb48647e882104cac374c9a18e34bbf0bace0e2cf03000326b6ca3050d6b59545d91e17bfe3705f4a0e2988787aa5cde6331bf5cbbf0164732cef6492
-  languageName: node
-  linkType: hard
-
 "cliui@npm:^7.0.2":
   version: 7.0.4
   resolution: "cliui@npm:7.0.4"
@@ -16076,13 +13312,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clone@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "clone@npm:2.1.2"
-  checksum: 10c0/ed0601cd0b1606bc7d82ee7175b97e68d1dd9b91fd1250a3617b38d34a095f8ee0431d40a1a611122dcccb4f93295b4fdb94942aa763392b5fe44effa50c2d5e
-  languageName: node
-  linkType: hard
-
 "clsx@npm:^2.0.0":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
@@ -16111,13 +13340,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"collapse-white-space@npm:^1.0.2":
-  version: 1.0.6
-  resolution: "collapse-white-space@npm:1.0.6"
-  checksum: 10c0/7fd27a883eee1ddd5e39c53fbcd4a42dfe2a65dfac70e2c442d20827f5258202b360a12e99b4f0128c3addd2d64796bb2eb1bb8a3b75d5a2e9c061adb549c36b
-  languageName: node
-  linkType: hard
-
 "collapse-white-space@npm:^2.0.0":
   version: 2.1.0
   resolution: "collapse-white-space@npm:2.1.0"
@@ -16132,16 +13354,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"collection-visit@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "collection-visit@npm:1.0.0"
-  dependencies:
-    map-visit: "npm:^1.0.0"
-    object-visit: "npm:^1.0.0"
-  checksum: 10c0/add72a8d1c37cb90e53b1aaa2c31bf1989bfb733f0b02ce82c9fa6828c7a14358dba2e4f8e698c02f69e424aeccae1ffb39acdeaf872ade2f41369e84a2fcf8a
-  languageName: node
-  linkType: hard
-
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -16167,23 +13379,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:^1.0.0, color-name@npm:^1.1.4, color-name@npm:~1.1.4":
+"color-name@npm:^1.1.4, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: 10c0/a1a3f914156960902f46f7f56bc62effc6c94e84b2cae157a526b1c1f74b677a47ec602bf68a61abfa2b42d15b7c5651c6dbe72a43af720bc588dff885b10f95
   languageName: node
   linkType: hard
 
-"color-string@npm:^1.9.0":
-  version: 1.9.1
-  resolution: "color-string@npm:1.9.1"
-  dependencies:
-    color-name: "npm:^1.0.0"
-    simple-swizzle: "npm:^0.2.2"
-  checksum: 10c0/b0bfd74c03b1f837f543898b512f5ea353f71630ccdd0d66f83028d1f0924a7d4272deb278b9aef376cacf1289b522ac3fb175e99895283645a2dc3a33af2404
-  languageName: node
-  linkType: hard
-
 "color-support@npm:^1.1.2":
   version: 1.1.3
   resolution: "color-support@npm:1.1.3"
@@ -16193,16 +13395,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color@npm:^4.2.3":
-  version: 4.2.3
-  resolution: "color@npm:4.2.3"
-  dependencies:
-    color-convert: "npm:^2.0.1"
-    color-string: "npm:^1.9.0"
-  checksum: 10c0/7fbe7cfb811054c808349de19fb380252e5e34e61d7d168ec3353e9e9aacb1802674bddc657682e4e9730c2786592a4de6f8283e7e0d3870b829bb0b7b2f6118
-  languageName: node
-  linkType: hard
-
 "colord@npm:^2.9.3":
   version: 2.9.3
   resolution: "colord@npm:2.9.3"
@@ -16210,13 +13402,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"colorette@npm:^1.0.7":
-  version: 1.4.0
-  resolution: "colorette@npm:1.4.0"
-  checksum: 10c0/4955c8f7daafca8ae7081d672e4bd89d553bd5782b5846d5a7e05effe93c2f15f7e9c0cb46f341b59f579a39fcf436241ff79594899d75d5f3460c03d607fe9e
-  languageName: node
-  linkType: hard
-
 "colorette@npm:^2.0.10, colorette@npm:^2.0.14":
   version: 2.0.19
   resolution: "colorette@npm:2.0.19"
@@ -16250,13 +13435,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"comma-separated-tokens@npm:^1.0.0":
-  version: 1.0.8
-  resolution: "comma-separated-tokens@npm:1.0.8"
-  checksum: 10c0/c3bcfeaa6d50313528a006a40bcc0f9576086665c9b48d4b3a76ddd63e7d6174734386c98be1881cbf6ecfc25e1db61cd775a7b896d2ea7a65de28f83a0f9b17
-  languageName: node
-  linkType: hard
-
 "comma-separated-tokens@npm:^2.0.0":
   version: 2.0.3
   resolution: "comma-separated-tokens@npm:2.0.3"
@@ -16264,13 +13442,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"command-exists@npm:^1.2.4, command-exists@npm:^1.2.8":
-  version: 1.2.9
-  resolution: "command-exists@npm:1.2.9"
-  checksum: 10c0/75040240062de46cd6cd43e6b3032a8b0494525c89d3962e280dde665103f8cc304a8b313a5aa541b91da2f5a9af75c5959dc3a77893a2726407a5e9a0234c16
-  languageName: node
-  linkType: hard
-
 "commander@npm:^10.0.0":
   version: 10.0.1
   resolution: "commander@npm:10.0.1"
@@ -16285,21 +13456,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^12.1.0":
+"commander@npm:^12.0.0, commander@npm:^12.1.0":
   version: 12.1.0
   resolution: "commander@npm:12.1.0"
   checksum: 10c0/6e1996680c083b3b897bfc1cfe1c58dfbcd9842fd43e1aaf8a795fbc237f65efcc860a3ef457b318e73f29a4f4a28f6403c3d653d021d960e4632dd45bde54a9
   languageName: node
   linkType: hard
 
-"commander@npm:^2.19.0, commander@npm:^2.20.0":
+"commander@npm:^2.20.0":
   version: 2.20.3
   resolution: "commander@npm:2.20.3"
   checksum: 10c0/74c781a5248c2402a0a3e966a0a2bba3c054aad144f5c023364be83265e796b20565aa9feff624132ff629aa64e16999fa40a743c10c12f7c61e96a794b99288
   languageName: node
   linkType: hard
 
-"commander@npm:^4.0.0, commander@npm:^4.1.1":
+"commander@npm:^4.0.0":
   version: 4.1.1
   resolution: "commander@npm:4.1.1"
   checksum: 10c0/84a76c08fe6cc08c9c93f62ac573d2907d8e79138999312c92d4155bc2325d487d64d13f669b2000c9f8caf70493c1be2dac74fec3c51d5a04f8bc3ae1830bab
@@ -16313,7 +13484,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^6.2.0, commander@npm:^6.2.1":
+"commander@npm:^6.2.0":
   version: 6.2.1
   resolution: "commander@npm:6.2.1"
   checksum: 10c0/85748abd9d18c8bc88febed58b98f66b7c591d9b5017cad459565761d7b29ca13b7783ea2ee5ce84bf235897333706c4ce29adf1ce15c8252780e7000e2ce9ea
@@ -16334,20 +13505,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^9.4.1":
-  version: 9.5.0
-  resolution: "commander@npm:9.5.0"
-  checksum: 10c0/5f7784fbda2aaec39e89eb46f06a999e00224b3763dc65976e05929ec486e174fe9aac2655f03ba6a5e83875bd173be5283dc19309b7c65954701c02025b3c1d
-  languageName: node
-  linkType: hard
-
-"commander@npm:~2.14.1":
-  version: 2.14.1
-  resolution: "commander@npm:2.14.1"
-  checksum: 10c0/b29bb0220fb27645a958a9cbecc5c138adeb4d151a17d43acd5c8cd7ffed1a64e502a20338e3faad235c5c8e23df893dd02dfe6eddf47f90fc51b51825084719
-  languageName: node
-  linkType: hard
-
 "common-path-prefix@npm:^3.0.0":
   version: 3.0.0
   resolution: "common-path-prefix@npm:3.0.0"
@@ -16376,20 +13533,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"component-emitter@npm:^1.2.1":
-  version: 1.3.0
-  resolution: "component-emitter@npm:1.3.0"
-  checksum: 10c0/68774a0a3754fb6c0ba53c2e88886dfbd0c773931066abb1d7fd1b0c893b2a838d8f088ab4dca1f18cc1a4fc2e6932019eba3ded2d931b5ba2241ce40e93a24f
-  languageName: node
-  linkType: hard
-
-"component-type@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "component-type@npm:1.2.1"
-  checksum: 10c0/8f9537d529d619484b8572cd569f212ea264d8c84dc65ccaaa0136e4a2e06696e9a2b2b1979ef264251f8b4ebfa075f23c860b6e4270385fd7663b42e5727cee
-  languageName: node
-  linkType: hard
-
 "compressible@npm:~2.0.16":
   version: 2.0.18
   resolution: "compressible@npm:2.0.18"
@@ -16399,7 +13542,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compression@npm:^1.7.1, compression@npm:^1.7.4":
+"compression@npm:^1.7.4":
   version: 1.7.4
   resolution: "compression@npm:1.7.4"
   dependencies:
@@ -16414,18 +13557,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"concat-stream@npm:^1.5.0":
-  version: 1.6.2
-  resolution: "concat-stream@npm:1.6.2"
-  dependencies:
-    buffer-from: "npm:^1.0.0"
-    inherits: "npm:^2.0.3"
-    readable-stream: "npm:^2.2.2"
-    typedarray: "npm:^0.0.6"
-  checksum: 10c0/2e9864e18282946dabbccb212c5c7cec0702745e3671679eb8291812ca7fd12023f7d8cb36493942a62f770ac96a7f90009dc5c82ad69893438371720fa92617
-  languageName: node
-  linkType: hard
-
 "config-chain@npm:^1.1.11":
   version: 1.1.13
   resolution: "config-chain@npm:1.1.13"
@@ -16475,13 +13606,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"console-browserify@npm:^1.1.0":
-  version: 1.2.0
-  resolution: "console-browserify@npm:1.2.0"
-  checksum: 10c0/89b99a53b7d6cee54e1e64fa6b1f7ac24b844b4019c5d39db298637e55c1f4ffa5c165457ad984864de1379df2c8e1886cbbdac85d9dbb6876a9f26c3106f226
-  languageName: node
-  linkType: hard
-
 "console-control-strings@npm:^1.0.0, console-control-strings@npm:^1.1.0":
   version: 1.1.0
   resolution: "console-control-strings@npm:1.1.0"
@@ -16489,23 +13613,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"constant-case@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "constant-case@npm:2.0.0"
-  dependencies:
-    snake-case: "npm:^2.1.0"
-    upper-case: "npm:^1.1.1"
-  checksum: 10c0/795142a64dd61da267e937502a1ce060abdbc42d4f68367d08f1de34fc06a1db240ac09658275122f8e171448b19a4645b023ee8229803def1a11559e80b6132
-  languageName: node
-  linkType: hard
-
-"constants-browserify@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "constants-browserify@npm:1.0.0"
-  checksum: 10c0/ab49b1d59a433ed77c964d90d19e08b2f77213fb823da4729c0baead55e3c597f8f97ebccfdfc47bd896d43854a117d114c849a6f659d9986420e97da0f83ac5
-  languageName: node
-  linkType: hard
-
 "content-disposition@npm:0.5.2":
   version: 0.5.2
   resolution: "content-disposition@npm:0.5.2"
@@ -16536,7 +13643,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0":
+"convert-source-map@npm:^1.6.0":
   version: 1.8.0
   resolution: "convert-source-map@npm:1.8.0"
   dependencies:
@@ -16590,27 +13697,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-concurrently@npm:^1.0.0":
-  version: 1.0.5
-  resolution: "copy-concurrently@npm:1.0.5"
-  dependencies:
-    aproba: "npm:^1.1.1"
-    fs-write-stream-atomic: "npm:^1.0.8"
-    iferr: "npm:^0.1.5"
-    mkdirp: "npm:^0.5.1"
-    rimraf: "npm:^2.5.4"
-    run-queue: "npm:^1.0.0"
-  checksum: 10c0/c2ce213cb27ee3df584d16eb6c9bfe99cfb531585007533c3e4c752521b4fbf0b2f7f90807d79c496683330808ecd9fdbd9ab9ddfa0913150b7f5097423348ce
-  languageName: node
-  linkType: hard
-
-"copy-descriptor@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "copy-descriptor@npm:0.1.1"
-  checksum: 10c0/161f6760b7348c941007a83df180588fe2f1283e0867cc027182734e0f26134e6cc02de09aa24a95dc267b2e2025b55659eef76c8019df27bc2d883033690181
-  languageName: node
-  linkType: hard
-
 "copy-text-to-clipboard@npm:^3.2.0":
   version: 3.2.2
   resolution: "copy-text-to-clipboard@npm:3.2.2"
@@ -16634,7 +13720,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-compat@npm:^3.43.0, core-js-compat@npm:^3.8.1":
+"core-js-compat@npm:^3.43.0":
   version: 3.45.0
   resolution: "core-js-compat@npm:3.45.0"
   dependencies:
@@ -16643,14 +13729,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-pure@npm:^3.30.2, core-js-pure@npm:^3.8.1":
+"core-js-pure@npm:^3.30.2":
   version: 3.39.0
   resolution: "core-js-pure@npm:3.39.0"
   checksum: 10c0/5d954e467703ea1e860eb070bd72cf9dc5bfddd7037c09d750f0eba3ffc4066db741a595af86dc833a709929e161a909e48da3cbdd2d9bee7795cb516dc9f7d4
   languageName: node
   linkType: hard
 
-"core-js@npm:^3.0.4, core-js@npm:^3.31.1, core-js@npm:^3.6.5, core-js@npm:^3.8.2":
+"core-js@npm:^3.31.1, core-js@npm:^3.6.5, core-js@npm:^3.8.2":
   version: 3.39.0
   resolution: "core-js@npm:3.39.0"
   checksum: 10c0/f7602069b6afb2e3298eec612a5c1e0c3e6a458930fbfc7a4c5f9ac03426507f49ce395eecdd2d9bae9024f820e44582b67ffe16f2272395af26964f174eeb6b
@@ -16674,7 +13760,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^5.0.5, cosmiconfig@npm:^5.0.7, cosmiconfig@npm:^5.1.0, cosmiconfig@npm:^5.2.0":
+"cosmiconfig@npm:^5.0.7, cosmiconfig@npm:^5.1.0, cosmiconfig@npm:^5.2.0":
   version: 5.2.1
   resolution: "cosmiconfig@npm:5.2.1"
   dependencies:
@@ -16729,35 +13815,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cp-file@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "cp-file@npm:7.0.0"
-  dependencies:
-    graceful-fs: "npm:^4.1.2"
-    make-dir: "npm:^3.0.0"
-    nested-error-stacks: "npm:^2.0.0"
-    p-event: "npm:^4.1.0"
-  checksum: 10c0/db3ef3e3e466742f392ae71edb9b2cdbb314e855d97630a65de57bc1097bacf6e844f6d9d44882b8678c0de26ba7e656c2c915960435970067823372e807eafa
-  languageName: node
-  linkType: hard
-
-"cpy@npm:^8.1.2":
-  version: 8.1.2
-  resolution: "cpy@npm:8.1.2"
-  dependencies:
-    arrify: "npm:^2.0.1"
-    cp-file: "npm:^7.0.0"
-    globby: "npm:^9.2.0"
-    has-glob: "npm:^1.0.0"
-    junk: "npm:^3.1.0"
-    nested-error-stacks: "npm:^2.1.0"
-    p-all: "npm:^2.1.0"
-    p-filter: "npm:^2.1.0"
-    p-map: "npm:^3.0.0"
-  checksum: 10c0/84611fdd526a0582ae501a0fa1e1d55e16348c69110eb17be5fc0c087b7b2aa6caec014286b669e4f123750d01e0c4db77d32fdcdb9840c3df4d161a137a345a
-  languageName: node
-  linkType: hard
-
 "crc32@npm:>= 0.2.2":
   version: 0.2.2
   resolution: "crc32@npm:0.2.2"
@@ -16767,43 +13824,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"create-ecdh@npm:^4.0.0":
-  version: 4.0.4
-  resolution: "create-ecdh@npm:4.0.4"
-  dependencies:
-    bn.js: "npm:^4.1.0"
-    elliptic: "npm:^6.5.3"
-  checksum: 10c0/77b11a51360fec9c3bce7a76288fc0deba4b9c838d5fb354b3e40c59194d23d66efe6355fd4b81df7580da0661e1334a235a2a5c040b7569ba97db428d466e7f
-  languageName: node
-  linkType: hard
-
-"create-hash@npm:^1.1.0, create-hash@npm:^1.1.2, create-hash@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "create-hash@npm:1.2.0"
-  dependencies:
-    cipher-base: "npm:^1.0.1"
-    inherits: "npm:^2.0.1"
-    md5.js: "npm:^1.3.4"
-    ripemd160: "npm:^2.0.1"
-    sha.js: "npm:^2.4.0"
-  checksum: 10c0/d402e60e65e70e5083cb57af96d89567954d0669e90550d7cec58b56d49c4b193d35c43cec8338bc72358198b8cbf2f0cac14775b651e99238e1cf411490f915
-  languageName: node
-  linkType: hard
-
-"create-hmac@npm:^1.1.0, create-hmac@npm:^1.1.4, create-hmac@npm:^1.1.7":
-  version: 1.1.7
-  resolution: "create-hmac@npm:1.1.7"
-  dependencies:
-    cipher-base: "npm:^1.0.3"
-    create-hash: "npm:^1.1.0"
-    inherits: "npm:^2.0.1"
-    ripemd160: "npm:^2.0.0"
-    safe-buffer: "npm:^5.0.1"
-    sha.js: "npm:^2.4.8"
-  checksum: 10c0/24332bab51011652a9a0a6d160eed1e8caa091b802335324ae056b0dcb5acbc9fcf173cf10d128eba8548c3ce98dfa4eadaa01bd02f44a34414baee26b651835
-  languageName: node
-  linkType: hard
-
 "create-jest@npm:^29.7.0":
   version: 29.7.0
   resolution: "create-jest@npm:29.7.0"
@@ -16833,7 +13853,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-fetch@npm:3.1.5, cross-fetch@npm:^3.1.5":
+"cross-fetch@npm:3.1.5":
   version: 3.1.5
   resolution: "cross-fetch@npm:3.1.5"
   dependencies:
@@ -16842,17 +13862,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-spawn@npm:^4.0.2":
-  version: 4.0.2
-  resolution: "cross-spawn@npm:4.0.2"
-  dependencies:
-    lru-cache: "npm:^4.0.1"
-    which: "npm:^1.2.9"
-  checksum: 10c0/4de7254653b658776be8e1050473349723d2ac8bc10b912fbeb159ad32d06c7fa2135b04b896b7cbe0141d274dae9d7543cc6e5c9c919e2062e44a66c2184665
-  languageName: node
-  linkType: hard
-
-"cross-spawn@npm:^6.0.0, cross-spawn@npm:^6.0.5":
+"cross-spawn@npm:^6.0.0":
   version: 6.0.5
   resolution: "cross-spawn@npm:6.0.5"
   dependencies:
@@ -16865,7 +13875,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.5, cross-spawn@npm:^7.0.6":
+"cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.5, cross-spawn@npm:^7.0.6":
   version: 7.0.6
   resolution: "cross-spawn@npm:7.0.6"
   dependencies:
@@ -16876,46 +13886,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"crypt@npm:0.0.2, crypt@npm:~0.0.1":
-  version: 0.0.2
-  resolution: "crypt@npm:0.0.2"
-  checksum: 10c0/adbf263441dd801665d5425f044647533f39f4612544071b1471962209d235042fb703c27eea2795c7c53e1dfc242405173003f83cf4f4761a633d11f9653f18
-  languageName: node
-  linkType: hard
-
-"crypto-browserify@npm:^3.11.0":
-  version: 3.12.0
-  resolution: "crypto-browserify@npm:3.12.0"
-  dependencies:
-    browserify-cipher: "npm:^1.0.0"
-    browserify-sign: "npm:^4.0.0"
-    create-ecdh: "npm:^4.0.0"
-    create-hash: "npm:^1.1.0"
-    create-hmac: "npm:^1.1.0"
-    diffie-hellman: "npm:^5.0.0"
-    inherits: "npm:^2.0.1"
-    pbkdf2: "npm:^3.0.3"
-    public-encrypt: "npm:^4.0.0"
-    randombytes: "npm:^2.0.0"
-    randomfill: "npm:^1.0.3"
-  checksum: 10c0/0c20198886576050a6aa5ba6ae42f2b82778bfba1753d80c5e7a090836890dc372bdc780986b2568b4fb8ed2a91c958e61db1f0b6b1cc96af4bd03ffc298ba92
-  languageName: node
-  linkType: hard
-
-"crypto-random-string@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "crypto-random-string@npm:1.0.0"
-  checksum: 10c0/0cb4dbbb895656919d1de11ba43829a3527edddb85a9c49c9d4c4eb783d3b03fc9f371cefee62c87082fd8758db2798a52a9cad48a7381826190d3c2cf858e4a
-  languageName: node
-  linkType: hard
-
-"crypto-random-string@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "crypto-random-string@npm:2.0.0"
-  checksum: 10c0/288589b2484fe787f9e146f56c4be90b940018f17af1b152e4dde12309042ff5a2bf69e949aab8b8ac253948381529cc6f3e5a2427b73643a71ff177fa122b37
-  languageName: node
-  linkType: hard
-
 "crypto-random-string@npm:^4.0.0":
   version: 4.0.0
   resolution: "crypto-random-string@npm:4.0.0"
@@ -16972,29 +13942,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-loader@npm:^3.6.0":
-  version: 3.6.0
-  resolution: "css-loader@npm:3.6.0"
-  dependencies:
-    camelcase: "npm:^5.3.1"
-    cssesc: "npm:^3.0.0"
-    icss-utils: "npm:^4.1.1"
-    loader-utils: "npm:^1.2.3"
-    normalize-path: "npm:^3.0.0"
-    postcss: "npm:^7.0.32"
-    postcss-modules-extract-imports: "npm:^2.0.0"
-    postcss-modules-local-by-default: "npm:^3.0.2"
-    postcss-modules-scope: "npm:^2.2.0"
-    postcss-modules-values: "npm:^3.0.0"
-    postcss-value-parser: "npm:^4.1.0"
-    schema-utils: "npm:^2.7.0"
-    semver: "npm:^6.3.0"
-  peerDependencies:
-    webpack: ^4.0.0 || ^5.0.0
-  checksum: 10c0/ba9065a63f7531d50197207f2c9abb4d75f7e46db27bcfeb6b615a9fb1b1bf48ef4ccdf0f161ff6d35b6fe8752ee3259ee8eeca492666fd2703277d4d3c83534
-  languageName: node
-  linkType: hard
-
 "css-loader@npm:^6.8.1":
   version: 6.11.0
   resolution: "css-loader@npm:6.11.0"
@@ -17344,22 +14291,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"currently-unhandled@npm:^0.4.1":
-  version: 0.4.1
-  resolution: "currently-unhandled@npm:0.4.1"
-  dependencies:
-    array-find-index: "npm:^1.0.1"
-  checksum: 10c0/32d197689ec32f035910202c1abb0dc6424dce01d7b51779c685119b380d98535c110ffff67a262fc7e367612a7dfd30d3d3055f9a6634b5a9dd1302de7ef11c
-  languageName: node
-  linkType: hard
-
-"cyclist@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "cyclist@npm:1.0.1"
-  checksum: 10c0/3381d3b66a3b268e6e0abcc1fa8fbeeb9a98391d8455677509f9833813d7680cc737a10141f54c229e42f5b3133250f36f1aa04f56ef4ba9b29fa728c3c48c01
-  languageName: node
-  linkType: hard
-
 "d3-array@npm:2 - 3, d3-array@npm:2.10.0 - 3, d3-array@npm:^3.2.4":
   version: 3.2.4
   resolution: "d3-array@npm:3.2.4"
@@ -17489,13 +14420,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dag-map@npm:~1.0.0":
-  version: 1.0.2
-  resolution: "dag-map@npm:1.0.2"
-  checksum: 10c0/1b5ee77cbc9caf61178db592ecc8fa8f6905fd4b0571176af74d2fece2332b68c0e9e8275f1c2c76bc1f0c84a9dc973f87233db7a06375bd13254fae9866867f
-  languageName: node
-  linkType: hard
-
 "damerau-levenshtein@npm:^1.0.8":
   version: 1.0.8
   resolution: "damerau-levenshtein@npm:1.0.8"
@@ -17564,13 +14488,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dayjs@npm:^1.8.15":
-  version: 1.11.3
-  resolution: "dayjs@npm:1.11.3"
-  checksum: 10c0/989758998b6ce11af4a12cd8cdb99ca1d24163db585564472d7bd2cef06fd68998b0e784867b4a1ca4cb8e31af5991ecd9c8f816a8f31967bde375bd58bb4230
-  languageName: node
-  linkType: hard
-
 "debounce@npm:^1.2.1":
   version: 1.2.1
   resolution: "debounce@npm:1.2.1"
@@ -17578,7 +14495,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:2.6.9, debug@npm:^2.2.0, debug@npm:^2.3.3, debug@npm:^2.6.0, debug@npm:^2.6.9":
+"debug@npm:2.6.9, debug@npm:^2.6.0, debug@npm:^2.6.9":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
   dependencies:
@@ -17587,7 +14504,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.5, debug@npm:^4.3.7, debug@npm:^4.4.0, debug@npm:^4.4.1":
+"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.3.5, debug@npm:^4.3.7, debug@npm:^4.4.0, debug@npm:^4.4.1":
   version: 4.4.1
   resolution: "debug@npm:4.4.1"
   dependencies:
@@ -17620,7 +14537,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:^3.0.0, debug@npm:^3.1.0, debug@npm:^3.2.7":
+"debug@npm:^3.1.0, debug@npm:^3.2.7":
   version: 3.2.7
   resolution: "debug@npm:3.2.7"
   dependencies:
@@ -17639,20 +14556,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decamelize@npm:^1.1.0, decamelize@npm:^1.1.2, decamelize@npm:^1.2.0":
+"decamelize@npm:^1.1.0, decamelize@npm:^1.2.0":
   version: 1.2.0
   resolution: "decamelize@npm:1.2.0"
   checksum: 10c0/85c39fe8fbf0482d4a1e224ef0119db5c1897f8503bcef8b826adff7a1b11414972f6fef2d7dec2ee0b4be3863cf64ac1439137ae9e6af23a3d8dcbe26a5b4b2
   languageName: node
   linkType: hard
 
-"decamelize@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "decamelize@npm:4.0.0"
-  checksum: 10c0/e06da03fc05333e8cd2778c1487da67ffbea5b84e03ca80449519b8fa61f888714bbc6f459ea963d5641b4aa98832130eb5cd193d90ae9f0a27eee14be8e278d
-  languageName: node
-  linkType: hard
-
 "decamelize@npm:^5.0.0":
   version: 5.0.1
   resolution: "decamelize@npm:5.0.1"
@@ -17676,7 +14586,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decode-uri-component@npm:^0.2.0, decode-uri-component@npm:^0.2.2":
+"decode-uri-component@npm:^0.2.2":
   version: 0.2.2
   resolution: "decode-uri-component@npm:0.2.2"
   checksum: 10c0/1f4fa54eb740414a816b3f6c24818fbfcabd74ac478391e9f4e2282c994127db02010ce804f3d08e38255493cfe68608b3f5c8e09fd6efc4ae46c807691f7a31
@@ -17692,13 +14602,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dedent@npm:^0.7.0":
-  version: 0.7.0
-  resolution: "dedent@npm:0.7.0"
-  checksum: 10c0/7c3aa00ddfe3e5fcd477958e156156a5137e3bb6ff1493ca05edff4decf29a90a057974cc77e75951f8eb801c1816cb45aea1f52d628cdd000b82b36ab839d1b
-  languageName: node
-  linkType: hard
-
 "dedent@npm:^1.0.0, dedent@npm:^1.5.1":
   version: 1.5.3
   resolution: "dedent@npm:1.5.3"
@@ -17765,26 +14668,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.0, deepmerge@npm:^4.3.1":
+"deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1":
   version: 4.3.1
   resolution: "deepmerge@npm:4.3.1"
   checksum: 10c0/e53481aaf1aa2c4082b5342be6b6d8ad9dfe387bc92ce197a66dea08bd4265904a087e75e464f14d1347cf2ac8afe1e4c16b266e0561cc5df29382d3c5f80044
   languageName: node
   linkType: hard
 
-"default-browser-id@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "default-browser-id@npm:1.0.4"
-  dependencies:
-    bplist-parser: "npm:^0.1.0"
-    meow: "npm:^3.1.0"
-    untildify: "npm:^2.0.0"
-  bin:
-    default-browser-id: cli.js
-  checksum: 10c0/a00a2ab66beab70490b4d76258a1f2eadfadca6414bf67ab78aa25b33dc3de0c4c813bb8f204271aa7a08281c39474487db0229e325112456464fb97a0522a8a
-  languageName: node
-  linkType: hard
-
 "default-browser-id@npm:^5.0.0":
   version: 5.0.0
   resolution: "default-browser-id@npm:5.0.0"
@@ -17802,16 +14692,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"default-gateway@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "default-gateway@npm:4.2.0"
-  dependencies:
-    execa: "npm:^1.0.0"
-    ip-regex: "npm:^2.1.0"
-  checksum: 10c0/2f499b3a9a6c995fd2b4c0d2411256b1899c94e7eacdb895be64e25c301fa8bce8fd3f8152e540669bb178c6a355154c2f86ec23d4ff40ff3b8413d2a59cd86d
-  languageName: node
-  linkType: hard
-
 "default-gateway@npm:^6.0.3":
   version: 6.0.3
   resolution: "default-gateway@npm:6.0.3"
@@ -17862,7 +14742,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-properties@npm:^1.1.2, define-properties@npm:^1.1.3, define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
+"define-properties@npm:^1.1.3, define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
   version: 1.2.1
   resolution: "define-properties@npm:1.2.1"
   dependencies:
@@ -17873,34 +14753,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-property@npm:^0.2.5":
-  version: 0.2.5
-  resolution: "define-property@npm:0.2.5"
-  dependencies:
-    is-descriptor: "npm:^0.1.0"
-  checksum: 10c0/9986915c0893818dedc9ca23eaf41370667762fd83ad8aa4bf026a28563120dbaacebdfbfbf2b18d3b929026b9c6ee972df1dbf22de8fafb5fe6ef18361e4750
-  languageName: node
-  linkType: hard
-
-"define-property@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "define-property@npm:1.0.0"
-  dependencies:
-    is-descriptor: "npm:^1.0.0"
-  checksum: 10c0/d7cf09db10d55df305f541694ed51dafc776ad9bb8a24428899c9f2d36b11ab38dce5527a81458d1b5e7c389f8cbe803b4abad6e91a0037a329d153b84fc975e
-  languageName: node
-  linkType: hard
-
-"define-property@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "define-property@npm:2.0.2"
-  dependencies:
-    is-descriptor: "npm:^1.0.2"
-    isobject: "npm:^3.0.1"
-  checksum: 10c0/f91a08ad008fa764172a2c072adc7312f10217ade89ddaea23018321c6d71b2b68b8c229141ed2064179404e345c537f1a2457c379824813695b51a6ad3e4969
-  languageName: node
-  linkType: hard
-
 "deflate-js@npm:>= 0.2.2":
   version: 0.2.3
   resolution: "deflate-js@npm:0.2.3"
@@ -17922,16 +14774,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"degit@npm:^2.8.4":
-  version: 2.8.4
-  resolution: "degit@npm:2.8.4"
-  bin:
-    degit: degit
-  checksum: 10c0/25ae9daf8010b450ffe8307c5ca903fe8bfaa8bb8622da12f81f2b6c3b1bb24e96fe3ab0b4ec4a1a19684f674b2158a8a3a2178c481882cc4991c7a0859ec40a
-  languageName: node
-  linkType: hard
-
-"del@npm:^6.0.0, del@npm:^6.1.1":
+"del@npm:^6.1.1":
   version: 6.1.1
   resolution: "del@npm:6.1.1"
   dependencies:
@@ -17961,13 +14804,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"denodeify@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "denodeify@npm:1.2.1"
-  checksum: 10c0/d7e5a974eae4e837f7c70ecb9bdbafae9fbdda1993a86dead1b0ec1d162ed34a9adb2cfbc0bce30d8ccf7a7294aba660862fdce761a0c6157650a0839630d33a
-  languageName: node
-  linkType: hard
-
 "depcheck@npm:1.4.7":
   version: 1.4.7
   resolution: "depcheck@npm:1.4.7"
@@ -18069,16 +14905,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"des.js@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "des.js@npm:1.0.1"
-  dependencies:
-    inherits: "npm:^2.0.1"
-    minimalistic-assert: "npm:^1.0.0"
-  checksum: 10c0/69bf742d1c381e01d75151bdcaac71a18d251d7debfc9b6ae5ee4b4edaf39691ae203c5ec9173ba89aedb3ddc622cdff4fca065448c6c2afb1140d9fb826339d
-  languageName: node
-  linkType: hard
-
 "design-system@workspace:.":
   version: 0.0.0-use.local
   resolution: "design-system@workspace:."
@@ -18089,9 +14915,8 @@ __metadata:
     "@babel/plugin-external-helpers": "npm:^7.18.6"
     "@babel/plugin-proposal-class-properties": "npm:^7.18.6"
     "@babel/plugin-proposal-object-rest-spread": "npm:^7.20.7"
-    "@babel/plugin-syntax-import-meta": "npm:^7.10.4"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     "@babel/register": "npm:^7.18.9"
     "@babel/runtime": "npm:^7.28.2"
@@ -18109,10 +14934,6 @@ __metadata:
     "@nx/jest": "npm:20.8.2"
     "@nx/workspace": "npm:20.8.2"
     "@parcel/css-cli": "npm:^1.9.0"
-    "@testing-library/jest-native": "npm:^5.4.3"
-    "@testing-library/react": "npm:^16.0.1"
-    "@testing-library/react-hooks": "npm:^8.0.1"
-    "@testing-library/user-event": "npm:^14.0.4"
     "@types/d3-array": "npm:^3.2.1"
     "@types/d3-color": "npm:^3.1.3"
     "@types/d3-interpolate": "npm:^3.0.4"
@@ -18130,9 +14951,7 @@ __metadata:
     "@types/lodash": "npm:^4.14.178"
     "@types/mini-css-extract-plugin": "npm:^2.2.0"
     "@types/node": "npm:^22"
-    "@types/react-is": "npm:^17.0.2"
     "@types/react-router-dom": "npm:^5.2.0"
-    "@types/react-test-renderer": "npm:^18.3.0"
     "@types/react-virtualized": "npm:^9.21.13"
     "@types/semver": "npm:^7"
     "@types/url-parse": "npm:^1.4.3"
@@ -18155,13 +14974,13 @@ __metadata:
     eslint-plugin-import: "npm:^2.31.0"
     eslint-plugin-jest: "npm:^28.11.0"
     eslint-plugin-react: "npm:^7.37.5"
-    eslint-plugin-react-hooks: "npm:^5.2.0"
+    eslint-plugin-react-hooks: "npm:^7.0.1"
     eslint-plugin-react-native: "npm:^5.0.0"
     eslint-plugin-react-native-a11y: "npm:^3.5.1"
     eslint-plugin-react-perf: "npm:^3.3.3"
     eslint-plugin-react-refresh: "npm:^0.4.20"
     eslint-plugin-simple-import-sort: "npm:^12.1.1"
-    eslint-plugin-storybook: "npm:^9.1.2"
+    eslint-plugin-storybook: "npm:9.1.17"
     eslint-plugin-testing-library: "npm:^7.1.1"
     execa: "npm:^5.1.1"
     fast-glob: "npm:^3.2.11"
@@ -18180,7 +14999,6 @@ __metadata:
     postcss-sort-media-queries: "npm:^4.2.1"
     postcss-styled-syntax: "npm:^0.7.1"
     prettier: "npm:^3.6.2"
-    react-test-renderer: "npm:^18.3.1"
     reassure: "npm:^0.7.1"
     shelljs: "npm:^0.8.5"
     simple-git: "npm:^3.19.1"
@@ -18213,15 +15031,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detab@npm:2.0.4":
-  version: 2.0.4
-  resolution: "detab@npm:2.0.4"
-  dependencies:
-    repeat-string: "npm:^1.5.4"
-  checksum: 10c0/969c7f5a04fc3f8c52eb3b9db2fd4ba20b9b9ce56c5659ebf4cf93ba6c1be68b651665d053affbe99e76733cf7d134546cdd6be038af368f8365f42a646d5fb8
-  languageName: node
-  linkType: hard
-
 "detect-file@npm:^1.0.0":
   version: 1.0.0
   resolution: "detect-file@npm:1.0.0"
@@ -18268,15 +15077,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-package-manager@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "detect-package-manager@npm:2.0.1"
-  dependencies:
-    execa: "npm:^5.1.1"
-  checksum: 10c0/56ffd65228d1ff3ead5ea7f8ab951a517a29270de27510b790c9a8b77d4f36efbd61493e170ca77ee3dc13cbb5218583ce65b78ad14a59dc48565c9bcbbf3c71
-  languageName: node
-  linkType: hard
-
 "detect-port-alt@npm:^1.1.6":
   version: 1.1.6
   resolution: "detect-port-alt@npm:1.1.6"
@@ -18290,7 +15090,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-port@npm:^1.3.0, detect-port@npm:^1.5.1":
+"detect-port@npm:^1.5.1":
   version: 1.6.1
   resolution: "detect-port@npm:1.6.1"
   dependencies:
@@ -18303,56 +15103,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detox@npm:^20.14.8":
-  version: 20.14.8
-  resolution: "detox@npm:20.14.8"
-  dependencies:
-    ajv: "npm:^8.6.3"
-    bunyan: "npm:^1.8.12"
-    bunyan-debug-stream: "npm:^3.1.0"
-    caf: "npm:^15.0.1"
-    chalk: "npm:^4.0.0"
-    child-process-promise: "npm:^2.2.0"
-    execa: "npm:^5.1.1"
-    find-up: "npm:^5.0.0"
-    fs-extra: "npm:^11.0.0"
-    funpermaproxy: "npm:^1.1.0"
-    glob: "npm:^8.0.3"
-    ini: "npm:^1.3.4"
-    jest-environment-emit: "npm:^1.0.5"
-    json-cycle: "npm:^1.3.0"
-    lodash: "npm:^4.17.11"
-    multi-sort-stream: "npm:^1.0.3"
-    multipipe: "npm:^4.0.0"
-    node-ipc: "npm:9.2.1"
-    proper-lockfile: "npm:^3.0.2"
-    resolve-from: "npm:^5.0.0"
-    sanitize-filename: "npm:^1.6.1"
-    semver: "npm:^7.0.0"
-    serialize-error: "npm:^8.0.1"
-    shell-quote: "npm:^1.7.2"
-    signal-exit: "npm:^3.0.3"
-    stream-json: "npm:^1.7.4"
-    strip-ansi: "npm:^6.0.1"
-    telnet-client: "npm:1.2.8"
-    tempfile: "npm:^2.0.0"
-    trace-event-lib: "npm:^1.3.1"
-    which: "npm:^1.3.1"
-    ws: "npm:^7.0.0"
-    yargs: "npm:^17.0.0"
-    yargs-parser: "npm:^21.0.0"
-    yargs-unparser: "npm:^2.0.0"
-  peerDependencies:
-    jest: 29.x.x || 28.x.x || ^27.2.5
-  peerDependenciesMeta:
-    jest:
-      optional: true
-  bin:
-    detox: local-cli/cli.js
-  checksum: 10c0/9f444a562915738fc794b93333636d7d18b85e06257317800b3ac3ed261bf430e422dae9af21b722b83b2f4a3166e0685eaf6f96ce84a9d46097db96b22724b8
-  languageName: node
-  linkType: hard
-
 "devlop@npm:^1.0.0, devlop@npm:^1.1.0":
   version: 1.1.0
   resolution: "devlop@npm:1.1.0"
@@ -18390,26 +15140,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"diffie-hellman@npm:^5.0.0":
-  version: 5.0.3
-  resolution: "diffie-hellman@npm:5.0.3"
-  dependencies:
-    bn.js: "npm:^4.1.0"
-    miller-rabin: "npm:^4.0.0"
-    randombytes: "npm:^2.0.0"
-  checksum: 10c0/ce53ccafa9ca544b7fc29b08a626e23a9b6562efc2a98559a0c97b4718937cebaa9b5d7d0a05032cc9c1435e9b3c1532b9e9bf2e0ede868525922807ad6e1ecf
-  languageName: node
-  linkType: hard
-
-"dir-glob@npm:^2.2.2":
-  version: 2.2.2
-  resolution: "dir-glob@npm:2.2.2"
-  dependencies:
-    path-type: "npm:^3.0.0"
-  checksum: 10c0/67575fd496df80ec90969f1a9f881f03b4ef614ca2c07139df81a12f9816250780dff906f482def0f897dd748d22fa13c076b52ac635e0024f7d434846077a3a
-  languageName: node
-  linkType: hard
-
 "dir-glob@npm:^3.0.1":
   version: 3.0.1
   resolution: "dir-glob@npm:3.0.1"
@@ -18434,16 +15164,14 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.0"
     "@babel/preset-env": "npm:^7.28.0"
-    "@babel/preset-react": "npm:^7.27.1"
+    "@babel/preset-react": "npm:^7.28.5"
     "@babel/preset-typescript": "npm:^7.27.1"
     "@babel/runtime": "npm:^7.28.2"
     "@coinbase/cds-common": "workspace:^"
     "@coinbase/cds-icons": "workspace:^"
     "@coinbase/cds-illustrations": "workspace:^"
     "@coinbase/cds-mobile": "workspace:^"
-    "@coinbase/cds-mobile-visualization": "workspace:^"
     "@coinbase/cds-web": "workspace:^"
-    "@coinbase/cds-web-visualization": "workspace:^"
     "@coinbase/docusaurus-plugin-docgen": "workspace:^"
     "@coinbase/docusaurus-plugin-kbar": "workspace:^"
     "@coinbase/docusaurus-plugin-llm-dev-server": "workspace:^"
@@ -18477,8 +15205,8 @@ __metadata:
     "@stackblitz/sdk": "npm:^1.11.0"
     "@types/culori": "npm:^4"
     "@types/lz-string": "npm:^1.5.0"
-    "@types/react": "npm:^18.3.12"
-    "@types/react-dom": "npm:^18.3.1"
+    "@types/react": "npm:19.1.2"
+    "@types/react-dom": "npm:19.1.2"
     "@types/three": "npm:0.177.0"
     babel-loader: "npm:^10.0.0"
     css-loader: "npm:^7.1.2"
@@ -18491,9 +15219,9 @@ __metadata:
     mini-css-extract-plugin: "npm:^2.9.3"
     prettier: "npm:^3.6.2"
     prism-react-renderer: "npm:^2.4.1"
-    react: "npm:^18.3.1"
+    react: "npm:19.1.2"
     react-colorful: "npm:^5.6.1"
-    react-dom: "npm:^18.3.1"
+    react-dom: "npm:19.1.2"
     react-live: "npm:^4.1.8"
     three: "npm:0.177.0"
     typescript: "npm:~5.9.2"
@@ -18592,13 +15320,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domain-browser@npm:^1.1.1":
-  version: 1.2.0
-  resolution: "domain-browser@npm:1.2.0"
-  checksum: 10c0/a955f482f4b4710fbd77c12a33e77548d63603c30c80f61a80519f27e3db1ba8530b914584cc9e9365d2038753d6b5bd1f4e6c81e432b007b0ec95b8b5e69b1b
-  languageName: node
-  linkType: hard
-
 "domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0, domelementtype@npm:^2.3.0":
   version: 2.3.0
   resolution: "domelementtype@npm:2.3.0"
@@ -18655,15 +15376,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dot-case@npm:^2.1.0":
-  version: 2.1.1
-  resolution: "dot-case@npm:2.1.1"
-  dependencies:
-    no-case: "npm:^2.2.0"
-  checksum: 10c0/6859ba3bfe3106388c05eba9bec709856bbc9917d2c081aed5d268a2afc73b03bc062ea19925e29bdd482f6a8c032ae7a7d73f75c12d4159978e809b9418f7ef
-  languageName: node
-  linkType: hard
-
 "dot-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "dot-case@npm:3.0.4"
@@ -18692,13 +15404,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dotenv-expand@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "dotenv-expand@npm:5.1.0"
-  checksum: 10c0/24ac633de853ef474d0421cc639328b7134109c8dc2baaa5e3afb7495af5e9237136d7e6971e55668e4dce915487eb140967cdd2b3e99aa439e0f6bf8b56faeb
-  languageName: node
-  linkType: hard
-
 "dotenv-expand@npm:~11.0.6":
   version: 11.0.6
   resolution: "dotenv-expand@npm:11.0.6"
@@ -18726,7 +15431,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dotenv@npm:^8.0.0, dotenv@npm:^8.2.0":
+"dotenv@npm:^8.2.0":
   version: 8.6.0
   resolution: "dotenv@npm:8.6.0"
   checksum: 10c0/6750431dea8efbd54b9f2d9681b04e1ccc7989486461dcf058bb708d9e3d63b04115fcdf8840e38ad1e24a4a2e1e7c1560626c5e3ac7bc09371b127c49e2d45f
@@ -18747,16 +15452,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dtrace-provider@npm:~0.8":
-  version: 0.8.8
-  resolution: "dtrace-provider@npm:0.8.8"
-  dependencies:
-    nan: "npm:^2.14.0"
-    node-gyp: "npm:latest"
-  checksum: 10c0/33bfc18462dd59ae1de094c64b7b093d2f7f67dec48f138df3a7507c09aaed2a964a245e7bdf2bde7d1a6cc467b11d7396e0fb13a6b882642d42a44cc08c61da
-  languageName: node
-  linkType: hard
-
 "dunder-proto@npm:^1.0.0, dunder-proto@npm:^1.0.1":
   version: 1.0.1
   resolution: "dunder-proto@npm:1.0.1"
@@ -18768,15 +15463,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"duplexer2@npm:^0.1.2":
-  version: 0.1.4
-  resolution: "duplexer2@npm:0.1.4"
-  dependencies:
-    readable-stream: "npm:^2.0.2"
-  checksum: 10c0/0765a4cc6fe6d9615d43cc6dbccff6f8412811d89a6f6aa44828ca9422a0a469625ce023bf81cee68f52930dbedf9c5716056ff264ac886612702d134b5e39b4
-  languageName: node
-  linkType: hard
-
 "duplexer@npm:^0.1.2":
   version: 0.1.2
   resolution: "duplexer@npm:0.1.2"
@@ -18784,18 +15470,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"duplexify@npm:^3.4.2, duplexify@npm:^3.6.0":
-  version: 3.7.1
-  resolution: "duplexify@npm:3.7.1"
-  dependencies:
-    end-of-stream: "npm:^1.0.0"
-    inherits: "npm:^2.0.1"
-    readable-stream: "npm:^2.0.0"
-    stream-shift: "npm:^1.0.0"
-  checksum: 10c0/59d1440c1b4e3a4db35ae96933392703ce83518db1828d06b9b6322920d6cbbf0b7159e88be120385fe459e77f1eb0c7622f26e9ec1f47c9ff05c2b35747dbd3
-  languageName: node
-  linkType: hard
-
 "duplexify@npm:^4.1.3":
   version: 4.1.3
   resolution: "duplexify@npm:4.1.3"
@@ -18815,13 +15489,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"easy-stack@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "easy-stack@npm:1.0.1"
-  checksum: 10c0/1eaf066169a20f6cc3cafd2bb36b00baacd60b6414c8d8bf51bfd50bc6f1c487140c8af86bbb8e1ff9ded2faea5e138c55a37867fc79cbbc985bf5a5ebe4b109
-  languageName: node
-  linkType: hard
-
 "ee-first@npm:1.1.1":
   version: 1.1.1
   resolution: "ee-first@npm:1.1.1"
@@ -18829,7 +15496,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ejs@npm:^3.1.5, ejs@npm:^3.1.6, ejs@npm:^3.1.7":
+"ejs@npm:^3.1.7":
   version: 3.1.10
   resolution: "ejs@npm:3.1.10"
   dependencies:
@@ -18847,21 +15514,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"elliptic@npm:^6.6.0":
-  version: 6.6.1
-  resolution: "elliptic@npm:6.6.1"
-  dependencies:
-    bn.js: "npm:^4.11.9"
-    brorand: "npm:^1.1.0"
-    hash.js: "npm:^1.0.0"
-    hmac-drbg: "npm:^1.0.1"
-    inherits: "npm:^2.0.4"
-    minimalistic-assert: "npm:^1.0.1"
-    minimalistic-crypto-utils: "npm:^1.0.1"
-  checksum: 10c0/8b24ef782eec8b472053793ea1e91ae6bee41afffdfcb78a81c0a53b191e715cbe1292aa07165958a9bbe675bd0955142560b1a007ffce7d6c765bcaf951a867
-  languageName: node
-  linkType: hard
-
 "emittery@npm:^0.13.1":
   version: 0.13.1
   resolution: "emittery@npm:0.13.1"
@@ -18937,7 +15589,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"end-of-stream@npm:^1.0.0, end-of-stream@npm:^1.1.0, end-of-stream@npm:^1.4.1":
+"end-of-stream@npm:^1.1.0, end-of-stream@npm:^1.4.1":
   version: 1.4.4
   resolution: "end-of-stream@npm:1.4.4"
   dependencies:
@@ -18946,18 +15598,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"endent@npm:^2.0.1":
-  version: 2.1.0
-  resolution: "endent@npm:2.1.0"
-  dependencies:
-    dedent: "npm:^0.7.0"
-    fast-json-parse: "npm:^1.0.3"
-    objectorarray: "npm:^1.0.5"
-  checksum: 10c0/8cd6dae45e693ae2b2cbff2384348d3a5e2a06cc0396dddca8165e46bd2fd8d5394d44d338ba653bbfce4aead90eca1ec1abe7203843c84155c645d283b6b884
-  languageName: node
-  linkType: hard
-
-"enhanced-resolve@npm:^4.1.0, enhanced-resolve@npm:^4.5.0":
+"enhanced-resolve@npm:^4.1.0":
   version: 4.5.0
   resolution: "enhanced-resolve@npm:4.5.0"
   dependencies:
@@ -18978,7 +15619,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enquirer@npm:^2.3.6, enquirer@npm:~2.3.6":
+"enquirer@npm:~2.3.6":
   version: 2.3.6
   resolution: "enquirer@npm:2.3.6"
   dependencies:
@@ -19001,13 +15642,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:^7.0.1":
-  version: 7.0.1
-  resolution: "entities@npm:7.0.1"
-  checksum: 10c0/b4fb9937bb47ecb00aaaceb9db9cdd1cc0b0fb649c0e843d05cf5dbbd2e9d2df8f98721d8b1b286445689c72af7b54a7242fc2d63ef7c9739037a8c73363e7ca
-  languageName: node
-  linkType: hard
-
 "env-editor@npm:^0.4.1":
   version: 0.4.2
   resolution: "env-editor@npm:0.4.2"
@@ -19022,7 +15656,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"envinfo@npm:^7.10.0, envinfo@npm:^7.14.0":
+"envinfo@npm:^7.14.0":
   version: 7.14.0
   resolution: "envinfo@npm:7.14.0"
   bin:
@@ -19031,13 +15665,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eol@npm:^0.9.1":
-  version: 0.9.1
-  resolution: "eol@npm:0.9.1"
-  checksum: 10c0/5a6654ca1961529429f4eab4473e6d9351969f25baa30de7232e862c6c5f9037fc0ff044a526fe9cdd6ae65bb1b0db7775bf1d4f342f485c10c34b1444bfb7ab
-  languageName: node
-  linkType: hard
-
 "err-code@npm:^2.0.2":
   version: 2.0.3
   resolution: "err-code@npm:2.0.3"
@@ -19045,7 +15672,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"errno@npm:^0.1.3, errno@npm:~0.1.7":
+"errno@npm:^0.1.3":
   version: 0.1.8
   resolution: "errno@npm:0.1.8"
   dependencies:
@@ -19056,7 +15683,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"error-ex@npm:^1.2.0, error-ex@npm:^1.3.1":
+"error-ex@npm:^1.3.1":
   version: 1.3.2
   resolution: "error-ex@npm:1.3.2"
   dependencies:
@@ -19065,7 +15692,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"error-stack-parser@npm:^2.0.3, error-stack-parser@npm:^2.0.6":
+"error-stack-parser@npm:^2.0.6":
   version: 2.1.4
   resolution: "error-stack-parser@npm:2.1.4"
   dependencies:
@@ -19074,17 +15701,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"errorhandler@npm:^1.5.1":
-  version: 1.5.1
-  resolution: "errorhandler@npm:1.5.1"
-  dependencies:
-    accepts: "npm:~1.3.7"
-    escape-html: "npm:~1.0.3"
-  checksum: 10c0/58568c7eec3f4de5dc49e4385a50af66b76759b3463a86e4a85e05c4f7a5348f51d3d23af51c3a23eceef6278045d0a47d975da11bdaaf92d1d783dc677e980e
-  languageName: node
-  linkType: hard
-
-"es-abstract@npm:^1.17.5, es-abstract@npm:^1.19.0, es-abstract@npm:^1.19.1, es-abstract@npm:^1.22.1, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3, es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.6, es-abstract@npm:^1.23.9":
+"es-abstract@npm:^1.17.5, es-abstract@npm:^1.22.1, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3, es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.6, es-abstract@npm:^1.23.9":
   version: 1.24.0
   resolution: "es-abstract@npm:1.24.0"
   dependencies:
@@ -19146,13 +15763,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-array-method-boxes-properly@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "es-array-method-boxes-properly@npm:1.0.0"
-  checksum: 10c0/4b7617d3fbd460d6f051f684ceca6cf7e88e6724671d9480388d3ecdd72119ddaa46ca31f2c69c5426a82e4b3091c1e81867c71dcdc453565cd90005ff2c382d
-  languageName: node
-  linkType: hard
-
 "es-define-property@npm:^1.0.0, es-define-property@npm:^1.0.1":
   version: 1.0.1
   resolution: "es-define-property@npm:1.0.1"
@@ -19167,7 +15777,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-get-iterator@npm:^1.0.2, es-get-iterator@npm:^1.1.3":
+"es-get-iterator@npm:^1.1.3":
   version: 1.1.3
   resolution: "es-get-iterator@npm:1.1.3"
   dependencies:
@@ -19256,32 +15866,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-toolkit@npm:^1.22.0":
-  version: 1.39.10
-  resolution: "es-toolkit@npm:1.39.10"
-  dependenciesMeta:
-    "@trivago/prettier-plugin-sort-imports@4.3.0":
-      unplugged: true
-    prettier-plugin-sort-re-exports@0.0.1:
-      unplugged: true
-  checksum: 10c0/244dd6be25bc8c7af9f085f5b9aae08169eca760fc7d4735020f8f711b6a572e0bf205400326fa85a7924e20747d315756dba1b3a5f0d2887231374ec3651a98
-  languageName: node
-  linkType: hard
-
-"es5-shim@npm:^4.5.13":
-  version: 4.6.5
-  resolution: "es5-shim@npm:4.6.5"
-  checksum: 10c0/64dfb2ab2828cd2cd7ce869cf3e603d9ec2605a14dc512220a376f16e9387e9b6a3c75a0f4df0a9c2bb7d875b941a70b709473cdccf834e131d88c8b2fc30631
-  languageName: node
-  linkType: hard
-
-"es6-shim@npm:^0.35.5":
-  version: 0.35.6
-  resolution: "es6-shim@npm:0.35.6"
-  checksum: 10c0/4ed9ceb017826032ea403eef82c4af97275f4e62590f8e31f8af823056a573ce096007c179718f72ce9d5a35c658ce887668a79e341fd1b64f09c2d905d0f1d5
-  languageName: node
-  linkType: hard
-
 "esast-util-from-estree@npm:^2.0.0":
   version: 2.0.0
   resolution: "esast-util-from-estree@npm:2.0.0"
@@ -19732,19 +16316,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-ft-flow@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "eslint-plugin-ft-flow@npm:2.0.1"
-  dependencies:
-    lodash: "npm:^4.17.21"
-    string-natural-compare: "npm:^3.0.1"
-  peerDependencies:
-    "@babel/eslint-parser": ^7.12.0
-    eslint: ^8.1.0
-  checksum: 10c0/6314dac11deb78367aa55fd26ab4aa195b3568dde1affd1acd2c8ffd4bd9f30a49b0959fac4edf0a7dad9797d064b650e50de3f4b04a89cc16e042e01755ebf8
-  languageName: node
-  linkType: hard
-
 "eslint-plugin-import@npm:^2.31.0":
   version: 2.31.0
   resolution: "eslint-plugin-import@npm:2.31.0"
@@ -19828,27 +16399,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-prettier@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "eslint-plugin-prettier@npm:4.0.0"
+"eslint-plugin-react-hooks@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "eslint-plugin-react-hooks@npm:7.0.1"
   dependencies:
-    prettier-linter-helpers: "npm:^1.0.0"
-  peerDependencies:
-    eslint: ">=7.28.0"
-    prettier: ">=2.0.0"
-  peerDependenciesMeta:
-    eslint-config-prettier:
-      optional: true
-  checksum: 10c0/90248c927ed3b6702d329ad42577880c968064792292fa7b580143c79e44fecfc68c3553cc34471baa8bc2b3ece50686f7b7b2243e0684f9cdd1b4f42316e576
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-react-hooks@npm:^5.2.0":
-  version: 5.2.0
-  resolution: "eslint-plugin-react-hooks@npm:5.2.0"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
+    hermes-parser: "npm:^0.25.1"
+    zod: "npm:^3.25.0 || ^4.0.0"
+    zod-validation-error: "npm:^3.5.0 || ^4.0.0"
   peerDependencies:
     eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
-  checksum: 10c0/1c8d50fa5984c6dea32470651807d2922cc3934cf3425e78f84a24c2dfd972e7f019bee84aefb27e0cf2c13fea0ac1d4473267727408feeb1c56333ca1489385
+  checksum: 10c0/1e711d1a9d1fa9cfc51fa1572500656577201199c70c795c6a27adfc1df39e5c598f69aab6aa91117753d23cc1f11388579a2bed14921cf9a4efe60ae8618496
   languageName: node
   linkType: hard
 
@@ -19929,19 +16491,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-reanimated@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "eslint-plugin-reanimated@npm:2.0.1"
-  dependencies:
-    "@typescript-eslint/experimental-utils": "npm:5.33.0"
-    eslint-plugin-ft-flow: "npm:^2.0.1"
-  peerDependencies:
-    eslint: ">=8"
-    typescript: ">=4.1.3"
-  checksum: 10c0/0f21d2345f9a0290543e1be31df3e69690b049543770451ac76e0794f55d06c736ee919598077d66178c8836cbc34b7308c11b372aade20d2fc2ac5b575db4b8
-  languageName: node
-  linkType: hard
-
 "eslint-plugin-simple-import-sort@npm:^12.1.1":
   version: 12.1.1
   resolution: "eslint-plugin-simple-import-sort@npm:12.1.1"
@@ -19951,15 +16500,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-storybook@npm:^9.1.2":
-  version: 9.1.2
-  resolution: "eslint-plugin-storybook@npm:9.1.2"
+"eslint-plugin-storybook@npm:9.1.17":
+  version: 9.1.17
+  resolution: "eslint-plugin-storybook@npm:9.1.17"
   dependencies:
     "@typescript-eslint/utils": "npm:^8.8.1"
   peerDependencies:
     eslint: ">=8"
-    storybook: ^9.1.2
-  checksum: 10c0/37a5fbe4558013de311b730a1fc76db3f995864d57b1c3d749075ad5452f05f81366d6ef270e31168613109a4038fba91cda93eea96e153a620a18ec29f4095a
+    storybook: ^9.1.17
+  checksum: 10c0/1092898d67adbde2faf902d2abb7fc2f242a29142b6a11d9f1172082a6df441ed468a7b9b280627b88ab9cab5ba5c3df2202b773995a31267aca87ee9d7c715b
   languageName: node
   linkType: hard
 
@@ -19975,7 +16524,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:5.1.1, eslint-scope@npm:^5.1.1":
+"eslint-scope@npm:5.1.1":
   version: 5.1.1
   resolution: "eslint-scope@npm:5.1.1"
   dependencies:
@@ -19985,16 +16534,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "eslint-scope@npm:4.0.3"
-  dependencies:
-    esrecurse: "npm:^4.1.0"
-    estraverse: "npm:^4.1.1"
-  checksum: 10c0/a2a3fe5845938ce7cfd2e658c309a9bb27a7f9ce94f0cc447ed5f9fa95b16451556d7e1db4c8e5d2aaa02d02850f5346d23091bbe94f7097412ce846504b4dcc
-  languageName: node
-  linkType: hard
-
 "eslint-scope@npm:^8.4.0":
   version: 8.4.0
   resolution: "eslint-scope@npm:8.4.0"
@@ -20005,25 +16544,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-utils@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "eslint-utils@npm:3.0.0"
-  dependencies:
-    eslint-visitor-keys: "npm:^2.0.0"
-  peerDependencies:
-    eslint: ">=5"
-  checksum: 10c0/45aa2b63667a8d9b474c98c28af908d0a592bed1a4568f3145cd49fb5d9510f545327ec95561625290313fe126e6d7bdfe3fdbdb6f432689fab6b9497d3bfb52
-  languageName: node
-  linkType: hard
-
-"eslint-visitor-keys@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "eslint-visitor-keys@npm:2.1.0"
-  checksum: 10c0/9f0e3a2db751d84067d15977ac4b4472efd6b303e369e6ff241a99feac04da758f46d5add022c33d06b53596038dbae4b4aceb27c7e68b8dfc1055b35e495787
-  languageName: node
-  linkType: hard
-
-"eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.3":
+"eslint-visitor-keys@npm:^3.4.3":
   version: 3.4.3
   resolution: "eslint-visitor-keys@npm:3.4.3"
   checksum: 10c0/92708e882c0a5ffd88c23c0b404ac1628cf20104a108c745f240a13c332a11aac54f49a22d5762efbffc18ecbc9a580d1b7ad034bf5f3cc3307e5cbff2ec9820
@@ -20116,7 +16637,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esrecurse@npm:^4.1.0, esrecurse@npm:^4.3.0":
+"esrecurse@npm:^4.3.0":
   version: 4.3.0
   resolution: "esrecurse@npm:4.3.0"
   dependencies:
@@ -20139,17 +16660,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"estree-to-babel@npm:^3.1.0":
-  version: 3.2.1
-  resolution: "estree-to-babel@npm:3.2.1"
-  dependencies:
-    "@babel/traverse": "npm:^7.1.6"
-    "@babel/types": "npm:^7.2.0"
-    c8: "npm:^7.6.0"
-  checksum: 10c0/c7949b141f569528b2608ab715d593a04f7e2e529df04e0b595d0a7dea819b410e71d1f04716e43ac1480942afc5701cb5151ad2906ee8402969651a389881bb
-  languageName: node
-  linkType: hard
-
 "estree-util-attach-comments@npm:^3.0.0":
   version: 3.0.0
   resolution: "estree-util-attach-comments@npm:3.0.0"
@@ -20265,14 +16775,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"event-pubsub@npm:4.3.0":
-  version: 4.3.0
-  resolution: "event-pubsub@npm:4.3.0"
-  checksum: 10c0/47fa4fb5b55b3ed08b912862cc913e03603fa063cd3ec5cf3dfeb39a19314d3ca327e938a2cf70685254ab3a71af8178969963c705a030c6081d625bec835114
-  languageName: node
-  linkType: hard
-
-"event-target-shim@npm:^5.0.0, event-target-shim@npm:^5.0.1":
+"event-target-shim@npm:^5.0.0":
   version: 5.0.1
   resolution: "event-target-shim@npm:5.0.1"
   checksum: 10c0/0255d9f936215fd206156fd4caa9e8d35e62075d720dc7d847e89b417e5e62cf1ce6c9b4e0a1633a9256de0efefaf9f8d26924b1f3c8620cffb9db78e7d3076b
@@ -20286,7 +16789,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"events@npm:^3.0.0, events@npm:^3.2.0":
+"events@npm:^3.2.0":
   version: 3.3.0
   resolution: "events@npm:3.3.0"
   checksum: 10c0/d6b6f2adbccbcda74ddbab52ed07db727ef52e31a61ed26db9feb7dc62af7fc8e060defa65e5f8af9449b86b52cc1a1f6a79f2eafcf4e62add2b7a1fa4a432f6
@@ -20309,24 +16812,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"evp_bytestokey@npm:^1.0.0, evp_bytestokey@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "evp_bytestokey@npm:1.0.3"
-  dependencies:
-    md5.js: "npm:^1.3.4"
-    node-gyp: "npm:latest"
-    safe-buffer: "npm:^5.1.1"
-  checksum: 10c0/77fbe2d94a902a80e9b8f5a73dcd695d9c14899c5e82967a61b1fc6cbbb28c46552d9b127cff47c45fcf684748bdbcfa0a50410349109de87ceb4b199ef6ee99
-  languageName: node
-  linkType: hard
-
-"exec-async@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "exec-async@npm:2.2.0"
-  checksum: 10c0/9c70693a3d9f53e19cc8ecf26c3b3fc7125bf40051a71cba70d71161d065a6091d3ab1924c56ac1edd68cb98b9fbef29f83e45dcf67ee6b6c4826e0f898ac039
-  languageName: node
-  linkType: hard
-
 "execa@npm:^1.0.0":
   version: 1.0.0
   resolution: "execa@npm:1.0.0"
@@ -20359,13 +16844,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"exeunt@npm:1.1.0":
-  version: 1.1.0
-  resolution: "exeunt@npm:1.1.0"
-  checksum: 10c0/dc2012d9016c01ec321e4d642d2f165ce7dc4a4d141c523a818416035bcfe11bd1d9abc142f6f608d6a7719824295131a1b8c89006eb308aafd3aba385bf40d2
-  languageName: node
-  linkType: hard
-
 "exit@npm:^0.1.2":
   version: 0.1.2
   resolution: "exit@npm:0.1.2"
@@ -20373,21 +16851,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expand-brackets@npm:^2.1.4":
-  version: 2.1.4
-  resolution: "expand-brackets@npm:2.1.4"
-  dependencies:
-    debug: "npm:^2.3.3"
-    define-property: "npm:^0.2.5"
-    extend-shallow: "npm:^2.0.1"
-    posix-character-classes: "npm:^0.1.0"
-    regex-not: "npm:^1.0.0"
-    snapdragon: "npm:^0.8.1"
-    to-regex: "npm:^3.0.1"
-  checksum: 10c0/3e2fb95d2d7d7231486493fd65db913927b656b6fcdfcce41e139c0991a72204af619ad4acb1be75ed994ca49edb7995ef241dbf8cf44dc3c03d211328428a87
-  languageName: node
-  linkType: hard
-
 "expand-tilde@npm:^2.0.0, expand-tilde@npm:^2.0.2":
   version: 2.0.2
   resolution: "expand-tilde@npm:2.0.2"
@@ -20430,315 +16893,311 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expo-application@npm:~5.9.1":
-  version: 5.9.1
-  resolution: "expo-application@npm:5.9.1"
-  peerDependencies:
-    expo: "*"
-  checksum: 10c0/3768c1d241edfe4dfa355dd09ba3f1155e6ad5e12d180c46e3cad6fba81dcf8ebb4d73f9c4490cbb93c195505f694b0967b0285167706da548aa13f10b08a2f1
-  languageName: node
-  linkType: hard
-
-"expo-asset@npm:~10.0.10":
-  version: 10.0.10
-  resolution: "expo-asset@npm:10.0.10"
-  dependencies:
-    expo-constants: "npm:~16.0.0"
-    invariant: "npm:^2.2.4"
-    md5-file: "npm:^3.2.3"
-  peerDependencies:
-    expo: "*"
-  checksum: 10c0/aed3164cee4483e47fa56c8898384769d60ebb3f94553f7ad2a33a8902d73a1379aee3fc51833c8f0a4a59979ed842ba079e52c8e1903104b1ad312ad90fe1d1
-  languageName: node
-  linkType: hard
-
-"expo-build-properties@npm:~0.12.5":
-  version: 0.12.5
-  resolution: "expo-build-properties@npm:0.12.5"
-  dependencies:
-    ajv: "npm:^8.11.0"
-    semver: "npm:^7.6.0"
-  peerDependencies:
-    expo: "*"
-  checksum: 10c0/1418c94d97cc5c5ecb5ec947ca7eb218bb3d14a5c7127c6acaf9f763af5060df6e581e90b7ec210cdf4fb16d676f58500414127375b2e169646c66b5bd79e9cc
-  languageName: node
-  linkType: hard
-
-"expo-build-properties@npm:~0.8.3":
-  version: 0.8.3
-  resolution: "expo-build-properties@npm:0.8.3"
+"expo-app@workspace:apps/expo-app":
+  version: 0.0.0-use.local
+  resolution: "expo-app@workspace:apps/expo-app"
   dependencies:
-    ajv: "npm:^8.11.0"
-    semver: "npm:^7.5.3"
-  peerDependencies:
-    expo: "*"
-  checksum: 10c0/f77d88c5930efd740536057b804c98ad4dcdb40eade3a3cd9d23e5eed8d9e571f43ba2dd314ad1c42312f2aa36427c6d9d18f45e919b9e22c9c26be3580f41d5
-  languageName: node
-  linkType: hard
-
-"expo-clipboard@npm:~6.0.3":
-  version: 6.0.3
-  resolution: "expo-clipboard@npm:6.0.3"
-  peerDependencies:
-    expo: "*"
-  checksum: 10c0/7ac2018c74bae620eca888ae973658405c44ffd17168a4c32b20c2a48c080782dd7dd4e81e7081f3f41b3b83e67e367af001fcd808ebc2f733f90b0268842bf1
-  languageName: node
-  linkType: hard
+    "@coinbase/cds-icons": "workspace:^"
+    "@coinbase/cds-mobile": "workspace:^"
+    "@expo-google-fonts/inter": "npm:^0.3.0"
+    "@expo-google-fonts/source-code-pro": "npm:^0.3.0"
+    "@formatjs/intl-getcanonicallocales": "npm:^2.5.5"
+    "@formatjs/intl-locale": "npm:^4.2.11"
+    "@formatjs/intl-numberformat": "npm:^8.15.4"
+    "@formatjs/intl-pluralrules": "npm:^5.4.4"
+    "@react-navigation/native": "npm:6.1.17"
+    "@react-navigation/native-stack": "npm:6.9.26"
+    "@shopify/react-native-skia": "npm:2.2.12"
+    expo: "npm:54.0.32"
+    expo-dev-client: "npm:6.0.20"
+    expo-font: "npm:14.0.11"
+    expo-linking: "npm:~8.0.11"
+    expo-splash-screen: "npm:31.0.13"
+    expo-status-bar: "npm:3.0.9"
+    intl: "npm:^1.2.5"
+    lottie-react-native: "npm:7.3.1"
+    react: "npm:19.1.2"
+    react-native: "npm:0.81.5"
+    react-native-date-picker: "npm:5.0.12"
+    react-native-gesture-handler: "npm:2.28.0"
+    react-native-inappbrowser-reborn: "npm:3.7.0"
+    react-native-navigation-bar-color: "npm:2.0.2"
+    react-native-reanimated: "npm:4.1.1"
+    react-native-safe-area-context: "npm:5.6.0"
+    react-native-screens: "npm:4.16.0"
+    react-native-svg: "npm:15.12.1"
+    react-native-worklets: "npm:0.5.2"
+  languageName: unknown
+  linkType: soft
 
-"expo-constants@npm:~16.0.0":
-  version: 16.0.2
-  resolution: "expo-constants@npm:16.0.2"
+"expo-asset@npm:~12.0.12":
+  version: 12.0.12
+  resolution: "expo-asset@npm:12.0.12"
   dependencies:
-    "@expo/config": "npm:~9.0.0"
-    "@expo/env": "npm:~0.3.0"
+    "@expo/image-utils": "npm:^0.8.8"
+    expo-constants: "npm:~18.0.12"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/3a51ef1d4de7e7a86d8ee7ef7b0e0edb6cbde981e1e09540e5d7a5dfec3327cb805df06f10614ebf87a158b01a274f63eef9f573e87d7cf1040ffd7168c8a5d1
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/303b7e08126edbddd3235a6803ffa6ff98b1cc0fb7bfa019d1ad891560bbbe9a9b84db7275ced33011330a8f4f225175d3780f4771a925d8e1c3782a343b9796
   languageName: node
   linkType: hard
 
-"expo-dev-client@npm:4.0.27":
-  version: 4.0.27
-  resolution: "expo-dev-client@npm:4.0.27"
+"expo-constants@npm:~18.0.12, expo-constants@npm:~18.0.13":
+  version: 18.0.13
+  resolution: "expo-constants@npm:18.0.13"
   dependencies:
-    expo-dev-launcher: "npm:4.0.27"
-    expo-dev-menu: "npm:5.0.21"
-    expo-dev-menu-interface: "npm:1.8.3"
-    expo-manifests: "npm:~0.14.0"
-    expo-updates-interface: "npm:~0.16.2"
+    "@expo/config": "npm:~12.0.13"
+    "@expo/env": "npm:~2.0.8"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/ec4442b4ded2a0efa0a010363ada3eec218cf0d42e1b8a56f699619f967119235d9be11721752997303db03e70a27b964a9570046ddb4abf65d03244898117c7
+    react-native: "*"
+  checksum: 10c0/bbe33c0611b8085ecd965434d71d27f065427146fe23f3162d170812f8c917b032604c79e0cd129f39147f58f7dc581ee3c6b64a84bf865dd325595289dc77e6
   languageName: node
   linkType: hard
 
-"expo-dev-launcher@npm:4.0.27":
-  version: 4.0.27
-  resolution: "expo-dev-launcher@npm:4.0.27"
+"expo-dev-client@npm:6.0.20":
+  version: 6.0.20
+  resolution: "expo-dev-client@npm:6.0.20"
   dependencies:
-    ajv: "npm:8.11.0"
-    expo-dev-menu: "npm:5.0.21"
-    expo-manifests: "npm:~0.14.0"
-    resolve-from: "npm:^5.0.0"
-    semver: "npm:^7.6.0"
+    expo-dev-launcher: "npm:6.0.20"
+    expo-dev-menu: "npm:7.0.18"
+    expo-dev-menu-interface: "npm:2.0.0"
+    expo-manifests: "npm:~1.0.10"
+    expo-updates-interface: "npm:~2.0.0"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/968dc979e844acd09cac7c4418953a1a48991308d054f5b87915cca1b3ba9423968ca34e99eb93a3ff7aaa2cfa38b3557a464aee541b9bb6386cad94aa388ca2
+  checksum: 10c0/0a35906f005323d9c207e9fec40915867a29e5fd6a8c09ce9cd1ffb4a32234bcb89344b83d5dfd8680457e1db7f0331c02ef19342019dd1ae476ad77f5acac5c
   languageName: node
   linkType: hard
 
-"expo-dev-launcher@patch:expo-dev-launcher@npm:4.0.27#.yarn/patches/expo-dev-launcher-npm-4.0.27-c2ab5dd4a5.patch::locator=design-system%40workspace%3A.":
-  version: 4.0.27
-  resolution: "expo-dev-launcher@patch:expo-dev-launcher@npm%3A4.0.27#.yarn/patches/expo-dev-launcher-npm-4.0.27-c2ab5dd4a5.patch::version=4.0.27&hash=1d7197&locator=design-system%40workspace%3A."
+"expo-dev-launcher@npm:6.0.20":
+  version: 6.0.20
+  resolution: "expo-dev-launcher@npm:6.0.20"
   dependencies:
-    ajv: "npm:8.11.0"
-    expo-dev-menu: "npm:5.0.21"
-    expo-manifests: "npm:~0.14.0"
-    resolve-from: "npm:^5.0.0"
-    semver: "npm:^7.6.0"
+    ajv: "npm:^8.11.0"
+    expo-dev-menu: "npm:7.0.18"
+    expo-manifests: "npm:~1.0.10"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/a85ac7019332eead8b4d00dd9b24ff4e3d7d1c12a22ce86e835101f96e08f48c594f6336f08c70f1e1abe930838b158b7f205f19b85d1f986f3100215155e9cf
+  checksum: 10c0/215b48a55097ce44159dccbfce1ec9c51c1707f51d6304059f76446b1ba0a166a5b153f5583858138c66dcc830b8d9da7d895046a7aa801d815bd40ba0cf5c75
   languageName: node
   linkType: hard
 
-"expo-dev-menu-interface@npm:1.8.3":
-  version: 1.8.3
-  resolution: "expo-dev-menu-interface@npm:1.8.3"
+"expo-dev-menu-interface@npm:2.0.0":
+  version: 2.0.0
+  resolution: "expo-dev-menu-interface@npm:2.0.0"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/d8a0946448bc0aabf9ba6e3969fe9c4ce9385cc3525a220277031b1087033454786f5a3d02422ccc898514a72aee1295ff72877dd4eaf1780d5ba81c7393adfc
+  checksum: 10c0/ef85287262acce5822cd274f91b908bccbc590d3eba2fb34f037271f6f7d6d9e312655c72fca82f890035ed5954e47c58e4509ad5b925737da61d656c48170a4
   languageName: node
   linkType: hard
 
-"expo-dev-menu@npm:5.0.21":
-  version: 5.0.21
-  resolution: "expo-dev-menu@npm:5.0.21"
+"expo-dev-menu@npm:7.0.18":
+  version: 7.0.18
+  resolution: "expo-dev-menu@npm:7.0.18"
   dependencies:
-    expo-dev-menu-interface: "npm:1.8.3"
-    semver: "npm:^7.5.4"
+    expo-dev-menu-interface: "npm:2.0.0"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/6118fe1cda3328ddc94ca3a2d6203aa3a5ad1177238e68f10cc4ee6e816384ee98af08b5a94bc6ae39cfcccd903ec8094fc1a07db22639a65dc3b1ab8adac08d
+  checksum: 10c0/947bee35304acbd46888d52c30dbdf158c211118237d545e64c50be50f702fe1b49ca9d0690d05443942ec751e6c6e56cc62a43957ae34f4299f794070fc93e4
   languageName: node
   linkType: hard
 
-"expo-file-system@npm:~17.0.1":
-  version: 17.0.1
-  resolution: "expo-file-system@npm:17.0.1"
+"expo-file-system@npm:~19.0.21":
+  version: 19.0.21
+  resolution: "expo-file-system@npm:19.0.21"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/902913301afd11a2d91b1b9bf053924bfb70f868050e6893854052e589afcc3cb09f0d4cb15194313c6d52dbd7d17ec258c86fc9f2303d1d29d1d745aa6c98d5
+    react-native: "*"
+  checksum: 10c0/0ece34f86beda2048f8bf1f3218e57f6c7c14a875fe8be0f0dd2704d968ee61f979ddf0561b8769f4d46cfeb77ac759da0a030c5a77128cf2a06ce0bb9e3959b
   languageName: node
   linkType: hard
 
-"expo-font@npm:~12.0.10, expo-font@npm:~12.0.9":
-  version: 12.0.10
-  resolution: "expo-font@npm:12.0.10"
+"expo-font@npm:14.0.11, expo-font@npm:~14.0.11":
+  version: 14.0.11
+  resolution: "expo-font@npm:14.0.11"
   dependencies:
     fontfaceobserver: "npm:^2.1.0"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/49b7da4c5099f74a3641841e8a684a15b743e0d63bfc60355c7b2cf0a5b33b4321b0657c282126795da5ef53778b4d29a765dc9d08fe395e4bc801662305dee8
-  languageName: node
-  linkType: hard
-
-"expo-gradle-ext-vars@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "expo-gradle-ext-vars@npm:0.1.1"
-  checksum: 10c0/93c2b0cc7c6ed75a5832d4d3e47abd80335cc5442fb854947bd80b414f8c8b12afaa726b9fe3a2e35e9d0e541a33943b99fe124f512aa957bc10d43fb91bd092
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/ba74ff17b01dedc4a8145170b7098a95e037a7bd8ac0b8d0bf80bf28589383c22ba1a3f8ab68d901eafa75e311eb2fcd9edc414c18957a8827063623e2af9e0f
   languageName: node
   linkType: hard
 
-"expo-json-utils@npm:~0.13.0":
-  version: 0.13.1
-  resolution: "expo-json-utils@npm:0.13.1"
-  checksum: 10c0/27398cfed46b615a9602b9afe3fe9de3c0b8e90b4e6371ec0fe03f7a33bc61ef931a6067965de1ff9eb5a2b00f4546d78e93c426f69be0dcedb7d80a6eec52e0
+"expo-json-utils@npm:~0.15.0":
+  version: 0.15.0
+  resolution: "expo-json-utils@npm:0.15.0"
+  checksum: 10c0/c4cd95ad27fb7379f072a979399ea84781ec99db8a8f675dfaab8261eb16361d07133624fa50c70940bb57c280785a429a7a20a1f83b839ee03c96746370f59d
   languageName: node
   linkType: hard
 
-"expo-keep-awake@npm:~13.0.2":
-  version: 13.0.2
-  resolution: "expo-keep-awake@npm:13.0.2"
+"expo-keep-awake@npm:~15.0.8":
+  version: 15.0.8
+  resolution: "expo-keep-awake@npm:15.0.8"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/8548e46991739f42456428141b574c9d83ef77f2a79f371b5c6c1b77364759d4a993af8d40c027a904b5870d41165c99e3e4a8fea93316853819ba16fac0d692
+    react: "*"
+  checksum: 10c0/23064b18285498e70be0aa525dc875cc809fc723b9a101d51e4721a09b1460eb041c73ebeb6d51e9175bb4c9b7a668bc08a48b99ebddac4cfaadb5a47194d329
   languageName: node
   linkType: hard
 
-"expo-linking@npm:~6.3.1":
-  version: 6.3.1
-  resolution: "expo-linking@npm:6.3.1"
+"expo-linking@npm:~8.0.11":
+  version: 8.0.11
+  resolution: "expo-linking@npm:8.0.11"
   dependencies:
-    expo-constants: "npm:~16.0.0"
+    expo-constants: "npm:~18.0.12"
     invariant: "npm:^2.2.4"
-  checksum: 10c0/a6550cacc3117dde92fe9758c3b97089dae8ce2d90a2d6dd4441571991c4c7e139beb9d5648f04eef2fccc52f00f1631f36717bcd070c62413c013a30ae7aa97
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/f4351bfd0a2cf1c0b2b3aa46e4484ee3f344f569d2dba7be31b914dc6274fc356dff413b3ab34bb9d36b205454a2e585b69abe54715e7f13e9629836c295c8d6
   languageName: node
   linkType: hard
 
-"expo-manifests@npm:~0.14.0":
-  version: 0.14.3
-  resolution: "expo-manifests@npm:0.14.3"
+"expo-manifests@npm:~1.0.10":
+  version: 1.0.10
+  resolution: "expo-manifests@npm:1.0.10"
   dependencies:
-    "@expo/config": "npm:~9.0.0"
-    expo-json-utils: "npm:~0.13.0"
+    "@expo/config": "npm:~12.0.11"
+    expo-json-utils: "npm:~0.15.0"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/192566868c3b0965da2514edf86ebadfa2e2b7c54b89da1adc818627d3fad374fa7513ee87c3d56405fd27910ea27033ae3945ba6662de670e048c1f11c1a7ff
+  checksum: 10c0/97130cb1800486fc65c1e4269580aef6b6603dd4fce2299ebc3227bdeb38ea24e691ff4f66be9ca9842f4bddcddfe6e3637a1bc5c22d96fe807eadfbd6c44434
   languageName: node
   linkType: hard
 
-"expo-modules-autolinking@npm:1.11.3":
-  version: 1.11.3
-  resolution: "expo-modules-autolinking@npm:1.11.3"
+"expo-modules-autolinking@npm:3.0.24":
+  version: 3.0.24
+  resolution: "expo-modules-autolinking@npm:3.0.24"
   dependencies:
+    "@expo/spawn-async": "npm:^1.7.2"
     chalk: "npm:^4.1.0"
     commander: "npm:^7.2.0"
-    fast-glob: "npm:^3.2.5"
-    find-up: "npm:^5.0.0"
-    fs-extra: "npm:^9.1.0"
     require-from-string: "npm:^2.0.2"
     resolve-from: "npm:^5.0.0"
   bin:
     expo-modules-autolinking: bin/expo-modules-autolinking.js
-  checksum: 10c0/7b37f2405f64b2a606c826e432b588dba395e5f8587e5ea4abf385a87b18e508e9eba7a9d41299d5a6920c58f891e52193ad50b3eb751f708cdfcd24cadafb63
+  checksum: 10c0/cdd59e3aa1aca61955eabc25d21dc3c0a8971fffd234cb491245bc3eac96b45f197dce723089b5760c968ad309e9deb75660e6810c6c58b8a629b83a7e2abc76
   languageName: node
   linkType: hard
 
-"expo-modules-core@npm:1.12.26":
-  version: 1.12.26
-  resolution: "expo-modules-core@npm:1.12.26"
+"expo-modules-core@npm:3.0.29":
+  version: 3.0.29
+  resolution: "expo-modules-core@npm:3.0.29"
   dependencies:
     invariant: "npm:^2.2.4"
-  checksum: 10c0/02fd20d52e15cb8c34f0f652512e7fe5ba66fd353a2fbd05888f22bfa4f3de4b699724c37393b415b1336f9ce9691e67342c9fc9ccded4f8806a726b0a711d3c
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/e32a87b06aa772f523afa5a995523848c61c06370085ae9e724ad24432cac38925ff69976f58b2c562828c2cefba6df00cfef2dbb206111413890ce1c2baee19
   languageName: node
   linkType: hard
 
-"expo-quick-actions@npm:2.0.0":
-  version: 2.0.0
-  resolution: "expo-quick-actions@npm:2.0.0"
+"expo-modules-core@patch:expo-modules-core@npm:3.0.29#.yarn/patches/expo-modules-core-npm-3.0.29-7b93dc0961.patch::locator=design-system%40workspace%3A.":
+  version: 3.0.29
+  resolution: "expo-modules-core@patch:expo-modules-core@npm%3A3.0.29#.yarn/patches/expo-modules-core-npm-3.0.29-7b93dc0961.patch::version=3.0.29&hash=fdddae&locator=design-system%40workspace%3A."
   dependencies:
-    "@expo/image-utils": "npm:~0.4.2"
-    schema-utils: "npm:^4.2.0"
-    sf-symbols-typescript: "npm:^1.0.0"
+    invariant: "npm:^2.2.4"
   peerDependencies:
-    expo: "*"
-  checksum: 10c0/197e6e101ed417f24fda93cb280405a3676e8fb671898aeb234514e396760bc8b7bf1c2282d2c46be3d58beb9ede038a833776473078bffbbea88db7fa7524ae
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/85a06c1722578df43fc034ce37c267a792d717ba76423eff667dbcd8cf41d21156d451a123bcfd31da42babaec452079b6574aca3678774f9e7e8d4cd059c37e
   languageName: node
   linkType: hard
 
-"expo-splash-screen@npm:0.27.5":
-  version: 0.27.5
-  resolution: "expo-splash-screen@npm:0.27.5"
-  dependencies:
-    "@expo/prebuild-config": "npm:7.0.6"
-  peerDependencies:
-    expo: "*"
-  checksum: 10c0/25ec881ca5cc15154c56320a094e885c90806faca5bad069550159681296c3d3fa2b405140a843b735bdd9a32628fb6d818dc6f5233f35f0bbb549682b4cc6a6
+"expo-server@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "expo-server@npm:1.0.5"
+  checksum: 10c0/0da974f733235d457f7ce51e5452f48f203378687f821bdab7159617a491c0192251423a17a7a3a118486e1cbfffff5d5ad31aeeedcf2cfad6412a1bd7e86877
   languageName: node
   linkType: hard
 
-"expo-splash-screen@patch:expo-splash-screen@npm:0.27.5#.yarn/patches/expo-splash-screen-npm-0.27.5-f91e0b41df.patch::locator=design-system%40workspace%3A.":
-  version: 0.27.5
-  resolution: "expo-splash-screen@patch:expo-splash-screen@npm%3A0.27.5#.yarn/patches/expo-splash-screen-npm-0.27.5-f91e0b41df.patch::version=0.27.5&hash=97e2e1&locator=design-system%40workspace%3A."
+"expo-splash-screen@npm:31.0.13":
+  version: 31.0.13
+  resolution: "expo-splash-screen@npm:31.0.13"
   dependencies:
-    "@expo/prebuild-config": "npm:7.0.6"
+    "@expo/prebuild-config": "npm:^54.0.8"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/d7d10a71b7aaac4f6567fa718208587638140c8cc6c513f2fc880508db5849e7423d892cb1146424b499bfc7d4a3427e6ceca6b4a5076e79118178eae54c7c23
-  languageName: node
-  linkType: hard
-
-"expo-status-bar@npm:~1.12.1":
-  version: 1.12.1
-  resolution: "expo-status-bar@npm:1.12.1"
-  checksum: 10c0/fecd1c1843ef1fadf3007f54e1c778d06cbbe396c9ba7cbbfde88a1eb215847ab39e68b1f32d0d46a906a1abcb8821aa33eefed66d0c4a858a5faf6b6e556416
+  checksum: 10c0/f2caf9ac41f35f4790ca8cbdecec7f5b453d95f2a31261bb4117c5bb0515547704568998e3c1dfbbad55dc41ec8d1221288a69d2a4a943c4cf4681f5b213e860
   languageName: node
   linkType: hard
 
-"expo-system-ui@npm:~3.0.7":
-  version: 3.0.7
-  resolution: "expo-system-ui@npm:3.0.7"
+"expo-status-bar@npm:3.0.9":
+  version: 3.0.9
+  resolution: "expo-status-bar@npm:3.0.9"
   dependencies:
-    "@react-native/normalize-colors": "npm:0.74.85"
-    debug: "npm:^4.3.2"
+    react-native-is-edge-to-edge: "npm:^1.2.1"
   peerDependencies:
-    expo: "*"
-  checksum: 10c0/f0aa251852319d3b8942ef8b01a661f2fa6b21892b2d95a5025231e1c545d419aa46fff8e25f08a2e659a130557810ea28bfff0730129cb307394c80860a9482
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/b35ed996a3da45a657075447bbf687dad4e7d5321129182e58737ea0fa4aeb8bb145bbe20967abd6823587a738e4c6fd62c41d18d8c11094ff926e2079c02fc2
   languageName: node
   linkType: hard
 
-"expo-updates-interface@npm:~0.16.2":
-  version: 0.16.2
-  resolution: "expo-updates-interface@npm:0.16.2"
+"expo-updates-interface@npm:~2.0.0":
+  version: 2.0.0
+  resolution: "expo-updates-interface@npm:2.0.0"
   peerDependencies:
     expo: "*"
-  checksum: 10c0/b54d80cdd76ebf5421556821310b348a5479e41c30caf0bb5ee6ccfd3436d2d81d3880e508a7a2023ccd85b63db25c5f701e5baa0945484d5b5e7bb695c6db70
+  checksum: 10c0/d2ccf8325c1c8092fac6cfa521291943dce92f56a633bcc60abe1db54c88da601d6b0174aa1e824db6d3508486ccccafa16e39f05b7014dd70442ba91340b02e
   languageName: node
   linkType: hard
 
-"expo@npm:~51.0.31":
-  version: 51.0.38
-  resolution: "expo@npm:51.0.38"
+"expo@npm:54.0.32":
+  version: 54.0.32
+  resolution: "expo@npm:54.0.32"
   dependencies:
     "@babel/runtime": "npm:^7.20.0"
-    "@expo/cli": "npm:0.18.30"
-    "@expo/config": "npm:9.0.4"
-    "@expo/config-plugins": "npm:8.0.10"
-    "@expo/metro-config": "npm:0.18.11"
-    "@expo/vector-icons": "npm:^14.0.3"
-    babel-preset-expo: "npm:~11.0.15"
-    expo-asset: "npm:~10.0.10"
-    expo-file-system: "npm:~17.0.1"
-    expo-font: "npm:~12.0.10"
-    expo-keep-awake: "npm:~13.0.2"
-    expo-modules-autolinking: "npm:1.11.3"
-    expo-modules-core: "npm:1.12.26"
-    fbemitter: "npm:^3.0.0"
+    "@expo/cli": "npm:54.0.22"
+    "@expo/config": "npm:~12.0.13"
+    "@expo/config-plugins": "npm:~54.0.4"
+    "@expo/devtools": "npm:0.1.8"
+    "@expo/fingerprint": "npm:0.15.4"
+    "@expo/metro": "npm:~54.2.0"
+    "@expo/metro-config": "npm:54.0.14"
+    "@expo/vector-icons": "npm:^15.0.3"
+    "@ungap/structured-clone": "npm:^1.3.0"
+    babel-preset-expo: "npm:~54.0.10"
+    expo-asset: "npm:~12.0.12"
+    expo-constants: "npm:~18.0.13"
+    expo-file-system: "npm:~19.0.21"
+    expo-font: "npm:~14.0.11"
+    expo-keep-awake: "npm:~15.0.8"
+    expo-modules-autolinking: "npm:3.0.24"
+    expo-modules-core: "npm:3.0.29"
+    pretty-format: "npm:^29.7.0"
+    react-refresh: "npm:^0.14.2"
     whatwg-url-without-unicode: "npm:8.0.0-3"
+  peerDependencies:
+    "@expo/dom-webview": "*"
+    "@expo/metro-runtime": "*"
+    react: "*"
+    react-native: "*"
+    react-native-webview: "*"
+  peerDependenciesMeta:
+    "@expo/dom-webview":
+      optional: true
+    "@expo/metro-runtime":
+      optional: true
+    react-native-webview:
+      optional: true
   bin:
     expo: bin/cli
-  checksum: 10c0/8dde1cb565823594d663d2a5757d25a7ebf7e4175d2e05a07cd77f33495c058e337c164a7cd693355abae24dbd4f5b20a999f09934f5810aa2e57a33e7c4dec4
+    expo-modules-autolinking: bin/autolinking
+    fingerprint: bin/fingerprint
+  checksum: 10c0/2f80dba9c945d8be77e4b0a2607825ea4fe96feaacd85b151522ce8b4a451628b4f7616ef0e7b345ec1d06e0467ba97c5fe16a41ab1dcebc0ca1a07e3752a656
+  languageName: node
+  linkType: hard
+
+"exponential-backoff@npm:^3.1.1":
+  version: 3.1.3
+  resolution: "exponential-backoff@npm:3.1.3"
+  checksum: 10c0/77e3ae682b7b1f4972f563c6dbcd2b0d54ac679e62d5d32f3e5085feba20483cf28bd505543f520e287a56d4d55a28d7874299941faf637e779a1aa5994d1267
   languageName: node
   linkType: hard
 
@@ -20751,7 +17210,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"express@npm:^4.17.1, express@npm:^4.17.3, express@npm:^4.21.2":
+"express@npm:^4.17.3, express@npm:^4.21.2":
   version: 4.21.2
   resolution: "express@npm:4.21.2"
   dependencies:
@@ -20834,16 +17293,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extend-shallow@npm:^3.0.0, extend-shallow@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "extend-shallow@npm:3.0.2"
-  dependencies:
-    assign-symbols: "npm:^1.0.0"
-    is-extendable: "npm:^1.0.1"
-  checksum: 10c0/f39581b8f98e3ad94995e33214fff725b0297cf09f2725b6f624551cfb71e0764accfd0af80becc0182af5014d2a57b31b85ec999f9eb8a6c45af81752feac9a
-  languageName: node
-  linkType: hard
-
 "extend@npm:^3.0.0":
   version: 3.0.2
   resolution: "extend@npm:3.0.2"
@@ -20851,22 +17300,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extglob@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "extglob@npm:2.0.4"
-  dependencies:
-    array-unique: "npm:^0.3.2"
-    define-property: "npm:^1.0.0"
-    expand-brackets: "npm:^2.1.4"
-    extend-shallow: "npm:^2.0.1"
-    fragment-cache: "npm:^0.2.1"
-    regex-not: "npm:^1.0.0"
-    snapdragon: "npm:^0.8.1"
-    to-regex: "npm:^3.0.1"
-  checksum: 10c0/e1a891342e2010d046143016c6c03d58455c2c96c30bf5570ea07929984ee7d48fad86b363aee08f7a8a638f5c3a66906429b21ecb19bc8e90df56a001cd282c
-  languageName: node
-  linkType: hard
-
 "extract-zip@npm:2.0.1, extract-zip@npm:^2.0.1":
   version: 2.0.1
   resolution: "extract-zip@npm:2.0.1"
@@ -20914,21 +17347,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^2.2.6":
-  version: 2.2.7
-  resolution: "fast-glob@npm:2.2.7"
-  dependencies:
-    "@mrmlnc/readdir-enhanced": "npm:^2.2.1"
-    "@nodelib/fs.stat": "npm:^1.1.2"
-    glob-parent: "npm:^3.1.0"
-    is-glob: "npm:^4.0.0"
-    merge2: "npm:^1.2.3"
-    micromatch: "npm:^3.1.10"
-  checksum: 10c0/85bc858e298423d5a1b6eed6eee8556005a19d245c4ae9aceac04d56699ea9885ca0a2afc4f76b562416e94fe2048df6b2f306f3d4b7e51ed37b7a52fc1e4fc7
-  languageName: node
-  linkType: hard
-
-"fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.12, fast-glob@npm:^3.2.5, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
+"fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.12, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
   version: 3.3.3
   resolution: "fast-glob@npm:3.3.3"
   dependencies:
@@ -20941,13 +17360,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-json-parse@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "fast-json-parse@npm:1.0.3"
-  checksum: 10c0/2c58c7a0f7f1725c9da1272839f9bee3ccc13b77672b18ab4ac470c707999bca39828cd7e79b87c73017f21c3ddff37992d03fa2fd2da124d9bd06c1d02c9b7e
-  languageName: node
-  linkType: hard
-
 "fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0":
   version: 2.1.0
   resolution: "fast-json-stable-stringify@npm:2.1.0"
@@ -20969,17 +17381,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-xml-parser@npm:^4.0.12, fast-xml-parser@npm:^4.2.4":
-  version: 4.4.1
-  resolution: "fast-xml-parser@npm:4.4.1"
-  dependencies:
-    strnum: "npm:^1.0.5"
-  bin:
-    fxparser: src/cli/cli.js
-  checksum: 10c0/7f334841fe41bfb0bf5d920904ccad09cefc4b5e61eaf4c225bf1e1bb69ee77ef2147d8942f783ee8249e154d1ca8a858e10bda78a5d78b8bed3f48dcee9bf33
-  languageName: node
-  linkType: hard
-
 "fastest-levenshtein@npm:^1.0.12, fastest-levenshtein@npm:^1.0.16":
   version: 1.0.16
   resolution: "fastest-levenshtein@npm:1.0.16"
@@ -21023,37 +17424,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fbemitter@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "fbemitter@npm:3.0.0"
-  dependencies:
-    fbjs: "npm:^3.0.0"
-  checksum: 10c0/f130dd8e15dc3fc6709a26586b7a589cd994e1d1024b624f2cc8ef1b12401536a94bb30038e68150a24f9ba18863e9a3fe87941ade2c87667bfbd17f4848d5c7
-  languageName: node
-  linkType: hard
-
-"fbjs-css-vars@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "fbjs-css-vars@npm:1.0.2"
-  checksum: 10c0/dfb64116b125a64abecca9e31477b5edb9a2332c5ffe74326fe36e0a72eef7fc8a49b86adf36c2c293078d79f4524f35e80f5e62546395f53fb7c9e69821f54f
-  languageName: node
-  linkType: hard
-
-"fbjs@npm:^3.0.0":
-  version: 3.0.4
-  resolution: "fbjs@npm:3.0.4"
-  dependencies:
-    cross-fetch: "npm:^3.1.5"
-    fbjs-css-vars: "npm:^1.0.0"
-    loose-envify: "npm:^1.0.0"
-    object-assign: "npm:^4.1.0"
-    promise: "npm:^7.1.1"
-    setimmediate: "npm:^1.0.5"
-    ua-parser-js: "npm:^0.7.30"
-  checksum: 10c0/6c605d038d6852f0199a333e0b7f1f3e2602eebd0b815fba505f641912610007a0a8419222909e17ad0e07365d3b8a0bf45cacf9b43366dde0e95e5ced251632
-  languageName: node
-  linkType: hard
-
 "fd-slicer@npm:~1.1.0":
   version: 1.1.0
   resolution: "fd-slicer@npm:1.1.0"
@@ -21084,20 +17454,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fetch-retry@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "fetch-retry@npm:4.1.1"
-  checksum: 10c0/f55cdc82d096e8ef92f92218a8379a01d56cc01726a0ac554845eb943758ceca8be2619682678adfbff88ecb4d97269375200af7ca94a726a8195781aa4c2f49
-  languageName: node
-  linkType: hard
-
-"fetch-retry@npm:^5.0.2":
-  version: 5.0.3
-  resolution: "fetch-retry@npm:5.0.3"
-  checksum: 10c0/ea577f9537c0f289b650bfda1b1d7dff1d0fea230323fc702b983990c73ed01e4e8dd690dece3053a721d1fc51d689469c814e5821fcd78bda9368d34712f379
-  languageName: node
-  linkType: hard
-
 "fflate@npm:^0.6.9":
   version: 0.6.10
   resolution: "fflate@npm:0.6.10"
@@ -21112,13 +17468,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"figgy-pudding@npm:^3.5.1":
-  version: 3.5.2
-  resolution: "figgy-pudding@npm:3.5.2"
-  checksum: 10c0/b21c7adaeb8485ef3c50e056b5dc8c3a6461818343aba141e0d7927aad47a0cb9f1d207ffdf494c380cd60d7c848c46a5ce5cb06987d10e9226fcec419c8af90
-  languageName: node
-  linkType: hard
-
 "figures@npm:3.2.0, figures@npm:^3.2.0":
   version: 3.2.0
   resolution: "figures@npm:3.2.0"
@@ -21167,24 +17516,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-system-cache@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "file-system-cache@npm:1.0.5"
-  dependencies:
-    bluebird: "npm:^3.3.5"
-    fs-extra: "npm:^0.30.0"
-    ramda: "npm:^0.21.0"
-  checksum: 10c0/4898deb88303c8d54548b857920bea7227535d951ad4ec873c3b26d2b31a03b6ce112df856e9b5fc5993be6dbfb30cb40a3a8feef4054c286c1017f241f9f533
-  languageName: node
-  linkType: hard
-
-"file-uri-to-path@npm:1.0.0":
-  version: 1.0.0
-  resolution: "file-uri-to-path@npm:1.0.0"
-  checksum: 10c0/3b545e3a341d322d368e880e1c204ef55f1d45cdea65f7efc6c6ce9e0c4d22d802d5629320eb779d006fe59624ac17b0e848d83cc5af7cd101f206cb704f5519
-  languageName: node
-  linkType: hard
-
 "filelist@npm:^1.0.1":
   version: 1.0.2
   resolution: "filelist@npm:1.0.2"
@@ -21201,18 +17532,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fill-range@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "fill-range@npm:4.0.0"
-  dependencies:
-    extend-shallow: "npm:^2.0.1"
-    is-number: "npm:^3.0.0"
-    repeat-string: "npm:^1.6.1"
-    to-regex-range: "npm:^2.1.0"
-  checksum: 10c0/ccd57b7c43d7e28a1f8a60adfa3c401629c08e2f121565eece95e2386ebc64dedc7128d8c3448342aabf19db0c55a34f425f148400c7a7be9a606ba48749e089
-  languageName: node
-  linkType: hard
-
 "fill-range@npm:^7.1.1":
   version: 7.1.1
   resolution: "fill-range@npm:7.1.1"
@@ -21283,7 +17602,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-cache-dir@npm:^2.0.0, find-cache-dir@npm:^2.1.0":
+"find-cache-dir@npm:^2.0.0":
   version: 2.1.0
   resolution: "find-cache-dir@npm:2.1.0"
   dependencies:
@@ -21294,17 +17613,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-cache-dir@npm:^3.3.1":
-  version: 3.3.2
-  resolution: "find-cache-dir@npm:3.3.2"
-  dependencies:
-    commondir: "npm:^1.0.1"
-    make-dir: "npm:^3.0.2"
-    pkg-dir: "npm:^4.1.0"
-  checksum: 10c0/92747cda42bff47a0266b06014610981cfbb71f55d60f2c8216bc3108c83d9745507fb0b14ecf6ab71112bed29cd6fb1a137ee7436179ea36e11287e3159e587
-  languageName: node
-  linkType: hard
-
 "find-cache-dir@npm:^4.0.0":
   version: 4.0.0
   resolution: "find-cache-dir@npm:4.0.0"
@@ -21315,16 +17623,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-up@npm:^1.0.0":
-  version: 1.1.2
-  resolution: "find-up@npm:1.1.2"
-  dependencies:
-    path-exists: "npm:^2.0.0"
-    pinkie-promise: "npm:^2.0.0"
-  checksum: 10c0/51e35c62d9b7efe82d7d5cce966bfe10c2eaa78c769333f8114627e3a8a4a4f50747f5f50bff50b1094cbc6527776f0d3b9ff74d3561ef714a5290a17c80c2bc
-  languageName: node
-  linkType: hard
-
 "find-up@npm:^3.0.0":
   version: 3.0.0
   resolution: "find-up@npm:3.0.0"
@@ -21344,7 +17642,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-up@npm:^5.0.0, find-up@npm:~5.0.0":
+"find-up@npm:^5.0.0":
   version: 5.0.0
   resolution: "find-up@npm:5.0.0"
   dependencies:
@@ -21375,15 +17673,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-yarn-workspace-root@npm:~2.0.0":
-  version: 2.0.0
-  resolution: "find-yarn-workspace-root@npm:2.0.0"
-  dependencies:
-    micromatch: "npm:^4.0.2"
-  checksum: 10c0/b0d3843013fbdaf4e57140e0165889d09fa61745c9e85da2af86e54974f4cc9f1967e40f0d8fc36a79d53091f0829c651d06607d552582e53976f3cd8f4e5689
-  languageName: node
-  linkType: hard
-
 "findup-sync@npm:^5.0.0":
   version: 5.0.0
   resolution: "findup-sync@npm:5.0.0"
@@ -21441,19 +17730,9 @@ __metadata:
   linkType: hard
 
 "flow-parser@npm:0.*":
-  version: 0.206.0
-  resolution: "flow-parser@npm:0.206.0"
-  checksum: 10c0/63dedf1d7c16bd28b58ff1b827d6f58470a76e9d97de8516ee031ce0df2a52348b6f653032baebe14bbaea7f5ede6892dbe56d296590eab803ed33ede3f2785e
-  languageName: node
-  linkType: hard
-
-"flush-write-stream@npm:^1.0.0":
-  version: 1.1.1
-  resolution: "flush-write-stream@npm:1.1.1"
-  dependencies:
-    inherits: "npm:^2.0.3"
-    readable-stream: "npm:^2.3.6"
-  checksum: 10c0/2cd4f65b728d5f388197a03dafabc6a5e4f0c2ed1a2d912e288f7aa1c2996dd90875e55b50cf32c78dca55ad2e2dfae5d3db09b223838388033d87cf5920dd87
+  version: 0.300.0
+  resolution: "flow-parser@npm:0.300.0"
+  checksum: 10c0/c95b39dfbbfed8fc2e09363e895e7d01f453f08a891c057cf74826f33dc7a7ab731b99065216f9c2324df03de88a824f5c382881a8da93bbed1249a15d2bed83
   languageName: node
   linkType: hard
 
@@ -21492,23 +17771,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"for-in@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "for-in@npm:1.0.2"
-  checksum: 10c0/42bb609d564b1dc340e1996868b67961257fd03a48d7fdafd4f5119530b87f962be6b4d5b7e3a3fc84c9854d149494b1d358e0b0ce9837e64c4c6603a49451d6
-  languageName: node
-  linkType: hard
-
-"foreground-child@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "foreground-child@npm:2.0.0"
-  dependencies:
-    cross-spawn: "npm:^7.0.0"
-    signal-exit: "npm:^3.0.2"
-  checksum: 10c0/6719982783a448162f9a01500757fb2053bc5dcd4d67c7cd30739b38ccc01b39f84e408c30989d1d8774519c021c0498e2450ab127690fb09d7f2568fd94ffcc
-  languageName: node
-  linkType: hard
-
 "foreground-child@npm:^3.1.0, foreground-child@npm:^3.3.1":
   version: 3.3.1
   resolution: "foreground-child@npm:3.3.1"
@@ -21519,22 +17781,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fork-ts-checker-webpack-plugin@npm:^4.1.6":
-  version: 4.1.6
-  resolution: "fork-ts-checker-webpack-plugin@npm:4.1.6"
-  dependencies:
-    "@babel/code-frame": "npm:^7.5.5"
-    chalk: "npm:^2.4.1"
-    micromatch: "npm:^3.1.10"
-    minimatch: "npm:^3.0.4"
-    semver: "npm:^5.6.0"
-    tapable: "npm:^1.0.0"
-    worker-rpc: "npm:^0.1.0"
-  checksum: 10c0/2dddbe0d3bf2b84f4a5daada41091003decf881cffdef3bab72a699d0bfe3003e2d312405b304894153b5cfd0d0180d47f547e256525cdeb20f95de3df14a223
-  languageName: node
-  linkType: hard
-
-"fork-ts-checker-webpack-plugin@npm:^6.0.4, fork-ts-checker-webpack-plugin@npm:^6.5.0":
+"fork-ts-checker-webpack-plugin@npm:^6.5.0":
   version: 6.5.1
   resolution: "fork-ts-checker-webpack-plugin@npm:6.5.1"
   dependencies:
@@ -21572,17 +17819,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"form-data@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "form-data@npm:3.0.1"
-  dependencies:
-    asynckit: "npm:^0.4.0"
-    combined-stream: "npm:^1.0.8"
-    mime-types: "npm:^2.1.12"
-  checksum: 10c0/1ccc3ae064a080a799923f754d49fcebdd90515a8924f0f54de557540b50e7f1fe48ba5f2bd0435a5664aa2d49729107e6aaf2155a9abf52339474c5638b4485
-  languageName: node
-  linkType: hard
-
 "form-data@npm:^4.0.0":
   version: 4.0.0
   resolution: "form-data@npm:4.0.0"
@@ -21622,15 +17858,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fragment-cache@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "fragment-cache@npm:0.2.1"
-  dependencies:
-    map-cache: "npm:^0.2.2"
-  checksum: 10c0/5891d1c1d1d5e1a7fb3ccf28515c06731476fa88f7a50f4ede8a0d8d239a338448e7f7cc8b73db48da19c229fa30066104fe6489862065a4f1ed591c42fbeabf
-  languageName: node
-  linkType: hard
-
 "framer-motion@npm:10.18.0":
   version: 10.18.0
   resolution: "framer-motion@npm:10.18.0"
@@ -21673,7 +17900,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"freeport-async@npm:2.0.0":
+"freeport-async@npm:^2.0.0":
   version: 2.0.0
   resolution: "freeport-async@npm:2.0.0"
   checksum: 10c0/421828d1a689695b6c8122d310fd8941af99ebe0b5793e3f8d49aa5923ce580b6c4dd6b7470d46983e60839c302f6c793a8541dbab80817396cdde2b04c83c90
@@ -21694,16 +17921,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"from2@npm:^2.1.0":
-  version: 2.3.0
-  resolution: "from2@npm:2.3.0"
-  dependencies:
-    inherits: "npm:^2.0.1"
-    readable-stream: "npm:^2.0.0"
-  checksum: 10c0/f87f7a2e4513244d551454a7f8324ef1f7837864a8701c536417286ec19ff4915606b1dfa8909a21b7591ebd8440ffde3642f7c303690b9a4d7c832d62248aa1
-  languageName: node
-  linkType: hard
-
 "front-matter@npm:^4.0.2":
   version: 4.0.2
   resolution: "front-matter@npm:4.0.2"
@@ -21720,31 +17937,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:9.0.0":
-  version: 9.0.0
-  resolution: "fs-extra@npm:9.0.0"
-  dependencies:
-    at-least-node: "npm:^1.0.0"
-    graceful-fs: "npm:^4.2.0"
-    jsonfile: "npm:^6.0.1"
-    universalify: "npm:^1.0.0"
-  checksum: 10c0/c7f8903b5939a585d16c064142929a9ad12d63084009a198da37bd2c49095b938c8f9a88f8378235dafd5312354b6e872c0181f97f820095fb3539c9d5fe6cd0
-  languageName: node
-  linkType: hard
-
-"fs-extra@npm:^0.30.0":
-  version: 0.30.0
-  resolution: "fs-extra@npm:0.30.0"
-  dependencies:
-    graceful-fs: "npm:^4.1.2"
-    jsonfile: "npm:^2.1.0"
-    klaw: "npm:^1.0.0"
-    path-is-absolute: "npm:^1.0.0"
-    rimraf: "npm:^2.2.8"
-  checksum: 10c0/24f3c966018c7bf436bf38ca3a126f1d95bf0f82598302195c4f0c8887767f045dae308f92c53a39cead74631dabbc30fcf1c71dbe96f1f0148f6de8edd114bc
-  languageName: node
-  linkType: hard
-
 "fs-extra@npm:^10.0.0, fs-extra@npm:^10.1.0":
   version: 10.1.0
   resolution: "fs-extra@npm:10.1.0"
@@ -21756,7 +17948,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^11.0.0, fs-extra@npm:^11.1.1, fs-extra@npm:^11.2.0":
+"fs-extra@npm:^11.1.1, fs-extra@npm:^11.2.0":
   version: 11.2.0
   resolution: "fs-extra@npm:11.2.0"
   dependencies:
@@ -21767,18 +17959,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^8.1.0, fs-extra@npm:~8.1.0":
-  version: 8.1.0
-  resolution: "fs-extra@npm:8.1.0"
-  dependencies:
-    graceful-fs: "npm:^4.2.0"
-    jsonfile: "npm:^4.0.0"
-    universalify: "npm:^0.1.0"
-  checksum: 10c0/259f7b814d9e50d686899550c4f9ded85c46c643f7fe19be69504888e007fcbc08f306fae8ec495b8b998635e997c9e3e175ff2eeed230524ef1c1684cc96423
-  languageName: node
-  linkType: hard
-
-"fs-extra@npm:^9.0.0, fs-extra@npm:^9.0.1, fs-extra@npm:^9.1.0":
+"fs-extra@npm:^9.0.0":
   version: 9.1.0
   resolution: "fs-extra@npm:9.1.0"
   dependencies:
@@ -21799,15 +17980,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-minipass@npm:^3.0.0":
-  version: 3.0.3
-  resolution: "fs-minipass@npm:3.0.3"
-  dependencies:
-    minipass: "npm:^7.0.3"
-  checksum: 10c0/63e80da2ff9b621e2cb1596abcb9207f1cf82b968b116ccd7b959e3323144cce7fb141462200971c38bbf2ecca51695069db45265705bed09a7cd93ae5b89f94
-  languageName: node
-  linkType: hard
-
 "fs-monkey@npm:^1.0.4":
   version: 1.0.6
   resolution: "fs-monkey@npm:1.0.6"
@@ -21822,18 +17994,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-write-stream-atomic@npm:^1.0.8":
-  version: 1.0.10
-  resolution: "fs-write-stream-atomic@npm:1.0.10"
-  dependencies:
-    graceful-fs: "npm:^4.1.2"
-    iferr: "npm:^0.1.5"
-    imurmurhash: "npm:^0.1.4"
-    readable-stream: "npm:1 || 2"
-  checksum: 10c0/293b2b4ed346d35a28f8637a20cb2aef31be86503da501c42c2eda8fefed328bac16ce0e5daa7019f9329d73930c58031eaea2ce0c70f1680943fbfb7cff808b
-  languageName: node
-  linkType: hard
-
 "fs.realpath@npm:^1.0.0":
   version: 1.0.0
   resolution: "fs.realpath@npm:1.0.0"
@@ -21851,17 +18011,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:^1.2.7":
-  version: 1.2.13
-  resolution: "fsevents@npm:1.2.13"
-  dependencies:
-    bindings: "npm:^1.5.0"
-    nan: "npm:^2.12.1"
-  checksum: 10c0/4427ff08db9ee7327f2c3ad58ec56f9096a917eed861bfffaa2e2be419479cdf37d00750869ab9ecbf5f59f32ad999bd59577d73fc639193e6c0ce52bb253e02
-  conditions: os=darwin
-  languageName: node
-  linkType: hard
-
 "fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3":
   version: 2.3.3
   resolution: "fsevents@npm:2.3.3"
@@ -21881,16 +18030,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@npm%3A^1.2.7#optional!builtin<compat/fsevents>":
-  version: 1.2.13
-  resolution: "fsevents@patch:fsevents@npm%3A1.2.13#optional!builtin<compat/fsevents>::version=1.2.13&hash=d11327"
-  dependencies:
-    bindings: "npm:^1.5.0"
-    nan: "npm:^2.12.1"
-  conditions: os=darwin
-  languageName: node
-  linkType: hard
-
 "fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.3#optional!builtin<compat/fsevents>":
   version: 2.3.3
   resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
@@ -21907,7 +18046,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"function.prototype.name@npm:^1.1.0, function.prototype.name@npm:^1.1.6, function.prototype.name@npm:^1.1.8":
+"function.prototype.name@npm:^1.1.6, function.prototype.name@npm:^1.1.8":
   version: 1.1.8
   resolution: "function.prototype.name@npm:1.1.8"
   dependencies:
@@ -21928,13 +18067,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"funpermaproxy@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "funpermaproxy@npm:1.1.0"
-  checksum: 10c0/058d5f56499dac0a275d7115c74230e339f7481618b96c21e8cafa8260a6db7c16f1e4127f5be2aeb167876ff5f33846503a07148279b2f68ca45d04771d666e
-  languageName: node
-  linkType: hard
-
 "fuse.js@npm:^6.6.2":
   version: 6.6.2
   resolution: "fuse.js@npm:6.6.2"
@@ -21949,23 +18081,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gauge@npm:^3.0.0":
-  version: 3.0.2
-  resolution: "gauge@npm:3.0.2"
-  dependencies:
-    aproba: "npm:^1.0.3 || ^2.0.0"
-    color-support: "npm:^1.1.2"
-    console-control-strings: "npm:^1.0.0"
-    has-unicode: "npm:^2.0.1"
-    object-assign: "npm:^4.1.1"
-    signal-exit: "npm:^3.0.0"
-    string-width: "npm:^4.2.3"
-    strip-ansi: "npm:^6.0.1"
-    wide-align: "npm:^1.1.2"
-  checksum: 10c0/75230ccaf216471e31025c7d5fcea1629596ca20792de50c596eb18ffb14d8404f927cd55535aab2eeecd18d1e11bd6f23ec3c2e9878d2dda1dc74bccc34b913
-  languageName: node
-  linkType: hard
-
 "gauge@npm:^4.0.0":
   version: 4.0.0
   resolution: "gauge@npm:4.0.0"
@@ -21983,7 +18098,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gensync@npm:^1.0.0-beta.1, gensync@npm:^1.0.0-beta.2":
+"gensync@npm:^1.0.0-beta.2":
   version: 1.0.0-beta.2
   resolution: "gensync@npm:1.0.0-beta.2"
   checksum: 10c0/782aba6cba65b1bb5af3b095d96249d20edbe8df32dbf4696fd49be2583faf676173bf4809386588828e4dd76a3354fcbeb577bab1c833ccd9fc4577f26103f8
@@ -21997,14 +18112,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-caller-file@npm:^2.0.1, get-caller-file@npm:^2.0.5":
+"get-caller-file@npm:^2.0.5":
   version: 2.0.5
   resolution: "get-caller-file@npm:2.0.5"
   checksum: 10c0/c6c7b60271931fa752aeb92f2b47e355eac1af3a2673f47c9589e8f8a41adc74d45551c1bc57b5e66a80609f10ffb72b6f575e4370d61cc3f7f3aaff01757cde
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.1.1, get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.2, get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0":
+"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.2, get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0":
   version: 1.3.0
   resolution: "get-intrinsic@npm:1.3.0"
   dependencies:
@@ -22036,13 +18151,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-port@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "get-port@npm:3.2.0"
-  checksum: 10c0/1b6c3fe89074be3753d9ddf3d67126ea351ab9890537fe53fefebc2912d1d66fdc112451bbc76d33ae5ceb6ca70be2a91017944e3ee8fb0814ac9b295bf2a5b8
-  languageName: node
-  linkType: hard
-
 "get-proto@npm:^1.0.0, get-proto@npm:^1.0.1":
   version: 1.0.1
   resolution: "get-proto@npm:1.0.1"
@@ -22053,13 +18161,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-stdin@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "get-stdin@npm:4.0.1"
-  checksum: 10c0/68fc39a0af6050bcad791fb3df72999e7636401f11f574bf24af07b1c640d30c01cf38aa39ee55665a93ee7a7753eeb6d1fce6c434dd1f458ee0f8fd02775809
-  languageName: node
-  linkType: hard
-
 "get-stdin@npm:^6.0.0":
   version: 6.0.0
   resolution: "get-stdin@npm:6.0.0"
@@ -22099,7 +18200,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-symbol-description@npm:^1.0.0, get-symbol-description@npm:^1.1.0":
+"get-symbol-description@npm:^1.1.0":
   version: 1.1.0
   resolution: "get-symbol-description@npm:1.1.0"
   dependencies:
@@ -22130,17 +18231,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-value@npm:^2.0.3, get-value@npm:^2.0.6":
-  version: 2.0.6
-  resolution: "get-value@npm:2.0.6"
-  checksum: 10c0/f069c132791b357c8fc4adfe9e2929b0a2c6e95f98ca7bc6fcbc27f8a302e552f86b4ae61ec56d9e9ac2544b93b6a39743d479866a37b43fcc104088ba74f0d9
-  languageName: node
-  linkType: hard
-
-"getenv@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "getenv@npm:1.0.0"
-  checksum: 10c0/9661c5996c7622e12eab1d23448474ae51dbec6f8862eed903ebaa864dcd332895441c23d962e3ff5c180a9e3dff6cb1f569a115e1447db4acb52af2d880d655
+"getenv@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "getenv@npm:2.0.0"
+  checksum: 10c0/397ff641dd70cd78e414430258651e9a2228d3c5553a8cf15ae7840f75d3f10dfcb83f668f84829e84ea665b0fce2f08a9eddda3c9dcd7faa2d3da1c182c1854
   languageName: node
   linkType: hard
 
@@ -22151,16 +18245,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "glob-parent@npm:3.1.0"
-  dependencies:
-    is-glob: "npm:^3.1.0"
-    path-dirname: "npm:^1.0.0"
-  checksum: 10c0/bfa89ce5ae1dfea4c2ece7b61d2ea230d87fcbec7472915cfdb3f4caf688a91ecb0dc86ae39b1e17505adce7e64cae3b971d64dc66091f3a0131169fd631b00d
-  languageName: node
-  linkType: hard
-
 "glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
@@ -22179,24 +18263,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-promise@npm:^3.4.0":
-  version: 3.4.0
-  resolution: "glob-promise@npm:3.4.0"
-  dependencies:
-    "@types/glob": "npm:*"
-  peerDependencies:
-    glob: "*"
-  checksum: 10c0/8862e309f46a97c9491d35900257c9174f72b8358a8f485cdba88eb2d5b0f9cf496dfe635711bbd871e89165f50ec3acd435cbef5bfc5efbc14508abced778ac
-  languageName: node
-  linkType: hard
-
-"glob-to-regexp@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "glob-to-regexp@npm:0.3.0"
-  checksum: 10c0/f7e8091288d88b397b715281560d86ba4998246c300cb0d51db483db0a4c68cb48b489af8da9c03262745e8aa5337ba596d82dee61ff9467c5d7c27d70b676aa
-  languageName: node
-  linkType: hard
-
 "glob-to-regexp@npm:^0.4.1":
   version: 0.4.1
   resolution: "glob-to-regexp@npm:0.4.1"
@@ -22204,21 +18270,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:7.1.6":
-  version: 7.1.6
-  resolution: "glob@npm:7.1.6"
-  dependencies:
-    fs.realpath: "npm:^1.0.0"
-    inflight: "npm:^1.0.4"
-    inherits: "npm:2"
-    minimatch: "npm:^3.0.4"
-    once: "npm:^1.3.0"
-    path-is-absolute: "npm:^1.0.0"
-  checksum: 10c0/2575cce9306ac534388db751f0aa3e78afedb6af8f3b529ac6b2354f66765545145dba8530abf7bff49fb399a047d3f9b6901c38ee4c9503f592960d9af67763
-  languageName: node
-  linkType: hard
-
-"glob@npm:^10.0.0, glob@npm:^10.2.2, glob@npm:^10.3.10":
+"glob@npm:^10.0.0, glob@npm:^10.3.10":
   version: 10.4.5
   resolution: "glob@npm:10.4.5"
   dependencies:
@@ -22250,20 +18302,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^6.0.1":
-  version: 6.0.4
-  resolution: "glob@npm:6.0.4"
+"glob@npm:^13.0.0":
+  version: 13.0.6
+  resolution: "glob@npm:13.0.6"
   dependencies:
-    inflight: "npm:^1.0.4"
-    inherits: "npm:2"
-    minimatch: "npm:2 || 3"
-    once: "npm:^1.3.0"
-    path-is-absolute: "npm:^1.0.0"
-  checksum: 10c0/520146ebce0f4594b8357338f86281b38ee14214debce398a2902176a28f18e0f98911ea48516d85022de64fbbaa57f074aa13715d1daa5d70e21b82cea22183
+    minimatch: "npm:^10.2.2"
+    minipass: "npm:^7.1.3"
+    path-scurry: "npm:^2.0.2"
+  checksum: 10c0/269c236f11a9b50357fe7a8c6aadac667e01deb5242b19c84975628f05f4438d8ee1354bb62c5d6c10f37fd59911b54d7799730633a2786660d8c69f1d18120a
   languageName: node
   linkType: hard
 
-"glob@npm:^7.0.0, 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, glob@npm:^7.2.3":
+"glob@npm:^7.0.0, glob@npm:^7.1.1, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.2.0":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
   dependencies:
@@ -22277,33 +18327,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^8.0.3":
-  version: 8.1.0
-  resolution: "glob@npm:8.1.0"
-  dependencies:
-    fs.realpath: "npm:^1.0.0"
-    inflight: "npm:^1.0.4"
-    inherits: "npm:2"
-    minimatch: "npm:^5.0.1"
-    once: "npm:^1.3.0"
-  checksum: 10c0/cb0b5cab17a59c57299376abe5646c7070f8acb89df5595b492dba3bfb43d301a46c01e5695f01154e6553168207cb60d4eaf07d3be4bc3eb9b0457c5c561d0f
-  languageName: node
-  linkType: hard
-
-"glob@patch:glob@npm:7.1.6#.yarn/patches/glob-npm-7.1.6-minimatch10-symbol.patch::locator=design-system%40workspace%3A.":
-  version: 7.1.6
-  resolution: "glob@patch:glob@npm%3A7.1.6#.yarn/patches/glob-npm-7.1.6-minimatch10-symbol.patch::version=7.1.6&hash=900bbf&locator=design-system%40workspace%3A."
-  dependencies:
-    fs.realpath: "npm:^1.0.0"
-    inflight: "npm:^1.0.4"
-    inherits: "npm:2"
-    minimatch: "npm:^3.0.4"
-    once: "npm:^1.3.0"
-    path-is-absolute: "npm:^1.0.0"
-  checksum: 10c0/4294ad951773b035f6df9cb7b1fbb3a70aeb29056e66a98476206dbe9be372b9c97f104ee1d54c8260e8a4074c5c081b6ff25e5fda8ea0fb47a3816bff3024a3
-  languageName: node
-  linkType: hard
-
 "global-dirs@npm:^3.0.0":
   version: 3.0.0
   resolution: "global-dirs@npm:3.0.0"
@@ -22381,7 +18404,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globalthis@npm:^1.0.0, globalthis@npm:^1.0.4":
+"globalthis@npm:^1.0.4":
   version: 1.0.4
   resolution: "globalthis@npm:1.0.4"
   dependencies:
@@ -22391,7 +18414,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^11.0.0, globby@npm:^11.0.1, globby@npm:^11.0.2, globby@npm:^11.0.4, globby@npm:^11.1.0":
+"globby@npm:^11.0.0, globby@npm:^11.0.1, globby@npm:^11.0.4, globby@npm:^11.1.0":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
   dependencies:
@@ -22432,22 +18455,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^9.2.0":
-  version: 9.2.0
-  resolution: "globby@npm:9.2.0"
-  dependencies:
-    "@types/glob": "npm:^7.1.1"
-    array-union: "npm:^1.0.2"
-    dir-glob: "npm:^2.2.2"
-    fast-glob: "npm:^2.2.6"
-    glob: "npm:^7.1.3"
-    ignore: "npm:^4.0.3"
-    pify: "npm:^4.0.1"
-    slash: "npm:^2.0.0"
-  checksum: 10c0/2bd47ec43797b81000f3619feff96803b22591961788c06d746f6c8ba2deb14676b591ee625eb74b197c0047b2236e4a7a2ad662417661231b317c1de67aee94
-  languageName: node
-  linkType: hard
-
 "globjoin@npm:^0.1.4":
   version: 0.1.4
   resolution: "globjoin@npm:0.1.4"
@@ -22495,7 +18502,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.15, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.1.9, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
+"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2
@@ -22519,24 +18526,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graphql-tag@npm:^2.10.1":
-  version: 2.12.6
-  resolution: "graphql-tag@npm:2.12.6"
-  dependencies:
-    tslib: "npm:^2.1.0"
-  peerDependencies:
-    graphql: ^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: 10c0/7763a72011bda454ed8ff1a0d82325f43ca6478e4ce4ab8b7910c4c651dd00db553132171c04d80af5d5aebf1ef6a8a9fd53ccfa33b90ddc00aa3d4be6114419
-  languageName: node
-  linkType: hard
-
-"graphql@npm:15.8.0":
-  version: 15.8.0
-  resolution: "graphql@npm:15.8.0"
-  checksum: 10c0/30cc09b77170a9d1ed68e4c017ec8c5265f69501c96e4f34f8f6613f39a886c96dd9853eac925f212566ed651736334c8fe24ceae6c44e8d7625c95c3009a801
-  languageName: node
-  linkType: hard
-
 "gray-matter@npm:^4.0.3":
   version: 4.0.3
   resolution: "gray-matter@npm:4.0.3"
@@ -22578,24 +18567,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"handlebars@npm:^4.7.7":
-  version: 4.7.7
-  resolution: "handlebars@npm:4.7.7"
-  dependencies:
-    minimist: "npm:^1.2.5"
-    neo-async: "npm:^2.6.0"
-    source-map: "npm:^0.6.1"
-    uglify-js: "npm:^3.1.4"
-    wordwrap: "npm:^1.0.0"
-  dependenciesMeta:
-    uglify-js:
-      optional: true
-  bin:
-    handlebars: bin/handlebars
-  checksum: 10c0/4c0913fc0018a2a2e358ee94e4fe83f071762b8bec51a473d187e6642e94e569843adcf550ffe329554c63ad450c062f3a05447bd2e3fff5ebfe698e214225c6
-  languageName: node
-  linkType: hard
-
 "hard-rejection@npm:^2.1.0":
   version: 2.1.0
   resolution: "hard-rejection@npm:2.1.0"
@@ -22631,15 +18602,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-glob@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "has-glob@npm:1.0.0"
-  dependencies:
-    is-glob: "npm:^3.0.0"
-  checksum: 10c0/2546d20b7a667304d8b2e490c2d5a4e20e799a43eb6d97c0d47c0c737bbde082a73731001c791d445b904b3f408d584477df7d2d301183e13c4b3f0a3c81787b
-  languageName: node
-  linkType: hard
-
 "has-property-descriptors@npm:^1.0.0, has-property-descriptors@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-property-descriptors@npm:1.0.2"
@@ -22658,7 +18620,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-symbols@npm:^1.0.2, has-symbols@npm:^1.0.3, has-symbols@npm:^1.1.0":
+"has-symbols@npm:^1.0.3, has-symbols@npm:^1.1.0":
   version: 1.1.0
   resolution: "has-symbols@npm:1.1.0"
   checksum: 10c0/dde0a734b17ae51e84b10986e651c664379018d10b91b6b0e9b293eddb32f0f069688c841fb40f19e9611546130153e0a2a48fd7f512891fb000ddfa36f5a20e
@@ -22681,45 +18643,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-value@npm:^0.3.1":
-  version: 0.3.1
-  resolution: "has-value@npm:0.3.1"
-  dependencies:
-    get-value: "npm:^2.0.3"
-    has-values: "npm:^0.1.4"
-    isobject: "npm:^2.0.0"
-  checksum: 10c0/7a7c2e9d07bc9742c81806150adb154d149bc6155267248c459cd1ce2a64b0759980d26213260e4b7599c8a3754551179f155ded88d0533a0d2bc7bc29028432
-  languageName: node
-  linkType: hard
-
-"has-value@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "has-value@npm:1.0.0"
-  dependencies:
-    get-value: "npm:^2.0.6"
-    has-values: "npm:^1.0.0"
-    isobject: "npm:^3.0.0"
-  checksum: 10c0/17cdccaf50f8aac80a109dba2e2ee5e800aec9a9d382ef9deab66c56b34269e4c9ac720276d5ffa722764304a1180ae436df077da0dd05548cfae0209708ba4d
-  languageName: node
-  linkType: hard
-
-"has-values@npm:^0.1.4":
-  version: 0.1.4
-  resolution: "has-values@npm:0.1.4"
-  checksum: 10c0/a8f00ad862c20289798c35243d5bd0b0a97dd44b668c2204afe082e0265f2d0bf3b89fc8cc0ef01a52b49f10aa35cf85c336ee3a5f1cac96ed490f5e901cdbf2
-  languageName: node
-  linkType: hard
-
-"has-values@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "has-values@npm:1.0.0"
-  dependencies:
-    is-number: "npm:^3.0.0"
-    kind-of: "npm:^4.0.0"
-  checksum: 10c0/a6f2a1cc6b2e43eacc68e62e71ad6890def7f4b13d2ef06b4ad3ee156c23e470e6df144b9b467701908e17633411f1075fdff0cab45fb66c5e0584d89b25f35e
-  languageName: node
-  linkType: hard
-
 "has-yarn@npm:^3.0.0":
   version: 3.0.0
   resolution: "has-yarn@npm:3.0.0"
@@ -22727,27 +18650,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hash-base@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "hash-base@npm:3.1.0"
-  dependencies:
-    inherits: "npm:^2.0.4"
-    readable-stream: "npm:^3.6.0"
-    safe-buffer: "npm:^5.2.0"
-  checksum: 10c0/663eabcf4173326fbb65a1918a509045590a26cc7e0964b754eef248d281305c6ec9f6b31cb508d02ffca383ab50028180ce5aefe013e942b44a903ac8dc80d0
-  languageName: node
-  linkType: hard
-
-"hash.js@npm:^1.0.0, hash.js@npm:^1.0.3":
-  version: 1.1.7
-  resolution: "hash.js@npm:1.1.7"
-  dependencies:
-    inherits: "npm:^2.0.3"
-    minimalistic-assert: "npm:^1.0.1"
-  checksum: 10c0/41ada59494eac5332cfc1ce6b7ebdd7b88a3864a6d6b08a3ea8ef261332ed60f37f10877e0c825aaa4bddebf164fbffa618286aeeec5296675e2671cbfa746c4
-  languageName: node
-  linkType: hard
-
 "hasown@npm:^2.0.0, hasown@npm:^2.0.2":
   version: 2.0.2
   resolution: "hasown@npm:2.0.2"
@@ -22757,35 +18659,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hast-to-hyperscript@npm:^9.0.0":
-  version: 9.0.1
-  resolution: "hast-to-hyperscript@npm:9.0.1"
-  dependencies:
-    "@types/unist": "npm:^2.0.3"
-    comma-separated-tokens: "npm:^1.0.0"
-    property-information: "npm:^5.3.0"
-    space-separated-tokens: "npm:^1.0.0"
-    style-to-object: "npm:^0.3.0"
-    unist-util-is: "npm:^4.0.0"
-    web-namespaces: "npm:^1.0.0"
-  checksum: 10c0/630f0db8e1c78d8d6e4f8bd19dec4b6ff6c3048ba0b07b8e34bb812dfbbdc96f4c16abca16c3bfc64e7757921f42790a7bd4a693d6ce99375f99dead65a19a12
-  languageName: node
-  linkType: hard
-
-"hast-util-from-parse5@npm:^6.0.0":
-  version: 6.0.1
-  resolution: "hast-util-from-parse5@npm:6.0.1"
-  dependencies:
-    "@types/parse5": "npm:^5.0.0"
-    hastscript: "npm:^6.0.0"
-    property-information: "npm:^5.0.0"
-    vfile: "npm:^4.0.0"
-    vfile-location: "npm:^3.2.0"
-    web-namespaces: "npm:^1.0.0"
-  checksum: 10c0/c5e7ee40347c3850ece717e37c3e277ca233848ebca341f68c2afbefdb912da415a2fd06940edc3ea4882ad520e1cac7bf3fcf66c31ae97e1bcf953fcb6a7db5
-  languageName: node
-  linkType: hard
-
 "hast-util-from-parse5@npm:^8.0.0":
   version: 8.0.2
   resolution: "hast-util-from-parse5@npm:8.0.2"
@@ -22802,13 +18675,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hast-util-parse-selector@npm:^2.0.0":
-  version: 2.2.5
-  resolution: "hast-util-parse-selector@npm:2.2.5"
-  checksum: 10c0/29b7ee77960ded6a99d30c287d922243071cc07b39f2006f203bd08ee54eb8f66bdaa86ef6527477c766e2382d520b60ee4e4087f189888c35d8bcc020173648
-  languageName: node
-  linkType: hard
-
 "hast-util-parse-selector@npm:^4.0.0":
   version: 4.0.0
   resolution: "hast-util-parse-selector@npm:4.0.0"
@@ -22818,24 +18684,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hast-util-raw@npm:6.0.1":
-  version: 6.0.1
-  resolution: "hast-util-raw@npm:6.0.1"
-  dependencies:
-    "@types/hast": "npm:^2.0.0"
-    hast-util-from-parse5: "npm:^6.0.0"
-    hast-util-to-parse5: "npm:^6.0.0"
-    html-void-elements: "npm:^1.0.0"
-    parse5: "npm:^6.0.0"
-    unist-util-position: "npm:^3.0.0"
-    vfile: "npm:^4.0.0"
-    web-namespaces: "npm:^1.0.0"
-    xtend: "npm:^4.0.0"
-    zwitch: "npm:^1.0.0"
-  checksum: 10c0/0ed0a2731251a4853710eda38e0bb79ee1ad8ccea69b391c16eb20895895818bced1c2c9eaf8853280f0aa6dc71d22b9eb6c9aab770dd1a225bb44d522eef1ef
-  languageName: node
-  linkType: hard
-
 "hast-util-raw@npm:^9.0.0":
   version: 9.1.0
   resolution: "hast-util-raw@npm:9.1.0"
@@ -22904,19 +18752,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hast-util-to-parse5@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "hast-util-to-parse5@npm:6.0.0"
-  dependencies:
-    hast-to-hyperscript: "npm:^9.0.0"
-    property-information: "npm:^5.0.0"
-    web-namespaces: "npm:^1.0.0"
-    xtend: "npm:^4.0.0"
-    zwitch: "npm:^1.0.0"
-  checksum: 10c0/49d6c2389fd3170741cdb0483666bccd7e9e436fe386bcbd3931b019e4c006b5bb48022e07967e1021336e744e901082d6479cfa4bc2082efa3b1e5bdab2a36f
-  languageName: node
-  linkType: hard
-
 "hast-util-to-parse5@npm:^8.0.0":
   version: 8.0.0
   resolution: "hast-util-to-parse5@npm:8.0.0"
@@ -22941,19 +18776,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hastscript@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "hastscript@npm:6.0.0"
-  dependencies:
-    "@types/hast": "npm:^2.0.0"
-    comma-separated-tokens: "npm:^1.0.0"
-    hast-util-parse-selector: "npm:^2.0.0"
-    property-information: "npm:^5.0.0"
-    space-separated-tokens: "npm:^1.0.0"
-  checksum: 10c0/f76d9cf373cb075c8523c8ad52709f09f7e02b7c9d3152b8d35c65c265b9f1878bed6023f215a7d16523921036d40a7da292cb6f4399af9b5eccac2a5a5eb330
-  languageName: node
-  linkType: hard
-
 "hastscript@npm:^9.0.0":
   version: 9.0.0
   resolution: "hastscript@npm:9.0.0"
@@ -22976,54 +18798,67 @@ __metadata:
   languageName: node
   linkType: hard
 
-"header-case@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "header-case@npm:1.0.1"
-  dependencies:
-    no-case: "npm:^2.2.0"
-    upper-case: "npm:^1.1.3"
-  checksum: 10c0/973b81b3fba82140cf8cdc819edb32edd5959ff61ff42128c5f54e56f7454bb8f61c0197180c38cde84a4be1dddbc780e1413d5e1602c96caf0195d863e6bd03
+"hermes-estree@npm:0.25.1":
+  version: 0.25.1
+  resolution: "hermes-estree@npm:0.25.1"
+  checksum: 10c0/48be3b2fa37a0cbc77a112a89096fa212f25d06de92781b163d67853d210a8a5c3784fac23d7d48335058f7ed283115c87b4332c2a2abaaccc76d0ead1a282ac
   languageName: node
   linkType: hard
 
-"hermes-estree@npm:0.12.0":
-  version: 0.12.0
-  resolution: "hermes-estree@npm:0.12.0"
-  checksum: 10c0/df16c382b1d899dc1ce5dd716ca7b3191fd6e065138db3b7981ef87e1216d39798f5f951eb2534cfa40193ab771214ef030ec4e8ad4a8ae5007435ebdf9abacd
+"hermes-estree@npm:0.29.1":
+  version: 0.29.1
+  resolution: "hermes-estree@npm:0.29.1"
+  checksum: 10c0/e6b01f79ba708697d61a74b871d5ebae5f863c6d782657d8e2d2256eb838f1eb86ff9c34773a81d9cc69e54be3a5059c686e0ab54a4afba903b40dde92dd0ccb
   languageName: node
   linkType: hard
 
-"hermes-estree@npm:0.19.1":
-  version: 0.19.1
-  resolution: "hermes-estree@npm:0.19.1"
-  checksum: 10c0/98c79807c15146c745aca7a9c74b9f1ba20a463c8b9f058caed9b3f2741fc4a8609e7e4c06d163f67d819db35cb6871fc7b25085bb9a084bc53d777f67d9d620
+"hermes-estree@npm:0.32.0":
+  version: 0.32.0
+  resolution: "hermes-estree@npm:0.32.0"
+  checksum: 10c0/3b67d1fe44336240ef7f9c40ecbf363279ba263d51efe120570c3862cc109e652fc09aebddfe6b73d0f0246610bee130e4064c359f1f4cbf002bdb1d99717ef2
   languageName: node
   linkType: hard
 
-"hermes-parser@npm:0.12.0":
-  version: 0.12.0
-  resolution: "hermes-parser@npm:0.12.0"
+"hermes-estree@npm:0.33.3":
+  version: 0.33.3
+  resolution: "hermes-estree@npm:0.33.3"
+  checksum: 10c0/4e04e767a706a93c59d64ef3f114075aeb93b08433655d4f11d310f0785c2a74d5b5041b80bc34d22630dece54865dd93a53fde160d48b8369cfef10dbd0520b
+  languageName: node
+  linkType: hard
+
+"hermes-parser@npm:0.29.1, hermes-parser@npm:^0.29.1":
+  version: 0.29.1
+  resolution: "hermes-parser@npm:0.29.1"
   dependencies:
-    hermes-estree: "npm:0.12.0"
-  checksum: 10c0/329f7a5c2028e9d2e3e0008865e5a7a7ef847c9425183b696a1f043f42f72e7a438368d978904c22adefc1212f3b867f48842e62c2159a5704a677bfc1a5a87e
+    hermes-estree: "npm:0.29.1"
+  checksum: 10c0/7f40d9bdfb5acaa700f333a24c644b17f5f8d0e823b1e7a9fb6dcf253a54d54716ae63c74effa023688ee4f09013c80188c40d601570fee256a44954e04c2926
   languageName: node
   linkType: hard
 
-"hermes-parser@npm:0.19.1":
-  version: 0.19.1
-  resolution: "hermes-parser@npm:0.19.1"
+"hermes-parser@npm:0.32.0":
+  version: 0.32.0
+  resolution: "hermes-parser@npm:0.32.0"
   dependencies:
-    hermes-estree: "npm:0.19.1"
-  checksum: 10c0/940ccef90673b8e905016332d2660ae00ad747e2d32c694a52dce4ea220835dc1bae299554a7a8eeccb449561065bd97f3690363c087fbf69ad7cbff2deeec35
+    hermes-estree: "npm:0.32.0"
+  checksum: 10c0/5902d2c5d347c0629fba07a47eaad5569590ac69bc8bfb2e454e08d2dfbe1ebd989d88518dca2cba64061689b5eac5960ae6bd15a4a66600bbf377498a3234b7
   languageName: node
   linkType: hard
 
-"hermes-profile-transformer@npm:^0.0.6":
-  version: 0.0.6
-  resolution: "hermes-profile-transformer@npm:0.0.6"
+"hermes-parser@npm:0.33.3":
+  version: 0.33.3
+  resolution: "hermes-parser@npm:0.33.3"
   dependencies:
-    source-map: "npm:^0.7.3"
-  checksum: 10c0/d772faa712f97ec009cb8de1f6b2dc26af491d1baaea92af7649fbb9cafd60a9c7a499de32d23ba7606e501147bfb2daf14e477c967f11e3de8a1e41ecf626c7
+    hermes-estree: "npm:0.33.3"
+  checksum: 10c0/f7d69de54c77321d8481e37a323bbac01d180ec982275ef8925ceaaf7e501fc3062593e84cf5da50852f36daffb34d0f5d6cbbef079fd0125a7b91c1fe84f225
+  languageName: node
+  linkType: hard
+
+"hermes-parser@npm:^0.25.1":
+  version: 0.25.1
+  resolution: "hermes-parser@npm:0.25.1"
+  dependencies:
+    hermes-estree: "npm:0.25.1"
+  checksum: 10c0/3abaa4c6f1bcc25273f267297a89a4904963ea29af19b8e4f6eabe04f1c2c7e9abd7bfc4730ddb1d58f2ea04b6fee74053d8bddb5656ec6ebf6c79cc8d14202c
   languageName: node
   linkType: hard
 
@@ -23048,17 +18883,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hmac-drbg@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "hmac-drbg@npm:1.0.1"
-  dependencies:
-    hash.js: "npm:^1.0.3"
-    minimalistic-assert: "npm:^1.0.0"
-    minimalistic-crypto-utils: "npm:^1.0.1"
-  checksum: 10c0/f3d9ba31b40257a573f162176ac5930109816036c59a09f901eb2ffd7e5e705c6832bedfff507957125f2086a0ab8f853c0df225642a88bf1fcaea945f20600d
-  languageName: node
-  linkType: hard
-
 "hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
@@ -23084,15 +18908,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hosted-git-info@npm:^3.0.2":
-  version: 3.0.8
-  resolution: "hosted-git-info@npm:3.0.8"
-  dependencies:
-    lru-cache: "npm:^6.0.0"
-  checksum: 10c0/af1392086ab3ab5576aa81af07be2f93ee1588407af18fd9752eb67502558e6ea0ffdd4be35ac6c8bef12fb9017f6e7705757e21b10b5ce7798da9106c9c0d9d
-  languageName: node
-  linkType: hard
-
 "hosted-git-info@npm:^4.0.1":
   version: 4.1.0
   resolution: "hosted-git-info@npm:4.1.0"
@@ -23141,7 +18956,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-entities@npm:^2.1.0, html-entities@npm:^2.3.2":
+"html-entities@npm:^2.3.2":
   version: 2.5.2
   resolution: "html-entities@npm:2.5.2"
   checksum: 10c0/f20ffb4326606245c439c231de40a7c560607f639bf40ffbfb36b4c70729fd95d7964209045f1a4e62fe17f2364cef3d6e49b02ea09016f207fde51c2211e481
@@ -23155,23 +18970,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-minifier-terser@npm:^5.0.1":
-  version: 5.1.1
-  resolution: "html-minifier-terser@npm:5.1.1"
-  dependencies:
-    camel-case: "npm:^4.1.1"
-    clean-css: "npm:^4.2.3"
-    commander: "npm:^4.1.1"
-    he: "npm:^1.2.0"
-    param-case: "npm:^3.0.3"
-    relateurl: "npm:^0.2.7"
-    terser: "npm:^4.6.3"
-  bin:
-    html-minifier-terser: ./cli.js
-  checksum: 10c0/b38e678aa8065358c31ab58ada6efa1563e6e8d74c198ed1a1240b9d4ffcec077e2c5ce42b87f4fdefd7dd9041f82beb5cbd804c4f4179afc6f0f6e89b63f5f6
-  languageName: node
-  linkType: hard
-
 "html-minifier-terser@npm:^6.0.2":
   version: 6.1.0
   resolution: "html-minifier-terser@npm:6.1.0"
@@ -23206,20 +19004,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-tags@npm:^3.1.0, html-tags@npm:^3.2.0, html-tags@npm:^3.3.1":
+"html-tags@npm:^3.2.0, html-tags@npm:^3.3.1":
   version: 3.3.1
   resolution: "html-tags@npm:3.3.1"
   checksum: 10c0/680165e12baa51bad7397452d247dbcc5a5c29dac0e6754b1187eee3bf26f514bc1907a431dd2f7eb56207611ae595ee76a0acc8eaa0d931e72c791dd6463d79
   languageName: node
   linkType: hard
 
-"html-void-elements@npm:^1.0.0":
-  version: 1.0.5
-  resolution: "html-void-elements@npm:1.0.5"
-  checksum: 10c0/97b6c108d7d6b31a45deddf95a65eb074bd0f358b55a61f3a031e055812eec368076ca23f0181674c5212166168988f35312756a3b376490e31e73d9a51f5549
-  languageName: node
-  linkType: hard
-
 "html-void-elements@npm:^3.0.0":
   version: 3.0.0
   resolution: "html-void-elements@npm:3.0.0"
@@ -23227,25 +19018,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-webpack-plugin@npm:^4.0.0":
-  version: 4.5.2
-  resolution: "html-webpack-plugin@npm:4.5.2"
-  dependencies:
-    "@types/html-minifier-terser": "npm:^5.0.0"
-    "@types/tapable": "npm:^1.0.5"
-    "@types/webpack": "npm:^4.41.8"
-    html-minifier-terser: "npm:^5.0.1"
-    loader-utils: "npm:^1.2.3"
-    lodash: "npm:^4.17.20"
-    pretty-error: "npm:^2.1.1"
-    tapable: "npm:^1.1.3"
-    util.promisify: "npm:1.0.0"
-  peerDependencies:
-    webpack: ^4.0.0 || ^5.0.0
-  checksum: 10c0/405f01eb8d5554bd0330c462003e215a793518809e29df0121d20ba2a9717078df33089fda0464c62453ce3af12b6a1fee51dd24761a56f610f509e1e5d503e9
-  languageName: node
-  linkType: hard
-
 "html-webpack-plugin@npm:^5.6.0, html-webpack-plugin@npm:^5.6.3":
   version: 5.6.3
   resolution: "html-webpack-plugin@npm:5.6.3"
@@ -23353,7 +19125,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-errors@npm:^2.0.0":
+"http-errors@npm:^2.0.0, http-errors@npm:~2.0.1":
   version: 2.0.1
   resolution: "http-errors@npm:2.0.1"
   dependencies:
@@ -23456,13 +19228,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"https-browserify@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "https-browserify@npm:1.0.0"
-  checksum: 10c0/e17b6943bc24ea9b9a7da5714645d808670af75a425f29baffc3284962626efdc1eb3aa9bbffaa6e64028a6ad98af5b09fabcb454a8f918fb686abfdc9e9b8ae
-  languageName: node
-  linkType: hard
-
 "https-proxy-agent@npm:5.0.1, https-proxy-agent@npm:^5.0.0, https-proxy-agent@npm:^5.0.1":
   version: 5.0.1
   resolution: "https-proxy-agent@npm:5.0.1"
@@ -23526,54 +19291,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hygen@npm:^6.2.0":
-  version: 6.2.0
-  resolution: "hygen@npm:6.2.0"
-  dependencies:
-    "@types/node": "npm:^17.0.19"
-    chalk: "npm:^4.1.2"
-    change-case: "npm:^3.1.0"
-    debug: "npm:^4.3.3"
-    degit: "npm:^2.8.4"
-    ejs: "npm:^3.1.6"
-    enquirer: "npm:^2.3.6"
-    eslint-plugin-prettier: "npm:^4.0.0"
-    execa: "npm:^5.0.0"
-    front-matter: "npm:^4.0.2"
-    fs-extra: "npm:^10.0.0"
-    ignore-walk: "npm:^4.0.1"
-    inflection: "npm:^1.12.0"
-    yargs-parser: "npm:^21.0.0"
-  bin:
-    hygen: dist/bin.js
-  checksum: 10c0/713f5a3d6eb929a71dfb8e93281b1b10f638e5dd9126b61588d189da67a5779fb579b67d930d55ed4727c19379878848f1d78425a443290f9017574f43cb7601
-  languageName: node
-  linkType: hard
-
-"hygen@patch:hygen@^6.2.0#./patches/hygen.patch::locator=%40cds%2Fcodegen%40workspace%3Alibs%2Fcodegen":
-  version: 6.2.0
-  resolution: "hygen@patch:hygen@npm%3A6.2.0#./patches/hygen.patch::version=6.2.0&hash=5e0b34&locator=%40cds%2Fcodegen%40workspace%3Alibs%2Fcodegen"
-  dependencies:
-    "@types/node": "npm:^17.0.19"
-    chalk: "npm:^4.1.2"
-    change-case: "npm:^3.1.0"
-    debug: "npm:^4.3.3"
-    degit: "npm:^2.8.4"
-    ejs: "npm:^3.1.6"
-    enquirer: "npm:^2.3.6"
-    eslint-plugin-prettier: "npm:^4.0.0"
-    execa: "npm:^5.0.0"
-    front-matter: "npm:^4.0.2"
-    fs-extra: "npm:^10.0.0"
-    ignore-walk: "npm:^4.0.1"
-    inflection: "npm:^1.12.0"
-    yargs-parser: "npm:^21.0.0"
-  bin:
-    hygen: dist/bin.js
-  checksum: 10c0/26811dc87e66b3c52d9437ccb3ea472c24ccf74ccd74bbe1ba04a2022bc2f9085cc98961c11d9aa61fd3151cf23f8409268267a0259fc1f2b46eec7803ad5d66
-  languageName: node
-  linkType: hard
-
 "hyperdyperid@npm:^1.2.0":
   version: 1.2.0
   resolution: "hyperdyperid@npm:1.2.0"
@@ -23599,12 +19316,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"icss-utils@npm:^4.0.0, icss-utils@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "icss-utils@npm:4.1.1"
+"iconv-lite@npm:^0.7.0":
+  version: 0.7.2
+  resolution: "iconv-lite@npm:0.7.2"
   dependencies:
-    postcss: "npm:^7.0.14"
-  checksum: 10c0/22803c243bb097c2290b4e7c20ed14746f3e00e04856f953b751c7e6bb8c81620764bcf98d200a92d167af0884d19143c089d02e2bc609abcdeb86f465328797
+    safer-buffer: "npm:>= 2.1.2 < 3.0.0"
+  checksum: 10c0/3c228920f3bd307f56bf8363706a776f4a060eb042f131cd23855ceca962951b264d0997ab38a1ad340e1c5df8499ed26e1f4f0db6b2a2ad9befaff22f14b722
   languageName: node
   linkType: hard
 
@@ -23626,36 +19343,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ieee754@npm:^1.1.13, ieee754@npm:^1.1.4, ieee754@npm:^1.2.1":
+"ieee754@npm:^1.1.13, ieee754@npm:^1.2.1":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"
   checksum: 10c0/b0782ef5e0935b9f12883a2e2aa37baa75da6e66ce6515c168697b42160807d9330de9a32ec1ed73149aea02e0d822e572bca6f1e22bdcbd2149e13b050b17bb
   languageName: node
   linkType: hard
 
-"iferr@npm:^0.1.5":
-  version: 0.1.5
-  resolution: "iferr@npm:0.1.5"
-  checksum: 10c0/e0669b1757d0501b43a158321945d1cc1fe56f28a972df2f88a5818f05c8853c7669ba5d6cfbbf9a1a312850699de6e528626df108d559005df7e15d16ee334c
-  languageName: node
-  linkType: hard
-
-"ignore-walk@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "ignore-walk@npm:4.0.1"
-  dependencies:
-    minimatch: "npm:^3.0.4"
-  checksum: 10c0/bda7e6a8fd6eeab83e41bff9e9582f30225bff64e1a58063888f24c8e788d599d937be688afa0190665b9ffb33c071163d622fe4a2798d82dcb388e1de59889c
-  languageName: node
-  linkType: hard
-
-"ignore@npm:^4.0.3":
-  version: 4.0.6
-  resolution: "ignore@npm:4.0.6"
-  checksum: 10c0/836ee7dc7fd9436096e2dba429359dbb9fa0e33d309e2b2d81692f375f6ca82024fc00567f798613d50c6b989e9cd2ad2b065acf116325cde177f02c86b7d4e0
-  languageName: node
-  linkType: hard
-
 "ignore@npm:^5.0.4, ignore@npm:^5.1.9, ignore@npm:^5.2.0, ignore@npm:^5.2.1, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
   version: 5.3.2
   resolution: "ignore@npm:5.3.2"
@@ -23734,15 +19428,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"indent-string@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "indent-string@npm:2.1.0"
-  dependencies:
-    repeating: "npm:^2.0.0"
-  checksum: 10c0/d38e04bbd9b0e1843164d06e9ac1e106ead5a6f7b5714c94ecebc2555b2d3af075b3ddc4d6f92ac87d5319c0935df60d571d3f45f17a6f0ec707be65f26ae924
-  languageName: node
-  linkType: hard
-
 "indent-string@npm:^4.0.0":
   version: 4.0.0
   resolution: "indent-string@npm:4.0.0"
@@ -23757,7 +19442,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"infer-owner@npm:^1.0.3, infer-owner@npm:^1.0.4":
+"infer-owner@npm:^1.0.4":
   version: 1.0.4
   resolution: "infer-owner@npm:1.0.4"
   checksum: 10c0/a7b241e3149c26e37474e3435779487f42f36883711f198c45794703c7556bc38af224088bd4d1a221a45b8208ae2c2bcf86200383621434d0c099304481c5b9
@@ -23771,13 +19456,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inflection@npm:^1.12.0":
-  version: 1.13.2
-  resolution: "inflection@npm:1.13.2"
-  checksum: 10c0/7b03a002c38f3c3cf4525fe011b339211206fd78c8e79c01a22bfb06808b401f201701da89df61105e9be1d73bf8fd09a6b26e6c7276a95606897aac1b94fc12
-  languageName: node
-  linkType: hard
-
 "inflight@npm:^1.0.4":
   version: 1.0.6
   resolution: "inflight@npm:1.0.6"
@@ -23788,20 +19466,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2, inherits@npm:2.0.4, inherits@npm:^2.0.0, inherits@npm:^2.0.1, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.1, inherits@npm:~2.0.3, inherits@npm:~2.0.4":
+"inherits@npm:2, inherits@npm:2.0.4, inherits@npm:^2.0.1, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.1, inherits@npm:~2.0.3, inherits@npm:~2.0.4":
   version: 2.0.4
   resolution: "inherits@npm:2.0.4"
   checksum: 10c0/4e531f648b29039fb7426fb94075e6545faa1eb9fe83c29f0b6d9e7263aceb4289d2d4557db0d428188eeb449cc7c5e77b0a0b2c4e248ff2a65933a0dee49ef2
   languageName: node
   linkType: hard
 
-"inherits@npm:2.0.1":
-  version: 2.0.1
-  resolution: "inherits@npm:2.0.1"
-  checksum: 10c0/bfc7b37c21a2cddb272adc65b053b1716612d408bb2c9a4e5c32679dc2b08032aadd67880c405be3dff060a62e45b353fc3d9fa79a3067ad7a3deb6a283cc5c6
-  languageName: node
-  linkType: hard
-
 "inherits@npm:2.0.3":
   version: 2.0.3
   resolution: "inherits@npm:2.0.3"
@@ -23857,16 +19528,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-ip@npm:4.3.0":
-  version: 4.3.0
-  resolution: "internal-ip@npm:4.3.0"
-  dependencies:
-    default-gateway: "npm:^4.2.0"
-    ipaddr.js: "npm:^1.9.0"
-  checksum: 10c0/c0ad0b95981c8f21a2d4f115212af38c894a6a6d0a2a3cac4d73d1b5beb214fdfce7b5e66f087e8d575977d4df630886914412d1bc9c2678e5870210154ad65b
-  languageName: node
-  linkType: hard
-
 "internal-slot@npm:^1.1.0":
   version: 1.1.0
   resolution: "internal-slot@npm:1.1.0"
@@ -23892,13 +19553,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"interpret@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "interpret@npm:2.2.0"
-  checksum: 10c0/c0ef90daec6c4120bb7a226fa09a9511f6b5618aa9c94cf4641472f486948e643bb3b36efbd0136bbffdee876435af9fdf7bbb4622f5a16778eed5397f8a1946
-  languageName: node
-  linkType: hard
-
 "interpret@npm:^3.1.1":
   version: 3.1.1
   resolution: "interpret@npm:3.1.1"
@@ -23948,21 +19602,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ip-regex@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "ip-regex@npm:2.1.0"
-  checksum: 10c0/3ce2d8307fa0373ca357eba7504e66e73b8121805fd9eba6a343aeb077c64c30659fa876b11ac7a75635b7529d2ce87723f208a5b9d51571513b5c68c0cc1541
-  languageName: node
-  linkType: hard
-
-"ip@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "ip@npm:2.0.1"
-  checksum: 10c0/cab8eb3e88d0abe23e4724829621ec4c4c5cb41a7f936a2e626c947128c1be16ed543448d42af7cca95379f9892bfcacc1ccd8d09bc7e8bea0e86d492ce33616
-  languageName: node
-  linkType: hard
-
-"ipaddr.js@npm:1.9.1, ipaddr.js@npm:^1.9.0":
+"ipaddr.js@npm:1.9.1":
   version: 1.9.1
   resolution: "ipaddr.js@npm:1.9.1"
   checksum: 10c0/0486e775047971d3fdb5fb4f063829bac45af299ae0b82dcf3afa2145338e08290563a2a70f34b732d795ecc8311902e541a8530eeb30d75860a78ff4e94ce2a
@@ -23976,25 +19616,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-accessor-descriptor@npm:^0.1.6":
-  version: 0.1.6
-  resolution: "is-accessor-descriptor@npm:0.1.6"
-  dependencies:
-    kind-of: "npm:^3.0.2"
-  checksum: 10c0/f2c314b314ec6e8a6e559351bff3c7ee9aed7a5e9c6f61dd8cb9e1382c8bfe33dca3f0e0af13daf9ded9e6e66390ff23b4acfb615d7a249009a51506a7b0f151
-  languageName: node
-  linkType: hard
-
-"is-accessor-descriptor@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "is-accessor-descriptor@npm:1.0.0"
-  dependencies:
-    kind-of: "npm:^6.0.0"
-  checksum: 10c0/d68edafd8ef133e9003837f3c80f4e5b82b12ab5456c772d1796857671ae83e3a426ed225a28a7e35bceabbce68c1f1ffdabf47e6d53f5a4d6c4558776ad3c20
-  languageName: node
-  linkType: hard
-
-"is-alphabetical@npm:1.0.4, is-alphabetical@npm:^1.0.0":
+"is-alphabetical@npm:^1.0.0":
   version: 1.0.4
   resolution: "is-alphabetical@npm:1.0.4"
   checksum: 10c0/1505b1de5a1fd74022c05fb21b0e683a8f5229366bac8dc4d34cf6935bcfd104d1125a5e6b083fb778847629f76e5bdac538de5367bdf2b927a1356164e23985
@@ -24056,13 +19678,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-arrayish@npm:^0.3.1":
-  version: 0.3.2
-  resolution: "is-arrayish@npm:0.3.2"
-  checksum: 10c0/f59b43dc1d129edb6f0e282595e56477f98c40278a2acdc8b0a5c57097c9eff8fe55470493df5775478cf32a4dc8eaf6d3a749f07ceee5bc263a78b2434f6a54
-  languageName: node
-  linkType: hard
-
 "is-async-function@npm:^2.0.0":
   version: 2.0.0
   resolution: "is-async-function@npm:2.0.0"
@@ -24081,15 +19696,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-binary-path@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "is-binary-path@npm:1.0.1"
-  dependencies:
-    binary-extensions: "npm:^1.0.0"
-  checksum: 10c0/16e456fa3782eaf3d8e28d382b750507e3d54ff6694df8a1b2c6498da321e2ead311de9c42e653d8fb3213de72bac204b5f97e4a110cda8a72f17b1c1b4eb643
-  languageName: node
-  linkType: hard
-
 "is-binary-path@npm:~2.1.0":
   version: 2.1.0
   resolution: "is-binary-path@npm:2.1.0"
@@ -24109,14 +19715,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-buffer@npm:^1.1.5, is-buffer@npm:~1.1.1, is-buffer@npm:~1.1.6":
-  version: 1.1.6
-  resolution: "is-buffer@npm:1.1.6"
-  checksum: 10c0/ae18aa0b6e113d6c490ad1db5e8df9bdb57758382b313f5a22c9c61084875c6396d50bbf49315f5b1926d142d74dfb8d31b40d993a383e0a158b15fea7a82234
-  languageName: node
-  linkType: hard
-
-"is-buffer@npm:^2.0.0, is-buffer@npm:^2.0.2":
+"is-buffer@npm:^2.0.2":
   version: 2.0.5
   resolution: "is-buffer@npm:2.0.5"
   checksum: 10c0/e603f6fced83cf94c53399cff3bda1a9f08e391b872b64a73793b0928be3e5f047f2bcece230edb7632eaea2acdbfcb56c23b33d8a20c820023b230f1485679a
@@ -24161,7 +19760,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.12.0, is-core-module@npm:^2.13.0, is-core-module@npm:^2.15.1, is-core-module@npm:^2.16.1, is-core-module@npm:^2.5.0":
+"is-core-module@npm:^2.12.0, is-core-module@npm:^2.13.0, is-core-module@npm:^2.15.1, is-core-module@npm:^2.16.0, is-core-module@npm:^2.5.0":
   version: 2.16.1
   resolution: "is-core-module@npm:2.16.1"
   dependencies:
@@ -24170,24 +19769,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-data-descriptor@npm:^0.1.4":
-  version: 0.1.4
-  resolution: "is-data-descriptor@npm:0.1.4"
-  dependencies:
-    kind-of: "npm:^3.0.2"
-  checksum: 10c0/32fda7e966b2c1f093230d5ef2aad1bb86e43e7280da50961e38ec31dbd8a50570a2911fd45277d321074a0762adc98e8462bb62820462594128857225e90d21
-  languageName: node
-  linkType: hard
-
-"is-data-descriptor@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "is-data-descriptor@npm:1.0.0"
-  dependencies:
-    kind-of: "npm:^6.0.0"
-  checksum: 10c0/bed31385d7d1a0dbb2ab3077faf2188acf42609192dca4e320ed7b3dc14a9d70c00658956cdaa2c0402be136c6b56e183973ad81b730fd90ab427fb6fd3608be
-  languageName: node
-  linkType: hard
-
 "is-data-view@npm:^1.0.1, is-data-view@npm:^1.0.2":
   version: 1.0.2
   resolution: "is-data-view@npm:1.0.2"
@@ -24223,28 +19804,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-descriptor@npm:^0.1.0":
-  version: 0.1.6
-  resolution: "is-descriptor@npm:0.1.6"
-  dependencies:
-    is-accessor-descriptor: "npm:^0.1.6"
-    is-data-descriptor: "npm:^0.1.4"
-    kind-of: "npm:^5.0.0"
-  checksum: 10c0/6b8f5617b764ef8c6be3d54830184357e6cdedd8e0eddf1b97d0658616ac170bfdbc7c1ad00e0aa9f5b767acdb9d6c63d4df936501784b34936bd0f9acf3b665
-  languageName: node
-  linkType: hard
-
-"is-descriptor@npm:^1.0.0, is-descriptor@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "is-descriptor@npm:1.0.2"
-  dependencies:
-    is-accessor-descriptor: "npm:^1.0.0"
-    is-data-descriptor: "npm:^1.0.0"
-    kind-of: "npm:^6.0.2"
-  checksum: 10c0/a05169c7a87feb88fc155e3ada469090cfabb5a548a3f794358b511cc47a0871b8b95e7345be4925a22ef3df585c3923b31943b3ad6255ce563a9d97f2e221e0
-  languageName: node
-  linkType: hard
-
 "is-directory@npm:^0.3.1":
   version: 0.3.1
   resolution: "is-directory@npm:0.3.1"
@@ -24270,30 +19829,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-extendable@npm:^0.1.0, is-extendable@npm:^0.1.1":
+"is-extendable@npm:^0.1.0":
   version: 0.1.1
   resolution: "is-extendable@npm:0.1.1"
   checksum: 10c0/dd5ca3994a28e1740d1e25192e66eed128e0b2ff161a7ea348e87ae4f616554b486854de423877a2a2c171d5f7cd6e8093b91f54533bc88a59ee1c9838c43879
   languageName: node
   linkType: hard
 
-"is-extendable@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "is-extendable@npm:1.0.1"
-  dependencies:
-    is-plain-object: "npm:^2.0.4"
-  checksum: 10c0/1d6678a5be1563db6ecb121331c819c38059703f0179f52aa80c242c223ee9c6b66470286636c0e63d7163e4d905c0a7d82a096e0b5eaeabb51b9f8d0af0d73f
-  languageName: node
-  linkType: hard
-
-"is-extglob@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "is-extglob@npm:1.0.0"
-  checksum: 10c0/1ce5366d19958f36069a45ca996c1e51ab607f42a01eb0505f0ccffe8f9c91f5bcba6e971605efd8b4d4dfd0111afa3c8df3e1746db5b85b9a8f933f5e7286b7
-  languageName: node
-  linkType: hard
-
-"is-extglob@npm:^2.1.0, is-extglob@npm:^2.1.1":
+"is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
   checksum: 10c0/5487da35691fbc339700bbb2730430b07777a3c21b9ebaecb3072512dfd7b4ba78ac2381a87e8d78d20ea08affb3f1971b4af629173a6bf435ff8a4c47747912
@@ -24309,20 +19852,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-finite@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "is-finite@npm:1.1.0"
-  checksum: 10c0/ca6bc7a0321b339f098e657bd4cbf4bb2410f5a11f1b9adb1a1a9ab72288b64368e8251326cb1f74e985f2779299cec3e1f1e558b68ce7e1e2c9be17b7cfd626
-  languageName: node
-  linkType: hard
-
-"is-fullwidth-code-point@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "is-fullwidth-code-point@npm:2.0.0"
-  checksum: 10c0/e58f3e4a601fc0500d8b2677e26e9fe0cd450980e66adb29d85b6addf7969731e38f8e43ed2ec868a09c101a55ac3d8b78902209269f38c5286bc98f5bc1b4d9
-  languageName: node
-  linkType: hard
-
 "is-fullwidth-code-point@npm:^3.0.0":
   version: 3.0.0
   resolution: "is-fullwidth-code-point@npm:3.0.0"
@@ -24356,24 +19885,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "is-glob@npm:2.0.1"
-  dependencies:
-    is-extglob: "npm:^1.0.0"
-  checksum: 10c0/ef156806af0924983325c9218a8b8a838fa50e1a104ed2a11fe94829a5b27c1b05a4c8cf98d96cb3a7fea539c21f14ae2081e1a248f3d5a9eea62f2d4e9f8b0c
-  languageName: node
-  linkType: hard
-
-"is-glob@npm:^3.0.0, is-glob@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "is-glob@npm:3.1.0"
-  dependencies:
-    is-extglob: "npm:^2.1.0"
-  checksum: 10c0/ba816a35dcf5285de924a8a4654df7b183a86381d73ea3bbf3df3cc61b3ba61fdddf90ee205709a2235b210ee600ee86e5e8600093cf291a662607fd032e2ff4
-  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"
@@ -24425,15 +19936,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-invalid-path@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "is-invalid-path@npm:0.1.0"
-  dependencies:
-    is-glob: "npm:^2.0.0"
-  checksum: 10c0/9f7f74825ddcbd70ceb0aca1155d2961f3767a7a0f1351c255d25047cc7dece161b755d0698aaf8f201693d96ea12e04b4afa00ee9b4f8f47ab5ec2adbe96df8
-  languageName: node
-  linkType: hard
-
 "is-lambda@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-lambda@npm:1.0.1"
@@ -24441,15 +19943,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-lower-case@npm:^1.1.0":
-  version: 1.1.3
-  resolution: "is-lower-case@npm:1.1.3"
-  dependencies:
-    lower-case: "npm:^1.1.0"
-  checksum: 10c0/af174cfdd50e4ab997bd4aeaf96d5b1841490a721c62a9ab07b14dfb63885134065683d5027f53e2f76180ff972a3c9a0155815e715c37815757a6bd67d4459e
-  languageName: node
-  linkType: hard
-
 "is-map@npm:^2.0.2, is-map@npm:^2.0.3":
   version: 2.0.3
   resolution: "is-map@npm:2.0.3"
@@ -24495,15 +19988,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-number@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "is-number@npm:3.0.0"
-  dependencies:
-    kind-of: "npm:^3.0.2"
-  checksum: 10c0/e639c54640b7f029623df24d3d103901e322c0c25ea5bde97cd723c2d0d4c05857a8364ab5c58d963089dbed6bf1d0ffe975cb6aef917e2ad0ccbca653d31b4f
-  languageName: node
-  linkType: hard
-
 "is-number@npm:^7.0.0":
   version: 7.0.0
   resolution: "is-number@npm:7.0.0"
@@ -24546,13 +20030,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-obj@npm:^2.0.0, is-plain-obj@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "is-plain-obj@npm:2.1.0"
-  checksum: 10c0/e5c9814cdaa627a9ad0a0964ded0e0491bfd9ace405c49a5d63c88b30a162f1512c069d5b80997893c4d0181eadc3fed02b4ab4b81059aba5620bfcdfdeb9c53
-  languageName: node
-  linkType: hard
-
 "is-plain-obj@npm:^3.0.0":
   version: 3.0.0
   resolution: "is-plain-obj@npm:3.0.0"
@@ -24567,14 +20044,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-object@npm:5.0.0, is-plain-object@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "is-plain-object@npm:5.0.0"
-  checksum: 10c0/893e42bad832aae3511c71fd61c0bf61aa3a6d853061c62a307261842727d0d25f761ce9379f7ba7226d6179db2a3157efa918e7fe26360f3bf0842d9f28942c
-  languageName: node
-  linkType: hard
-
-"is-plain-object@npm:^2.0.3, is-plain-object@npm:^2.0.4":
+"is-plain-object@npm:^2.0.4":
   version: 2.0.4
   resolution: "is-plain-object@npm:2.0.4"
   dependencies:
@@ -24583,6 +20053,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-plain-object@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "is-plain-object@npm:5.0.0"
+  checksum: 10c0/893e42bad832aae3511c71fd61c0bf61aa3a6d853061c62a307261842727d0d25f761ce9379f7ba7226d6179db2a3157efa918e7fe26360f3bf0842d9f28942c
+  languageName: node
+  linkType: hard
+
 "is-potential-custom-element-name@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-potential-custom-element-name@npm:1.0.1"
@@ -24713,31 +20190,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-upper-case@npm:^1.1.0":
-  version: 1.1.2
-  resolution: "is-upper-case@npm:1.1.2"
-  dependencies:
-    upper-case: "npm:^1.1.0"
-  checksum: 10c0/81b8defdee0e0de7310446ac717422c586c4d013c2a517c5fcf8b119349aa2798be56fa213169b0de3936cb00e796a383683c2504d221596ae09a0eb282a5b25
-  languageName: node
-  linkType: hard
-
-"is-utf8@npm:^0.2.0":
-  version: 0.2.1
-  resolution: "is-utf8@npm:0.2.1"
-  checksum: 10c0/3ed45e5b4ddfa04ed7e32c63d29c61b980ecd6df74698f45978b8c17a54034943bcbffb6ae243202e799682a66f90fef526f465dd39438745e9fe70794c1ef09
-  languageName: node
-  linkType: hard
-
-"is-valid-path@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "is-valid-path@npm:0.1.1"
-  dependencies:
-    is-invalid-path: "npm:^0.1.0"
-  checksum: 10c0/05c3533b8d98ac469bec9849e6ee73a07e1f9857e2043c75a9a45d21bae5e11fafb625808d7bd1aaf5cc63e842876c636f9888388a959ee9c33975c7b603c6ba
-  languageName: node
-  linkType: hard
-
 "is-weakmap@npm:^2.0.2":
   version: 2.0.2
   resolution: "is-weakmap@npm:2.0.2"
@@ -24764,34 +20216,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-whitespace-character@npm:^1.0.0":
-  version: 1.0.4
-  resolution: "is-whitespace-character@npm:1.0.4"
-  checksum: 10c0/20f02cf42eafb44ff1706a04338dc45095cd691ae6984adb9a211b6b6df8d01e91722129ce55555e4c7c7b0b7d48e217553767f22eb7ec019b9f8dd3bc12cdfb
-  languageName: node
-  linkType: hard
-
-"is-windows@npm:^1.0.1, is-windows@npm:^1.0.2":
+"is-windows@npm:^1.0.1":
   version: 1.0.2
   resolution: "is-windows@npm:1.0.2"
   checksum: 10c0/b32f418ab3385604a66f1b7a3ce39d25e8881dee0bd30816dc8344ef6ff9df473a732bcc1ec4e84fe99b2f229ae474f7133e8e93f9241686cfcf7eebe53ba7a5
   languageName: node
   linkType: hard
 
-"is-word-character@npm:^1.0.0":
-  version: 1.0.4
-  resolution: "is-word-character@npm:1.0.4"
-  checksum: 10c0/2247844064532986dc70869d961dccd1366932a147b52d4ec7f567f87edf7f9855a27b75f66b781db3b3175bbe05a76acbc6392a1a5c64c4c99fe3459dae33bd
-  languageName: node
-  linkType: hard
-
-"is-wsl@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "is-wsl@npm:1.1.0"
-  checksum: 10c0/7ad0012f21092d6f586c7faad84755a8ef0da9b9ec295e4dc82313cce4e1a93a3da3c217265016461f9b141503fe55fa6eb1fd5457d3f05e8d1bdbb48e50c13a
-  languageName: node
-  linkType: hard
-
 "is-wsl@npm:^2.1.1, is-wsl@npm:^2.2.0":
   version: 2.2.0
   resolution: "is-wsl@npm:2.2.0"
@@ -24824,13 +20255,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isarray@npm:1.0.0, isarray@npm:^1.0.0, isarray@npm:~1.0.0":
-  version: 1.0.0
-  resolution: "isarray@npm:1.0.0"
-  checksum: 10c0/18b5be6669be53425f0b84098732670ed4e727e3af33bc7f948aac01782110eb9a18b3b329c5323bcdd3acdaae547ee077d3951317e7f133bff7105264b3003d
-  languageName: node
-  linkType: hard
-
 "isarray@npm:^2.0.5":
   version: 2.0.5
   resolution: "isarray@npm:2.0.5"
@@ -24838,10 +20262,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iserror@npm:0.0.2, iserror@npm:^0.0.2":
-  version: 0.0.2
-  resolution: "iserror@npm:0.0.2"
-  checksum: 10c0/f51982cb8ccbd9481b542f101441018d501eb60cd5ee17ee7c4a1d6bef499472db47f4a61d5b2233ac444d99491a67daa261771443244b75a573e2c98ce718d1
+"isarray@npm:~1.0.0":
+  version: 1.0.0
+  resolution: "isarray@npm:1.0.0"
+  checksum: 10c0/18b5be6669be53425f0b84098732670ed4e727e3af33bc7f948aac01782110eb9a18b3b329c5323bcdd3acdaae547ee077d3951317e7f133bff7105264b3003d
   languageName: node
   linkType: hard
 
@@ -24852,16 +20276,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isobject@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "isobject@npm:2.1.0"
-  dependencies:
-    isarray: "npm:1.0.0"
-  checksum: 10c0/c4cafec73b3b2ee11be75dff8dafd283b5728235ac099b07d7873d5182553a707768e208327bbc12931b9422d8822280bf88d894a0024ff5857b3efefb480e7b
-  languageName: node
-  linkType: hard
-
-"isobject@npm:^3.0.0, isobject@npm:^3.0.1":
+"isobject@npm:^3.0.1":
   version: 3.0.1
   resolution: "isobject@npm:3.0.1"
   checksum: 10c0/03344f5064a82f099a0cd1a8a407f4c0d20b7b8485e8e816c39f249e9416b06c322e8dec5b842b6bb8a06de0af9cb48e7bc1b5352f0fadc2f0abac033db3d4db
@@ -24882,17 +20297,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isomorphic-unfetch@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "isomorphic-unfetch@npm:3.1.0"
-  dependencies:
-    node-fetch: "npm:^2.6.1"
-    unfetch: "npm:^4.2.0"
-  checksum: 10c0/d3b61fca06304db692b7f76bdfd3a00f410e42cfa7403c3b250546bf71589d18cf2f355922f57198e4cc4a9872d3647b20397a5c3edf1a347c90d57c83cf2a89
-  languageName: node
-  linkType: hard
-
-"istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.0.1, istanbul-lib-coverage@npm:^3.2.0, istanbul-lib-coverage@npm:^3.2.2":
+"istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.0, istanbul-lib-coverage@npm:^3.2.2":
   version: 3.2.2
   resolution: "istanbul-lib-coverage@npm:3.2.2"
   checksum: 10c0/6c7ff2106769e5f592ded1fb418f9f73b4411fd5a084387a5410538332b6567cd1763ff6b6cadca9b9eb2c443cce2f7ea7d7f1b8d315f9ce58539793b1e0922b
@@ -24947,7 +20352,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"istanbul-reports@npm:^3.0.2, istanbul-reports@npm:^3.1.3, istanbul-reports@npm:^3.2.0":
+"istanbul-reports@npm:^3.1.3, istanbul-reports@npm:^3.2.0":
   version: 3.2.0
   resolution: "istanbul-reports@npm:3.2.0"
   dependencies:
@@ -24957,23 +20362,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iterate-iterator@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "iterate-iterator@npm:1.0.2"
-  checksum: 10c0/74609b01a3ebc025601aa68ef40731b05d5e45c9fd4ecf233a14a34f2b3481e6974e1dcff390e87155a0648f056c186336bb4c70df2fdefeab08a9878b2eb1c2
-  languageName: node
-  linkType: hard
-
-"iterate-value@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "iterate-value@npm:1.0.2"
-  dependencies:
-    es-get-iterator: "npm:^1.0.2"
-    iterate-iterator: "npm:^1.0.1"
-  checksum: 10c0/77d32a5ac84877da2133689ff5e3983aa8214bace7faee3c746bf79d4524cc3fb8c0344a20d3699be20a15f0959ecd582d53a05b97f5d04c306bcd426800a650
-  languageName: node
-  linkType: hard
-
 "iterator.prototype@npm:^1.1.4":
   version: 1.1.5
   resolution: "iterator.prototype@npm:1.1.5"
@@ -25174,6 +20562,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-diff@npm:30.2.0":
+  version: 30.2.0
+  resolution: "jest-diff@npm:30.2.0"
+  dependencies:
+    "@jest/diff-sequences": "npm:30.0.1"
+    "@jest/get-type": "npm:30.1.0"
+    chalk: "npm:^4.1.2"
+    pretty-format: "npm:30.2.0"
+  checksum: 10c0/5fac2cd89a10b282c5a68fc6206a95dfff9955ed0b758d24ffb0edcb20fb2f98e1fa5045c5c4205d952712ea864c6a086654f80cdd500cce054a2f5daf5b4419
+  languageName: node
+  linkType: hard
+
 "jest-diff@npm:^28.1.3":
   version: 28.1.3
   resolution: "jest-diff@npm:28.1.3"
@@ -25186,7 +20586,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-diff@npm:^29.0.0, jest-diff@npm:^29.0.1, jest-diff@npm:^29.2.1, jest-diff@npm:^29.4.1, jest-diff@npm:^29.7.0":
+"jest-diff@npm:^29.0.0, jest-diff@npm:^29.2.1, jest-diff@npm:^29.4.1, jest-diff@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-diff@npm:29.7.0"
   dependencies:
@@ -25220,39 +20620,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-environment-emit@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "jest-environment-emit@npm:1.0.5"
-  dependencies:
-    bunyamin: "npm:^1.5.0"
-    bunyan: "npm:^2.0.5"
-    bunyan-debug-stream: "npm:^3.1.0"
-    funpermaproxy: "npm:^1.1.0"
-    lodash.merge: "npm:^4.6.2"
-    node-ipc: "npm:9.2.1"
-    strip-ansi: "npm:^6.0.0"
-    tslib: "npm:^2.5.3"
-  peerDependencies:
-    "@jest/environment": ">=27.2.5"
-    "@jest/types": ">=27.2.5"
-    jest: ">=27.2.5"
-    jest-environment-jsdom: ">=27.2.5"
-    jest-environment-node: ">=27.2.5"
-  peerDependenciesMeta:
-    "@jest/environment":
-      optional: true
-    "@jest/types":
-      optional: true
-    jest:
-      optional: true
-    jest-environment-jsdom:
-      optional: true
-    jest-environment-node:
-      optional: true
-  checksum: 10c0/27732907806a788235c005d7a48b1054c3dec64cc2489422b37428dc789fb83fa6bee3fb8ddf65890e3d084f85be5a39deb02071baff2d86586455f96f7a9bd9
-  languageName: node
-  linkType: hard
-
 "jest-environment-jsdom@npm:^29.5.0":
   version: 29.5.0
   resolution: "jest-environment-jsdom@npm:29.5.0"
@@ -25274,7 +20641,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-environment-node@npm:^29.6.3, jest-environment-node@npm:^29.7.0":
+"jest-environment-node@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-environment-node@npm:29.7.0"
   dependencies:
@@ -25374,7 +20741,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-matcher-utils@npm:^29.0.1, jest-matcher-utils@npm:^29.7.0":
+"jest-matcher-utils@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-matcher-utils@npm:29.7.0"
   dependencies:
@@ -25386,6 +20753,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-matcher-utils@npm:^30.0.5":
+  version: 30.2.0
+  resolution: "jest-matcher-utils@npm:30.2.0"
+  dependencies:
+    "@jest/get-type": "npm:30.1.0"
+    chalk: "npm:^4.1.2"
+    jest-diff: "npm:30.2.0"
+    pretty-format: "npm:30.2.0"
+  checksum: 10c0/f221c8afa04cee693a2be735482c5db4ec6f845f8ca3a04cb419be34c6257f4531dab89c836251f31d1859318c38997e8e9f34bf7b4cdcc8c7be8ae6e2ecb9f2
+  languageName: node
+  linkType: hard
+
 "jest-message-util@npm:^28.1.3":
   version: 28.1.3
   resolution: "jest-message-util@npm:28.1.3"
@@ -25453,13 +20832,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-regex-util@npm:^27.0.6":
-  version: 27.5.1
-  resolution: "jest-regex-util@npm:27.5.1"
-  checksum: 10c0/f9790d417b667b38155c4bbd58f2afc0ad9f774381e5358776df02df3f29564069d4773c7ba050db6826bad8a4cc7ef82c3b4c65bfa508e419fdd063a9682c42
-  languageName: node
-  linkType: hard
-
 "jest-regex-util@npm:^29.6.3":
   version: 29.6.3
   resolution: "jest-regex-util@npm:29.6.3"
@@ -25581,20 +20953,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-util@npm:^27.2.0":
-  version: 27.5.1
-  resolution: "jest-util@npm:27.5.1"
-  dependencies:
-    "@jest/types": "npm:^27.5.1"
-    "@types/node": "npm:*"
-    chalk: "npm:^4.0.0"
-    ci-info: "npm:^3.2.0"
-    graceful-fs: "npm:^4.2.9"
-    picomatch: "npm:^2.2.3"
-  checksum: 10c0/0f60cd2a2e09a6646ccd4ff489f1970282c0694724104979e897bd5164f91204726f5408572bf5e759d09e59d5c4e4dc65a643d2b630e06a10402bba07bf2a2e
-  languageName: node
-  linkType: hard
-
 "jest-util@npm:^28.1.3":
   version: 28.1.3
   resolution: "jest-util@npm:28.1.3"
@@ -25623,7 +20981,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-validate@npm:^29.2.1, jest-validate@npm:^29.6.3, jest-validate@npm:^29.7.0":
+"jest-validate@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-validate@npm:29.7.0"
   dependencies:
@@ -25653,18 +21011,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^26.5.0":
-  version: 26.6.2
-  resolution: "jest-worker@npm:26.6.2"
-  dependencies:
-    "@types/node": "npm:*"
-    merge-stream: "npm:^2.0.0"
-    supports-color: "npm:^7.0.0"
-  checksum: 10c0/07e4dba650381604cda253ab6d5837fe0279c8d68c25884995b45bfe149a7a1e1b5a97f304b4518f257dac2a9ddc1808d57d650649c3ab855e9e60cf824d2970
-  languageName: node
-  linkType: hard
-
-"jest-worker@npm:^27.2.0, jest-worker@npm:^27.4.5":
+"jest-worker@npm:^27.4.5":
   version: 27.5.1
   resolution: "jest-worker@npm:27.5.1"
   dependencies:
@@ -25675,7 +21022,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^29.4.3, jest-worker@npm:^29.6.3, jest-worker@npm:^29.7.0":
+"jest-worker@npm:^29.4.3, jest-worker@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-worker@npm:29.7.0"
   dependencies:
@@ -25722,7 +21069,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"joi@npm:^17.2.1, joi@npm:^17.9.2":
+"joi@npm:^17.9.2":
   version: 17.13.3
   resolution: "joi@npm:17.13.3"
   dependencies:
@@ -25735,13 +21082,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"join-component@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "join-component@npm:1.1.0"
-  checksum: 10c0/7319cb1ca6ffc514d82ac1b965c4e6cd6bf852adec1e7833bd8613e17f4965e78e2653c8de75a1fe51d9a2cae36af3298008df4079cfd903ef3ecbd231fe11c1
-  languageName: node
-  linkType: hard
-
 "js-base64@npm:^3.6.0":
   version: 3.7.7
   resolution: "js-base64@npm:3.7.7"
@@ -25749,29 +21089,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-message@npm:1.0.7":
-  version: 1.0.7
-  resolution: "js-message@npm:1.0.7"
-  checksum: 10c0/2dc2ff5a594613a9690c157a921999237164a3c213523f406dee23985ed81c92be9afdc7b34e67a2838d447d7d79cbf1662048effe8367bedcd71a950e4e292e
-  languageName: node
-  linkType: hard
-
-"js-queue@npm:2.0.2":
-  version: 2.0.2
-  resolution: "js-queue@npm:2.0.2"
-  dependencies:
-    easy-stack: "npm:^1.0.1"
-  checksum: 10c0/cdadc65576c6d46817f47c27d7a57a1f3acbe3a4da2a4bc7303218f06d6ee7971358db28ec0d6b6835b4cd93332c52792b535064fee706453ef9d2bfe03b4a1a
-  languageName: node
-  linkType: hard
-
-"js-string-escape@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "js-string-escape@npm:1.0.1"
-  checksum: 10c0/2c33b9ff1ba6b84681c51ca0997e7d5a1639813c95d5b61cb7ad47e55cc28fa4a0b1935c3d218710d8e6bcee5d0cd8c44755231e3a4e45fc604534d9595a3628
-  languageName: node
-  linkType: hard
-
 "js-tokens@npm:^10.0.0":
   version: 10.0.0
   resolution: "js-tokens@npm:10.0.0"
@@ -25787,14 +21104,14 @@ __metadata:
   linkType: hard
 
 "js-yaml@npm:^3.10.0, js-yaml@npm:^3.13.1, js-yaml@npm:^3.14.0, js-yaml@npm:^3.14.1":
-  version: 3.14.2
-  resolution: "js-yaml@npm:3.14.2"
+  version: 3.14.1
+  resolution: "js-yaml@npm:3.14.1"
   dependencies:
     argparse: "npm:^1.0.7"
     esprima: "npm:^4.0.0"
   bin:
     js-yaml: bin/js-yaml.js
-  checksum: 10c0/3261f25912f5dd76605e5993d0a126c2b6c346311885d3c483706cd722efe34f697ea0331f654ce27c00a42b426e524518ec89d65ed02ea47df8ad26dcc8ce69
+  checksum: 10c0/6746baaaeac312c4db8e75fa22331d9a04cccb7792d126ed8ce6a0bbcfef0cedaddd0c5098fade53db067c09fe00aa1c957674b4765610a8b06a5a189e46433b
   languageName: node
   linkType: hard
 
@@ -25809,13 +21126,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsc-android@npm:^250231.0.0":
-  version: 250231.0.0
-  resolution: "jsc-android@npm:250231.0.0"
-  checksum: 10c0/518ddbc9d41eb5f4f8a30244382044c87ce02756416866c4e129ae6655feb0bab744cf9d590d240916b005c3632554c7c33d388a84dc6d3e83733d0e8cee5c2f
-  languageName: node
-  linkType: hard
-
 "jsc-safe-url@npm:^0.2.2, jsc-safe-url@npm:^0.2.4":
   version: 0.2.4
   resolution: "jsc-safe-url@npm:0.2.4"
@@ -25823,19 +21133,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jscodeshift@npm:^0.14.0":
-  version: 0.14.0
-  resolution: "jscodeshift@npm:0.14.0"
+"jscodeshift@npm:^0.15.1":
+  version: 0.15.2
+  resolution: "jscodeshift@npm:0.15.2"
   dependencies:
-    "@babel/core": "npm:^7.13.16"
-    "@babel/parser": "npm:^7.13.16"
-    "@babel/plugin-proposal-class-properties": "npm:^7.13.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator": "npm:^7.13.8"
-    "@babel/plugin-proposal-optional-chaining": "npm:^7.13.12"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.13.8"
-    "@babel/preset-flow": "npm:^7.13.13"
-    "@babel/preset-typescript": "npm:^7.13.0"
-    "@babel/register": "npm:^7.13.16"
+    "@babel/core": "npm:^7.23.0"
+    "@babel/parser": "npm:^7.23.0"
+    "@babel/plugin-transform-class-properties": "npm:^7.22.5"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.23.0"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.22.11"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.23.0"
+    "@babel/plugin-transform-private-methods": "npm:^7.22.5"
+    "@babel/preset-flow": "npm:^7.22.15"
+    "@babel/preset-typescript": "npm:^7.23.0"
+    "@babel/register": "npm:^7.22.15"
     babel-core: "npm:^7.0.0-bridge.0"
     chalk: "npm:^4.1.2"
     flow-parser: "npm:0.*"
@@ -25843,14 +21154,17 @@ __metadata:
     micromatch: "npm:^4.0.4"
     neo-async: "npm:^2.5.0"
     node-dir: "npm:^0.1.17"
-    recast: "npm:^0.21.0"
+    recast: "npm:^0.23.3"
     temp: "npm:^0.8.4"
     write-file-atomic: "npm:^2.3.0"
   peerDependencies:
     "@babel/preset-env": ^7.1.6
+  peerDependenciesMeta:
+    "@babel/preset-env":
+      optional: true
   bin:
-    jscodeshift: ./bin/jscodeshift.js
-  checksum: 10c0/dab63bdb4b7e67d79634fcd3f5dc8b227146e9f68aa88700bc49c5a45b6339d05bd934a98aa53d29abd04f81237d010e7e037799471b2aab66ec7b9a7d752786
+    jscodeshift: bin/jscodeshift.js
+  checksum: 10c0/79afb059b9ca92712af02bdc8d6ff144de7aaf5e2cdcc6f6534e7a86a7347b0a278d9f4884f2c78dac424162a353aafff183a60e868f71132be2c5b5304aeeb8
   languageName: node
   linkType: hard
 
@@ -25962,14 +21276,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-cycle@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "json-cycle@npm:1.3.0"
-  checksum: 10c0/c9ccd1d22d33b11b7e2cccdb8a6c6910a4ad728157c4f919150b07b091545194273f8702f82e9500d2b5c6197f6da21a723200f2664487c0ac80d93be9abaa48
-  languageName: node
-  linkType: hard
-
-"json-parse-better-errors@npm:^1.0.1, json-parse-better-errors@npm:^1.0.2":
+"json-parse-better-errors@npm:^1.0.1":
   version: 1.0.2
   resolution: "json-parse-better-errors@npm:1.0.2"
   checksum: 10c0/2f1287a7c833e397c9ddd361a78638e828fc523038bb3441fd4fc144cfd2c6cd4963ffb9e207e648cf7b692600f1e1e524e965c32df5152120910e4903a47dcb
@@ -25983,22 +21290,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-schema-deref-sync@npm:^0.13.0":
-  version: 0.13.0
-  resolution: "json-schema-deref-sync@npm:0.13.0"
-  dependencies:
-    clone: "npm:^2.1.2"
-    dag-map: "npm:~1.0.0"
-    is-valid-path: "npm:^0.1.1"
-    lodash: "npm:^4.17.13"
-    md5: "npm:~2.2.0"
-    memory-cache: "npm:~0.2.0"
-    traverse: "npm:~0.6.6"
-    valid-url: "npm:~1.0.9"
-  checksum: 10c0/07cc73d85c9ee6f8236444290cfd22ee4199cd6ddc049e329e7ec22103770b34653f95ae87c367aa49ba6551f09e58b649cd588732b67e7a17b3bb9860ecd061
-  languageName: node
-  linkType: hard
-
 "json-schema-traverse@npm:^0.4.1":
   version: 0.4.1
   resolution: "json-schema-traverse@npm:0.4.1"
@@ -26056,30 +21347,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonfile@npm:^2.1.0":
-  version: 2.4.0
-  resolution: "jsonfile@npm:2.4.0"
-  dependencies:
-    graceful-fs: "npm:^4.1.6"
-  dependenciesMeta:
-    graceful-fs:
-      optional: true
-  checksum: 10c0/02ad746d9490686519b3369bc9572694076eb982e1b4982c5ad9b91bc3c0ad30d10c866bb26b7a87f0c4025a80222cd2962cb57083b5a6a475a9031eab8c8962
-  languageName: node
-  linkType: hard
-
-"jsonfile@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "jsonfile@npm:4.0.0"
-  dependencies:
-    graceful-fs: "npm:^4.1.6"
-  dependenciesMeta:
-    graceful-fs:
-      optional: true
-  checksum: 10c0/7dc94b628d57a66b71fb1b79510d460d662eb975b5f876d723f81549c2e9cd316d58a2ddf742b2b93a4fa6b17b2accaf1a738a0e2ea114bdfb13a32e5377e480
-  languageName: node
-  linkType: hard
-
 "jsonfile@npm:^6.0.1":
   version: 6.1.0
   resolution: "jsonfile@npm:6.1.0"
@@ -26105,13 +21372,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"junk@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "junk@npm:3.1.0"
-  checksum: 10c0/820174b9fa9a3af09aeeeeb1022df2481a2b10752ce5f65ac63924a79cb9bba83ea7c288e8d5b448951109742da5ea69a230846f4bf3c17c5c6a1d0603b63db4
-  languageName: node
-  linkType: hard
-
 "kbar@npm:^0.1.0-beta.45":
   version: 0.1.0-beta.46
   resolution: "kbar@npm:0.1.0-beta.46"
@@ -26146,31 +21406,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kind-of@npm:^3.0.2, kind-of@npm:^3.0.3, kind-of@npm:^3.2.0":
-  version: 3.2.2
-  resolution: "kind-of@npm:3.2.2"
-  dependencies:
-    is-buffer: "npm:^1.1.5"
-  checksum: 10c0/7e34bc29d4b02c997f92f080de34ebb92033a96736bbb0bb2410e033a7e5ae6571f1fa37b2d7710018f95361473b816c604234197f4f203f9cf149d8ef1574d9
-  languageName: node
-  linkType: hard
-
-"kind-of@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "kind-of@npm:4.0.0"
-  dependencies:
-    is-buffer: "npm:^1.1.5"
-  checksum: 10c0/d6c44c75ee36898142dfc7106afbd50593216c37f96acb81a7ab33ca1a6938ce97d5692b8fc8fccd035f83811a9d97749d68771116441a48eedd0b68e2973165
-  languageName: node
-  linkType: hard
-
-"kind-of@npm:^5.0.0":
-  version: 5.1.0
-  resolution: "kind-of@npm:5.1.0"
-  checksum: 10c0/fe85b7a2ed4b4d5a12e16e01d00d5c336e1760842fe0da38283605b9880c984288935e87b13138909e4d23d2d197a1d492f7393c6638d2c0fab8a900c4fb0392
-  languageName: node
-  linkType: hard
-
 "kind-of@npm:^6.0.0, kind-of@npm:^6.0.2, kind-of@npm:^6.0.3":
   version: 6.0.3
   resolution: "kind-of@npm:6.0.3"
@@ -26178,18 +21413,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"klaw@npm:^1.0.0":
-  version: 1.3.1
-  resolution: "klaw@npm:1.3.1"
-  dependencies:
-    graceful-fs: "npm:^4.1.9"
-  dependenciesMeta:
-    graceful-fs:
-      optional: true
-  checksum: 10c0/da994768b02b3843cc994c99bad3cf1c8c67716beb4dd2834133c919e9e9ee788669fbe27d88ab0ad9a3991349c28280afccbde01c2318229b662dd7a05e4728
-  languageName: node
-  linkType: hard
-
 "kleur@npm:^3.0.3":
   version: 3.0.3
   resolution: "kleur@npm:3.0.3"
@@ -26197,13 +21420,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"klona@npm:^2.0.4":
-  version: 2.0.5
-  resolution: "klona@npm:2.0.5"
-  checksum: 10c0/5b752c11ca8e2996612386699f52cc5aed802aa4116663d26239ac0b054fae25191dacb95587ecf1a167b039daa9fc3fa2da17dfd5d0821f3037de3821d9a9e5
-  languageName: node
-  linkType: hard
-
 "known-css-properties@npm:^0.26.0":
   version: 0.26.0
   resolution: "known-css-properties@npm:0.26.0"
@@ -26272,6 +21488,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lan-network@npm:^0.1.6":
+  version: 0.1.7
+  resolution: "lan-network@npm:0.1.7"
+  bin:
+    lan-network: dist/lan-network-cli.js
+  checksum: 10c0/7afd3a7159bb65ff40bded481e4d522b1faa6b65e8b69d6404651d87fe800a35510aff9b913bb90def4f66ca886e28907492b8323f8c568830b42d28f521fb18
+  languageName: node
+  linkType: hard
+
 "language-subtag-registry@npm:^0.3.20":
   version: 0.3.23
   resolution: "language-subtag-registry@npm:0.3.23"
@@ -26307,19 +21532,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lazy-universal-dotenv@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "lazy-universal-dotenv@npm:3.0.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.5.0"
-    app-root-dir: "npm:^1.0.2"
-    core-js: "npm:^3.0.4"
-    dotenv: "npm:^8.0.0"
-    dotenv-expand: "npm:^5.1.0"
-  checksum: 10c0/d7cf054661bcafe63c61978856f9cfacc2fc694430939681da9729016082fc9c07e4c472e7755452b518234ada38925ec5ad582b0c1f9aae7a43c24f105fdba9
-  languageName: node
-  linkType: hard
-
 "leven@npm:^3.1.0":
   version: 3.1.0
   resolution: "leven@npm:3.1.0"
@@ -26363,13 +21575,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-darwin-arm64@npm:1.19.0":
-  version: 1.19.0
-  resolution: "lightningcss-darwin-arm64@npm:1.19.0"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "lightningcss-darwin-arm64@npm:1.31.1":
   version: 1.31.1
   resolution: "lightningcss-darwin-arm64@npm:1.31.1"
@@ -26377,13 +21582,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-darwin-x64@npm:1.19.0":
-  version: 1.19.0
-  resolution: "lightningcss-darwin-x64@npm:1.19.0"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "lightningcss-darwin-x64@npm:1.31.1":
   version: 1.31.1
   resolution: "lightningcss-darwin-x64@npm:1.31.1"
@@ -26398,13 +21596,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-linux-arm-gnueabihf@npm:1.19.0":
-  version: 1.19.0
-  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.19.0"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
 "lightningcss-linux-arm-gnueabihf@npm:1.31.1":
   version: 1.31.1
   resolution: "lightningcss-linux-arm-gnueabihf@npm:1.31.1"
@@ -26412,13 +21603,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-linux-arm64-gnu@npm:1.19.0":
-  version: 1.19.0
-  resolution: "lightningcss-linux-arm64-gnu@npm:1.19.0"
-  conditions: os=linux & cpu=arm64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "lightningcss-linux-arm64-gnu@npm:1.31.1":
   version: 1.31.1
   resolution: "lightningcss-linux-arm64-gnu@npm:1.31.1"
@@ -26426,13 +21610,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-linux-arm64-musl@npm:1.19.0":
-  version: 1.19.0
-  resolution: "lightningcss-linux-arm64-musl@npm:1.19.0"
-  conditions: os=linux & cpu=arm64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "lightningcss-linux-arm64-musl@npm:1.31.1":
   version: 1.31.1
   resolution: "lightningcss-linux-arm64-musl@npm:1.31.1"
@@ -26440,13 +21617,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-linux-x64-gnu@npm:1.19.0":
-  version: 1.19.0
-  resolution: "lightningcss-linux-x64-gnu@npm:1.19.0"
-  conditions: os=linux & cpu=x64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "lightningcss-linux-x64-gnu@npm:1.31.1":
   version: 1.31.1
   resolution: "lightningcss-linux-x64-gnu@npm:1.31.1"
@@ -26454,13 +21624,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-linux-x64-musl@npm:1.19.0":
-  version: 1.19.0
-  resolution: "lightningcss-linux-x64-musl@npm:1.19.0"
-  conditions: os=linux & cpu=x64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "lightningcss-linux-x64-musl@npm:1.31.1":
   version: 1.31.1
   resolution: "lightningcss-linux-x64-musl@npm:1.31.1"
@@ -26475,13 +21638,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-win32-x64-msvc@npm:1.19.0":
-  version: 1.19.0
-  resolution: "lightningcss-win32-x64-msvc@npm:1.19.0"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "lightningcss-win32-x64-msvc@npm:1.31.1":
   version: 1.31.1
   resolution: "lightningcss-win32-x64-msvc@npm:1.31.1"
@@ -26489,7 +21645,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss@npm:^1.27.0":
+"lightningcss@npm:^1.27.0, lightningcss@npm:^1.30.1":
   version: 1.31.1
   resolution: "lightningcss@npm:1.31.1"
   dependencies:
@@ -26532,40 +21688,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss@npm:~1.19.0":
-  version: 1.19.0
-  resolution: "lightningcss@npm:1.19.0"
-  dependencies:
-    detect-libc: "npm:^1.0.3"
-    lightningcss-darwin-arm64: "npm:1.19.0"
-    lightningcss-darwin-x64: "npm:1.19.0"
-    lightningcss-linux-arm-gnueabihf: "npm:1.19.0"
-    lightningcss-linux-arm64-gnu: "npm:1.19.0"
-    lightningcss-linux-arm64-musl: "npm:1.19.0"
-    lightningcss-linux-x64-gnu: "npm:1.19.0"
-    lightningcss-linux-x64-musl: "npm:1.19.0"
-    lightningcss-win32-x64-msvc: "npm:1.19.0"
-  dependenciesMeta:
-    lightningcss-darwin-arm64:
-      optional: true
-    lightningcss-darwin-x64:
-      optional: true
-    lightningcss-linux-arm-gnueabihf:
-      optional: true
-    lightningcss-linux-arm64-gnu:
-      optional: true
-    lightningcss-linux-arm64-musl:
-      optional: true
-    lightningcss-linux-x64-gnu:
-      optional: true
-    lightningcss-linux-x64-musl:
-      optional: true
-    lightningcss-win32-x64-msvc:
-      optional: true
-  checksum: 10c0/734cb578709d945cf272578fe30c9dec9462dedb24cbfdb80fdf21dd58ca9a7a347e2b11ec80b16c49964c5c7b4180adc2c5db2c93d2360fe27ca707b961b60f
-  languageName: node
-  linkType: hard
-
 "lilconfig@npm:^2.0.5":
   version: 2.1.0
   resolution: "lilconfig@npm:2.1.0"
@@ -26594,26 +21716,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"load-json-file@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "load-json-file@npm:1.1.0"
-  dependencies:
-    graceful-fs: "npm:^4.1.2"
-    parse-json: "npm:^2.2.0"
-    pify: "npm:^2.0.0"
-    pinkie-promise: "npm:^2.0.0"
-    strip-bom: "npm:^2.0.0"
-  checksum: 10c0/2a5344c2d88643735a938fdca8582c0504e1c290577faa74f56b9cc187fa443832709a15f36e5771f779ec0878215a03abc8faf97ec57bb86092ceb7e0caef22
-  languageName: node
-  linkType: hard
-
-"loader-runner@npm:^2.4.0":
-  version: 2.4.0
-  resolution: "loader-runner@npm:2.4.0"
-  checksum: 10c0/1f723bd8318453c2d073d7befbf891ba6d2a02f22622688bf7d22e7ba527a0f9476c7fdfedc6bfa2b55c0389d9f406f3a5239ed1b33c9088d77cfed085086a1e
-  languageName: node
-  linkType: hard
-
 "loader-runner@npm:^4.2.0":
   version: 4.2.0
   resolution: "loader-runner@npm:4.2.0"
@@ -26694,13 +21796,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.groupby@npm:^4.6.0":
-  version: 4.6.0
-  resolution: "lodash.groupby@npm:4.6.0"
-  checksum: 10c0/3d136cad438ad6c3a078984ef60e057a3498b1312aa3621b00246ecb99e8f2c4d447e2815460db7a0b661a4fe4e2eeee96c84cb661a824bad04b6cf1f7bc6e9b
-  languageName: node
-  linkType: hard
-
 "lodash.memoize@npm:^4.1.2":
   version: 4.1.2
   resolution: "lodash.memoize@npm:4.1.2"
@@ -26729,14 +21824,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.uniq@npm:4.5.0, lodash.uniq@npm:^4.5.0":
+"lodash.uniq@npm:^4.5.0":
   version: 4.5.0
   resolution: "lodash.uniq@npm:4.5.0"
   checksum: 10c0/262d400bb0952f112162a320cc4a75dea4f66078b9e7e3075ffbc9c6aa30b3e9df3cf20e7da7d566105e1ccf7804e4fbd7d804eee0b53de05d83f16ffbf41c5e
   languageName: node
   linkType: hard
 
-"lodash@npm:4.18.1, lodash@npm:^4.17.10, lodash@npm:^4.17.11, 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.18.1, lodash@npm:^4.17.10, lodash@npm:^4.17.11, lodash@npm:^4.17.15, lodash@npm:^4.17.20, lodash@npm:^4.17.21":
   version: 4.18.1
   resolution: "lodash@npm:4.18.1"
   checksum: 10c0/757228fc68805c59789e82185135cf85f05d0b2d3d54631d680ca79ec21944ec8314d4533639a14b8bcfbd97a517e78960933041a5af17ecb693ec6eecb99a27
@@ -26762,19 +21857,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"logkitty@npm:^0.7.1":
-  version: 0.7.1
-  resolution: "logkitty@npm:0.7.1"
-  dependencies:
-    ansi-fragments: "npm:^0.2.1"
-    dayjs: "npm:^1.8.15"
-    yargs: "npm:^15.1.0"
-  bin:
-    logkitty: bin/logkitty.js
-  checksum: 10c0/2067fad55c0856c0608c51ab75f8ffa5a858c5f847fefa8ec0e5fd3aa0b7d732010169d187283b23583a72aa6b80bbbec4fc6801a6c47c3fac0fbb294786002a
-  languageName: node
-  linkType: hard
-
 "longest-streak@npm:^3.0.0":
   version: 3.1.0
   resolution: "longest-streak@npm:3.1.0"
@@ -26793,23 +21875,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lottie-react-native@npm:6.7.0":
-  version: 6.7.0
-  resolution: "lottie-react-native@npm:6.7.0"
+"lottie-react-native@npm:7.3.1":
+  version: 7.3.1
+  resolution: "lottie-react-native@npm:7.3.1"
   peerDependencies:
-    "@dotlottie/react-player": ^1.6.1
-    "@lottiefiles/react-lottie-player": ^3.5.3
+    "@lottiefiles/dotlottie-react": ^0.6.5
     react: "*"
     react-native: ">=0.46"
     react-native-windows: ">=0.63.x"
   peerDependenciesMeta:
-    "@dotlottie/react-player":
-      optional: true
-    "@lottiefiles/react-lottie-player":
+    "@lottiefiles/dotlottie-react":
       optional: true
     react-native-windows:
       optional: true
-  checksum: 10c0/a1df65252eb349414550a405b4fbb09e567404c123e98668701fcc325b38157e3f31a84c0563b1a4426417080b2ce5b901b1032910a3db695db96ffaf41030d6
+  checksum: 10c0/0cc257fbb054a0489f11b9785ba3a0408946648b7db55ca335ee86fbbb95662f89f94dd70190f928f479f94a1f1bce729f789842fdbd130d8a3661d61c94a021
   languageName: node
   linkType: hard
 
@@ -26820,16 +21899,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loud-rejection@npm:^1.0.0":
-  version: 1.6.0
-  resolution: "loud-rejection@npm:1.6.0"
-  dependencies:
-    currently-unhandled: "npm:^0.4.1"
-    signal-exit: "npm:^3.0.0"
-  checksum: 10c0/aa060b3fe55ad96b97890f1b0a24bf81a2d612e397d6cc0374ce1cf7e021cd0247f0ddb68134499882d0843c2776371d5221b80b0b3beeca5133a6e7f27a3845
-  languageName: node
-  linkType: hard
-
 "loupe@npm:^3.1.0, loupe@npm:^3.1.4":
   version: 3.2.0
   resolution: "loupe@npm:3.2.0"
@@ -26837,22 +21906,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lower-case-first@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "lower-case-first@npm:1.0.2"
-  dependencies:
-    lower-case: "npm:^1.1.2"
-  checksum: 10c0/e0689a82df329db44e28b0dd53ccace09a8a4918fc86aa6c08b091ec31bc5f3496a0b07cf7e81be065335bea996f7aa0fbe0163a3e6f019b0480a5f20a79e871
-  languageName: node
-  linkType: hard
-
-"lower-case@npm:^1.1.0, lower-case@npm:^1.1.1, lower-case@npm:^1.1.2":
-  version: 1.1.4
-  resolution: "lower-case@npm:1.1.4"
-  checksum: 10c0/2153ae5490d655a63addc8e7d2f848c6c94803b342ed2d177f75e8073e9fbb50a733d1432c82e1cb8425fa6eae14b2877bf5bbdcb93ab93bb982fb5c3962c57b
-  languageName: node
-  linkType: hard
-
 "lower-case@npm:^2.0.2":
   version: 2.0.2
   resolution: "lower-case@npm:2.0.2"
@@ -26883,16 +21936,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^4.0.1":
-  version: 4.1.5
-  resolution: "lru-cache@npm:4.1.5"
-  dependencies:
-    pseudomap: "npm:^1.0.2"
-    yallist: "npm:^2.1.2"
-  checksum: 10c0/1ca5306814e5add9ec63556d6fd9b24a4ecdeaef8e9cea52cbf30301e6b88c8d8ddc7cab45b59b56eb763e6c45af911585dc89925a074ab65e1502e3fe8103cf
-  languageName: node
-  linkType: hard
-
 "lru-cache@npm:^5.1.1":
   version: 5.1.1
   resolution: "lru-cache@npm:5.1.1"
@@ -26939,7 +21982,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.30.0, magic-string@npm:^0.30.17, magic-string@npm:^0.30.21, magic-string@npm:^0.30.3":
+"magic-string@npm:^0.30.0, magic-string@npm:^0.30.10, magic-string@npm:^0.30.17, magic-string@npm:^0.30.21, magic-string@npm:^0.30.3":
   version: 0.30.21
   resolution: "magic-string@npm:0.30.21"
   dependencies:
@@ -26969,15 +22012,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"make-dir@npm:^3.0.0, make-dir@npm:^3.0.2, make-dir@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "make-dir@npm:3.1.0"
-  dependencies:
-    semver: "npm:^6.0.0"
-  checksum: 10c0/56aaafefc49c2dfef02c5c95f9b196c4eb6988040cf2c712185c7fe5c99b4091591a7fc4d4eafaaefa70ff763a26f6ab8c3ff60b9e75ea19876f49b18667ecaa
-  languageName: node
-  linkType: hard
-
 "make-dir@npm:^4.0.0":
   version: 4.0.0
   resolution: "make-dir@npm:4.0.0"
@@ -27020,14 +22054,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"map-cache@npm:^0.2.2":
-  version: 0.2.2
-  resolution: "map-cache@npm:0.2.2"
-  checksum: 10c0/05e3eb005c1b80b9f949ca007687640e8c5d0fc88dc45c3c3ab4902a3bec79d66a58f3e3b04d6985d90cd267c629c7b46c977e9c34433e8c11ecfcbb9f0fa290
-  languageName: node
-  linkType: hard
-
-"map-obj@npm:^1.0.0, map-obj@npm:^1.0.1":
+"map-obj@npm:^1.0.0":
   version: 1.0.1
   resolution: "map-obj@npm:1.0.1"
   checksum: 10c0/ccca88395e7d38671ed9f5652ecf471ecd546924be2fb900836b9da35e068a96687d96a5f93dcdfa94d9a27d649d2f10a84595590f89a347fb4dda47629dcc52
@@ -27048,15 +22075,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"map-visit@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "map-visit@npm:1.0.0"
-  dependencies:
-    object-visit: "npm:^1.0.0"
-  checksum: 10c0/fb3475e5311939a6147e339999113db607adc11c7c3cd3103e5e9dbf502898416ecba6b1c7c649c6d4d12941de00cee58b939756bdf20a9efe7d4fa5a5738b73
-  languageName: node
-  linkType: hard
-
 "markdown-builder@npm:^0.9.0":
   version: 0.9.0
   resolution: "markdown-builder@npm:0.9.0"
@@ -27066,13 +22084,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"markdown-escapes@npm:^1.0.0":
-  version: 1.0.4
-  resolution: "markdown-escapes@npm:1.0.4"
-  checksum: 10c0/cf3f2231191d9df61cd1d02a50a55a5c89ab9cebfe75572950f4844b93a41d561eed2d82e42732d55f2c55fa0d426b51df3a7f378b4068ae1e2923bb758a9cc8
-  languageName: node
-  linkType: hard
-
 "markdown-extensions@npm:^2.0.0":
   version: 2.0.0
   resolution: "markdown-extensions@npm:2.0.0"
@@ -27136,75 +22147,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"md5-file@npm:^3.2.3":
-  version: 3.2.3
-  resolution: "md5-file@npm:3.2.3"
-  dependencies:
-    buffer-alloc: "npm:^1.1.0"
-  bin:
-    md5-file: cli.js
-  checksum: 10c0/41d2c27534119bea6e7c1b1489290b4a412c256d3f184068753a215fbeb0eeb5d739334e753f997de5d7d104db3118c6ec2f6e50b1ed23d70deacefd098ee560
-  languageName: node
-  linkType: hard
-
-"md5.js@npm:^1.3.4":
-  version: 1.3.5
-  resolution: "md5.js@npm:1.3.5"
-  dependencies:
-    hash-base: "npm:^3.0.0"
-    inherits: "npm:^2.0.1"
-    safe-buffer: "npm:^5.1.2"
-  checksum: 10c0/b7bd75077f419c8e013fc4d4dada48be71882e37d69a44af65a2f2804b91e253441eb43a0614423a1c91bb830b8140b0dc906bc797245e2e275759584f4efcc5
-  languageName: node
-  linkType: hard
-
-"md5@npm:^2.2.1":
-  version: 2.3.0
-  resolution: "md5@npm:2.3.0"
-  dependencies:
-    charenc: "npm:0.0.2"
-    crypt: "npm:0.0.2"
-    is-buffer: "npm:~1.1.6"
-  checksum: 10c0/14a21d597d92e5b738255fbe7fe379905b8cb97e0a49d44a20b58526a646ec5518c337b817ce0094ca94d3e81a3313879c4c7b510d250c282d53afbbdede9110
-  languageName: node
-  linkType: hard
-
-"md5@npm:~2.2.0":
-  version: 2.2.1
-  resolution: "md5@npm:2.2.1"
-  dependencies:
-    charenc: "npm:~0.0.1"
-    crypt: "npm:~0.0.1"
-    is-buffer: "npm:~1.1.1"
-  checksum: 10c0/e9e7de197a100169f27b956af63ece22348b2d06d40162c8d380d13dcbb7a307c95956857d0cb5ed92059f6448bbdce2d54bc6b922f8e6a36284c303ecc1612d
-  languageName: node
-  linkType: hard
-
-"md5hex@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "md5hex@npm:1.0.0"
-  checksum: 10c0/cad2569cdbc61c9de1ff2724c7344c695d868579bb21a1ab4cedf3ea5e91fa75d74a861da071ea1ee00a161511104985c30cb08d797bfd7d99f0f8fd14994728
-  languageName: node
-  linkType: hard
-
-"mdast-squeeze-paragraphs@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "mdast-squeeze-paragraphs@npm:4.0.0"
-  dependencies:
-    unist-util-remove: "npm:^2.0.0"
-  checksum: 10c0/0b44a85d7e6d98772b1dbb28a46a35c74c2791c6cf057bfd2e590a4e011d626627e5bf82d4497706f0dae03da02a63a9279aca17c4c23a9c7173792adba8e6fc
-  languageName: node
-  linkType: hard
-
-"mdast-util-definitions@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "mdast-util-definitions@npm:4.0.0"
-  dependencies:
-    unist-util-visit: "npm:^2.0.0"
-  checksum: 10c0/d81bb0b702f99878c8e8e4f66dd7f6f673ab341f061b3d9487ba47dad28b584e02f16b4c42df23714eaac8a7dd8544ba7d77308fad8d4a9fd0ac92e2a7f56be9
-  languageName: node
-  linkType: hard
-
 "mdast-util-directive@npm:^3.0.0":
   version: 3.0.0
   resolution: "mdast-util-directive@npm:3.0.0"
@@ -27428,22 +22370,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdast-util-to-hast@npm:10.0.1":
-  version: 10.0.1
-  resolution: "mdast-util-to-hast@npm:10.0.1"
-  dependencies:
-    "@types/mdast": "npm:^3.0.0"
-    "@types/unist": "npm:^2.0.0"
-    mdast-util-definitions: "npm:^4.0.0"
-    mdurl: "npm:^1.0.0"
-    unist-builder: "npm:^2.0.0"
-    unist-util-generated: "npm:^1.0.0"
-    unist-util-position: "npm:^3.0.0"
-    unist-util-visit: "npm:^2.0.0"
-  checksum: 10c0/08d0977c60ee951cb5e2e84bc821a842da463c37f7bbb79abf0be0894120ed5e2fc1d003d072d3bb968d8e813a916e132a094166d5562deb424acc45e1c661f4
-  languageName: node
-  linkType: hard
-
 "mdast-util-to-hast@npm:^13.0.0":
   version: 13.2.0
   resolution: "mdast-util-to-hast@npm:13.2.0"
@@ -27515,13 +22441,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdurl@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "mdurl@npm:1.0.1"
-  checksum: 10c0/ea8534341eb002aaa532a722daef6074cd8ca66202e10a2b4cda46722c1ebdb1da92197ac300bc953d3ef1bf41cd6561ef2cc69d82d5d0237dae00d4a61a4eee
-  languageName: node
-  linkType: hard
-
 "media-typer@npm:0.3.0":
   version: 0.3.0
   resolution: "media-typer@npm:0.3.0"
@@ -27573,23 +22492,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"memory-cache@npm:~0.2.0":
-  version: 0.2.0
-  resolution: "memory-cache@npm:0.2.0"
-  checksum: 10c0/d4fe58865dfdc252db18ae152ab6c9d62868cfc42d5e7f6cf30732fcf27f5f1f8d7b179c3b6f26f31a28ab1cc5c3937215c60aa9e8ad7ea8ff35e79f69ef14da
-  languageName: node
-  linkType: hard
-
-"memory-fs@npm:^0.4.1":
-  version: 0.4.1
-  resolution: "memory-fs@npm:0.4.1"
-  dependencies:
-    errno: "npm:^0.1.3"
-    readable-stream: "npm:^2.0.1"
-  checksum: 10c0/f114c44ad8285103cb0e71420cf5bb628d3eb6cbd918197f5951590ff56ba2072f4a97924949c170320cdf180d2da4e8d16a0edd92ba0ca2d2de51dc932841e2
-  languageName: node
-  linkType: hard
-
 "memory-fs@npm:^0.5.0":
   version: 0.5.0
   resolution: "memory-fs@npm:0.5.0"
@@ -27620,24 +22522,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"meow@npm:^3.1.0":
-  version: 3.7.0
-  resolution: "meow@npm:3.7.0"
-  dependencies:
-    camelcase-keys: "npm:^2.0.0"
-    decamelize: "npm:^1.1.2"
-    loud-rejection: "npm:^1.0.0"
-    map-obj: "npm:^1.0.1"
-    minimist: "npm:^1.1.3"
-    normalize-package-data: "npm:^2.3.4"
-    object-assign: "npm:^4.0.1"
-    read-pkg-up: "npm:^1.0.1"
-    redent: "npm:^1.0.0"
-    trim-newlines: "npm:^1.0.0"
-  checksum: 10c0/e5ba4632b6558006b5f4df64b5a35e777d75629ab08d84f7bbc967e7603a396e16baa8f67aae26c7833a6a117e4857afef393e0b9aee21f52320e54812d9ae09
-  languageName: node
-  linkType: hard
-
 "meow@npm:^9.0.0":
   version: 9.0.0
   resolution: "meow@npm:9.0.0"
@@ -27679,7 +22563,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"merge2@npm:^1.2.3, merge2@npm:^1.3.0, merge2@npm:^1.4.1":
+"merge2@npm:^1.3.0, merge2@npm:^1.4.1":
   version: 1.4.1
   resolution: "merge2@npm:1.4.1"
   checksum: 10c0/254a8a4605b58f450308fc474c82ac9a094848081bf4c06778200207820e5193726dc563a0d2c16468810516a5c97d9d3ea0ca6585d23c58ccfff2403e8dbbeb
@@ -27709,535 +22593,452 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-babel-transformer@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-babel-transformer@npm:0.76.7"
+"metro-babel-transformer@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro-babel-transformer@npm:0.83.3"
   dependencies:
-    "@babel/core": "npm:^7.20.0"
-    hermes-parser: "npm:0.12.0"
+    "@babel/core": "npm:^7.25.2"
+    flow-enums-runtime: "npm:^0.0.6"
+    hermes-parser: "npm:0.32.0"
     nullthrows: "npm:^1.1.1"
-  checksum: 10c0/22ebdb46f469773d87d9cd769a0e849d44cfe42baaaef692fe6671374ac59b87d58b74ff9fdba24e984b26c30c9e4d7fb6a14d80783897eb07552bc33b538cf7
+  checksum: 10c0/b0107f86cdc9ef9419d669b5b3dac22e35b02c67c480563a63d98f5fb50953587938769efc854bfc09c225557790cd6488dbe3fed6f05c2b3f322cfb2e5ff577
   languageName: node
   linkType: hard
 
-"metro-babel-transformer@npm:0.80.6":
-  version: 0.80.6
-  resolution: "metro-babel-transformer@npm:0.80.6"
+"metro-babel-transformer@npm:0.83.4":
+  version: 0.83.4
+  resolution: "metro-babel-transformer@npm:0.83.4"
   dependencies:
-    "@babel/core": "npm:^7.20.0"
-    hermes-parser: "npm:0.19.1"
+    "@babel/core": "npm:^7.25.2"
+    flow-enums-runtime: "npm:^0.0.6"
+    hermes-parser: "npm:0.33.3"
     nullthrows: "npm:^1.1.1"
-  checksum: 10c0/7198efcbbecd67daced3395923edd3a647ac933566322ed66a91e30cdf725f6b0876391fbc77bf22b49d596ec746250d8d1286b20e28cd12de3ba76acc7679ac
+  checksum: 10c0/12f308a925e3e387587f32e7c4d4729df404fb8457065897192eda2a9d8c044602a0a419513768c971a2b78d97858d8e36ecf8761af696048b380c9bfdb47ceb
   languageName: node
   linkType: hard
 
-"metro-cache-key@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-cache-key@npm:0.76.7"
-  checksum: 10c0/974776fbd8256be3a6b5f9e38be35dd2274f845f7a9021fcdd3e307d4dd6cfea41c9d87660b9194708337c49f30ca0f64f12e9679b28e5e89a5a842bf3481381
+"metro-cache-key@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro-cache-key@npm:0.83.3"
+  dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
+  checksum: 10c0/403a2ca5b5bbb31a979effaa31fba0c47e2eb3830428c39c99db58aa0739a6fcc386f5a56c91495c53a4569065f0bda29e3038e9c41ca17af443971395f257dc
   languageName: node
   linkType: hard
 
-"metro-cache-key@npm:0.80.6":
-  version: 0.80.6
-  resolution: "metro-cache-key@npm:0.80.6"
-  checksum: 10c0/af62885489d07aa767146c174b7520d7d636f085dd272fdf1990e6dbb0cb095a04151f12224bd36002447126a8f98e42b27fe38c069afa6ee09b36b7cb40ea32
+"metro-cache-key@npm:0.83.4":
+  version: 0.83.4
+  resolution: "metro-cache-key@npm:0.83.4"
+  dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
+  checksum: 10c0/6de841893c02019841ec899e777d6bb6fdcad41e7bebde9a941103105f3a028933b39091763b47a5625a608f23891d89e745514734433b23b441339e39380d3c
   languageName: node
   linkType: hard
 
-"metro-cache@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-cache@npm:0.76.7"
+"metro-cache@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro-cache@npm:0.83.3"
   dependencies:
-    metro-core: "npm:0.76.7"
-    rimraf: "npm:^3.0.2"
-  checksum: 10c0/b6e8283434ef12b939dc4e6995263a253abc6a2276cfad8764ad7b571a0e4c93a80bbb7afdfdfdd07faa251f3c871685207f702baf43a6d70f26b01ab89a2f4a
+    exponential-backoff: "npm:^3.1.1"
+    flow-enums-runtime: "npm:^0.0.6"
+    https-proxy-agent: "npm:^7.0.5"
+    metro-core: "npm:0.83.3"
+  checksum: 10c0/608e85d819092c0b472c9adabb5de58e88355739de71833230626c1af7f3ce5dd1dca9f1ff3a836d995201f717315fd769c4c646a818c1f490ea2ec29417e32a
   languageName: node
   linkType: hard
 
-"metro-cache@npm:0.80.6":
-  version: 0.80.6
-  resolution: "metro-cache@npm:0.80.6"
+"metro-cache@npm:0.83.4":
+  version: 0.83.4
+  resolution: "metro-cache@npm:0.83.4"
   dependencies:
-    metro-core: "npm:0.80.6"
-    rimraf: "npm:^3.0.2"
-  checksum: 10c0/7f7459e822b7c2a4c7aeddde0f40a651b4d64aa8f562acd8bb7e987de4a27fc996eee169908cf81062febe2b7a6fb80c1dbdf63f675ce3f6e97a3bb58c409a44
+    exponential-backoff: "npm:^3.1.1"
+    flow-enums-runtime: "npm:^0.0.6"
+    https-proxy-agent: "npm:^7.0.5"
+    metro-core: "npm:0.83.4"
+  checksum: 10c0/fda44ff4bb3d4ab16440163928ff6a11c6b03edaf5ffd9cad7f6b7bd83ca7d0ac135ada9e1622d7388a2dfe5fbdf2c6eb87e180b4d5578386bd24dfb4501bf65
   languageName: node
   linkType: hard
 
-"metro-config@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-config@npm:0.76.7"
+"metro-config@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro-config@npm:0.83.3"
   dependencies:
     connect: "npm:^3.6.5"
-    cosmiconfig: "npm:^5.0.5"
-    jest-validate: "npm:^29.2.1"
-    metro: "npm:0.76.7"
-    metro-cache: "npm:0.76.7"
-    metro-core: "npm:0.76.7"
-    metro-runtime: "npm:0.76.7"
-  checksum: 10c0/01537d98e9a002e3ff309ddcaaeaebf65bda6840c6c37e053ea8bf8fd7b9f02a2f83e23e4c4adee0057156ae511151d7ac4b0777e3a2a104f9aa4bd8f6a035bd
+    flow-enums-runtime: "npm:^0.0.6"
+    jest-validate: "npm:^29.7.0"
+    metro: "npm:0.83.3"
+    metro-cache: "npm:0.83.3"
+    metro-core: "npm:0.83.3"
+    metro-runtime: "npm:0.83.3"
+    yaml: "npm:^2.6.1"
+  checksum: 10c0/c53e4a061cfc776a65cdb5055c0be840055f9741dae25e7d407835988618b15f1407270dbd957c7333d01e9c79eccbf8e6bcb76421b2145bd134b53df459a033
   languageName: node
   linkType: hard
 
-"metro-config@npm:0.80.6, metro-config@npm:^0.80.3":
-  version: 0.80.6
-  resolution: "metro-config@npm:0.80.6"
+"metro-config@npm:0.83.4, metro-config@npm:^0.83.1":
+  version: 0.83.4
+  resolution: "metro-config@npm:0.83.4"
   dependencies:
     connect: "npm:^3.6.5"
-    cosmiconfig: "npm:^5.0.5"
-    jest-validate: "npm:^29.6.3"
-    metro: "npm:0.80.6"
-    metro-cache: "npm:0.80.6"
-    metro-core: "npm:0.80.6"
-    metro-runtime: "npm:0.80.6"
-  checksum: 10c0/133a281593a16789409c58dfd437a97cdf4f7393ea4042dbf42d3a47fa5650840996e3b24059bc82d98c0171752e8ac617e6536bc833d3dabbcdd480480def1b
+    flow-enums-runtime: "npm:^0.0.6"
+    jest-validate: "npm:^29.7.0"
+    metro: "npm:0.83.4"
+    metro-cache: "npm:0.83.4"
+    metro-core: "npm:0.83.4"
+    metro-runtime: "npm:0.83.4"
+    yaml: "npm:^2.6.1"
+  checksum: 10c0/4efafa508d91c59d69316bb9e5df1dd9c287f41625c8c7223c97807ebe9becf5e1fe6c4b291923d8cc5b1159501aee4f4c747f8ecff465f87a681cb60889f100
   languageName: node
   linkType: hard
 
-"metro-core@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-core@npm:0.76.7"
+"metro-core@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro-core@npm:0.83.3"
   dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
     lodash.throttle: "npm:^4.1.1"
-    metro-resolver: "npm:0.76.7"
-  checksum: 10c0/4a08118102ada283b17015ce2faed45cb114e90be29664d876f317ac1bf9ad94b1957483dce734010b6801c84bf12a874be9e0d5194330f72b9311ac160be39e
+    metro-resolver: "npm:0.83.3"
+  checksum: 10c0/d44c1f117c4b27f18abd27110e9536abf3105733e8fccaa522bd0e008248cce0260130517840c4914d7ce5df498f39ecfd43b6046a0f0b1c0f8ada7de38e52c4
   languageName: node
   linkType: hard
 
-"metro-core@npm:0.80.6, metro-core@npm:^0.80.3":
-  version: 0.80.6
-  resolution: "metro-core@npm:0.80.6"
+"metro-core@npm:0.83.4, metro-core@npm:^0.83.1":
+  version: 0.83.4
+  resolution: "metro-core@npm:0.83.4"
   dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
     lodash.throttle: "npm:^4.1.1"
-    metro-resolver: "npm:0.80.6"
-  checksum: 10c0/5aa828304c20db5109993980bd2a3805813ad005b3a051a7cad5475d71b4ceed05ca9abdf5846dc4780914fe10e965bcfd8d828e62f83b96c9a9dae015abb762
+    metro-resolver: "npm:0.83.4"
+  checksum: 10c0/c550f89cf5f6435cede98d5855973f62fc4947dcc97382b66b960101289f6698bf2f279e4f74ee6f68d3e9e1b266fc5073043c7ae6484b825ea335fc5a40f24d
   languageName: node
   linkType: hard
 
-"metro-file-map@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-file-map@npm:0.76.7"
+"metro-file-map@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro-file-map@npm:0.83.3"
   dependencies:
-    anymatch: "npm:^3.0.3"
-    debug: "npm:^2.2.0"
+    debug: "npm:^4.4.0"
     fb-watchman: "npm:^2.0.0"
-    fsevents: "npm:^2.3.2"
+    flow-enums-runtime: "npm:^0.0.6"
     graceful-fs: "npm:^4.2.4"
     invariant: "npm:^2.2.4"
-    jest-regex-util: "npm:^27.0.6"
-    jest-util: "npm:^27.2.0"
-    jest-worker: "npm:^27.2.0"
+    jest-worker: "npm:^29.7.0"
     micromatch: "npm:^4.0.4"
-    node-abort-controller: "npm:^3.1.1"
     nullthrows: "npm:^1.1.1"
     walker: "npm:^1.0.7"
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 10c0/18844ebf5668e8f092ccb8a8a8cb364830a329edc2bbfb888faf74d10135dfdc9865be871ce0fab8cfe67d3e98b6835873a06b605af076207816d3a21c367ded
+  checksum: 10c0/4bf9c0fcdb5a5c08851f7370d6427fb68a770f156c4eabbddf20bd3583fb25ae428507eaeb8dc525e792db41d048620209750f33735055863abc909cbb6ef71a
   languageName: node
   linkType: hard
 
-"metro-file-map@npm:0.80.6":
-  version: 0.80.6
-  resolution: "metro-file-map@npm:0.80.6"
+"metro-file-map@npm:0.83.4":
+  version: 0.83.4
+  resolution: "metro-file-map@npm:0.83.4"
   dependencies:
-    anymatch: "npm:^3.0.3"
-    debug: "npm:^2.2.0"
+    debug: "npm:^4.4.0"
     fb-watchman: "npm:^2.0.0"
-    fsevents: "npm:^2.3.2"
+    flow-enums-runtime: "npm:^0.0.6"
     graceful-fs: "npm:^4.2.4"
     invariant: "npm:^2.2.4"
-    jest-worker: "npm:^29.6.3"
+    jest-worker: "npm:^29.7.0"
     micromatch: "npm:^4.0.4"
-    node-abort-controller: "npm:^3.1.1"
     nullthrows: "npm:^1.1.1"
     walker: "npm:^1.0.7"
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 10c0/745bc9a679a9713594be56c43f261290c8441761e1b61df0e7a160fa0c4be326a57c63f69a61d39cab0e4f77c119e4eb18361df3c0bb840f71486bf9b58779b1
+  checksum: 10c0/62d511561e2ac78f22166d236280325b7f7646177305a8eb97bb0ff0cac3c77eeb09e212de7cec383a73644dabbd2afbd59e8491718f4263e2aa54733fae1c91
   languageName: node
   linkType: hard
 
-"metro-inspector-proxy@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-inspector-proxy@npm:0.76.7"
-  dependencies:
-    connect: "npm:^3.6.5"
-    debug: "npm:^2.2.0"
-    node-fetch: "npm:^2.2.0"
-    ws: "npm:^7.5.1"
-    yargs: "npm:^17.6.2"
-  bin:
-    metro-inspector-proxy: src/cli.js
-  checksum: 10c0/6cf55ddcac9b445ee073525b0e44ae13703065fa6bedf13985693351654baa71cf48873822568bbb53acfc37eeccfcde34a18d50a2be355bcb76a552054a8565
-  languageName: node
-  linkType: hard
-
-"metro-minify-terser@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-minify-terser@npm:0.76.7"
+"metro-minify-terser@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro-minify-terser@npm:0.83.3"
   dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
     terser: "npm:^5.15.0"
-  checksum: 10c0/b78a11ab420af0801cca2168f2d453a804ad086a2093ad122e0a063e3ac71df725b70bfe573aec0ca5b0966282fb8e61c1aa6876d4e90d79221016715e4987da
+  checksum: 10c0/9158e3199c0ea647776a7ed5c68ec1bb493f5347ac979f1ca75020cf1c39f907bd29983d60f8cb24dca17053d6b5c35f140c6d720fad0bd0fa9728e8c51e95c6
   languageName: node
   linkType: hard
 
-"metro-minify-terser@npm:0.80.6":
-  version: 0.80.6
-  resolution: "metro-minify-terser@npm:0.80.6"
+"metro-minify-terser@npm:0.83.4":
+  version: 0.83.4
+  resolution: "metro-minify-terser@npm:0.83.4"
   dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
     terser: "npm:^5.15.0"
-  checksum: 10c0/97b6cd8d60866818f1d0b96755b2a1b22a58d4db0ca10f528f8b74abaa12ba80d0904dd1e3a2acf49001c84224e9f3cd78fe0ae0386855f4898d4eb3110515bc
-  languageName: node
-  linkType: hard
-
-"metro-minify-uglify@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-minify-uglify@npm:0.76.7"
-  dependencies:
-    uglify-es: "npm:^3.1.9"
-  checksum: 10c0/80486cd8ae4481f7354a842e870ae75377d12d3f23a76f4f74c0192ba5918757a05a62b2fbd301d8196c607bfbe87fb4ca2f162457f76725d27fe98c876670be
+  checksum: 10c0/e242a1c40b724635361f0ba7e33f7ed60d3be73a8cf3ec6e3e5b07282ea2c4e094ff370253be2f84628af57d14791f4211da769fe19362949866c9433fa74c29
   languageName: node
   linkType: hard
 
-"metro-react-native-babel-preset@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-react-native-babel-preset@npm:0.76.7"
+"metro-resolver@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro-resolver@npm:0.83.3"
   dependencies:
-    "@babel/core": "npm:^7.20.0"
-    "@babel/plugin-proposal-async-generator-functions": "npm:^7.0.0"
-    "@babel/plugin-proposal-class-properties": "npm:^7.18.0"
-    "@babel/plugin-proposal-export-default-from": "npm:^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator": "npm:^7.18.0"
-    "@babel/plugin-proposal-numeric-separator": "npm:^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread": "npm:^7.20.0"
-    "@babel/plugin-proposal-optional-catch-binding": "npm:^7.0.0"
-    "@babel/plugin-proposal-optional-chaining": "npm:^7.20.0"
-    "@babel/plugin-syntax-dynamic-import": "npm:^7.8.0"
-    "@babel/plugin-syntax-export-default-from": "npm:^7.0.0"
-    "@babel/plugin-syntax-flow": "npm:^7.18.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.0.0"
-    "@babel/plugin-syntax-optional-chaining": "npm:^7.0.0"
-    "@babel/plugin-transform-arrow-functions": "npm:^7.0.0"
-    "@babel/plugin-transform-async-to-generator": "npm:^7.20.0"
-    "@babel/plugin-transform-block-scoping": "npm:^7.0.0"
-    "@babel/plugin-transform-classes": "npm:^7.0.0"
-    "@babel/plugin-transform-computed-properties": "npm:^7.0.0"
-    "@babel/plugin-transform-destructuring": "npm:^7.20.0"
-    "@babel/plugin-transform-flow-strip-types": "npm:^7.20.0"
-    "@babel/plugin-transform-function-name": "npm:^7.0.0"
-    "@babel/plugin-transform-literals": "npm:^7.0.0"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.0.0"
-    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.0.0"
-    "@babel/plugin-transform-parameters": "npm:^7.0.0"
-    "@babel/plugin-transform-react-display-name": "npm:^7.0.0"
-    "@babel/plugin-transform-react-jsx": "npm:^7.0.0"
-    "@babel/plugin-transform-react-jsx-self": "npm:^7.0.0"
-    "@babel/plugin-transform-react-jsx-source": "npm:^7.0.0"
-    "@babel/plugin-transform-runtime": "npm:^7.0.0"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.0.0"
-    "@babel/plugin-transform-spread": "npm:^7.0.0"
-    "@babel/plugin-transform-sticky-regex": "npm:^7.0.0"
-    "@babel/plugin-transform-typescript": "npm:^7.5.0"
-    "@babel/plugin-transform-unicode-regex": "npm:^7.0.0"
-    "@babel/template": "npm:^7.0.0"
-    babel-plugin-transform-flow-enums: "npm:^0.0.2"
-    react-refresh: "npm:^0.4.0"
-  peerDependencies:
-    "@babel/core": "*"
-  checksum: 10c0/e6f66490bedcbbef7b3aba2c82056e7a28538330eaf2d499181153ce502f3a8b69487b9f6d455d2cdeed08831d9fd337ec9b378f53f2bfef4d3d745015b573f2
+    flow-enums-runtime: "npm:^0.0.6"
+  checksum: 10c0/1d6c030a00b987fbee38e5c632219b2be602e38c9aa9628bb4b591f646e64130d08adb8dcb35076c5c8cc151135557b655f3dee514c0df9f26d3416629eb006b
   languageName: node
   linkType: hard
 
-"metro-react-native-babel-transformer@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-react-native-babel-transformer@npm:0.76.7"
+"metro-resolver@npm:0.83.4":
+  version: 0.83.4
+  resolution: "metro-resolver@npm:0.83.4"
   dependencies:
-    "@babel/core": "npm:^7.20.0"
-    babel-preset-fbjs: "npm:^3.4.0"
-    hermes-parser: "npm:0.12.0"
-    metro-react-native-babel-preset: "npm:0.76.7"
-    nullthrows: "npm:^1.1.1"
-  peerDependencies:
-    "@babel/core": "*"
-  checksum: 10c0/f23e5666a2e4ad1b028b7702f7008f417e9f2be30ea52812ae3984b6b3d669fb083587171f0771466431025891912858f3e51c91fb532d0efdace87209379ec3
-  languageName: node
-  linkType: hard
-
-"metro-resolver@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-resolver@npm:0.76.7"
-  checksum: 10c0/dd4fe3458e19a6bc3917de3ef09d20a7d11e87d33cc856340e61717426511d7555533625e3c22f02792910828b1f9d1da6fcdd205650e61bce660ab2123ae9ee
-  languageName: node
-  linkType: hard
-
-"metro-resolver@npm:0.80.6":
-  version: 0.80.6
-  resolution: "metro-resolver@npm:0.80.6"
-  checksum: 10c0/ae8562d662568df52e72335f02dd6f30939e5d394d710d370771fae2206fcb1af348acb8bdea51c0d4f345ef808ae36bfb122d19f3f7a796330e49ce2d9c4168
+    flow-enums-runtime: "npm:^0.0.6"
+  checksum: 10c0/1f7546f09a0a939d0019a1c11aa3176dd71d3db88eb31c550d7dc7a75237f78235db1d4f4d2d48b576335730f5dc20778c443ca2a0158eaca2f658de2759bb7e
   languageName: node
   linkType: hard
 
-"metro-runtime@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-runtime@npm:0.76.7"
+"metro-runtime@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro-runtime@npm:0.83.3"
   dependencies:
-    "@babel/runtime": "npm:^7.0.0"
-    react-refresh: "npm:^0.4.0"
-  checksum: 10c0/5b4aac29dfc9bbb08e50435195974ae7504ed594ed959c7b2eec6bd279730ca714731eb48a37f49d276b95a08d53f36f89ebd828c88421570022fef04979b47b
+    "@babel/runtime": "npm:^7.25.0"
+    flow-enums-runtime: "npm:^0.0.6"
+  checksum: 10c0/1d788483b6c2f13e0ea9ff4564996154754d3de84f683812ac848053eaea9243144adee3e8ffe90789e6c253f7402211d72b1b5ebf09e6c23841bc956a680253
   languageName: node
   linkType: hard
 
-"metro-runtime@npm:0.80.6, metro-runtime@npm:^0.80.3":
-  version: 0.80.6
-  resolution: "metro-runtime@npm:0.80.6"
+"metro-runtime@npm:0.83.4, metro-runtime@npm:^0.83.1":
+  version: 0.83.4
+  resolution: "metro-runtime@npm:0.83.4"
   dependencies:
-    "@babel/runtime": "npm:^7.0.0"
-  checksum: 10c0/1291e7739ad323d821b332d7bd3d6ddb0835dc77150e9d12f179423390590e8aa5e4a8bcb18e18c55a0c77ab15da7c66fa7caa1b753395f563c0e1309e3c8221
+    "@babel/runtime": "npm:^7.25.0"
+    flow-enums-runtime: "npm:^0.0.6"
+  checksum: 10c0/43e837299c347413b62293d26201e94559846c7a5dd597afb4e9349583403c92d1ab162f675c41887236d9bf03afd1635b1e0aab996d4f46e276d077e2e40fb1
   languageName: node
   linkType: hard
 
-"metro-source-map@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-source-map@npm:0.76.7"
+"metro-source-map@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro-source-map@npm:0.83.3"
   dependencies:
-    "@babel/traverse": "npm:^7.20.0"
-    "@babel/types": "npm:^7.20.0"
+    "@babel/traverse": "npm:^7.25.3"
+    "@babel/traverse--for-generate-function-map": "npm:@babel/traverse@^7.25.3"
+    "@babel/types": "npm:^7.25.2"
+    flow-enums-runtime: "npm:^0.0.6"
     invariant: "npm:^2.2.4"
-    metro-symbolicate: "npm:0.76.7"
+    metro-symbolicate: "npm:0.83.3"
     nullthrows: "npm:^1.1.1"
-    ob1: "npm:0.76.7"
+    ob1: "npm:0.83.3"
     source-map: "npm:^0.5.6"
     vlq: "npm:^1.0.0"
-  checksum: 10c0/7135e9ea9905f0944225a99e34d4dada6bd35a034effbb3de1b5a3d929e52f23ab09920660720f31363ca2cc1679753dad26f66030d439048e389e4b5677dd5a
+  checksum: 10c0/47e984bde1f8f06348298771f44b5803657c9cfa387df8ff36a359cc72ae3bc0e9c4ea6141345609b183ac8c63dcc997000d3626006e388c24779abb57c6f82c
   languageName: node
   linkType: hard
 
-"metro-source-map@npm:0.80.6, metro-source-map@npm:^0.80.3":
-  version: 0.80.6
-  resolution: "metro-source-map@npm:0.80.6"
+"metro-source-map@npm:0.83.4, metro-source-map@npm:^0.83.1":
+  version: 0.83.4
+  resolution: "metro-source-map@npm:0.83.4"
   dependencies:
-    "@babel/traverse": "npm:^7.20.0"
-    "@babel/types": "npm:^7.20.0"
+    "@babel/traverse": "npm:^7.29.0"
+    "@babel/types": "npm:^7.29.0"
+    flow-enums-runtime: "npm:^0.0.6"
     invariant: "npm:^2.2.4"
-    metro-symbolicate: "npm:0.80.6"
+    metro-symbolicate: "npm:0.83.4"
     nullthrows: "npm:^1.1.1"
-    ob1: "npm:0.80.6"
+    ob1: "npm:0.83.4"
     source-map: "npm:^0.5.6"
     vlq: "npm:^1.0.0"
-  checksum: 10c0/851ecac99ec22c7ed941222fa7989ca2aee3fd4e66561d26b4facd7ccf9f5b8a84a0a453df3b5b1e8e58af3ffc7c96cd65c4a52526715b2ec080906ffec18f0e
+  checksum: 10c0/105a10654a324de8dc94564e24bd834ce3d4b61dbe6b3a5e1400becfa4ac17670908b944f04dc24ff6f8c05f389d6aa8bdebde04ab59e2a95907f970082a8dcc
   languageName: node
   linkType: hard
 
-"metro-symbolicate@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-symbolicate@npm:0.76.7"
+"metro-symbolicate@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro-symbolicate@npm:0.83.3"
   dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
     invariant: "npm:^2.2.4"
-    metro-source-map: "npm:0.76.7"
+    metro-source-map: "npm:0.83.3"
     nullthrows: "npm:^1.1.1"
     source-map: "npm:^0.5.6"
-    through2: "npm:^2.0.1"
     vlq: "npm:^1.0.0"
   bin:
     metro-symbolicate: src/index.js
-  checksum: 10c0/87dc4b99e39bae640888fcaedf37eefe9d8645db2d2a48900e674c4bce72ee18e789cb8ec47c1eb14a528cb2cefe3c3a6f338917180833e176b4e55e3b621629
+  checksum: 10c0/bd3d234c7581466a9a78f952caa25816666753f6b560fe41502727b3e59931ac65225c9909635dc7c25d4dfaf392631366ef3ec5fa8490413385d60f8d900112
   languageName: node
   linkType: hard
 
-"metro-symbolicate@npm:0.80.6":
-  version: 0.80.6
-  resolution: "metro-symbolicate@npm:0.80.6"
+"metro-symbolicate@npm:0.83.4":
+  version: 0.83.4
+  resolution: "metro-symbolicate@npm:0.83.4"
   dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
     invariant: "npm:^2.2.4"
-    metro-source-map: "npm:0.80.6"
+    metro-source-map: "npm:0.83.4"
     nullthrows: "npm:^1.1.1"
     source-map: "npm:^0.5.6"
-    through2: "npm:^2.0.1"
     vlq: "npm:^1.0.0"
   bin:
     metro-symbolicate: src/index.js
-  checksum: 10c0/35ffacc0519b05cb0ede0e8f20a0d4e8f6d716503475d17d342e9f4adbf03a5aab8d170f34766cd6e5a2134be6b478989a2b84e1870e64f1244c568ce129665e
+  checksum: 10c0/6e8f7856626b5466257b7fe2e6f563e3f52de4ea8de75ef342ab220e3e7362dd945bdf132dfe8fd8f922f6c1c09aef1b9d2fc12be1b755a6936bd81b61edd905
   languageName: node
   linkType: hard
 
-"metro-transform-plugins@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-transform-plugins@npm:0.76.7"
+"metro-transform-plugins@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro-transform-plugins@npm:0.83.3"
   dependencies:
-    "@babel/core": "npm:^7.20.0"
-    "@babel/generator": "npm:^7.20.0"
-    "@babel/template": "npm:^7.0.0"
-    "@babel/traverse": "npm:^7.20.0"
+    "@babel/core": "npm:^7.25.2"
+    "@babel/generator": "npm:^7.25.0"
+    "@babel/template": "npm:^7.25.0"
+    "@babel/traverse": "npm:^7.25.3"
+    flow-enums-runtime: "npm:^0.0.6"
     nullthrows: "npm:^1.1.1"
-  checksum: 10c0/f5973b42de80780bcb5cc488e67a8e5608d028ba2b9a617dc2f9b5d8ec0da303959d7537e646e4bc4ebfce971ecebb3930f8d8ce4731adfa8d1091402e65783f
+  checksum: 10c0/df3c6db6a69d4888e1b6aad40d48ffec0c3c3faa38e89c07633432fc107ef12c47d55598904c91aadfe0751c5bcb7ec191f8a5ee70c18d253201150fc617ca37
   languageName: node
   linkType: hard
 
-"metro-transform-plugins@npm:0.80.6":
-  version: 0.80.6
-  resolution: "metro-transform-plugins@npm:0.80.6"
+"metro-transform-plugins@npm:0.83.4":
+  version: 0.83.4
+  resolution: "metro-transform-plugins@npm:0.83.4"
   dependencies:
-    "@babel/core": "npm:^7.20.0"
-    "@babel/generator": "npm:^7.20.0"
-    "@babel/template": "npm:^7.0.0"
-    "@babel/traverse": "npm:^7.20.0"
+    "@babel/core": "npm:^7.25.2"
+    "@babel/generator": "npm:^7.29.1"
+    "@babel/template": "npm:^7.28.6"
+    "@babel/traverse": "npm:^7.29.0"
+    flow-enums-runtime: "npm:^0.0.6"
     nullthrows: "npm:^1.1.1"
-  checksum: 10c0/60464719b9e25bef7d6bf9667fc8e3c5f9ded67f151cc21a815e475c05fc7ae4b3bc9f7ddbf680890a234f9ba8b418745056ac104bca8a6b41c10e6654228dc3
+  checksum: 10c0/1880699302360b4caba2825aaf5801732dc03e997c5d10b9c1480f32b20c746d4dcc10c2ba9d923d2617f4b9a0e1655ae589f3b4e3d0d78ad20e92e4763bbca8
   languageName: node
   linkType: hard
 
-"metro-transform-worker@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro-transform-worker@npm:0.76.7"
+"metro-transform-worker@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro-transform-worker@npm:0.83.3"
   dependencies:
-    "@babel/core": "npm:^7.20.0"
-    "@babel/generator": "npm:^7.20.0"
-    "@babel/parser": "npm:^7.20.0"
-    "@babel/types": "npm:^7.20.0"
-    babel-preset-fbjs: "npm:^3.4.0"
-    metro: "npm:0.76.7"
-    metro-babel-transformer: "npm:0.76.7"
-    metro-cache: "npm:0.76.7"
-    metro-cache-key: "npm:0.76.7"
-    metro-source-map: "npm:0.76.7"
-    metro-transform-plugins: "npm:0.76.7"
+    "@babel/core": "npm:^7.25.2"
+    "@babel/generator": "npm:^7.25.0"
+    "@babel/parser": "npm:^7.25.3"
+    "@babel/types": "npm:^7.25.2"
+    flow-enums-runtime: "npm:^0.0.6"
+    metro: "npm:0.83.3"
+    metro-babel-transformer: "npm:0.83.3"
+    metro-cache: "npm:0.83.3"
+    metro-cache-key: "npm:0.83.3"
+    metro-minify-terser: "npm:0.83.3"
+    metro-source-map: "npm:0.83.3"
+    metro-transform-plugins: "npm:0.83.3"
     nullthrows: "npm:^1.1.1"
-  checksum: 10c0/19a52abe7e69fd60a57c690d9b9dae8ecc23df198bfa53b6991a1ffd14c31952d1e2b60d4f7fe74237cfbf76dfb74f22acc7d34c9481c7c72961752607258ea7
+  checksum: 10c0/bea0cbcc7d13cd2b97a2159257b3a53b9ecfb15da18ace82ae05bf2d0ac7cc1806c0bd77ed3b8f4c82c9532773fb99f3938e4b1480e2673f5eda69575ee1d7ef
   languageName: node
   linkType: hard
 
-"metro-transform-worker@npm:0.80.6":
-  version: 0.80.6
-  resolution: "metro-transform-worker@npm:0.80.6"
+"metro-transform-worker@npm:0.83.4":
+  version: 0.83.4
+  resolution: "metro-transform-worker@npm:0.83.4"
   dependencies:
-    "@babel/core": "npm:^7.20.0"
-    "@babel/generator": "npm:^7.20.0"
-    "@babel/parser": "npm:^7.20.0"
-    "@babel/types": "npm:^7.20.0"
-    metro: "npm:0.80.6"
-    metro-babel-transformer: "npm:0.80.6"
-    metro-cache: "npm:0.80.6"
-    metro-cache-key: "npm:0.80.6"
-    metro-minify-terser: "npm:0.80.6"
-    metro-source-map: "npm:0.80.6"
-    metro-transform-plugins: "npm:0.80.6"
+    "@babel/core": "npm:^7.25.2"
+    "@babel/generator": "npm:^7.29.1"
+    "@babel/parser": "npm:^7.29.0"
+    "@babel/types": "npm:^7.29.0"
+    flow-enums-runtime: "npm:^0.0.6"
+    metro: "npm:0.83.4"
+    metro-babel-transformer: "npm:0.83.4"
+    metro-cache: "npm:0.83.4"
+    metro-cache-key: "npm:0.83.4"
+    metro-minify-terser: "npm:0.83.4"
+    metro-source-map: "npm:0.83.4"
+    metro-transform-plugins: "npm:0.83.4"
     nullthrows: "npm:^1.1.1"
-  checksum: 10c0/532081e3fb67a03aa8ba3d227eb7f086e403c96614f96c2446467ee0b0887cb062bd046840f25223234300d6f2db7ac5219d17552234a74ad7876043d4b1d633
+  checksum: 10c0/0d7e1eba9cdee63deaf9ad80f853ac93166d866d567e0beda145721adb2d012f0b2171dc68368e10c6d3934ec467fb6ff8c175c8455a76c38fc8042b64782eb7
   languageName: node
   linkType: hard
 
-"metro@npm:0.76.7":
-  version: 0.76.7
-  resolution: "metro@npm:0.76.7"
+"metro@npm:0.83.3":
+  version: 0.83.3
+  resolution: "metro@npm:0.83.3"
   dependencies:
-    "@babel/code-frame": "npm:^7.0.0"
-    "@babel/core": "npm:^7.20.0"
-    "@babel/generator": "npm:^7.20.0"
-    "@babel/parser": "npm:^7.20.0"
-    "@babel/template": "npm:^7.0.0"
-    "@babel/traverse": "npm:^7.20.0"
-    "@babel/types": "npm:^7.20.0"
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/core": "npm:^7.25.2"
+    "@babel/generator": "npm:^7.25.0"
+    "@babel/parser": "npm:^7.25.3"
+    "@babel/template": "npm:^7.25.0"
+    "@babel/traverse": "npm:^7.25.3"
+    "@babel/types": "npm:^7.25.2"
     accepts: "npm:^1.3.7"
-    async: "npm:^3.2.2"
     chalk: "npm:^4.0.0"
     ci-info: "npm:^2.0.0"
     connect: "npm:^3.6.5"
-    debug: "npm:^2.2.0"
-    denodeify: "npm:^1.2.1"
+    debug: "npm:^4.4.0"
     error-stack-parser: "npm:^2.0.6"
+    flow-enums-runtime: "npm:^0.0.6"
     graceful-fs: "npm:^4.2.4"
-    hermes-parser: "npm:0.12.0"
+    hermes-parser: "npm:0.32.0"
     image-size: "npm:^1.0.2"
     invariant: "npm:^2.2.4"
-    jest-worker: "npm:^27.2.0"
+    jest-worker: "npm:^29.7.0"
     jsc-safe-url: "npm:^0.2.2"
     lodash.throttle: "npm:^4.1.1"
-    metro-babel-transformer: "npm:0.76.7"
-    metro-cache: "npm:0.76.7"
-    metro-cache-key: "npm:0.76.7"
-    metro-config: "npm:0.76.7"
-    metro-core: "npm:0.76.7"
-    metro-file-map: "npm:0.76.7"
-    metro-inspector-proxy: "npm:0.76.7"
-    metro-minify-terser: "npm:0.76.7"
-    metro-minify-uglify: "npm:0.76.7"
-    metro-react-native-babel-preset: "npm:0.76.7"
-    metro-resolver: "npm:0.76.7"
-    metro-runtime: "npm:0.76.7"
-    metro-source-map: "npm:0.76.7"
-    metro-symbolicate: "npm:0.76.7"
-    metro-transform-plugins: "npm:0.76.7"
-    metro-transform-worker: "npm:0.76.7"
+    metro-babel-transformer: "npm:0.83.3"
+    metro-cache: "npm:0.83.3"
+    metro-cache-key: "npm:0.83.3"
+    metro-config: "npm:0.83.3"
+    metro-core: "npm:0.83.3"
+    metro-file-map: "npm:0.83.3"
+    metro-resolver: "npm:0.83.3"
+    metro-runtime: "npm:0.83.3"
+    metro-source-map: "npm:0.83.3"
+    metro-symbolicate: "npm:0.83.3"
+    metro-transform-plugins: "npm:0.83.3"
+    metro-transform-worker: "npm:0.83.3"
     mime-types: "npm:^2.1.27"
-    node-fetch: "npm:^2.2.0"
     nullthrows: "npm:^1.1.1"
-    rimraf: "npm:^3.0.2"
     serialize-error: "npm:^2.1.0"
     source-map: "npm:^0.5.6"
-    strip-ansi: "npm:^6.0.0"
     throat: "npm:^5.0.0"
-    ws: "npm:^7.5.1"
+    ws: "npm:^7.5.10"
     yargs: "npm:^17.6.2"
   bin:
     metro: src/cli.js
-  checksum: 10c0/2aebf7c879a8176129822a4af1765056e120d9df20cdcffefa41e58f1cdbc89c607cab57c536f19725e7c490ef90c5dbe7f02e3029de942e9a72d42237023e3d
+  checksum: 10c0/9513c05725c3984ce3b72896c4f7d019ad4fd024a1231b8b84c5c655a0563fc7f26725f28c20c5d3511e3825d64fec3a1e68621f6a6af34d785c5e714ed7da89
   languageName: node
   linkType: hard
 
-"metro@npm:0.80.6, metro@npm:^0.80.3":
-  version: 0.80.6
-  resolution: "metro@npm:0.80.6"
+"metro@npm:0.83.4, metro@npm:^0.83.1":
+  version: 0.83.4
+  resolution: "metro@npm:0.83.4"
   dependencies:
-    "@babel/code-frame": "npm:^7.0.0"
-    "@babel/core": "npm:^7.20.0"
-    "@babel/generator": "npm:^7.20.0"
-    "@babel/parser": "npm:^7.20.0"
-    "@babel/template": "npm:^7.0.0"
-    "@babel/traverse": "npm:^7.20.0"
-    "@babel/types": "npm:^7.20.0"
-    accepts: "npm:^1.3.7"
+    "@babel/code-frame": "npm:^7.29.0"
+    "@babel/core": "npm:^7.25.2"
+    "@babel/generator": "npm:^7.29.1"
+    "@babel/parser": "npm:^7.29.0"
+    "@babel/template": "npm:^7.28.6"
+    "@babel/traverse": "npm:^7.29.0"
+    "@babel/types": "npm:^7.29.0"
+    accepts: "npm:^2.0.0"
     chalk: "npm:^4.0.0"
     ci-info: "npm:^2.0.0"
     connect: "npm:^3.6.5"
-    debug: "npm:^2.2.0"
-    denodeify: "npm:^1.2.1"
+    debug: "npm:^4.4.0"
     error-stack-parser: "npm:^2.0.6"
+    flow-enums-runtime: "npm:^0.0.6"
     graceful-fs: "npm:^4.2.4"
-    hermes-parser: "npm:0.19.1"
+    hermes-parser: "npm:0.33.3"
     image-size: "npm:^1.0.2"
     invariant: "npm:^2.2.4"
-    jest-worker: "npm:^29.6.3"
+    jest-worker: "npm:^29.7.0"
     jsc-safe-url: "npm:^0.2.2"
     lodash.throttle: "npm:^4.1.1"
-    metro-babel-transformer: "npm:0.80.6"
-    metro-cache: "npm:0.80.6"
-    metro-cache-key: "npm:0.80.6"
-    metro-config: "npm:0.80.6"
-    metro-core: "npm:0.80.6"
-    metro-file-map: "npm:0.80.6"
-    metro-resolver: "npm:0.80.6"
-    metro-runtime: "npm:0.80.6"
-    metro-source-map: "npm:0.80.6"
-    metro-symbolicate: "npm:0.80.6"
-    metro-transform-plugins: "npm:0.80.6"
-    metro-transform-worker: "npm:0.80.6"
-    mime-types: "npm:^2.1.27"
-    node-fetch: "npm:^2.2.0"
+    metro-babel-transformer: "npm:0.83.4"
+    metro-cache: "npm:0.83.4"
+    metro-cache-key: "npm:0.83.4"
+    metro-config: "npm:0.83.4"
+    metro-core: "npm:0.83.4"
+    metro-file-map: "npm:0.83.4"
+    metro-resolver: "npm:0.83.4"
+    metro-runtime: "npm:0.83.4"
+    metro-source-map: "npm:0.83.4"
+    metro-symbolicate: "npm:0.83.4"
+    metro-transform-plugins: "npm:0.83.4"
+    metro-transform-worker: "npm:0.83.4"
+    mime-types: "npm:^3.0.1"
     nullthrows: "npm:^1.1.1"
-    rimraf: "npm:^3.0.2"
     serialize-error: "npm:^2.1.0"
     source-map: "npm:^0.5.6"
-    strip-ansi: "npm:^6.0.0"
     throat: "npm:^5.0.0"
-    ws: "npm:^7.5.1"
+    ws: "npm:^7.5.10"
     yargs: "npm:^17.6.2"
   bin:
     metro: src/cli.js
-  checksum: 10c0/eb810658e1b746326a729fbdb3a32873e6b7c6510b12929b34c02ad6fb0e86203b1a198f1a1a97e8eff5bd0b5eaf0e198a3134de4467a6ffa5830972a1f036fa
+  checksum: 10c0/7786b7b6f026534e35b1f43fe4ccbfd6162453c5d479d4292309bc8b7aa111f76ea216b03c1aa31d3be65296338f333c02a809c276b502f6bf83e59a5e94e95d
   languageName: node
   linkType: hard
 
@@ -28248,13 +23049,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"microevent.ts@npm:~0.1.1":
-  version: 0.1.1
-  resolution: "microevent.ts@npm:0.1.1"
-  checksum: 10c0/1f18f23ebebf155d3f480b1414cec7667a477a09ced2c60705b204cfaba82cbecc76169d890b9a675f237cb1a5497ba744ca8619a65802ac6765148a05bb6bf4
-  languageName: node
-  linkType: hard
-
 "micromark-core-commonmark@npm:^2.0.0":
   version: 2.0.2
   resolution: "micromark-core-commonmark@npm:2.0.2"
@@ -28765,27 +23559,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^3.1.10, micromatch@npm:^3.1.4":
-  version: 3.1.10
-  resolution: "micromatch@npm:3.1.10"
-  dependencies:
-    arr-diff: "npm:^4.0.0"
-    array-unique: "npm:^0.3.2"
-    braces: "npm:^2.3.1"
-    define-property: "npm:^2.0.2"
-    extend-shallow: "npm:^3.0.2"
-    extglob: "npm:^2.0.4"
-    fragment-cache: "npm:^0.2.1"
-    kind-of: "npm:^6.0.2"
-    nanomatch: "npm:^1.2.9"
-    object.pick: "npm:^1.3.0"
-    regex-not: "npm:^1.0.0"
-    snapdragon: "npm:^0.8.1"
-    to-regex: "npm:^3.0.2"
-  checksum: 10c0/531a32e7ac92bef60657820202be71b63d0f945c08a69cc4c239c0b19372b751483d464a850a2e3a5ff6cc9060641e43d44c303af104c1a27493d137d8af017f
-  languageName: node
-  linkType: hard
-
 "micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5, micromatch@npm:^4.0.8":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
@@ -28796,18 +23569,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"miller-rabin@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "miller-rabin@npm:4.0.1"
-  dependencies:
-    bn.js: "npm:^4.0.0"
-    brorand: "npm:^1.0.1"
-  bin:
-    miller-rabin: bin/miller-rabin
-  checksum: 10c0/26b2b96f6e49dbcff7faebb78708ed2f5f9ae27ac8cbbf1d7c08f83cf39bed3d418c0c11034dce997da70d135cc0ff6f3a4c15dc452f8e114c11986388a64346
-  languageName: node
-  linkType: hard
-
 "mime-db@npm:1.52.0":
   version: 1.52.0
   resolution: "mime-db@npm:1.52.0"
@@ -28865,15 +23626,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime@npm:^2.4.1, mime@npm:^2.4.4":
-  version: 2.6.0
-  resolution: "mime@npm:2.6.0"
-  bin:
-    mime: cli.js
-  checksum: 10c0/a7f2589900d9c16e3bdf7672d16a6274df903da958c1643c9c45771f0478f3846dcb1097f31eb9178452570271361e2149310931ec705c037210fc69639c8e6c
-  languageName: node
-  linkType: hard
-
 "mimic-fn@npm:^1.0.0":
   version: 1.2.0
   resolution: "mimic-fn@npm:1.2.0"
@@ -28930,20 +23682,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimalistic-assert@npm:^1.0.0, minimalistic-assert@npm:^1.0.1":
+"minimalistic-assert@npm:^1.0.0":
   version: 1.0.1
   resolution: "minimalistic-assert@npm:1.0.1"
   checksum: 10c0/96730e5601cd31457f81a296f521eb56036e6f69133c0b18c13fe941109d53ad23a4204d946a0d638d7f3099482a0cec8c9bb6d642604612ce43ee536be3dddd
   languageName: node
   linkType: hard
 
-"minimalistic-crypto-utils@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "minimalistic-crypto-utils@npm:1.0.1"
-  checksum: 10c0/790ecec8c5c73973a4fbf2c663d911033e8494d5fb0960a4500634766ab05d6107d20af896ca2132e7031741f19888154d44b2408ada0852446705441383e9f8
-  languageName: node
-  linkType: hard
-
 "minimatch@npm:^10.2.4":
   version: 10.2.4
   resolution: "minimatch@npm:10.2.4"
@@ -28964,7 +23709,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.1.3, minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6":
+"minimist@npm:^1.2.0, minimist@npm:^1.2.6":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
   checksum: 10c0/19d3fcdca050087b84c2029841a093691a91259a47def2f18222f41e7645a0b7c44ef4b40e88a1e58a40c84d2ef0ee6047c55594d298146d0eb3f6b737c20ce6
@@ -28980,15 +23725,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass-collect@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "minipass-collect@npm:2.0.1"
-  dependencies:
-    minipass: "npm:^7.0.3"
-  checksum: 10c0/5167e73f62bb74cc5019594709c77e6a742051a647fe9499abf03c71dca75515b7959d67a764bdc4f8b361cf897fbf25e2d9869ee039203ed45240f48b9aa06e
-  languageName: node
-  linkType: hard
-
 "minipass-fetch@npm:^1.3.2":
   version: 1.4.1
   resolution: "minipass-fetch@npm:1.4.1"
@@ -29040,7 +23776,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.3, minipass@npm:^7.0.4, minipass@npm:^7.1.2":
+"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.4, minipass@npm:^7.1.2, minipass@npm:^7.1.3":
   version: 7.1.3
   resolution: "minipass@npm:7.1.3"
   checksum: 10c0/539da88daca16533211ea5a9ee98dc62ff5742f531f54640dd34429e621955e91cc280a91a776026264b7f9f6735947629f920944e9c1558369e8bf22eb33fbb
@@ -29066,34 +23802,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mississippi@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "mississippi@npm:3.0.0"
-  dependencies:
-    concat-stream: "npm:^1.5.0"
-    duplexify: "npm:^3.4.2"
-    end-of-stream: "npm:^1.1.0"
-    flush-write-stream: "npm:^1.0.0"
-    from2: "npm:^2.1.0"
-    parallel-transform: "npm:^1.1.0"
-    pump: "npm:^3.0.0"
-    pumpify: "npm:^1.3.3"
-    stream-each: "npm:^1.1.0"
-    through2: "npm:^2.0.0"
-  checksum: 10c0/97424a331ce1b9f789a0d3fa47d725dad9adfe5e0ead8bc458ba9fb51c4d2630df6b0966ca9dcbb4c90db48737d58126cbf0e3c170697bf41c265606efa91103
-  languageName: node
-  linkType: hard
-
-"mixin-deep@npm:^1.2.0":
-  version: 1.3.2
-  resolution: "mixin-deep@npm:1.3.2"
-  dependencies:
-    for-in: "npm:^1.0.2"
-    is-extendable: "npm:^1.0.1"
-  checksum: 10c0/cb39ffb73c377222391af788b4c83d1a6cecb2d9fceb7015384f8deb46e151a9b030c21ef59a79cb524d4557e3f74c7248ab948a62a6e7e296b42644863d183b
-  languageName: node
-  linkType: hard
-
 "mkdirp-classic@npm:^0.5.2":
   version: 0.5.3
   resolution: "mkdirp-classic@npm:0.5.3"
@@ -29101,7 +23809,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mkdirp@npm:^0.5.1, mkdirp@npm:^0.5.3, mkdirp@npm:~0.5.1":
+"mkdirp@npm:^0.5.1":
   version: 0.5.6
   resolution: "mkdirp@npm:0.5.6"
   dependencies:
@@ -29130,73 +23838,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mobile-app@workspace:apps/mobile-app":
-  version: 0.0.0-use.local
-  resolution: "mobile-app@workspace:apps/mobile-app"
-  dependencies:
-    "@babel/core": "npm:^7.28.0"
-    "@bugsnag/react-native": "npm:^7.18.0"
-    "@coinbase/cds-common": "workspace:^"
-    "@coinbase/cds-icons": "workspace:^"
-    "@coinbase/cds-illustrations": "workspace:^"
-    "@coinbase/cds-mobile": "workspace:^"
-    "@coinbase/cds-mobile-visualization": "workspace:^"
-    "@coinbase/ui-mobile-playground": "workspace:^"
-    "@config-plugins/detox": "npm:^6.0.0"
-    "@expo-google-fonts/inter": "npm:^0.3.0"
-    "@expo-google-fonts/source-code-pro": "npm:^0.3.0"
-    "@expo/config": "npm:~9.0.0"
-    "@expo/config-types": "npm:~51.0.2"
-    "@formatjs/intl-getcanonicallocales": "npm:^2.5.5"
-    "@formatjs/intl-locale": "npm:^4.2.11"
-    "@formatjs/intl-numberformat": "npm:^8.15.4"
-    "@formatjs/intl-pluralrules": "npm:^5.4.4"
-    "@react-native/metro-config": "npm:^0.72.9"
-    "@react-navigation/core": "npm:^6.4.16"
-    "@react-navigation/native": "npm:^6.1.6"
-    "@react-navigation/native-stack": "npm:^6.9.26"
-    "@react-navigation/stack": "npm:^6.3.16"
-    "@shopify/react-native-skia": "npm:1.12.4"
-    "@types/react": "npm:^18.3.12"
-    babel-plugin-transform-inline-environment-variables: "npm:^0.4.4"
-    detox: "npm:^20.14.8"
-    expo: "npm:~51.0.31"
-    expo-application: "npm:~5.9.1"
-    expo-asset: "npm:~10.0.10"
-    expo-build-properties: "npm:~0.12.5"
-    expo-clipboard: "npm:~6.0.3"
-    expo-dev-client: "npm:4.0.27"
-    expo-font: "npm:~12.0.9"
-    expo-gradle-ext-vars: "npm:^0.1.1"
-    expo-linking: "npm:~6.3.1"
-    expo-quick-actions: "npm:2.0.0"
-    expo-splash-screen: "npm:~0.27.6"
-    expo-status-bar: "npm:~1.12.1"
-    expo-system-ui: "npm:~3.0.7"
-    intl: "npm:^1.2.5"
-    jest: "npm:^29.7.0"
-    lottie-react-native: "npm:6.7.0"
-    react: "npm:^18.3.1"
-    react-native: "npm:0.74.5"
-    react-native-bundle-visualizer: "npm:^3.1.3"
-    react-native-gesture-handler: "npm:2.16.2"
-    react-native-inappbrowser-reborn: "npm:3.7.0"
-    react-native-navigation-bar-color: "npm:2.0.2"
-    react-native-reanimated: "npm:3.14.0"
-    react-native-safe-area-context: "npm:4.10.5"
-    react-native-screens: "npm:3.32.0"
-    react-native-svg: "npm:14.1.0"
-    zx: "npm:^8.1.9"
-  languageName: unknown
-  linkType: soft
-
-"moment@npm:^2.19.3":
-  version: 2.29.3
-  resolution: "moment@npm:2.29.3"
-  checksum: 10c0/2395b566a5e9ab88ea75c26ef4c72bc3aec801bfa46904ea237b67e824a7abcb0d52a79dfb83d402772b67d8c8cfe7853ebd864066c39f82bfa195a560c0e4b8
-  languageName: node
-  linkType: hard
-
 "moo-color@npm:^1.0.2":
   version: 1.0.3
   resolution: "moo-color@npm:1.0.3"
@@ -29206,20 +23847,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"move-concurrently@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "move-concurrently@npm:1.0.1"
-  dependencies:
-    aproba: "npm:^1.1.1"
-    copy-concurrently: "npm:^1.0.0"
-    fs-write-stream-atomic: "npm:^1.0.8"
-    mkdirp: "npm:^0.5.1"
-    rimraf: "npm:^2.5.4"
-    run-queue: "npm:^1.0.3"
-  checksum: 10c0/0fe81acf3bbbc322013c2f4ee4a48cf8d180a7d925fb9284c0f1f444e862d7eb0421ee074b68d35357a12f0d5e94a322049dc9da480672331b5b8895743eb66a
-  languageName: node
-  linkType: hard
-
 "mrmime@npm:^1.0.0":
   version: 1.0.0
   resolution: "mrmime@npm:1.0.0"
@@ -29241,13 +23868,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:2.1.1":
-  version: 2.1.1
-  resolution: "ms@npm:2.1.1"
-  checksum: 10c0/056140c631e740369fa21142417aba1bd629ab912334715216c666eb681c8f015c622dd4e38bc1d836b30852b05641331661703af13a0397eb0ca420fc1e75d9
-  languageName: node
-  linkType: hard
-
 "ms@npm:2.1.2":
   version: 2.1.2
   resolution: "ms@npm:2.1.2"
@@ -29262,13 +23882,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"multi-sort-stream@npm:^1.0.3, multi-sort-stream@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "multi-sort-stream@npm:1.0.4"
-  checksum: 10c0/74820fd8f4287798f56f5c0b390d52d0fa0efd46b22a880390c6182c4b2ff6bd608dc90974fe7b0981c9243ae4f857d3389e74ebf6d071d7465056c29772196d
-  languageName: node
-  linkType: hard
-
 "multicast-dns@npm:^7.2.5":
   version: 7.2.5
   resolution: "multicast-dns@npm:7.2.5"
@@ -29294,16 +23907,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"multipipe@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "multipipe@npm:4.0.0"
-  dependencies:
-    duplexer2: "npm:^0.1.2"
-    object-assign: "npm:^4.1.0"
-  checksum: 10c0/60b547f85a3c692fe24c4e15988bdbb6c7985665fd7c4f6228bbf2630f699badeefd8d492bff5b295ea02a284e12917ff21e324a2f660e3d5667bb656a01792d
-  languageName: node
-  linkType: hard
-
 "mute-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "mute-stream@npm:2.0.0"
@@ -29311,17 +23914,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mv@npm:~2":
-  version: 2.1.1
-  resolution: "mv@npm:2.1.1"
-  dependencies:
-    mkdirp: "npm:~0.5.1"
-    ncp: "npm:~2.0.0"
-    rimraf: "npm:~2.4.0"
-  checksum: 10c0/5da59a9f4ec16da0867289b5018c81c25c59b06bb9da717bc7bd0b40363d6653dc88d6da32a9434fd7416bfc3f67184c306ea44d3856ff97f3214cc96960efcd
-  languageName: node
-  linkType: hard
-
 "mz@npm:^2.7.0":
   version: 2.7.0
   resolution: "mz@npm:2.7.0"
@@ -29333,16 +23925,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nan@npm:^2.12.1, nan@npm:^2.14.0":
-  version: 2.16.0
-  resolution: "nan@npm:2.16.0"
-  dependencies:
-    node-gyp: "npm:latest"
-  checksum: 10c0/95204e4ed2970c0411735d866b0a71f30625e9ce598d2f7c2dfc2145dcd4e8e48dda26fda2587657f91e96973044353d300a9a6d259079b342fa4b30548aa8fa
-  languageName: node
-  linkType: hard
-
-"nanoid@npm:^3.1.23, nanoid@npm:^3.3.1, nanoid@npm:^3.3.11, nanoid@npm:^3.3.7":
+"nanoid@npm:^3.1.23, nanoid@npm:^3.3.11, nanoid@npm:^3.3.7":
   version: 3.3.11
   resolution: "nanoid@npm:3.3.11"
   bin:
@@ -29351,25 +23934,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanomatch@npm:^1.2.9":
-  version: 1.2.13
-  resolution: "nanomatch@npm:1.2.13"
-  dependencies:
-    arr-diff: "npm:^4.0.0"
-    array-unique: "npm:^0.3.2"
-    define-property: "npm:^2.0.2"
-    extend-shallow: "npm:^3.0.2"
-    fragment-cache: "npm:^0.2.1"
-    is-windows: "npm:^1.0.2"
-    kind-of: "npm:^6.0.2"
-    object.pick: "npm:^1.3.0"
-    regex-not: "npm:^1.0.0"
-    snapdragon: "npm:^0.8.1"
-    to-regex: "npm:^3.0.1"
-  checksum: 10c0/0f5cefa755ca2e20c86332821995effb24acb79551ddaf51c1b9112628cad234a0d8fd9ac6aa56ad1f8bfad6ff6ae86e851acb960943249d9fa44b091479953a
-  languageName: node
-  linkType: hard
-
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"
@@ -29377,15 +23941,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ncp@npm:~2.0.0":
-  version: 2.0.0
-  resolution: "ncp@npm:2.0.0"
-  bin:
-    ncp: ./bin/ncp
-  checksum: 10c0/d515babf9d3205ab9252e7d640af7c3e1a880317016d41f2fce2e6b9c8f60eb8bb6afde30e8c4f8e1e3fa551465f094433c3f364b25a85d6a28ec52c1ad6e067
-  languageName: node
-  linkType: hard
-
 "neatequal@npm:^1.0.0":
   version: 1.0.0
   resolution: "neatequal@npm:1.0.0"
@@ -29409,20 +23964,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"neo-async@npm:^2.5.0, neo-async@npm:^2.6.0, neo-async@npm:^2.6.1, neo-async@npm:^2.6.2":
+"neo-async@npm:^2.5.0, neo-async@npm:^2.6.2":
   version: 2.6.2
   resolution: "neo-async@npm:2.6.2"
   checksum: 10c0/c2f5a604a54a8ec5438a342e1f356dff4bc33ccccdb6dc668d94fe8e5eccfc9d2c2eea6064b0967a767ba63b33763f51ccf2cd2441b461a7322656c1f06b3f5d
   languageName: node
   linkType: hard
 
-"nested-error-stacks@npm:^2.0.0, nested-error-stacks@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "nested-error-stacks@npm:2.1.0"
-  checksum: 10c0/8d4e8f81a66be0910d766b3a5972117b0a65bade2f18b2dcb414489e73f93d84dd2b88d5cbf3550b7f427c2f2bbfe2e6e2945b228eefe3328b1fde335df220d1
-  languageName: node
-  linkType: hard
-
 "nested-error-stacks@npm:~2.0.1":
   version: 2.0.1
   resolution: "nested-error-stacks@npm:2.0.1"
@@ -29444,15 +23992,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"no-case@npm:^2.2.0, no-case@npm:^2.3.2":
-  version: 2.3.2
-  resolution: "no-case@npm:2.3.2"
-  dependencies:
-    lower-case: "npm:^1.1.1"
-  checksum: 10c0/63f306e83c18efa0bb37f1c23a25baf4ccf5ebaec70b482fa04d4c5bf8bbb8bcc9a8fbcd818af828ab69f2b602153daf81ec26e448b2bda2d704b8d0c7eec8fa
-  languageName: node
-  linkType: hard
-
 "no-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "no-case@npm:3.0.4"
@@ -29463,21 +24002,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nocache@npm:^3.0.1":
-  version: 3.0.4
-  resolution: "nocache@npm:3.0.4"
-  checksum: 10c0/66e5db1206bee44173358c2264ae9742259273e9719535077fe27807441bad58f0deeadf3cec2aa62d4f86ccb8a0e067c9a64b6329684ddc30a57e377ec458ee
-  languageName: node
-  linkType: hard
-
-"node-abort-controller@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "node-abort-controller@npm:3.1.1"
-  checksum: 10c0/f7ad0e7a8e33809d4f3a0d1d65036a711c39e9d23e0319d80ebe076b9a3b4432b4d6b86a7fab65521de3f6872ffed36fc35d1327487c48eb88c517803403eda3
-  languageName: node
-  linkType: hard
-
-"node-dir@npm:^0.1.10, node-dir@npm:^0.1.17":
+"node-dir@npm:^0.1.17":
   version: 0.1.17
   resolution: "node-dir@npm:0.1.17"
   dependencies:
@@ -29512,7 +24037,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-fetch@npm:^2.2.0, node-fetch@npm:^2.6.0, node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.7":
+"node-fetch@npm:^2.6.7":
   version: 2.7.0
   resolution: "node-fetch@npm:2.7.0"
   dependencies:
@@ -29526,7 +24051,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-forge@npm:^1, node-forge@npm:^1.2.1, node-forge@npm:^1.3.1":
+"node-forge@npm:^1, node-forge@npm:^1.3.3":
   version: 1.3.3
   resolution: "node-forge@npm:1.3.3"
   checksum: 10c0/9c6f53b0ebb34865872cf62a35b0aef8fb337e2efc766626c2e3a0040f4c02933bf29a62ba999eb44a2aca73bd512c4eda22705a47b94654b9fb8ed53db9a1db
@@ -29560,48 +24085,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-ipc@npm:9.2.1":
-  version: 9.2.1
-  resolution: "node-ipc@npm:9.2.1"
-  dependencies:
-    event-pubsub: "npm:4.3.0"
-    js-message: "npm:1.0.7"
-    js-queue: "npm:2.0.2"
-  checksum: 10c0/ed6448e2c643a831b9795a52de727658417a2cbedd3a59988b9be7654383982577dc507e0ec13211d10ed90377124366e3869a137b05093a424caf647eba0523
-  languageName: node
-  linkType: hard
-
-"node-libs-browser@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "node-libs-browser@npm:2.2.1"
-  dependencies:
-    assert: "npm:^1.1.1"
-    browserify-zlib: "npm:^0.2.0"
-    buffer: "npm:^4.3.0"
-    console-browserify: "npm:^1.1.0"
-    constants-browserify: "npm:^1.0.0"
-    crypto-browserify: "npm:^3.11.0"
-    domain-browser: "npm:^1.1.1"
-    events: "npm:^3.0.0"
-    https-browserify: "npm:^1.0.0"
-    os-browserify: "npm:^0.3.0"
-    path-browserify: "npm:0.0.1"
-    process: "npm:^0.11.10"
-    punycode: "npm:^1.2.4"
-    querystring-es3: "npm:^0.2.0"
-    readable-stream: "npm:^2.3.3"
-    stream-browserify: "npm:^2.0.1"
-    stream-http: "npm:^2.7.2"
-    string_decoder: "npm:^1.0.0"
-    timers-browserify: "npm:^2.0.4"
-    tty-browserify: "npm:0.0.0"
-    url: "npm:^0.11.0"
-    util: "npm:^0.11.0"
-    vm-browserify: "npm:^1.0.1"
-  checksum: 10c0/0e05321a6396408903ed642231d2bca7dd96492d074c7af161ba06a63c95378bd3de50b4105eccbbc02d93ba3da69f0ff5e624bc2a8c92ca462ceb6a403e7986
-  languageName: node
-  linkType: hard
-
 "node-machine-id@npm:1.1.12":
   version: 1.1.12
   resolution: "node-machine-id@npm:1.1.12"
@@ -29616,20 +24099,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-stream-zip@npm:^1.9.1":
-  version: 1.15.0
-  resolution: "node-stream-zip@npm:1.15.0"
-  checksum: 10c0/429fce95d7e90e846adbe096c61d2ea8d18defc155c0345d25d0f98dd6fc72aeb95039318484a4e0a01dc3814b6d0d1ae0fe91847a29669dff8676ec064078c9
-  languageName: node
-  linkType: hard
-
-"node-version@npm:^1.0.0":
-  version: 1.2.0
-  resolution: "node-version@npm:1.2.0"
-  checksum: 10c0/d249b92b9f15b215544586f30fbe9458e973ac61b942a6c338dc91b1e16be210cdb024b54114543d330180e588dc611aa18263999c987d7bc612c14ee4356908
-  languageName: node
-  linkType: hard
-
 "nopt@npm:^5.0.0":
   version: 5.0.0
   resolution: "nopt@npm:5.0.0"
@@ -29641,7 +24110,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-package-data@npm:^2.3.2, normalize-package-data@npm:^2.3.4, normalize-package-data@npm:^2.5.0":
+"normalize-package-data@npm:^2.3.2, normalize-package-data@npm:^2.5.0":
   version: 2.5.0
   resolution: "normalize-package-data@npm:2.5.0"
   dependencies:
@@ -29665,15 +24134,6 @@ __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: "npm:^1.0.1"
-  checksum: 10c0/db814326ff88057437233361b4c7e9cac7b54815b051b57f2d341ce89b1d8ec8cbd43e7fa95d7652b3b69ea8fcc294b89b8530d556a84d1bdace94229e1e9a8b
-  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"
@@ -29719,18 +24179,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"npm-package-arg@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "npm-package-arg@npm:7.0.0"
-  dependencies:
-    hosted-git-info: "npm:^3.0.2"
-    osenv: "npm:^0.1.5"
-    semver: "npm:^5.6.0"
-    validate-npm-package-name: "npm:^3.0.0"
-  checksum: 10c0/2117c3ee2a9449db98c7d2efe92590867fcf68ab143b94a6ff53dee5a0c3343eab8f08a9f73bd6c15acca32f7635ea8b9a97b770ae1631c896a35ca9372a98c8
-  languageName: node
-  linkType: hard
-
 "npm-run-path@npm:^2.0.0":
   version: 2.0.2
   resolution: "npm-run-path@npm:2.0.2"
@@ -29749,18 +24197,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"npmlog@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "npmlog@npm:5.0.1"
-  dependencies:
-    are-we-there-yet: "npm:^2.0.0"
-    console-control-strings: "npm:^1.1.0"
-    gauge: "npm:^3.0.0"
-    set-blocking: "npm:^2.0.0"
-  checksum: 10c0/489ba519031013001135c463406f55491a17fc7da295c18a04937fe3a4d523fd65e88dd418a28b967ab743d913fdeba1e29838ce0ad8c75557057c481f7d49fa
-  languageName: node
-  linkType: hard
-
 "npmlog@npm:^6.0.0":
   version: 6.0.1
   resolution: "npmlog@npm:6.0.1"
@@ -29808,13 +24244,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"num2fraction@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "num2fraction@npm:1.2.2"
-  checksum: 10c0/3bf17b44af00508a2b0370146629710645c3e3ff3c052893680efe3f4a6ff5c953ce9e54734013b02b35744a49352d54fbc5d8b455fac979047ef17dd8ec74bd
-  languageName: node
-  linkType: hard
-
 "nunjucks@npm:^3.2.3":
   version: 3.2.4
   resolution: "nunjucks@npm:3.2.4"
@@ -29924,38 +24353,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ob1@npm:0.76.7":
-  version: 0.76.7
-  resolution: "ob1@npm:0.76.7"
-  checksum: 10c0/daa70672d0e1442a975c7766edb64e6f94def50d840045f75cc5b130fbb18e9df718893955f09cd39eb85c10d07a917435b1f49ea40816bd7b7548fa88882930
+"ob1@npm:0.83.3":
+  version: 0.83.3
+  resolution: "ob1@npm:0.83.3"
+  dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
+  checksum: 10c0/9231315de39cf0612a01e283c7d7ef31d16618e598de96e44ae1ab3007629296ce1a3d5d02ef60ff22d9fefe33050358c10e7fcba8278861157b89befe13cb3d
   languageName: node
   linkType: hard
 
-"ob1@npm:0.80.6":
-  version: 0.80.6
-  resolution: "ob1@npm:0.80.6"
-  checksum: 10c0/c86e9f1152d3de399dcf7e720be15ab4096a17b5a320e373052e01955c9839ab3db3a9bb194c83610ebc907dce3b7e98dc28f4651a40615c42b17057a81c6285
+"ob1@npm:0.83.4":
+  version: 0.83.4
+  resolution: "ob1@npm:0.83.4"
+  dependencies:
+    flow-enums-runtime: "npm:^0.0.6"
+  checksum: 10c0/be4c5a9426e5ab58cd6bf478fde8b99b5a5b33db058da11632ab1565bca7473cb54c8eb7921e7d0cca285621d839aa414a50364f8f5ea209124b63a286dd7b93
   languageName: node
   linkType: hard
 
-"object-assign@npm:^4, object-assign@npm:^4.0.1, object-assign@npm:^4.1.0, object-assign@npm:^4.1.1":
+"object-assign@npm:^4, object-assign@npm:^4.0.1, object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
   checksum: 10c0/1f4df9945120325d041ccf7b86f31e8bcc14e73d29171e37a7903050e96b81323784ec59f93f102ec635bcf6fa8034ba3ea0a8c7e69fa202b87ae3b6cec5a414
   languageName: node
   linkType: hard
 
-"object-copy@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "object-copy@npm:0.1.0"
-  dependencies:
-    copy-descriptor: "npm:^0.1.0"
-    define-property: "npm:^0.2.5"
-    kind-of: "npm:^3.0.3"
-  checksum: 10c0/79314b05e9d626159a04f1d913f4c4aba9eae8848511cf5f4c8e3b04bb3cc313b65f60357f86462c959a14c2d58380fedf89b6b32ecec237c452a5ef3900a293
-  languageName: node
-  linkType: hard
-
 "object-inspect@npm:^1.13.3, object-inspect@npm:^1.13.4":
   version: 1.13.4
   resolution: "object-inspect@npm:1.13.4"
@@ -29980,15 +24402,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-visit@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "object-visit@npm:1.0.1"
-  dependencies:
-    isobject: "npm:^3.0.0"
-  checksum: 10c0/086b475bda24abd2318d2b187c3e928959b89f5cb5883d6fe5a42d03719b61fc18e765f658de9ac8730e67ba9ff26d61e73d991215948ff9ecefe771e0071029
-  languageName: node
-  linkType: hard
-
 "object.assign@npm:^4.1.0, object.assign@npm:^4.1.4, object.assign@npm:^4.1.7":
   version: 4.1.7
   resolution: "object.assign@npm:4.1.7"
@@ -30003,7 +24416,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.entries@npm:^1.1.0, object.entries@npm:^1.1.9":
+"object.entries@npm:^1.1.9":
   version: 1.1.9
   resolution: "object.entries@npm:1.1.9"
   dependencies:
@@ -30015,7 +24428,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.fromentries@npm:^2.0.0 || ^1.0.0, object.fromentries@npm:^2.0.8":
+"object.fromentries@npm:^2.0.8":
   version: 2.0.8
   resolution: "object.fromentries@npm:2.0.8"
   dependencies:
@@ -30027,17 +24440,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.getownpropertydescriptors@npm:^2.0.3, object.getownpropertydescriptors@npm:^2.1.2":
-  version: 2.1.3
-  resolution: "object.getownpropertydescriptors@npm:2.1.3"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.1.3"
-    es-abstract: "npm:^1.19.1"
-  checksum: 10c0/d10fe2304801e04425717266423cc0037f8162b8a0baa3dc5d3edad07974f8668059fd08bd0556f1abc5ae6155fd5219b48ddc57c6ed8efbf3fb1d98493e1c59
-  languageName: node
-  linkType: hard
-
 "object.groupby@npm:^1.0.3":
   version: 1.0.3
   resolution: "object.groupby@npm:1.0.3"
@@ -30049,16 +24451,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.pick@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "object.pick@npm:1.3.0"
-  dependencies:
-    isobject: "npm:^3.0.1"
-  checksum: 10c0/cd316ec986e49895a28f2df9182de9cdeee57cd2a952c122aacc86344c28624fe002d9affc4f48b5014ec7c033da9942b08821ddb44db8c5bac5b3ec54bdc31e
-  languageName: node
-  linkType: hard
-
-"object.values@npm:^1.1.0, object.values@npm:^1.1.6, object.values@npm:^1.2.0, object.values@npm:^1.2.1":
+"object.values@npm:^1.1.6, object.values@npm:^1.2.0, object.values@npm:^1.2.1":
   version: 1.2.1
   resolution: "object.values@npm:1.2.1"
   dependencies:
@@ -30070,13 +24463,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"objectorarray@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "objectorarray@npm:1.0.5"
-  checksum: 10c0/3d3db66e2052df85617ac31b98f8e51a7a883ebce24123018dacf286712aa513a0a84e82b4a6bef68889d5fc39cf08e630ee78df013023fc5161e1fdf3eaaa5a
-  languageName: node
-  linkType: hard
-
 "obuf@npm:^1.0.0, obuf@npm:^1.1.2":
   version: 1.1.2
   resolution: "obuf@npm:1.1.2"
@@ -30091,7 +24477,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"on-finished@npm:2.4.1, on-finished@npm:^2.4.1":
+"on-finished@npm:2.4.1, on-finished@npm:^2.4.1, on-finished@npm:~2.4.1":
   version: 2.4.1
   resolution: "on-finished@npm:2.4.1"
   dependencies:
@@ -30155,16 +24541,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"open@npm:^6.2.0":
-  version: 6.4.0
-  resolution: "open@npm:6.4.0"
-  dependencies:
-    is-wsl: "npm:^1.1.0"
-  checksum: 10c0/447115632b4f3939fa0d973c33e17f28538fd268fd8257fc49763f7de6e76d29d65585b15998bbd2137337cfb70a92084a0e1b183a466e53a4829f704f295823
-  languageName: node
-  linkType: hard
-
-"open@npm:^7.0.3, open@npm:^7.3.1":
+"open@npm:^7.0.3":
   version: 7.4.2
   resolution: "open@npm:7.4.2"
   dependencies:
@@ -30174,7 +24551,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"open@npm:^8.0.0, open@npm:^8.0.4, open@npm:^8.0.9, open@npm:^8.3.0, open@npm:^8.4.0":
+"open@npm:^8.0.0, open@npm:^8.0.4, open@npm:^8.0.9, open@npm:^8.4.0":
   version: 8.4.2
   resolution: "open@npm:8.4.2"
   dependencies:
@@ -30217,20 +24594,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ora@npm:3.4.0, ora@npm:^3.4.0":
-  version: 3.4.0
-  resolution: "ora@npm:3.4.0"
-  dependencies:
-    chalk: "npm:^2.4.2"
-    cli-cursor: "npm:^2.1.0"
-    cli-spinners: "npm:^2.0.0"
-    log-symbols: "npm:^2.2.0"
-    strip-ansi: "npm:^5.2.0"
-    wcwidth: "npm:^1.0.1"
-  checksum: 10c0/04cb375f222c36a16a95e6c39c473644a99a42fc34d35c37507cb836ea0a71f4d831fcd53198a460869114b2730891d63cc1047304afe5ddb078974d468edfb1
-  languageName: node
-  linkType: hard
-
 "ora@npm:5.3.0":
   version: 5.3.0
   resolution: "ora@npm:5.3.0"
@@ -30247,6 +24610,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ora@npm:^3.4.0":
+  version: 3.4.0
+  resolution: "ora@npm:3.4.0"
+  dependencies:
+    chalk: "npm:^2.4.2"
+    cli-cursor: "npm:^2.1.0"
+    cli-spinners: "npm:^2.0.0"
+    log-symbols: "npm:^2.2.0"
+    strip-ansi: "npm:^5.2.0"
+    wcwidth: "npm:^1.0.1"
+  checksum: 10c0/04cb375f222c36a16a95e6c39c473644a99a42fc34d35c37507cb836ea0a71f4d831fcd53198a460869114b2730891d63cc1047304afe5ddb078974d468edfb1
+  languageName: node
+  linkType: hard
+
 "ora@npm:^5.4.1":
   version: 5.4.1
   resolution: "ora@npm:5.4.1"
@@ -30264,37 +24641,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"os-browserify@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "os-browserify@npm:0.3.0"
-  checksum: 10c0/6ff32cb1efe2bc6930ad0fd4c50e30c38010aee909eba8d65be60af55efd6cbb48f0287e3649b4e3f3a63dce5a667b23c187c4293a75e557f0d5489d735bcf52
-  languageName: node
-  linkType: hard
-
-"os-homedir@npm:^1.0.0, os-homedir@npm:^1.0.1":
+"os-homedir@npm:^1.0.1":
   version: 1.0.2
   resolution: "os-homedir@npm:1.0.2"
   checksum: 10c0/6be4aa67317ee247b8d46142e243fb4ef1d2d65d3067f54bfc5079257a2f4d4d76b2da78cba7af3cb3f56dbb2e4202e0c47f26171d11ca1ed4008d842c90363f
   languageName: node
   linkType: hard
 
-"os-tmpdir@npm:^1.0.0, os-tmpdir@npm:~1.0.2":
-  version: 1.0.2
-  resolution: "os-tmpdir@npm:1.0.2"
-  checksum: 10c0/f438450224f8e2687605a8dd318f0db694b6293c5d835ae509a69e97c8de38b6994645337e5577f5001115470414638978cc49da1cdcc25106dad8738dc69990
-  languageName: node
-  linkType: hard
-
-"osenv@npm:^0.1.5":
-  version: 0.1.5
-  resolution: "osenv@npm:0.1.5"
-  dependencies:
-    os-homedir: "npm:^1.0.0"
-    os-tmpdir: "npm:^1.0.0"
-  checksum: 10c0/b33ed4b77e662f3ee2a04bf4b56cad2107ab069dee982feb9e39ad44feb9aa0cf1016b9ac6e05d0d84c91fa496798fe48dd05a33175d624e51668068b9805302
-  languageName: node
-  linkType: hard
-
 "own-keys@npm:^1.0.1":
   version: 1.0.1
   resolution: "own-keys@npm:1.0.1"
@@ -30306,15 +24659,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-all@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "p-all@npm:2.1.0"
-  dependencies:
-    p-map: "npm:^2.0.0"
-  checksum: 10c0/874eafa2e3f38b258f8beed34549befbc8a52a63818e0981b8beff03f592e1e1f47b8aab2483f844f2745815ffa010def58bf1edbc95614466c55411f02f3049
-  languageName: node
-  linkType: hard
-
 "p-cancelable@npm:^3.0.0":
   version: 3.0.0
   resolution: "p-cancelable@npm:3.0.0"
@@ -30322,24 +24666,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-event@npm:^4.1.0":
-  version: 4.2.0
-  resolution: "p-event@npm:4.2.0"
-  dependencies:
-    p-timeout: "npm:^3.1.0"
-  checksum: 10c0/f1b6a2fb13d47f2a8afc00150da5ece0d28940ce3d8fa562873e091d3337d298e78fee9cb18b768598ff1d11df608b2ae23868309ff6405b864a2451ccd6d25a
-  languageName: node
-  linkType: hard
-
-"p-filter@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "p-filter@npm:2.1.0"
-  dependencies:
-    p-map: "npm:^2.0.0"
-  checksum: 10c0/5ac34b74b3b691c04212d5dd2319ed484f591c557a850a3ffc93a08cb38c4f5540be059c6b10a185773c479ca583a91ea00c7d6c9958c815e6b74d052f356645
-  languageName: node
-  linkType: hard
-
 "p-finally@npm:^1.0.0":
   version: 1.0.0
   resolution: "p-finally@npm:1.0.0"
@@ -30410,22 +24736,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-map@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "p-map@npm:2.1.0"
-  checksum: 10c0/735dae87badd4737a2dd582b6d8f93e49a1b79eabbc9815a4d63a528d5e3523e978e127a21d784cccb637010e32103a40d2aaa3ab23ae60250b1a820ca752043
-  languageName: node
-  linkType: hard
-
-"p-map@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "p-map@npm:3.0.0"
-  dependencies:
-    aggregate-error: "npm:^3.0.0"
-  checksum: 10c0/297930737e52412ad9f5787c52774ad6496fad9a8be5f047e75fd0a3dc61930d8f7a9b2bbe1c4d1404e54324228a4f69721da2538208dadaa4ef4c81773c9f20
-  languageName: node
-  linkType: hard
-
 "p-map@npm:^4.0.0":
   version: 4.0.0
   resolution: "p-map@npm:4.0.0"
@@ -30456,15 +24766,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-timeout@npm:^3.1.0":
-  version: 3.2.0
-  resolution: "p-timeout@npm:3.2.0"
-  dependencies:
-    p-finally: "npm:^1.0.0"
-  checksum: 10c0/524b393711a6ba8e1d48137c5924749f29c93d70b671e6db761afa784726572ca06149c715632da8f70c090073afb2af1c05730303f915604fd38ee207b70a61
-  languageName: node
-  linkType: hard
-
 "p-try@npm:^2.0.0":
   version: 2.2.0
   resolution: "p-try@npm:2.2.0"
@@ -30524,7 +24825,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pako@npm:^1.0.0, pako@npm:~1.0.5":
+"pako@npm:^1.0.0":
   version: 1.0.11
   resolution: "pako@npm:1.0.11"
   checksum: 10c0/86dd99d8b34c3930345b8bbeb5e1cd8a05f608eeb40967b293f72fe469d0e9c88b783a8777e4cc7dc7c91ce54c5e93d88ff4b4f060e6ff18408fd21030d9ffbe
@@ -30538,27 +24839,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parallel-transform@npm:^1.1.0":
-  version: 1.2.0
-  resolution: "parallel-transform@npm:1.2.0"
-  dependencies:
-    cyclist: "npm:^1.0.1"
-    inherits: "npm:^2.0.3"
-    readable-stream: "npm:^2.1.5"
-  checksum: 10c0/ab0e58569e73681ca4b9c9228189bdb6cbea535295fae344cf0d8342fd33a950961914f3c414f81894c1498fb9ad1c079b4625d2b7ceae9e6ab812f22e3bea3f
-  languageName: node
-  linkType: hard
-
-"param-case@npm:^2.1.0":
-  version: 2.1.1
-  resolution: "param-case@npm:2.1.1"
-  dependencies:
-    no-case: "npm:^2.2.0"
-  checksum: 10c0/8ea1b8472fd51d5f50b28d1d754899713805d05f2241e9b8c4acafa2c500b3f47457a3b4932ab75220f14d2c69180bb7338b78a45576e2b4d90da1e6f0285833
-  languageName: node
-  linkType: hard
-
-"param-case@npm:^3.0.3, param-case@npm:^3.0.4":
+"param-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "param-case@npm:3.0.4"
   dependencies:
@@ -30577,19 +24858,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-asn1@npm:^5.0.0, parse-asn1@npm:^5.1.5":
-  version: 5.1.6
-  resolution: "parse-asn1@npm:5.1.6"
-  dependencies:
-    asn1.js: "npm:^5.2.0"
-    browserify-aes: "npm:^1.0.0"
-    evp_bytestokey: "npm:^1.0.0"
-    pbkdf2: "npm:^3.0.3"
-    safe-buffer: "npm:^5.1.1"
-  checksum: 10c0/4ed1d9b9e120c5484d29d67bb90171aac0b73422bc016d6294160aea983275c28a27ab85d862059a36a86a97dd31b7ddd97486802ca9fac67115fe3409e9dcbd
-  languageName: node
-  linkType: hard
-
 "parse-entities@npm:^2.0.0":
   version: 2.0.0
   resolution: "parse-entities@npm:2.0.0"
@@ -30619,15 +24887,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-json@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "parse-json@npm:2.2.0"
-  dependencies:
-    error-ex: "npm:^1.2.0"
-  checksum: 10c0/7a90132aa76016f518a3d5d746a21b3f1ad0f97a68436ed71b6f995b67c7151141f5464eea0c16c59aec9b7756519a0e3007a8f98cf3714632d509ec07736df6
-  languageName: node
-  linkType: hard
-
 "parse-json@npm:^4.0.0":
   version: 4.0.0
   resolution: "parse-json@npm:4.0.0"
@@ -30692,13 +24951,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse5@npm:^6.0.0":
-  version: 6.0.1
-  resolution: "parse5@npm:6.0.1"
-  checksum: 10c0/595821edc094ecbcfb9ddcb46a3e1fe3a718540f8320eff08b8cf6742a5114cce2d46d45f95c26191c11b184dcaf4e2960abcd9c5ed9eb9393ac9a37efcfdecb
-  languageName: node
-  linkType: hard
-
 "parse5@npm:^7.0.0, parse5@npm:^7.1.2":
   version: 7.2.1
   resolution: "parse5@npm:7.2.1"
@@ -30715,16 +24967,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pascal-case@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "pascal-case@npm:2.0.1"
-  dependencies:
-    camel-case: "npm:^3.0.0"
-    upper-case-first: "npm:^1.1.0"
-  checksum: 10c0/84420c1ceeee36eebe7a6975926f50500563f2c664160b952ff78774af85696d06d52a0fbfeb28c063ee37da6c83665d2518a4fefc9c66996226cabb04a1319e
-  languageName: node
-  linkType: hard
-
 "pascal-case@npm:^3.1.2":
   version: 3.1.2
   resolution: "pascal-case@npm:3.1.2"
@@ -30735,30 +24977,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pascalcase@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "pascalcase@npm:0.1.1"
-  checksum: 10c0/48dfe90618e33810bf58211d8f39ad2c0262f19ad6354da1ba563935b5f429f36409a1fb9187c220328f7a4dc5969917f8e3e01ee089b5f1627b02aefe39567b
-  languageName: node
-  linkType: hard
-
-"password-prompt@npm:^1.0.4":
-  version: 1.1.3
-  resolution: "password-prompt@npm:1.1.3"
-  dependencies:
-    ansi-escapes: "npm:^4.3.2"
-    cross-spawn: "npm:^7.0.3"
-  checksum: 10c0/f6c2ec49e8bb91a421ed42809c00f8c1d09ee7ea8454c05a40150ec3c47e67b1f16eea7bceace13451accb7bb85859ee3e8d67e8fa3a85f622ba36ebe681ee51
-  languageName: node
-  linkType: hard
-
-"path-browserify@npm:0.0.1":
-  version: 0.0.1
-  resolution: "path-browserify@npm:0.0.1"
-  checksum: 10c0/3d59710cddeea06509d91935196185900f3d9d29376dff68ff0e146fbd41d0fb304e983d0158f30cabe4dd2ffcc6a7d3d977631994ee984c88e66aed50a1ccd3
-  languageName: node
-  linkType: hard
-
 "path-browserify@npm:^1.0.1":
   version: 1.0.1
   resolution: "path-browserify@npm:1.0.1"
@@ -30766,31 +24984,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-case@npm:^2.1.0":
-  version: 2.1.1
-  resolution: "path-case@npm:2.1.1"
-  dependencies:
-    no-case: "npm:^2.2.0"
-  checksum: 10c0/ea74c24b55cbc2a9d766415e79f53d48a4227cecd0259a00dc4392df6195f68055de164f90c27a3b2056c1977a28a99b2916b66bade0cbf6cf18a8045e76c922
-  languageName: node
-  linkType: hard
-
-"path-dirname@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "path-dirname@npm:1.0.2"
-  checksum: 10c0/71e59be2bada7c91f62b976245fd421b7cb01fde3207fe53a82d8880621ad04fd8b434e628c9cf4e796259fc168a107d77cd56837725267c5b2c58cefe2c4e1b
-  languageName: node
-  linkType: hard
-
-"path-exists@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "path-exists@npm:2.1.0"
-  dependencies:
-    pinkie-promise: "npm:^2.0.0"
-  checksum: 10c0/87352f1601c085d5a6eb202f60e5c016c1b790bd0bc09398af446ed3f5c4510b4531ff99cf8acac2d91868886e792927b4292f768b35a83dce12588fb7cbb46e
-  languageName: node
-  linkType: hard
-
 "path-exists@npm:^3.0.0":
   version: 3.0.0
   resolution: "path-exists@npm:3.0.0"
@@ -30857,7 +25050,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-scurry@npm:^2.0.0":
+"path-scurry@npm:^2.0.0, path-scurry@npm:^2.0.2":
   version: 2.0.2
   resolution: "path-scurry@npm:2.0.2"
   dependencies:
@@ -30904,26 +25097,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-type@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "path-type@npm:1.1.0"
-  dependencies:
-    graceful-fs: "npm:^4.1.2"
-    pify: "npm:^2.0.0"
-    pinkie-promise: "npm:^2.0.0"
-  checksum: 10c0/2b8c348cb52bbc0c0568afa10a0a5d8f6233adfe5ae75feb56064f6aed6324ab74185c61c2545f4e52ca08acdc76005f615da4e127ed6eecb866002cf491f350
-  languageName: node
-  linkType: hard
-
-"path-type@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "path-type@npm:3.0.0"
-  dependencies:
-    pify: "npm:^3.0.0"
-  checksum: 10c0/1332c632f1cac15790ebab8dd729b67ba04fc96f81647496feb1c2975d862d046f41e4b975dbd893048999b2cc90721f72924ad820acc58c78507ba7141a8e56
-  languageName: node
-  linkType: hard
-
 "path-type@npm:^4.0.0":
   version: 4.0.0
   resolution: "path-type@npm:4.0.0"
@@ -30945,19 +25118,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pbkdf2@npm:^3.0.3":
-  version: 3.1.2
-  resolution: "pbkdf2@npm:3.1.2"
-  dependencies:
-    create-hash: "npm:^1.1.2"
-    create-hmac: "npm:^1.1.4"
-    ripemd160: "npm:^2.0.1"
-    safe-buffer: "npm:^5.0.1"
-    sha.js: "npm:^2.4.8"
-  checksum: 10c0/5a30374e87d33fa080a92734d778cf172542cc7e41b96198c4c88763997b62d7850de3fbda5c3111ddf79805ee7c1da7046881c90ac4920b5e324204518b05fd
-  languageName: node
-  linkType: hard
-
 "pend@npm:~1.2.0":
   version: 1.2.0
   resolution: "pend@npm:1.2.0"
@@ -30965,13 +25125,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "picocolors@npm:0.2.1"
-  checksum: 10c0/98a83c77912c80aea0fc518aec184768501bfceafa490714b0f43eda9c52e372b844ce0a591e822bbfe5df16dcf366be7cbdb9534d39cf54a80796340371ee17
-  languageName: node
-  linkType: hard
-
 "picocolors@npm:^1.0.0, picocolors@npm:^1.0.1, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
@@ -30986,7 +25139,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 10c0/26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be
@@ -31007,7 +25160,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pify@npm:^2.0.0, pify@npm:^2.3.0":
+"pify@npm:^2.3.0":
   version: 2.3.0
   resolution: "pify@npm:2.3.0"
   checksum: 10c0/551ff8ab830b1052633f59cb8adc9ae8407a436e06b4a9718bcb27dc5844b83d535c3a8512b388b6062af65a98c49bdc0dd523d8b2617b188f7c8fee457158dc
@@ -31028,22 +25181,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pinkie-promise@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "pinkie-promise@npm:2.0.1"
-  dependencies:
-    pinkie: "npm:^2.0.0"
-  checksum: 10c0/11b5e5ce2b090c573f8fad7b517cbca1bb9a247587306f05ae71aef6f9b2cd2b923c304aa9663c2409cfde27b367286179f1379bc4ec18a3fbf2bb0d473b160a
-  languageName: node
-  linkType: hard
-
-"pinkie@npm:^2.0.0":
-  version: 2.0.4
-  resolution: "pinkie@npm:2.0.4"
-  checksum: 10c0/25228b08b5597da42dc384221aa0ce56ee0fbf32965db12ba838e2a9ca0193c2f0609c45551ee077ccd2060bf109137fdb185b00c6d7e0ed7e35006d20fdcbc6
-  languageName: node
-  linkType: hard
-
 "pirates@npm:^4.0.1, pirates@npm:^4.0.4, pirates@npm:^4.0.6":
   version: 4.0.7
   resolution: "pirates@npm:4.0.7"
@@ -31069,7 +25206,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pkg-dir@npm:4.2.0, pkg-dir@npm:^4.1.0, pkg-dir@npm:^4.2.0":
+"pkg-dir@npm:4.2.0, pkg-dir@npm:^4.2.0":
   version: 4.2.0
   resolution: "pkg-dir@npm:4.2.0"
   dependencies:
@@ -31087,15 +25224,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pkg-dir@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "pkg-dir@npm:5.0.0"
-  dependencies:
-    find-up: "npm:^5.0.0"
-  checksum: 10c0/793a496d685dc55bbbdbbb22d884535c3b29241e48e3e8d37e448113a71b9e42f5481a61fdc672d7322de12fbb2c584dd3a68bf89b18fffce5c48a390f911bc5
-  languageName: node
-  linkType: hard
-
 "pkg-dir@npm:^7.0.0":
   version: 7.0.0
   resolution: "pkg-dir@npm:7.0.0"
@@ -31171,22 +25299,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pnp-webpack-plugin@npm:1.6.4":
-  version: 1.6.4
-  resolution: "pnp-webpack-plugin@npm:1.6.4"
-  dependencies:
-    ts-pnp: "npm:^1.1.6"
-  checksum: 10c0/6cedab8a9cd129b9f58408023f80cad528e361685f50c2149da7ad8fb79bd2043d3250c68b8723aa43ecdb913931edf04ecaa4d7afe719d0e151055d41779599
-  languageName: node
-  linkType: hard
-
-"posix-character-classes@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "posix-character-classes@npm:0.1.1"
-  checksum: 10c0/cce88011548a973b4af58361cd8f5f7b5a6faff8eef0901565802f067bcabf82597e920d4c97c22068464be3cbc6447af589f6cc8a7d813ea7165be60a0395bc
-  languageName: node
-  linkType: hard
-
 "possible-typed-array-names@npm:^1.0.0":
   version: 1.0.0
   resolution: "possible-typed-array-names@npm:1.0.0"
@@ -31431,15 +25543,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-flexbugs-fixes@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "postcss-flexbugs-fixes@npm:4.2.1"
-  dependencies:
-    postcss: "npm:^7.0.26"
-  checksum: 10c0/57d2894dadd5762ae243792ca45806281ca9c32a9270519f2fd5d95cf1445590df260997b3d9ff937b9e1a551644799881c7f337352dde4e453805687c1ebee8
-  languageName: node
-  linkType: hard
-
 "postcss-focus-visible@npm:^10.0.1":
   version: 10.0.1
   resolution: "postcss-focus-visible@npm:10.0.1"
@@ -31525,22 +25628,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-loader@npm:^4.2.0":
-  version: 4.3.0
-  resolution: "postcss-loader@npm:4.3.0"
-  dependencies:
-    cosmiconfig: "npm:^7.0.0"
-    klona: "npm:^2.0.4"
-    loader-utils: "npm:^2.0.0"
-    schema-utils: "npm:^3.0.0"
-    semver: "npm:^7.3.4"
-  peerDependencies:
-    postcss: ^7.0.0 || ^8.0.1
-    webpack: ^4.0.0 || ^5.0.0
-  checksum: 10c0/3405584e571ec4d66d7c2b665a2a4823eaa7208433fd40eb6b669ac441f23398bc81fc18fe631c7d7805a303ad31f284a5066c4097dd082c1faba7edf13db8aa
-  languageName: node
-  linkType: hard
-
 "postcss-loader@npm:^7.3.3":
   version: 7.3.4
   resolution: "postcss-loader@npm:7.3.4"
@@ -31659,15 +25746,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-modules-extract-imports@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "postcss-modules-extract-imports@npm:2.0.0"
-  dependencies:
-    postcss: "npm:^7.0.5"
-  checksum: 10c0/170e8d680c267c536563e76979f04dc80e6dfa026d49f1e9ead2d0981a74b0c64d2894a8fd691e50568f12144553cf0b948ab43263872b3f696dcb34b683e238
-  languageName: node
-  linkType: hard
-
 "postcss-modules-extract-imports@npm:^3.1.0":
   version: 3.1.0
   resolution: "postcss-modules-extract-imports@npm:3.1.0"
@@ -31677,18 +25755,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-modules-local-by-default@npm:^3.0.2":
-  version: 3.0.3
-  resolution: "postcss-modules-local-by-default@npm:3.0.3"
-  dependencies:
-    icss-utils: "npm:^4.1.1"
-    postcss: "npm:^7.0.32"
-    postcss-selector-parser: "npm:^6.0.2"
-    postcss-value-parser: "npm:^4.1.0"
-  checksum: 10c0/007fd7286b4e120edfdf1a41f2006e9c8cb49e1613a4e3f0fdc184ad14273a1bbfc39ced3bc7cbad9af64bf67056e8ea0dcfda16d3057562343a48ee9ec2ccac
-  languageName: node
-  linkType: hard
-
 "postcss-modules-local-by-default@npm:^4.0.5":
   version: 4.0.5
   resolution: "postcss-modules-local-by-default@npm:4.0.5"
@@ -31702,16 +25768,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-modules-scope@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "postcss-modules-scope@npm:2.2.0"
-  dependencies:
-    postcss: "npm:^7.0.6"
-    postcss-selector-parser: "npm:^6.0.0"
-  checksum: 10c0/60b4438d43e6629d72b31a5122037e5574f8a6a4629038cd74afc4e5197cebc55b76c765b6bfcc2421bc740d19c3c97e68918e560a0fe88047c2131d0966df3c
-  languageName: node
-  linkType: hard
-
 "postcss-modules-scope@npm:^3.2.0":
   version: 3.2.0
   resolution: "postcss-modules-scope@npm:3.2.0"
@@ -31723,16 +25779,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-modules-values@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "postcss-modules-values@npm:3.0.0"
-  dependencies:
-    icss-utils: "npm:^4.0.0"
-    postcss: "npm:^7.0.6"
-  checksum: 10c0/f97b4669446810aa9c4c22538e24faee203e8462f1c7d38923c57140903bc170451dfec5974e480c2c367690735042cbfec187d209d0044d99f829f29ad0e610
-  languageName: node
-  linkType: hard
-
 "postcss-modules-values@npm:^4.0.0":
   version: 4.0.0
   resolution: "postcss-modules-values@npm:4.0.0"
@@ -32084,7 +26130,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.0, postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.16, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.6":
+"postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.16, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.6":
   version: 6.1.2
   resolution: "postcss-selector-parser@npm:6.1.2"
   dependencies:
@@ -32176,17 +26222,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^7.0.14, postcss@npm:^7.0.26, postcss@npm:^7.0.32, postcss@npm:^7.0.36, postcss@npm:^7.0.5, postcss@npm:^7.0.6":
-  version: 7.0.39
-  resolution: "postcss@npm:7.0.39"
-  dependencies:
-    picocolors: "npm:^0.2.1"
-    source-map: "npm:^0.6.1"
-  checksum: 10c0/fd27ee808c0d02407582cccfad4729033e2b439d56cd45534fb39aaad308bb35a290f3b7db5f2394980e8756f9381b458a625618550808c5ff01a125f51efc53
-  languageName: node
-  linkType: hard
-
-"postcss@npm:^8.4.16, postcss@npm:^8.4.19, postcss@npm:^8.4.21, postcss@npm:^8.4.24, postcss@npm:^8.4.26, postcss@npm:^8.4.28, postcss@npm:^8.4.33, postcss@npm:^8.4.38, postcss@npm:^8.4.47, postcss@npm:^8.5.6, postcss@npm:^8.5.8":
+"postcss@npm:^8.4.16, postcss@npm:^8.4.19, postcss@npm:^8.4.21, postcss@npm:^8.4.24, postcss@npm:^8.4.26, postcss@npm:^8.4.28, postcss@npm:^8.4.33, postcss@npm:^8.4.38, postcss@npm:^8.4.47, postcss@npm:^8.5.6":
   version: 8.5.8
   resolution: "postcss@npm:8.5.8"
   dependencies:
@@ -32231,15 +26267,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:>=2.2.1 <=2.3.0":
-  version: 2.3.0
-  resolution: "prettier@npm:2.3.0"
-  bin:
-    prettier: ./bin-prettier.js
-  checksum: 10c0/b9f434af2f25a37aad0b133894827e980885eb8bf317444c9dde0401ed2c7f463f9996d691f5ee5a0a4450ab46a894cd6557516b561e2522821522ce1f4c6668
-  languageName: node
-  linkType: hard
-
 "prettier@npm:^2.8.8":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
@@ -32249,7 +26276,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^3.1.1, prettier@npm:^3.6.2":
+"prettier@npm:^3.6.2":
   version: 3.6.2
   resolution: "prettier@npm:3.6.2"
   bin:
@@ -32258,23 +26285,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-bytes@npm:5.6.0":
+"pretty-bytes@npm:^5.6.0":
   version: 5.6.0
   resolution: "pretty-bytes@npm:5.6.0"
   checksum: 10c0/f69f494dcc1adda98dbe0e4a36d301e8be8ff99bfde7a637b2ee2820e7cb583b0fc0f3a63b0e3752c01501185a5cf38602c7be60da41bdf84ef5b70e89c370f3
   languageName: node
   linkType: hard
 
-"pretty-error@npm:^2.1.1":
-  version: 2.1.2
-  resolution: "pretty-error@npm:2.1.2"
-  dependencies:
-    lodash: "npm:^4.17.20"
-    renderkid: "npm:^2.0.4"
-  checksum: 10c0/779743faf707308e5d07c53c3ec94596c0cb631c92104a2721dd5d021ade39505a9151c5a5f838dfd26b02a06752c410eb6de1769c4fe327c90bd083f61a1fa1
-  languageName: node
-  linkType: hard
-
 "pretty-error@npm:^4.0.0":
   version: 4.0.0
   resolution: "pretty-error@npm:4.0.0"
@@ -32285,19 +26302,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^24":
-  version: 24.9.0
-  resolution: "pretty-format@npm:24.9.0"
+"pretty-format@npm:30.2.0, pretty-format@npm:^30.0.5":
+  version: 30.2.0
+  resolution: "pretty-format@npm:30.2.0"
   dependencies:
-    "@jest/types": "npm:^24.9.0"
-    ansi-regex: "npm:^4.0.0"
-    ansi-styles: "npm:^3.2.0"
-    react-is: "npm:^16.8.4"
-  checksum: 10c0/1e75c0ae55dab8953a5fe8025aab0a6d6090773561b672a7a00108f6cfb7dace198b27143392382dff913cb71f6fbc10ed23beaddf2117c380588a3b575825f0
+    "@jest/schemas": "npm:30.0.5"
+    ansi-styles: "npm:^5.2.0"
+    react-is: "npm:^18.3.1"
+  checksum: 10c0/8fdacfd281aa98124e5df80b2c17223fdcb84433876422b54863a6849381b3059eb42b9806d92d2853826bcb966bcb98d499bea5b1e912d869a3c3107fd38d35
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^26.5.2, pretty-format@npm:^26.6.2":
+"pretty-format@npm:^26.6.2":
   version: 26.6.2
   resolution: "pretty-format@npm:26.6.2"
   dependencies:
@@ -32332,7 +26348,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^29.0.0, pretty-format@npm:^29.0.3, pretty-format@npm:^29.2.1, pretty-format@npm:^29.7.0":
+"pretty-format@npm:^29.0.0, pretty-format@npm:^29.2.1, pretty-format@npm:^29.7.0":
   version: 29.7.0
   resolution: "pretty-format@npm:29.7.0"
   dependencies:
@@ -32404,7 +26420,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"progress@npm:2.0.3":
+"progress@npm:2.0.3, progress@npm:^2.0.3":
   version: 2.0.3
   resolution: "progress@npm:2.0.3"
   checksum: 10c0/1697e07cb1068055dbe9fe858d242368ff5d2073639e652b75a7eb1f2a1a8d4afd404d719de23c7b48481a6aa0040686310e2dac2f53d776daa2176d3f96369c
@@ -32418,13 +26434,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"promise-polyfill@npm:^6.0.1":
-  version: 6.1.0
-  resolution: "promise-polyfill@npm:6.1.0"
-  checksum: 10c0/8fa1172b1b50efbc43f5eb8772e6a526ef70b9856f3d49172c8bea0ccee4413b29eb5d7f8b44015fe43b2d77a9db16d4c49d337b48b218661f92e5ab1c1fc672
-  languageName: node
-  linkType: hard
-
 "promise-retry@npm:^2.0.1":
   version: 2.0.1
   resolution: "promise-retry@npm:2.0.1"
@@ -32445,40 +26454,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"promise.allsettled@npm:^1.0.0":
-  version: 1.0.5
-  resolution: "promise.allsettled@npm:1.0.5"
-  dependencies:
-    array.prototype.map: "npm:^1.0.4"
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.1.3"
-    es-abstract: "npm:^1.19.1"
-    get-intrinsic: "npm:^1.1.1"
-    iterate-value: "npm:^1.0.2"
-  checksum: 10c0/6cc51174a075b4f63e1a0e2a4526efe3f8ccba25c81ea916bd8398c2208a43b5bec6a64ca95e59fd01d1c72a15f0bc17be496e43a4c2fdcaf200100951b72fd6
-  languageName: node
-  linkType: hard
-
-"promise.prototype.finally@npm:^3.1.0":
-  version: 3.1.3
-  resolution: "promise.prototype.finally@npm:3.1.3"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.1.3"
-    es-abstract: "npm:^1.19.1"
-  checksum: 10c0/1d90addb68d13a2f7aa3f35e5892548928d2c9e11074e3e33dd1d58885a357a306462fe957ce2fc9acf46b3a6dd09389daa18085257c1734dec3c128c3d09bd2
-  languageName: node
-  linkType: hard
-
-"promise@npm:^7.1.1":
-  version: 7.3.1
-  resolution: "promise@npm:7.3.1"
-  dependencies:
-    asap: "npm:~2.0.3"
-  checksum: 10c0/742e5c0cc646af1f0746963b8776299701ad561ce2c70b49365d62c8db8ea3681b0a1bf0d4e2fe07910bf72f02d39e51e8e73dc8d7503c3501206ac908be107f
-  languageName: node
-  linkType: hard
-
 "promise@npm:^8.3.0":
   version: 8.3.0
   resolution: "promise@npm:8.3.0"
@@ -32498,7 +26473,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -32509,26 +26484,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"proper-lockfile@npm:^3.0.2":
-  version: 3.2.0
-  resolution: "proper-lockfile@npm:3.2.0"
-  dependencies:
-    graceful-fs: "npm:^4.1.11"
-    retry: "npm:^0.12.0"
-    signal-exit: "npm:^3.0.2"
-  checksum: 10c0/b3a0bbf87f1b842ab57d91bee2e8c73d6cb2e90558aad259e83561cf5467f20885a1eb127343ecd9db214c78aaa196867ef8edb76e3681dc07ee43a489fd53bd
-  languageName: node
-  linkType: hard
-
-"property-information@npm:^5.0.0, property-information@npm:^5.3.0":
-  version: 5.6.0
-  resolution: "property-information@npm:5.6.0"
-  dependencies:
-    xtend: "npm:^4.0.0"
-  checksum: 10c0/d54b77c31dc13bb6819559080b2c67d37d94be7dc271f404f139a16a57aa96fcc0b3ad806d4a5baef9e031744853e4afe3df2e37275aacb1f78079bbb652c5af
-  languageName: node
-  linkType: hard
-
 "property-information@npm:^6.0.0":
   version: 6.5.0
   resolution: "property-information@npm:6.5.0"
@@ -32567,13 +26522,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pseudomap@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "pseudomap@npm:1.0.2"
-  checksum: 10c0/5a91ce114c64ed3a6a553aa7d2943868811377388bb31447f9d8028271bae9b05b340fe0b6961a64e45b9c72946aeb0a4ab635e8f7cb3715ffd0ff2beeb6a679
-  languageName: node
-  linkType: hard
-
 "psl@npm:^1.1.33":
   version: 1.9.0
   resolution: "psl@npm:1.9.0"
@@ -32581,30 +26529,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"public-encrypt@npm:^4.0.0":
-  version: 4.0.3
-  resolution: "public-encrypt@npm:4.0.3"
-  dependencies:
-    bn.js: "npm:^4.1.0"
-    browserify-rsa: "npm:^4.0.0"
-    create-hash: "npm:^1.1.0"
-    parse-asn1: "npm:^5.0.0"
-    randombytes: "npm:^2.0.1"
-    safe-buffer: "npm:^5.1.2"
-  checksum: 10c0/6c2cc19fbb554449e47f2175065d6b32f828f9b3badbee4c76585ac28ae8641aafb9bb107afc430c33c5edd6b05dbe318df4f7d6d7712b1093407b11c4280700
-  languageName: node
-  linkType: hard
-
-"pump@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "pump@npm:2.0.1"
-  dependencies:
-    end-of-stream: "npm:^1.1.0"
-    once: "npm:^1.3.1"
-  checksum: 10c0/f1fe8960f44d145f8617ea4c67de05392da4557052980314c8f85081aee26953bdcab64afad58a2b1df0e8ff7203e3710e848cbe81a01027978edc6e264db355
-  languageName: node
-  linkType: hard
-
 "pump@npm:^3.0.0":
   version: 3.0.0
   resolution: "pump@npm:3.0.0"
@@ -32615,31 +26539,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pumpify@npm:^1.3.3":
-  version: 1.5.1
-  resolution: "pumpify@npm:1.5.1"
-  dependencies:
-    duplexify: "npm:^3.6.0"
-    inherits: "npm:^2.0.3"
-    pump: "npm:^2.0.0"
-  checksum: 10c0/0bcabf9e3dbf2d0cc1f9b84ac80d3c75386111caf8963bfd98817a1e2192000ac0ccc804ca6ccd5b2b8430fdb71347b20fb2f014fe3d41adbacb1b502a841c45
-  languageName: node
-  linkType: hard
-
-"punycode@npm:1.3.2":
-  version: 1.3.2
-  resolution: "punycode@npm:1.3.2"
-  checksum: 10c0/281fd20eaf4704f79d80cb0dc65065bf6452ee67989b3e8941aed6360a5a9a8a01d3e2ed71d0bde3cd74fb5a5dd9db4160bed5a8c20bed4b6764c24ce4c7d2d2
-  languageName: node
-  linkType: hard
-
-"punycode@npm:^1.2.4":
-  version: 1.4.1
-  resolution: "punycode@npm:1.4.1"
-  checksum: 10c0/354b743320518aef36f77013be6e15da4db24c2b4f62c5f1eb0529a6ed02fbaf1cb52925785f6ab85a962f2b590d9cd5ad730b70da72b5f180e2556b8bd3ca08
-  languageName: node
-  linkType: hard
-
 "punycode@npm:^2.1.0, punycode@npm:^2.1.1, punycode@npm:^2.3.1":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
@@ -32722,27 +26621,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"querystring-es3@npm:^0.2.0":
-  version: 0.2.1
-  resolution: "querystring-es3@npm:0.2.1"
-  checksum: 10c0/476938c1adb45c141f024fccd2ffd919a3746e79ed444d00e670aad68532977b793889648980e7ca7ff5ffc7bfece623118d0fbadcaf217495eeb7059ae51580
-  languageName: node
-  linkType: hard
-
-"querystring@npm:0.2.0":
-  version: 0.2.0
-  resolution: "querystring@npm:0.2.0"
-  checksum: 10c0/2036c9424beaacd3978bac9e4ba514331cc73163bea7bf3ad7e2c7355e55501938ec195312c607753f9c6e70b1bf9dfcda38db6241bd299c034e27ac639d64ed
-  languageName: node
-  linkType: hard
-
-"querystring@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "querystring@npm:0.2.1"
-  checksum: 10c0/6841b32bec4f16ffe7f5b5e4373b47ad451f079cde3a7f45e63e550f0ecfd8f8189ef81fb50079413b3fc1c59b06146e4c98192cb74ed7981aca72090466cd94
-  languageName: node
-  linkType: hard
-
 "querystringify@npm:^2.1.1":
   version: 2.2.0
   resolution: "querystringify@npm:2.2.0"
@@ -32780,14 +26658,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ramda@npm:^0.21.0":
-  version: 0.21.0
-  resolution: "ramda@npm:0.21.0"
-  checksum: 10c0/a5d28ef8f09f7fd024b2a92477f5356e6323c26be29992c87139757e39b20f9006b6a4c69002b952b2ddb88d983823b26ed68020257660617e3a395b7ea2d6da
-  languageName: node
-  linkType: hard
-
-"randombytes@npm:^2.0.0, randombytes@npm:^2.0.1, randombytes@npm:^2.0.5, randombytes@npm:^2.1.0":
+"randombytes@npm:^2.1.0":
   version: 2.1.0
   resolution: "randombytes@npm:2.1.0"
   dependencies:
@@ -32796,16 +26667,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"randomfill@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "randomfill@npm:1.0.4"
-  dependencies:
-    randombytes: "npm:^2.0.5"
-    safe-buffer: "npm:^5.1.0"
-  checksum: 10c0/11aeed35515872e8f8a2edec306734e6b74c39c46653607f03c68385ab8030e2adcc4215f76b5e4598e028c4750d820afd5c65202527d831d2a5f207fe2bc87c
-  languageName: node
-  linkType: hard
-
 "range-parser@npm:1.2.0":
   version: 1.2.0
   resolution: "range-parser@npm:1.2.0"
@@ -32844,18 +26705,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"raw-loader@npm:^4.0.2":
-  version: 4.0.2
-  resolution: "raw-loader@npm:4.0.2"
-  dependencies:
-    loader-utils: "npm:^2.0.0"
-    schema-utils: "npm:^3.0.0"
-  peerDependencies:
-    webpack: ^4.0.0 || ^5.0.0
-  checksum: 10c0/981ebe65e1cee7230300d21ba6dcd8bd23ea81ef4ad2b167c0f62d93deba347f27921d330be848634baab3831cf9f38900af6082d6416c2e937fe612fa6a74ff
-  languageName: node
-  linkType: hard
-
 "rc@npm:1.2.8, rc@npm:~1.2.7":
   version: 1.2.8
   resolution: "rc@npm:1.2.8"
@@ -32923,13 +26772,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-devtools-core@npm:^5.0.0":
-  version: 5.3.2
-  resolution: "react-devtools-core@npm:5.3.2"
+"react-devtools-core@npm:^6.1.5":
+  version: 6.1.5
+  resolution: "react-devtools-core@npm:6.1.5"
   dependencies:
     shell-quote: "npm:^1.6.1"
     ws: "npm:^7"
-  checksum: 10c0/7165544ca5890af62e875eeda3f915e054dc734ad74f77d6490de32ba4fef6c1d30647bbb0643f769dd988913e0edc2bf2b1d6c2679e910150929a6312479cf3
+  checksum: 10c0/7ef95213d06ad4b294f5dca73736641e2d8ff46861d3deacdc56a143b27de60ac6310898a52c7efd9fbd1bdef20c09305d05be80e6beb560f0f975aad6afbc5e
   languageName: node
   linkType: hard
 
@@ -32942,26 +26791,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-docgen@npm:^5.0.0":
-  version: 5.4.0
-  resolution: "react-docgen@npm:5.4.0"
-  dependencies:
-    "@babel/core": "npm:^7.7.5"
-    "@babel/generator": "npm:^7.12.11"
-    "@babel/runtime": "npm:^7.7.6"
-    ast-types: "npm:^0.14.2"
-    commander: "npm:^2.19.0"
-    doctrine: "npm:^3.0.0"
-    estree-to-babel: "npm:^3.1.0"
-    neo-async: "npm:^2.6.1"
-    node-dir: "npm:^0.1.10"
-    strip-indent: "npm:^3.0.0"
-  bin:
-    react-docgen: bin/react-docgen.js
-  checksum: 10c0/9163705247736ca0ea2a0d18544b86801e47c4cac82e2d309c39b82bc9caa5e8a0b3f98fa3129cc1bb7fc50288993a12d719fa10834c5f7b2f2939d5b5e93611
-  languageName: node
-  linkType: hard
-
 "react-docgen@npm:^8.0.0":
   version: 8.0.1
   resolution: "react-docgen@npm:8.0.1"
@@ -32980,40 +26809,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "react-dom@npm:18.3.1"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-    scheduler: "npm:^0.23.2"
-  peerDependencies:
-    react: ^18.3.1
-  checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85
-  languageName: node
-  linkType: hard
-
-"react-element-to-jsx-string@npm:^14.3.4":
-  version: 14.3.4
-  resolution: "react-element-to-jsx-string@npm:14.3.4"
+"react-dom@npm:19.1.2":
+  version: 19.1.2
+  resolution: "react-dom@npm:19.1.2"
   dependencies:
-    "@base2/pretty-print-object": "npm:1.0.1"
-    is-plain-object: "npm:5.0.0"
-    react-is: "npm:17.0.2"
+    scheduler: "npm:^0.26.0"
   peerDependencies:
-    react: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1
-    react-dom: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1
-  checksum: 10c0/4ead664b2e26e76af57c9ce2f2a46e79fda1d3a408afb5f34d03357d195b7f41a1a86bb9286b6d6ba76c9c2611fe56bc038665cf27fdb56f571d235ddfce9ffb
+    react: ^19.1.2
+  checksum: 10c0/67d5f574eecd1f7a89df3c94936122d4df361d3e78ea19d5879c560439ef05f154af9b9281c1f5c92f79d13c39364bfa60136916d00bdbbccd019b8b3471de10
   languageName: node
   linkType: hard
 
-"react-error-boundary@npm:^3.1.0":
-  version: 3.1.4
-  resolution: "react-error-boundary@npm:3.1.4"
+"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
+  version: 19.2.4
+  resolution: "react-dom@npm:19.2.4"
   dependencies:
-    "@babel/runtime": "npm:^7.12.5"
+    scheduler: "npm:^0.27.0"
   peerDependencies:
-    react: ">=16.13.1"
-  checksum: 10c0/f977ca61823e43de2381d53dd7aa8b4d79ff6a984c9afdc88dc44f9973b99de7fd382d2f0f91f2688e24bb987c0185bf45d0b004f22afaaab0f990a830253bfb
+    react: ^19.2.4
+  checksum: 10c0/f0c63f1794dedb154136d4d0f59af00b41907f4859571c155940296808f4b94bf9c0c20633db75b5b2112ec13d8d7dd4f9bf57362ed48782f317b11d05a44f35
   languageName: node
   linkType: hard
 
@@ -33053,24 +26867,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:17.0.2, react-is@npm:^17.0.1, react-is@npm:^17.0.2":
+"react-is@npm:19.1.2":
+  version: 19.1.2
+  resolution: "react-is@npm:19.1.2"
+  checksum: 10c0/bbda0033f090cf9a25e7a48384f119b26e90d04087b8340bb59dd57b29e9f975f15c315cce6d2822f27c66d3626efcee8a9f12bf22d954961d14deb80289861c
+  languageName: node
+  linkType: hard
+
+"react-is@npm:^16.13.0, react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0":
+  version: 16.13.1
+  resolution: "react-is@npm:16.13.1"
+  checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
+  languageName: node
+  linkType: hard
+
+"react-is@npm:^17.0.1":
   version: 17.0.2
   resolution: "react-is@npm:17.0.2"
   checksum: 10c0/2bdb6b93fbb1820b024b496042cce405c57e2f85e777c9aabd55f9b26d145408f9f74f5934676ffdc46f3dcff656d78413a6e43968e7b3f92eea35b3052e9053
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0, react-is@npm:^18.3.1":
+"react-is@npm:^18.0.0, react-is@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-is@npm:18.3.1"
   checksum: 10c0/f2f1e60010c683479e74c63f96b09fb41603527cd131a9959e2aee1e5a8b0caf270b365e5ca77d4a6b18aae659b60a86150bb3979073528877029b35aecd2072
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.0, react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0, react-is@npm:^16.8.4":
-  version: 16.13.1
-  resolution: "react-is@npm:16.13.1"
-  checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
+"react-is@npm:^19.1.2":
+  version: 19.2.4
+  resolution: "react-is@npm:19.2.4"
+  checksum: 10c0/477a7cfc900f24194606e315fa353856a3a13487ea8eca841678817cad4daef64339ea0d1e84e58459fc75dbe0d9ba00bb0cc626db3d07e0cf31edc64cb4fa37
   languageName: node
   linkType: hard
 
@@ -33120,64 +26948,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-accessibility-engine@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "react-native-accessibility-engine@npm:3.2.0"
-  dependencies:
-    lodash.groupby: "npm:^4.6.0"
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-    react-test-renderer: "*"
-  checksum: 10c0/289a404a6ef7cfeb70fd71baefa063b4d1ad0c23dd8a1be59aaeab7e8e1f90b1f6a90bf5bb2f16111123830e8990f6161bfd67f33b9907cf3bfef5787962a712
-  languageName: node
-  linkType: hard
-
-"react-native-bundle-visualizer@npm:^3.1.3":
-  version: 3.1.3
-  resolution: "react-native-bundle-visualizer@npm:3.1.3"
-  dependencies:
-    chalk: "npm:^4.1.2"
-    execa: "npm:^5.1.1"
-    fs-extra: "npm:^10.0.0"
-    minimist: "npm:^1.2.5"
-    open: "npm:^8.4.0"
-    source-map-explorer: "npm:^2.5.3"
-  bin:
-    react-native-bundle-visualizer: src/react-native-bundle-visualizer.js
-  checksum: 10c0/b1f159f865cf8ac1b2c0bc9504d33dbc598878eba305c720966714a4c0fa746bb5ca9b2e066223a09b6f37e2c50e22724df8e139f974f365e1a5553f3b82b66d
-  languageName: node
-  linkType: hard
-
-"react-native-gesture-handler@npm:2.16.2":
-  version: 2.16.2
-  resolution: "react-native-gesture-handler@npm:2.16.2"
-  dependencies:
-    "@egjs/hammerjs": "npm:^2.0.17"
-    hoist-non-react-statics: "npm:^3.3.0"
-    invariant: "npm:^2.2.4"
-    lodash: "npm:^4.17.21"
-    prop-types: "npm:^15.7.2"
+"react-native-date-picker@npm:5.0.12":
+  version: 5.0.12
+  resolution: "react-native-date-picker@npm:5.0.12"
   peerDependencies:
-    react: "*"
-    react-native: "*"
-  checksum: 10c0/cd31794870edc51bc7051bf22893b19cebda5754c2fbd381f72e6ae6a718c26c5cf6966ad2f80e15e3a3217d09cc3e2e1637132f70bf44aacf62ea15a7636c98
+    react: ">= 17.0.1"
+    react-native: ">= 0.64.3"
+  checksum: 10c0/d5f49d34cbf631f0240dde2e1ff8fcc3fd8cb982104fe510093b415ae359efe1b49f6b9d850b47cc09f7603da724ed28c8fe8f70f9553ba4334b5cf7f0dec34d
   languageName: node
   linkType: hard
 
-"react-native-gesture-handler@patch:react-native-gesture-handler@npm:2.16.2#.yarn/patches/react-native-gesture-handler-npm-2.16.2-c16529326b.patch::locator=design-system%40workspace%3A.":
-  version: 2.16.2
-  resolution: "react-native-gesture-handler@patch:react-native-gesture-handler@npm%3A2.16.2#.yarn/patches/react-native-gesture-handler-npm-2.16.2-c16529326b.patch::version=2.16.2&hash=7e3399&locator=design-system%40workspace%3A."
+"react-native-gesture-handler@npm:2.28.0":
+  version: 2.28.0
+  resolution: "react-native-gesture-handler@npm:2.28.0"
   dependencies:
     "@egjs/hammerjs": "npm:^2.0.17"
     hoist-non-react-statics: "npm:^3.3.0"
     invariant: "npm:^2.2.4"
-    lodash: "npm:^4.17.21"
-    prop-types: "npm:^15.7.2"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10c0/0fd9db11cc7561f5a412ab8376cf7f30f25f04ca9d42ecc72d2237b47a9af4184f4ebd5fcc99ca5fe7a084d3c16bf3fb56e119a0a7fc8db7c38bed895273dca5
+  checksum: 10c0/4240c8eedca69eb36b5d3e375b71867251cf8b87a755ba7066b3f73cfdbc80574042dbd4ff821041fd1539c4cd90dbf7ee34586f5a0ea6cc38052375b3169f2e
   languageName: node
   linkType: hard
 
@@ -33193,6 +26984,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-is-edge-to-edge@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "react-native-is-edge-to-edge@npm:1.2.1"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/87d20b900aded7d44c90afb946a7aa03c23a94ca3dd547bdddc2303b85357e4aab22567a57b19f1558d6c8be7058e3dcf34faa1e15182d1604f90974266d9a1d
+  languageName: node
+  linkType: hard
+
 "react-native-navigation-bar-color@npm:2.0.2":
   version: 2.0.2
   resolution: "react-native-navigation-bar-color@npm:2.0.2"
@@ -33207,182 +27008,208 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-reanimated@npm:3.14.0":
-  version: 3.14.0
-  resolution: "react-native-reanimated@npm:3.14.0"
+"react-native-reanimated@npm:4.1.1":
+  version: 4.1.1
+  resolution: "react-native-reanimated@npm:4.1.1"
   dependencies:
-    "@babel/plugin-transform-arrow-functions": "npm:^7.0.0-0"
-    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.0.0-0"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.0.0-0"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.0.0-0"
-    "@babel/plugin-transform-template-literals": "npm:^7.0.0-0"
-    "@babel/preset-typescript": "npm:^7.16.7"
-    convert-source-map: "npm:^2.0.0"
-    invariant: "npm:^2.2.4"
+    react-native-is-edge-to-edge: "npm:^1.2.1"
+    semver: "npm:7.7.2"
   peerDependencies:
     "@babel/core": ^7.0.0-0
     react: "*"
     react-native: "*"
-  checksum: 10c0/a62ba3e4475c474bc7359d5175f192e86bbe86378a61041247b81beec6e93b4806cd8a5a8a61d1458d56eeef991803e5a128db69d260fa53d78050216b17d014
+    react-native-worklets: ">=0.5.0"
+  checksum: 10c0/867a71792b55d4a56fd90f57e7cb56a6d5ff4a0b5a4c7876a4b540679ffaf17618dd3136f19e61a1e950172551892d1d8fde5a739747b03aff8c43550be7fe03
   languageName: node
   linkType: hard
 
-"react-native-safe-area-context@npm:4.10.5":
-  version: 4.10.5
-  resolution: "react-native-safe-area-context@npm:4.10.5"
+"react-native-safe-area-context@npm:5.6.0":
+  version: 5.6.0
+  resolution: "react-native-safe-area-context@npm:5.6.0"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10c0/b385d07ad0bd8400f957e458cf9f715312ccfe00db0c0806831a419f44fbe1eef5004c7d007156db8bc235f738880d2467d89e334ab585c682d38c0c8635c7f1
+  checksum: 10c0/17877475217e3b9fc75afcd28bfa287cc996e4eb8cfc698f825670596d3e93d38d28aabc32a038f5167932412c6ef632a749b1c5fe49e15bd863326643740108
   languageName: node
   linkType: hard
 
-"react-native-screens@npm:3.32.0":
-  version: 3.32.0
-  resolution: "react-native-screens@npm:3.32.0"
+"react-native-screens@npm:4.16.0":
+  version: 4.16.0
+  resolution: "react-native-screens@npm:4.16.0"
   dependencies:
     react-freeze: "npm:^1.0.0"
+    react-native-is-edge-to-edge: "npm:^1.2.1"
     warn-once: "npm:^0.1.0"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10c0/38dc2e2bf3072c544d3bacceedbcc8ffaee5a588f4984c8d7186a236bd436f761c9b987a37fb3af8e0df2e5980db6155c5f6b6d4a3983001d0f45aa704a20b93
+  checksum: 10c0/8ec459ff52cbd317bfca598843a0010b4ca9070d05664f28d792594d8ceabb398b9d68abb578f40295e41f906308efe7ac7359046fba7aaf318a0d9d65446102
   languageName: node
   linkType: hard
 
-"react-native-svg@npm:14.1.0":
-  version: 14.1.0
-  resolution: "react-native-svg@npm:14.1.0"
+"react-native-svg@npm:15.12.1":
+  version: 15.12.1
+  resolution: "react-native-svg@npm:15.12.1"
   dependencies:
     css-select: "npm:^5.1.0"
     css-tree: "npm:^1.1.3"
+    warn-once: "npm:0.1.1"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10c0/952d666471c1e849de1ca1f7c590dcbeba270fb62fb5afa707eac21da9d39f48ea21049dbaabf3db7078712c6236803e7143b9d9a30529bc6754f8d5f107d6ac
+  checksum: 10c0/ed94b57007125c715283fc760438ac8eac0677ced3201f6e272a7cd4459f3fecb672a8eed2c32664e5b8e6e0367585353b0f83f99b231f603d75094bb052c01f
   languageName: node
   linkType: hard
 
-"react-native@npm:0.74.5":
-  version: 0.74.5
-  resolution: "react-native@npm:0.74.5"
+"react-native-worklets@npm:0.5.2":
+  version: 0.5.2
+  resolution: "react-native-worklets@npm:0.5.2"
   dependencies:
-    "@jest/create-cache-key-function": "npm:^29.6.3"
-    "@react-native-community/cli": "npm:13.6.9"
-    "@react-native-community/cli-platform-android": "npm:13.6.9"
-    "@react-native-community/cli-platform-ios": "npm:13.6.9"
-    "@react-native/assets-registry": "npm:0.74.87"
-    "@react-native/codegen": "npm:0.74.87"
-    "@react-native/community-cli-plugin": "npm:0.74.87"
-    "@react-native/gradle-plugin": "npm:0.74.87"
-    "@react-native/js-polyfills": "npm:0.74.87"
-    "@react-native/normalize-colors": "npm:0.74.87"
-    "@react-native/virtualized-lists": "npm:0.74.87"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.0.0-0"
+    "@babel/plugin-transform-class-properties": "npm:^7.0.0-0"
+    "@babel/plugin-transform-classes": "npm:^7.0.0-0"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.0.0-0"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.0.0-0"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.0.0-0"
+    "@babel/plugin-transform-template-literals": "npm:^7.0.0-0"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.0.0-0"
+    "@babel/preset-typescript": "npm:^7.16.7"
+    convert-source-map: "npm:^2.0.0"
+    semver: "npm:7.7.2"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/504f05e67f321bbbab6eab0c4d36fdca296de4e3bc789627f05a316b89c9ac97f06236a9c87ce70df50eaf6d3c3b82344322955e85771b134e196df44d0bf366
+  languageName: node
+  linkType: hard
+
+"react-native@npm:0.81.5":
+  version: 0.81.5
+  resolution: "react-native@npm:0.81.5"
+  dependencies:
+    "@jest/create-cache-key-function": "npm:^29.7.0"
+    "@react-native/assets-registry": "npm:0.81.5"
+    "@react-native/codegen": "npm:0.81.5"
+    "@react-native/community-cli-plugin": "npm:0.81.5"
+    "@react-native/gradle-plugin": "npm:0.81.5"
+    "@react-native/js-polyfills": "npm:0.81.5"
+    "@react-native/normalize-colors": "npm:0.81.5"
+    "@react-native/virtualized-lists": "npm:0.81.5"
     abort-controller: "npm:^3.0.0"
     anser: "npm:^1.4.9"
     ansi-regex: "npm:^5.0.0"
+    babel-jest: "npm:^29.7.0"
+    babel-plugin-syntax-hermes-parser: "npm:0.29.1"
     base64-js: "npm:^1.5.1"
-    chalk: "npm:^4.0.0"
-    event-target-shim: "npm:^5.0.1"
+    commander: "npm:^12.0.0"
     flow-enums-runtime: "npm:^0.0.6"
+    glob: "npm:^7.1.1"
     invariant: "npm:^2.2.4"
-    jest-environment-node: "npm:^29.6.3"
-    jsc-android: "npm:^250231.0.0"
+    jest-environment-node: "npm:^29.7.0"
     memoize-one: "npm:^5.0.0"
-    metro-runtime: "npm:^0.80.3"
-    metro-source-map: "npm:^0.80.3"
-    mkdirp: "npm:^0.5.1"
+    metro-runtime: "npm:^0.83.1"
+    metro-source-map: "npm:^0.83.1"
     nullthrows: "npm:^1.1.1"
-    pretty-format: "npm:^26.5.2"
+    pretty-format: "npm:^29.7.0"
     promise: "npm:^8.3.0"
-    react-devtools-core: "npm:^5.0.0"
+    react-devtools-core: "npm:^6.1.5"
     react-refresh: "npm:^0.14.0"
-    react-shallow-renderer: "npm:^16.15.0"
     regenerator-runtime: "npm:^0.13.2"
-    scheduler: "npm:0.24.0-canary-efb381bbf-20230505"
+    scheduler: "npm:0.26.0"
+    semver: "npm:^7.1.3"
     stacktrace-parser: "npm:^0.1.10"
     whatwg-fetch: "npm:^3.0.0"
-    ws: "npm:^6.2.2"
+    ws: "npm:^6.2.3"
     yargs: "npm:^17.6.2"
   peerDependencies:
-    "@types/react": ^18.2.6
-    react: 18.2.0
+    "@types/react": ^19.1.0
+    react: ^19.1.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
   bin:
     react-native: cli.js
-  checksum: 10c0/5b1ad86b64e42a209a2feea5cdfae14147affc351a672cbc9a5beaf9b522fb50b26c1ffe8dbe3ea5343307879a0691e2f49a73265ec18ba165539f3c23f407a0
+  checksum: 10c0/59b861b461e47a476dfe546b305f1b68b5248bedf2174f32c8aa02b0d1da8dc44fe8d0d60b426532353ff2b61d06d40a32a01dcc53043a3425e29b346065d159
   languageName: node
   linkType: hard
 
-"react-native@patch:react-native@npm:0.74.5#.yarn/patches/react-native-npm-0.74.5-db5164f47b.patch::locator=design-system%40workspace%3A.":
-  version: 0.74.5
-  resolution: "react-native@patch:react-native@npm%3A0.74.5#.yarn/patches/react-native-npm-0.74.5-db5164f47b.patch::version=0.74.5&hash=854d68&locator=design-system%40workspace%3A."
+"react-native@patch:react-native@npm:0.81.5#.yarn/patches/react-native-npm-0.81.5-0a0008b930.patch::locator=design-system%40workspace%3A.":
+  version: 0.81.5
+  resolution: "react-native@patch:react-native@npm%3A0.81.5#.yarn/patches/react-native-npm-0.81.5-0a0008b930.patch::version=0.81.5&hash=f10882&locator=design-system%40workspace%3A."
   dependencies:
-    "@jest/create-cache-key-function": "npm:^29.6.3"
-    "@react-native-community/cli": "npm:13.6.9"
-    "@react-native-community/cli-platform-android": "npm:13.6.9"
-    "@react-native-community/cli-platform-ios": "npm:13.6.9"
-    "@react-native/assets-registry": "npm:0.74.87"
-    "@react-native/codegen": "npm:0.74.87"
-    "@react-native/community-cli-plugin": "npm:0.74.87"
-    "@react-native/gradle-plugin": "npm:0.74.87"
-    "@react-native/js-polyfills": "npm:0.74.87"
-    "@react-native/normalize-colors": "npm:0.74.87"
-    "@react-native/virtualized-lists": "npm:0.74.87"
+    "@jest/create-cache-key-function": "npm:^29.7.0"
+    "@react-native/assets-registry": "npm:0.81.5"
+    "@react-native/codegen": "npm:0.81.5"
+    "@react-native/community-cli-plugin": "npm:0.81.5"
+    "@react-native/gradle-plugin": "npm:0.81.5"
+    "@react-native/js-polyfills": "npm:0.81.5"
+    "@react-native/normalize-colors": "npm:0.81.5"
+    "@react-native/virtualized-lists": "npm:0.81.5"
     abort-controller: "npm:^3.0.0"
     anser: "npm:^1.4.9"
     ansi-regex: "npm:^5.0.0"
+    babel-jest: "npm:^29.7.0"
+    babel-plugin-syntax-hermes-parser: "npm:0.29.1"
     base64-js: "npm:^1.5.1"
-    chalk: "npm:^4.0.0"
-    event-target-shim: "npm:^5.0.1"
+    commander: "npm:^12.0.0"
     flow-enums-runtime: "npm:^0.0.6"
+    glob: "npm:^7.1.1"
     invariant: "npm:^2.2.4"
-    jest-environment-node: "npm:^29.6.3"
-    jsc-android: "npm:^250231.0.0"
+    jest-environment-node: "npm:^29.7.0"
     memoize-one: "npm:^5.0.0"
-    metro-runtime: "npm:^0.80.3"
-    metro-source-map: "npm:^0.80.3"
-    mkdirp: "npm:^0.5.1"
+    metro-runtime: "npm:^0.83.1"
+    metro-source-map: "npm:^0.83.1"
     nullthrows: "npm:^1.1.1"
-    pretty-format: "npm:^26.5.2"
+    pretty-format: "npm:^29.7.0"
     promise: "npm:^8.3.0"
-    react-devtools-core: "npm:^5.0.0"
+    react-devtools-core: "npm:^6.1.5"
     react-refresh: "npm:^0.14.0"
-    react-shallow-renderer: "npm:^16.15.0"
     regenerator-runtime: "npm:^0.13.2"
-    scheduler: "npm:0.24.0-canary-efb381bbf-20230505"
+    scheduler: "npm:0.26.0"
+    semver: "npm:^7.1.3"
     stacktrace-parser: "npm:^0.1.10"
     whatwg-fetch: "npm:^3.0.0"
-    ws: "npm:^6.2.2"
+    ws: "npm:^6.2.3"
     yargs: "npm:^17.6.2"
   peerDependencies:
-    "@types/react": ^18.2.6
-    react: 18.2.0
+    "@types/react": ^19.1.0
+    react: ^19.1.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
   bin:
     react-native: cli.js
-  checksum: 10c0/0e23b0ae0a788f63f93fd75058e8c3816f5cbd71da268d62adf2d5b9d81978ac7efe4ee4b37e5051aba05f62e4431d790b635fc019737ef0e9374af09910b3f3
+  checksum: 10c0/1ea2255a6fd4a991090aa2c759a2426486ba9f38e396757c9cdb09af1f33fdb7c248cd6f90baee60242d11ba3340fac0e08ade1b8b6b85d9dec3e220d8df5a6e
   languageName: node
   linkType: hard
 
 "react-popper@npm:^2.2.4":
-  version: 2.2.5
-  resolution: "react-popper@npm:2.2.5"
+  version: 2.3.0
+  resolution: "react-popper@npm:2.3.0"
   dependencies:
     react-fast-compare: "npm:^3.0.1"
     warning: "npm:^4.0.2"
   peerDependencies:
     "@popperjs/core": ^2.0.0
-    react: ^16.8.0 || ^17
-  checksum: 10c0/199ff9ec23670eece1c5972d48d2c5e9c28938dd610c432979fdab631a38371f8a3a5fbb9dcaeec0cff9ce9fb58b3bc1965c525de14fdb78f5e9b35f0d90f335
+    react: ^16.8.0 || ^17 || ^18
+    react-dom: ^16.8.0 || ^17 || ^18
+  checksum: 10c0/23f93540537ca4c035425bb8d5e51b11131fbc921d7ac1d041d0ae557feac8c877f3a012d36b94df8787803f52ed81e6df9257ac9e58719875f7805518d6db3f
+  languageName: node
+  linkType: hard
+
+"react-reconciler@npm:0.31.0":
+  version: 0.31.0
+  resolution: "react-reconciler@npm:0.31.0"
+  dependencies:
+    scheduler: "npm:^0.25.0"
+  peerDependencies:
+    react: ^19.0.0
+  checksum: 10c0/97920e1866c7206e200c3920c133c2e85f62a3c54fd9bc4b83c10c558d83d98eb378caab4fe37498e0cc1b1b2665d898627f2ae2537b29c8ab295ec8abc0c580
   languageName: node
   linkType: hard
 
-"react-reconciler@npm:0.27.0, react-reconciler@npm:^0.27.0":
+"react-reconciler@npm:^0.27.0":
   version: 0.27.0
   resolution: "react-reconciler@npm:0.27.0"
   dependencies:
@@ -33394,13 +27221,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-refresh@npm:^0.11.0":
-  version: 0.11.0
-  resolution: "react-refresh@npm:0.11.0"
-  checksum: 10c0/cbb5616c7ba670bbd2f37ddadcdfefa66e727ea188e89733ccb8184d3b874631104b0bc016d5676a7ade4d9c79100b99b46b6ed10cd117ab5d1ddcbf8653a9f2
-  languageName: node
-  linkType: hard
-
 "react-refresh@npm:^0.14.0, react-refresh@npm:^0.14.2":
   version: 0.14.2
   resolution: "react-refresh@npm:0.14.2"
@@ -33408,17 +27228,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-refresh@npm:^0.17.0":
-  version: 0.17.0
-  resolution: "react-refresh@npm:0.17.0"
-  checksum: 10c0/002cba940384c9930008c0bce26cac97a9d5682bc623112c2268ba0c155127d9c178a9a5cc2212d560088d60dfd503edd808669a25f9b377f316a32361d0b23c
-  languageName: node
-  linkType: hard
-
-"react-refresh@npm:^0.4.0":
-  version: 0.4.3
-  resolution: "react-refresh@npm:0.4.3"
-  checksum: 10c0/2b4e4b14b54bfbdfdd6d1c16b8476151b3e61083387061d4e5923b0342c678f6d0f23705835c3a04ab151bd92551d437395da3fb52ea7461a408f457d11ac6fa
+"react-refresh@npm:^0.18.0":
+  version: 0.18.0
+  resolution: "react-refresh@npm:0.18.0"
+  checksum: 10c0/34a262f7fd803433a534f50deb27a148112a81adcae440c7d1cbae7ef14d21ea8f2b3d783e858cb7698968183b77755a38b4d4b5b1d79b4f4689c2f6d358fff2
   languageName: node
   linkType: hard
 
@@ -33470,32 +27283,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-shallow-renderer@npm:^16.15.0":
-  version: 16.15.0
-  resolution: "react-shallow-renderer@npm:16.15.0"
+"react-test-renderer@npm:19.1.2":
+  version: 19.1.2
+  resolution: "react-test-renderer@npm:19.1.2"
   dependencies:
-    object-assign: "npm:^4.1.1"
-    react-is: "npm:^16.12.0 || ^17.0.0 || ^18.0.0"
+    react-is: "npm:^19.1.2"
+    scheduler: "npm:^0.26.0"
   peerDependencies:
-    react: ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/c194d741792e86043a4ae272f7353c1cb9412bc649945c4220c6a101a6ea5410cceb3d65d5a4d750f11a24f7426e8eec7977e8a4e3ad5d3ee235ca2b18166fa8
+    react: ^19.1.2
+  checksum: 10c0/12dab45ca14e2c5cc7176498500ab69d875662982a1fd6fba17a7ead002e84ad64abe3a5b9a72eda9703b1e7d12a79ee4a7f70f8b1690762603b578dcbc2ed5a
   languageName: node
   linkType: hard
 
-"react-test-renderer@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "react-test-renderer@npm:18.3.1"
-  dependencies:
-    react-is: "npm:^18.3.1"
-    react-shallow-renderer: "npm:^16.15.0"
-    scheduler: "npm:^0.23.2"
-  peerDependencies:
-    react: ^18.3.1
-  checksum: 10c0/c633558ef9af33bc68f0c4dbb5163a004c4fb9eade7bd0a7cfc0355fb367f36bd9d96533c90b7e85a146be6c525113a15f58683d269e0177ad77e2b04d4fe51c
-  languageName: node
-  linkType: hard
-
-"react-use-measure@npm:^2, react-use-measure@npm:^2.1.7":
+"react-use-measure@npm:^2.1.7":
   version: 2.1.7
   resolution: "react-use-measure@npm:2.1.7"
   peerDependencies:
@@ -33519,12 +27319,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "react@npm:18.3.1"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3
+"react@npm:19.1.2":
+  version: 19.1.2
+  resolution: "react@npm:19.1.2"
+  checksum: 10c0/dfbe1dee96547ad2d6d6872b6052cbd5bd7841b6f57a7d6cda62b27e1a7df31d47beecb6d11e24abaff0c5ea347459a0a3c60917b41f5a0ee0b507436b3c50a6
+  languageName: node
+  linkType: hard
+
+"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
+  version: 19.2.4
+  resolution: "react@npm:19.2.4"
+  checksum: 10c0/cd2c9ff67a720799cc3b38a516009986f7fc4cb8d3e15716c6211cf098d1357ee3e348ab05ad0600042bbb0fd888530ba92e329198c92eafa0994f5213396596
   languageName: node
   linkType: hard
 
@@ -33537,16 +27342,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"read-pkg-up@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "read-pkg-up@npm:1.0.1"
-  dependencies:
-    find-up: "npm:^1.0.0"
-    read-pkg: "npm:^1.0.0"
-  checksum: 10c0/36c4fc8bd73edf77a4eeb497b6e43010819ea4aef64cbf8e393439fac303398751c5a299feab84e179a74507e3a1416e1ed033a888b1dac3463bf46d1765f7ac
-  languageName: node
-  linkType: hard
-
 "read-pkg-up@npm:^7.0.1":
   version: 7.0.1
   resolution: "read-pkg-up@npm:7.0.1"
@@ -33569,17 +27364,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"read-pkg@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "read-pkg@npm:1.1.0"
-  dependencies:
-    load-json-file: "npm:^1.0.0"
-    normalize-package-data: "npm:^2.3.2"
-    path-type: "npm:^1.0.0"
-  checksum: 10c0/51fce9f7066787dc7688ea7014324cedeb9f38daa7dace4f1147d526f22354a07189ef728710bc97e27fcf5ed3a03b68ad8b60afb4251984640b6f09c180d572
-  languageName: node
-  linkType: hard
-
 "read-pkg@npm:^4.0.1":
   version: 4.0.1
   resolution: "read-pkg@npm:4.0.1"
@@ -33615,7 +27399,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:1 || 2, readable-stream@npm:^2.0.0, readable-stream@npm:^2.0.1, readable-stream@npm:^2.0.2, readable-stream@npm:^2.1.5, readable-stream@npm:^2.2.2, readable-stream@npm:^2.3.3, readable-stream@npm:^2.3.6, readable-stream@npm:~2.3.6":
+"readable-stream@npm:^1.0.33":
+  version: 1.1.14
+  resolution: "readable-stream@npm:1.1.14"
+  dependencies:
+    core-util-is: "npm:~1.0.0"
+    inherits: "npm:~2.0.1"
+    isarray: "npm:0.0.1"
+    string_decoder: "npm:~0.10.x"
+  checksum: 10c0/b7f41b16b305103d598e3c8964fa30d52d6e0b5d9fdad567588964521691c24b279c7a8bb71f11927c3613acf355bac72d8396885a43d50425b2caafd49bc83d
+  languageName: node
+  linkType: hard
+
+"readable-stream@npm:^2.0.1":
   version: 2.3.8
   resolution: "readable-stream@npm:2.3.8"
   dependencies:
@@ -33630,18 +27426,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:^1.0.33":
-  version: 1.1.14
-  resolution: "readable-stream@npm:1.1.14"
-  dependencies:
-    core-util-is: "npm:~1.0.0"
-    inherits: "npm:~2.0.1"
-    isarray: "npm:0.0.1"
-    string_decoder: "npm:~0.10.x"
-  checksum: 10c0/b7f41b16b305103d598e3c8964fa30d52d6e0b5d9fdad567588964521691c24b279c7a8bb71f11927c3613acf355bac72d8396885a43d50425b2caafd49bc83d
-  languageName: node
-  linkType: hard
-
 "readable-stream@npm:^3.0.6, readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0":
   version: 3.6.0
   resolution: "readable-stream@npm:3.6.0"
@@ -33653,17 +27437,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readdirp@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "readdirp@npm:2.2.1"
-  dependencies:
-    graceful-fs: "npm:^4.1.11"
-    micromatch: "npm:^3.1.10"
-    readable-stream: "npm:^2.0.2"
-  checksum: 10c0/770d177372ff2212d382d425d55ca48301fcbf3231ab3827257bbcca7ff44fb51fe4af6acc2dda8512dc7f29da390e9fbea5b2b3fc724b86e85cc828395b7797
-  languageName: node
-  linkType: hard
-
 "readdirp@npm:^3.6.0, readdirp@npm:~3.6.0":
   version: 3.6.0
   resolution: "readdirp@npm:3.6.0"
@@ -33680,13 +27453,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readline@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "readline@npm:1.3.0"
-  checksum: 10c0/7404c9edc3fd29430221ef1830867c8d87e50612e4ce70f84ecd55686f7db1c81d67c6a4dcb407839f4c459ad05dd34524a2c7a97681e91878367c68d0e38665
-  languageName: node
-  linkType: hard
-
 "reassure@npm:^0.7.1":
   version: 0.7.2
   resolution: "reassure@npm:0.7.2"
@@ -33698,19 +27464,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"recast@npm:^0.21.0":
-  version: 0.21.5
-  resolution: "recast@npm:0.21.5"
+"recast@npm:^0.20.3":
+  version: 0.20.5
+  resolution: "recast@npm:0.20.5"
   dependencies:
-    ast-types: "npm:0.15.2"
+    ast-types: "npm:0.14.2"
     esprima: "npm:~4.0.0"
     source-map: "npm:~0.6.1"
     tslib: "npm:^2.0.1"
-  checksum: 10c0/a45168c82195f24fa2c70293a624fece0069a2e8e8adb637f9963777735f81cb3bb62e55172db677ec3573b08b2daaf1eddd85b74da6fe0bd37c9b15eeaf94b4
+  checksum: 10c0/7810216ff36c7376eddd66d3ce6b2df421305fdc983f2122711837911712177d52d804419655e1f29d4bb93016c178cffe442af410bdcf726050ca19af6fed32
   languageName: node
   linkType: hard
 
-"recast@npm:^0.23.5":
+"recast@npm:^0.23.3, recast@npm:^0.23.5":
   version: 0.23.11
   resolution: "recast@npm:0.23.11"
   dependencies:
@@ -33798,16 +27564,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"redent@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "redent@npm:1.0.0"
-  dependencies:
-    indent-string: "npm:^2.1.0"
-    strip-indent: "npm:^1.0.1"
-  checksum: 10c0/9fa48d250d4e645acac9de57cb82dc29cd7f5f27257ec367461e3dd0c9f14c55f1c40fd3d9cf7f9a3ed337f209ad4e0370abfcf5cf75569ebd31c97a7949b8a2
-  languageName: node
-  linkType: hard
-
 "redent@npm:^3.0.0":
   version: 3.0.0
   resolution: "redent@npm:3.0.0"
@@ -33883,16 +27639,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regex-not@npm:^1.0.0, regex-not@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "regex-not@npm:1.0.2"
-  dependencies:
-    extend-shallow: "npm:^3.0.2"
-    safe-regex: "npm:^1.1.0"
-  checksum: 10c0/a0f8d6045f63b22e9759db10e248369c443b41cedd7dba0922d002b66c2734bc2aef0d98c4d45772d1f756245f4c5203856b88b9624bba2a58708858a8d485d6
-  languageName: node
-  linkType: hard
-
 "regexp.prototype.flags@npm:^1.5.1, regexp.prototype.flags@npm:^1.5.3, regexp.prototype.flags@npm:^1.5.4":
   version: 1.5.4
   resolution: "regexp.prototype.flags@npm:1.5.4"
@@ -34043,13 +27789,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark-footnotes@npm:2.0.0":
-  version: 2.0.0
-  resolution: "remark-footnotes@npm:2.0.0"
-  checksum: 10c0/45b55b3440b74bfeed11fba5ed6b31f2fd35ab4e9ba169061b76a19f5ff4d16d851c9f3c423c7fa54eb0fa5e6043b89098cb9478e9b5b417cf4bdef5571b0236
-  languageName: node
-  linkType: hard
-
 "remark-frontmatter@npm:^5.0.0":
   version: 5.0.0
   resolution: "remark-frontmatter@npm:5.0.0"
@@ -34076,22 +27815,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark-mdx@npm:1.6.22":
-  version: 1.6.22
-  resolution: "remark-mdx@npm:1.6.22"
-  dependencies:
-    "@babel/core": "npm:7.12.9"
-    "@babel/helper-plugin-utils": "npm:7.10.4"
-    "@babel/plugin-proposal-object-rest-spread": "npm:7.12.1"
-    "@babel/plugin-syntax-jsx": "npm:7.12.1"
-    "@mdx-js/util": "npm:1.6.22"
-    is-alphabetical: "npm:1.0.4"
-    remark-parse: "npm:8.0.3"
-    unified: "npm:9.2.0"
-  checksum: 10c0/3a964048e58cba7848d59fc920baa330a9b7f619fedb44d4d7985d84875eba8d92e0d0dd0617e28326c6086e21ef441664748526a2517a42555d44c648453b0a
-  languageName: node
-  linkType: hard
-
 "remark-mdx@npm:^3.0.0":
   version: 3.1.0
   resolution: "remark-mdx@npm:3.1.0"
@@ -34102,30 +27825,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark-parse@npm:8.0.3":
-  version: 8.0.3
-  resolution: "remark-parse@npm:8.0.3"
-  dependencies:
-    ccount: "npm:^1.0.0"
-    collapse-white-space: "npm:^1.0.2"
-    is-alphabetical: "npm:^1.0.0"
-    is-decimal: "npm:^1.0.0"
-    is-whitespace-character: "npm:^1.0.0"
-    is-word-character: "npm:^1.0.0"
-    markdown-escapes: "npm:^1.0.0"
-    parse-entities: "npm:^2.0.0"
-    repeat-string: "npm:^1.5.4"
-    state-toggle: "npm:^1.0.0"
-    trim: "npm:0.0.1"
-    trim-trailing-lines: "npm:^1.0.0"
-    unherit: "npm:^1.0.4"
-    unist-util-remove-position: "npm:^2.0.0"
-    vfile-location: "npm:^3.0.0"
-    xtend: "npm:^4.0.1"
-  checksum: 10c0/cbb859e2585864942823ce4d23a1b1514168a066ba91d47ca09ff45a5563b81bf17160c182ac7efed718712291c35a117db89b6ce603d04a845497ae7041c185
-  languageName: node
-  linkType: hard
-
 "remark-parse@npm:^11.0.0":
   version: 11.0.0
   resolution: "remark-parse@npm:11.0.0"
@@ -34151,15 +27850,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark-squeeze-paragraphs@npm:4.0.0":
-  version: 4.0.0
-  resolution: "remark-squeeze-paragraphs@npm:4.0.0"
-  dependencies:
-    mdast-squeeze-paragraphs: "npm:^4.0.0"
-  checksum: 10c0/61b39acfde3bebb1e9364a6991957f83ab0d878c0fd1de0e86e9bf9e060574cefb7a76057d64e7422e2a2bcf6e3c54635a4ae43f00b3dda38812ae4b6f4342f4
-  languageName: node
-  linkType: hard
-
 "remark-stringify@npm:^11.0.0":
   version: 11.0.0
   resolution: "remark-stringify@npm:11.0.0"
@@ -34171,33 +27861,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remove-trailing-separator@npm:^1.0.1":
-  version: 1.1.0
-  resolution: "remove-trailing-separator@npm:1.1.0"
-  checksum: 10c0/3568f9f8f5af3737b4aee9e6e1e8ec4be65a92da9cb27f989e0893714d50aa95ed2ff02d40d1fa35e1b1a234dc9c2437050ef356704a3999feaca6667d9e9bfc
-  languageName: node
-  linkType: hard
-
-"remove-trailing-slash@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "remove-trailing-slash@npm:0.1.1"
-  checksum: 10c0/6fa91e7b89e0675fdca6ce54af5fad9bd612d51e2251913a2e113b521b157647f1f8c694b55447780b489b30a63ebe949ccda7411ef383d09136bb27121c6c09
-  languageName: node
-  linkType: hard
-
-"renderkid@npm:^2.0.4":
-  version: 2.0.7
-  resolution: "renderkid@npm:2.0.7"
-  dependencies:
-    css-select: "npm:^4.1.3"
-    dom-converter: "npm:^0.2.0"
-    htmlparser2: "npm:^6.1.0"
-    lodash: "npm:^4.17.21"
-    strip-ansi: "npm:^3.0.1"
-  checksum: 10c0/05e19c8861e0f9f3d379a175fbb52e3be3c957022acf52d19d36b23f99bb401b6bc3c493d43213f4d76efb08cb2f13e66df38c9a487249cb8dad1f6170da6a14
-  languageName: node
-  linkType: hard
-
 "renderkid@npm:^3.0.0":
   version: 3.0.0
   resolution: "renderkid@npm:3.0.0"
@@ -34211,29 +27874,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"repeat-element@npm:^1.1.2":
-  version: 1.1.4
-  resolution: "repeat-element@npm:1.1.4"
-  checksum: 10c0/81aa8d82bc845780803ef52df3533fa399974b99df571d0bb86e91f0ffca9ee4b9c4e8e5e72af087938cc28d2aef93d106a6d01da685d72ce96455b90a9f9f69
-  languageName: node
-  linkType: hard
-
-"repeat-string@npm:^1.0.0, repeat-string@npm:^1.5.4, repeat-string@npm:^1.6.1":
+"repeat-string@npm:^1.0.0":
   version: 1.6.1
   resolution: "repeat-string@npm:1.6.1"
   checksum: 10c0/87fa21bfdb2fbdedc44b9a5b118b7c1239bdd2c2c1e42742ef9119b7d412a5137a1d23f1a83dc6bb686f4f27429ac6f542e3d923090b44181bafa41e8ac0174d
   languageName: node
   linkType: hard
 
-"repeating@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "repeating@npm:2.0.1"
-  dependencies:
-    is-finite: "npm:^1.0.0"
-  checksum: 10c0/7f5cd293ec47d9c074ef0852800d5ff5c49028ce65242a7528d84f32bd2fe200b142930562af58c96d869c5a3046e87253030058e45231acaa129c1a7087d2e7
-  languageName: node
-  linkType: hard
-
 "require-directory@npm:^2.1.1":
   version: 2.1.1
   resolution: "require-directory@npm:2.1.1"
@@ -34255,13 +27902,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"require-main-filename@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "require-main-filename@npm:2.0.0"
-  checksum: 10c0/db91467d9ead311b4111cbd73a4e67fa7820daed2989a32f7023785a2659008c6d119752d9c4ac011ae07e537eb86523adff99804c5fdb39cd3a017f9b401bb6
-  languageName: node
-  linkType: hard
-
 "require-package-name@npm:^2.0.1":
   version: 2.0.1
   resolution: "require-package-name@npm:2.0.1"
@@ -34365,13 +28005,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve-url@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "resolve-url@npm:0.2.1"
-  checksum: 10c0/c285182cfcddea13a12af92129ce0569be27fb0074ffaefbd3ba3da2eac2acecdfc996d435c4982a9fa2b4708640e52837c9153a5ab9255886a00b0b9e8d2a54
-  languageName: node
-  linkType: hard
-
 "resolve-workspace-root@npm:^2.0.0":
   version: 2.0.0
   resolution: "resolve-workspace-root@npm:2.0.0"
@@ -34379,23 +28012,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve.exports@npm:2.0.3, resolve.exports@npm:^2.0.0, resolve.exports@npm:^2.0.2":
+"resolve.exports@npm:2.0.3, resolve.exports@npm:^2.0.0, resolve.exports@npm:^2.0.3":
   version: 2.0.3
   resolution: "resolve.exports@npm:2.0.3"
   checksum: 10c0/1ade1493f4642a6267d0a5e68faeac20b3d220f18c28b140343feb83694d8fed7a286852aef43689d16042c61e2ddb270be6578ad4a13990769e12065191200d
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.1.6, resolve@npm:^1.10.0, resolve@npm:^1.13.1, resolve@npm:^1.14.2, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.22.10, resolve@npm:^1.22.2, resolve@npm:^1.22.3, resolve@npm:^1.22.4, resolve@npm:^1.22.8, resolve@npm:^1.3.2":
-  version: 1.22.11
-  resolution: "resolve@npm:1.22.11"
+"resolve@npm:^1.1.6, resolve@npm:^1.10.0, resolve@npm:^1.13.1, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.22.10, resolve@npm:^1.22.2, resolve@npm:^1.22.3, resolve@npm:^1.22.4, resolve@npm:^1.22.8":
+  version: 1.22.10
+  resolution: "resolve@npm:1.22.10"
   dependencies:
-    is-core-module: "npm:^2.16.1"
+    is-core-module: "npm:^2.16.0"
     path-parse: "npm:^1.0.7"
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10c0/f657191507530f2cbecb5815b1ee99b20741ea6ee02a59c57028e9ec4c2c8d7681afcc35febbd554ac0ded459db6f2d8153382c53a2f266cee2575e512674409
+  checksum: 10c0/8967e1f4e2cc40f79b7e080b4582b9a8c5ee36ffb46041dccb20e6461161adf69f843b43067b4a375de926a2cd669157e29a29578191def399dd5ef89a1b5203
   languageName: node
   linkType: hard
 
@@ -34421,16 +28054,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.1.6#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.13.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.10#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.3#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.3.2#optional!builtin<compat/resolve>":
-  version: 1.22.11
-  resolution: "resolve@patch:resolve@npm%3A1.22.11#optional!builtin<compat/resolve>::version=1.22.11&hash=c3c19d"
+"resolve@patch:resolve@npm%3A^1.1.6#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.13.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.10#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.3#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
+  version: 1.22.10
+  resolution: "resolve@patch:resolve@npm%3A1.22.10#optional!builtin<compat/resolve>::version=1.22.10&hash=c3c19d"
   dependencies:
-    is-core-module: "npm:^2.16.1"
+    is-core-module: "npm:^2.16.0"
     path-parse: "npm:^1.0.7"
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10c0/ee5b182f2e37cb1165465e58c6abc797fec0a80b5ba3231607beb4677db0c9291ac010c47cf092b6daa2b7f518d69a0e21888e7e2b633f68d501a874212a8c63
+  checksum: 10c0/52a4e505bbfc7925ac8f4cd91fd8c4e096b6a89728b9f46861d3b405ac9a1ccf4dcbf8befb4e89a2e11370dacd0160918163885cbc669369590f2f31f4c58939
   languageName: node
   linkType: hard
 
@@ -34485,13 +28118,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ret@npm:~0.1.10":
-  version: 0.1.15
-  resolution: "ret@npm:0.1.15"
-  checksum: 10c0/01f77cad0f7ea4f955852c03d66982609893edc1240c0c964b4c9251d0f9fb6705150634060d169939b096d3b77f4c84d6b6098a5b5d340160898c8581f1f63f
-  languageName: node
-  linkType: hard
-
 "retry@npm:^0.12.0":
   version: 0.12.0
   resolution: "retry@npm:0.12.0"
@@ -34524,28 +28150,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:^2.2.8, rimraf@npm:^2.5.4, rimraf@npm:^2.6.2, rimraf@npm:^2.6.3":
-  version: 2.7.1
-  resolution: "rimraf@npm:2.7.1"
-  dependencies:
-    glob: "npm:^7.1.3"
-  bin:
-    rimraf: ./bin.js
-  checksum: 10c0/4eef73d406c6940927479a3a9dee551e14a54faf54b31ef861250ac815172bade86cc6f7d64a4dc5e98b65e4b18a2e1c9ff3b68d296be0c748413f092bb0dd40
-  languageName: node
-  linkType: hard
-
-"rimraf@npm:~2.4.0":
-  version: 2.4.5
-  resolution: "rimraf@npm:2.4.5"
-  dependencies:
-    glob: "npm:^6.0.1"
-  bin:
-    rimraf: ./bin.js
-  checksum: 10c0/5251a36053165d23248efec5077f9addc13ad7f742a02dcd9ac7adda9e208cbf7523901e96a9ca6c33059bd0b573b97eab3334cf1d9976cc5ddc8b3c24d9ddd7
-  languageName: node
-  linkType: hard
-
 "rimraf@npm:~2.6.2":
   version: 2.6.3
   resolution: "rimraf@npm:2.6.3"
@@ -34557,16 +28161,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ripemd160@npm:^2.0.0, ripemd160@npm:^2.0.1":
-  version: 2.0.2
-  resolution: "ripemd160@npm:2.0.2"
-  dependencies:
-    hash-base: "npm:^3.0.0"
-    inherits: "npm:^2.0.1"
-  checksum: 10c0/f6f0df78817e78287c766687aed4d5accbebc308a8e7e673fb085b9977473c1f139f0c5335d353f172a915bb288098430755d2ad3c4f30612f4dd0c901cd2c3a
-  languageName: node
-  linkType: hard
-
 "rollup-plugin-visualizer@npm:^6.0.3":
   version: 6.0.3
   resolution: "rollup-plugin-visualizer@npm:6.0.3"
@@ -34730,16 +28324,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"run-queue@npm:^1.0.0, run-queue@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "run-queue@npm:1.0.3"
-  dependencies:
-    aproba: "npm:^1.1.1"
-  checksum: 10c0/4e8964279d8f160f9ffaabe82eaad11a1d4c0db596a0f2b5257ae9d2b900c7e1ffcece3e5719199436f50718e1e7f45bb4bf7a82e331a4e734d67c2588a90cbb
-  languageName: node
-  linkType: hard
-
-"rxjs@npm:^7.8.2":
+"rxjs@npm:^7.2.0, rxjs@npm:^7.8.2":
   version: 7.8.2
   resolution: "rxjs@npm:7.8.2"
   dependencies:
@@ -34761,13 +28346,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:5.1.1":
-  version: 5.1.1
-  resolution: "safe-buffer@npm:5.1.1"
-  checksum: 10c0/1c233bd105deeba3c9a8911ed4ec24ba45adbb51fec02f7944a10a202c38e3df4ef2b524bdeb55f2e4f8c77c13b2959e2e2e6022e5d99acdd70633b5f7e138cf
-  languageName: node
-  linkType: hard
-
 "safe-buffer@npm:5.1.2, safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
   version: 5.1.2
   resolution: "safe-buffer@npm:5.1.2"
@@ -34775,20 +28353,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:5.2.1, safe-buffer@npm:>=5.1.0, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:^5.1.1, safe-buffer@npm:^5.1.2, safe-buffer@npm:^5.2.0, safe-buffer@npm:~5.2.0":
+"safe-buffer@npm:5.2.1, safe-buffer@npm:>=5.1.0, safe-buffer@npm:^5.1.0, safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
   checksum: 10c0/6501914237c0a86e9675d4e51d89ca3c21ffd6a31642efeba25ad65720bce6921c9e7e974e5be91a786b25aa058b5303285d3c15dbabf983a919f5f630d349f3
   languageName: node
   linkType: hard
 
-"safe-json-stringify@npm:~1":
-  version: 1.2.0
-  resolution: "safe-json-stringify@npm:1.2.0"
-  checksum: 10c0/9c21c7b63a35a9e52d248eea2ad7bc9e790dde5aa418f0d4eed3c0b4c866e15337425b0d973173d30dd70a9e422271619f17e13574e0c8371d0c240cf72b871f
-  languageName: node
-  linkType: hard
-
 "safe-push-apply@npm:^1.0.0":
   version: 1.0.0
   resolution: "safe-push-apply@npm:1.0.0"
@@ -34810,15 +28381,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-regex@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "safe-regex@npm:1.1.0"
-  dependencies:
-    ret: "npm:~0.1.10"
-  checksum: 10c0/547d58aa5184cbef368fd5ed5f28d20f911614748c5da6b35f53fd6626396707587251e6e3d1e3010fd3ff1212e413841b8825eaa5f317017ca62a30899af31a
-  languageName: node
-  linkType: hard
-
 "safe-stringify@npm:^1.1.0":
   version: 1.1.1
   resolution: "safe-stringify@npm:1.1.1"
@@ -34826,22 +28388,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safer-buffer@npm:>= 2.1.2 < 3, safer-buffer@npm:>= 2.1.2 < 3.0.0, safer-buffer@npm:^2.1.0":
+"safer-buffer@npm:>= 2.1.2 < 3, safer-buffer@npm:>= 2.1.2 < 3.0.0":
   version: 2.1.2
   resolution: "safer-buffer@npm:2.1.2"
   checksum: 10c0/7e3c8b2e88a1841c9671094bbaeebd94448111dd90a81a1f606f3f67708a6ec57763b3b47f06da09fc6054193e0e6709e77325415dc8422b04497a8070fa02d4
   languageName: node
   linkType: hard
 
-"sanitize-filename@npm:^1.6.1":
-  version: 1.6.3
-  resolution: "sanitize-filename@npm:1.6.3"
-  dependencies:
-    truncate-utf8-bytes: "npm:^1.0.0"
-  checksum: 10c0/16ff47556a6e54e228c28db096bedd303da67b030d4bea4925fd71324932d6b02c7b0446f00ad33987b25b6414f24ae968e01a1a1679ce599542e82c4b07eb1f
-  languageName: node
-  linkType: hard
-
 "sax@npm:>=0.6.0, sax@npm:^1.2.4":
   version: 1.2.4
   resolution: "sax@npm:1.2.4"
@@ -34858,12 +28411,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:0.24.0-canary-efb381bbf-20230505":
-  version: 0.24.0-canary-efb381bbf-20230505
-  resolution: "scheduler@npm:0.24.0-canary-efb381bbf-20230505"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: 10c0/4fb594d64c692199117160bbd1a5261f03287f8ec59d9ca079a772e5fbb3139495ebda843324d7c8957c07390a0825acb6f72bd29827fb9e155d793db6c2e2bc
+"scheduler@npm:0.26.0, scheduler@npm:^0.26.0":
+  version: 0.26.0
+  resolution: "scheduler@npm:0.26.0"
+  checksum: 10c0/5b8d5bfddaae3513410eda54f2268e98a376a429931921a81b5c3a2873aab7ca4d775a8caac5498f8cbc7d0daeab947cf923dbd8e215d61671f9f4e392d34356
   languageName: node
   linkType: hard
 
@@ -34876,12 +28427,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.23.2":
-  version: 0.23.2
-  resolution: "scheduler@npm:0.23.2"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78
+"scheduler@npm:^0.25.0":
+  version: 0.25.0
+  resolution: "scheduler@npm:0.25.0"
+  checksum: 10c0/a4bb1da406b613ce72c1299db43759526058fdcc413999c3c3e0db8956df7633acf395cb20eb2303b6a65d658d66b6585d344460abaee8080b4aa931f10eaafe
+  languageName: node
+  linkType: hard
+
+"scheduler@npm:^0.27.0":
+  version: 0.27.0
+  resolution: "scheduler@npm:0.27.0"
+  checksum: 10c0/4f03048cb05a3c8fddc45813052251eca00688f413a3cee236d984a161da28db28ba71bd11e7a3dd02f7af84ab28d39fb311431d3b3772fed557945beb00c452
   languageName: node
   linkType: hard
 
@@ -34896,28 +28452,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "schema-utils@npm:1.0.0"
-  dependencies:
-    ajv: "npm:^6.1.0"
-    ajv-errors: "npm:^1.0.0"
-    ajv-keywords: "npm:^3.1.0"
-  checksum: 10c0/670e22d7f0ff0b6f4514a4d6fb27c359101b44b7dbfd9563af201af72eb4a9ff06144020cab5f85b16e88821fd09b97cbdae6c893721c6528c8cb704124e6a2f
-  languageName: node
-  linkType: hard
-
-"schema-utils@npm:^2.6.5, schema-utils@npm:^2.7.0":
-  version: 2.7.1
-  resolution: "schema-utils@npm:2.7.1"
-  dependencies:
-    "@types/json-schema": "npm:^7.0.5"
-    ajv: "npm:^6.12.4"
-    ajv-keywords: "npm:^3.5.2"
-  checksum: 10c0/f484f34464edd8758712d5d3ba25a306e367dac988aecaf4ce112e99baae73f33a807b5cf869240bb6648c80720b36af2d7d72be3a27faa49a2d4fc63fa3f85f
-  languageName: node
-  linkType: hard
-
 "schema-utils@npm:^3.0.0":
   version: 3.3.0
   resolution: "schema-utils@npm:3.3.0"
@@ -34991,7 +28525,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:2 || 3 || 4 || 5, semver@npm:^5.4.1, semver@npm:^5.5.0, semver@npm:^5.6.0":
+"semver@npm:2 || 3 || 4 || 5, semver@npm:^5.5.0, semver@npm:^5.6.0":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"
   bin:
@@ -35000,16 +28534,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.3.2":
-  version: 7.3.2
-  resolution: "semver@npm:7.3.2"
+"semver@npm:7.7.2":
+  version: 7.7.2
+  resolution: "semver@npm:7.7.2"
   bin:
-    semver: ./bin/semver.js
-  checksum: 10c0/cea60e44127a4b586ba0ac4a3036f920b351f50c9578740621e837c9efd307f6f90081312ac97682ed74996983bc15f5652cd7be310453a0865aa70f9f5636f3
+    semver: bin/semver.js
+  checksum: 10c0/aca305edfbf2383c22571cb7714f48cadc7ac95371b4b52362fb8eeffdfbc0de0669368b82b2b15978f8848f01d7114da65697e56cd8c37b0dab8c58e543f9ea
   languageName: node
   linkType: hard
 
-"semver@npm:^6.0.0, semver@npm:^6.1.2, semver@npm:^6.3.0, semver@npm:^6.3.1":
+"semver@npm:^6.3.0, semver@npm:^6.3.1":
   version: 6.3.1
   resolution: "semver@npm:6.3.1"
   bin:
@@ -35018,7 +28552,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.0.0, semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.2, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2, semver@npm:^7.6.3":
+"semver@npm:^7.1.3, semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2, semver@npm:^7.6.3":
   version: 7.7.4
   resolution: "semver@npm:7.7.4"
   bin:
@@ -35048,24 +28582,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"send@npm:^0.18.0":
-  version: 0.18.0
-  resolution: "send@npm:0.18.0"
+"send@npm:^0.19.0, send@npm:~0.19.1":
+  version: 0.19.2
+  resolution: "send@npm:0.19.2"
   dependencies:
     debug: "npm:2.6.9"
     depd: "npm:2.0.0"
     destroy: "npm:1.2.0"
-    encodeurl: "npm:~1.0.2"
+    encodeurl: "npm:~2.0.0"
     escape-html: "npm:~1.0.3"
     etag: "npm:~1.8.1"
-    fresh: "npm:0.5.2"
-    http-errors: "npm:2.0.0"
+    fresh: "npm:~0.5.2"
+    http-errors: "npm:~2.0.1"
     mime: "npm:1.6.0"
     ms: "npm:2.1.3"
-    on-finished: "npm:2.4.1"
+    on-finished: "npm:~2.4.1"
     range-parser: "npm:~1.2.1"
-    statuses: "npm:2.0.1"
-  checksum: 10c0/0eb134d6a51fc13bbcb976a1f4214ea1e33f242fae046efc311e80aff66c7a43603e26a79d9d06670283a13000e51be6e0a2cb80ff0942eaf9f1cd30b7ae736a
+    statuses: "npm:~2.0.2"
+  checksum: 10c0/20c2389fe0fdf3fc499938cac598bc32272287e993c4960717381a10de8550028feadfb9076f959a3a3ebdea42e1f690e116f0d16468fa56b9fd41866d3dc267
   languageName: node
   linkType: hard
 
@@ -35088,16 +28622,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sentence-case@npm:^2.1.0":
-  version: 2.1.1
-  resolution: "sentence-case@npm:2.1.1"
-  dependencies:
-    no-case: "npm:^2.2.0"
-    upper-case-first: "npm:^1.1.2"
-  checksum: 10c0/3572fe33dd5df4156bc2e5f46a8f7642906234c448484016d5fbb8c7214bdd1f5f01d1791a7b2b1a4f5a99e6e43141d22aa097c0fdcfe41214fd56a85f1ee7f6
-  languageName: node
-  linkType: hard
-
 "serialize-error@npm:^2.1.0":
   version: 2.1.0
   resolution: "serialize-error@npm:2.1.0"
@@ -35105,33 +28629,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"serialize-error@npm:^8.0.1":
-  version: 8.1.0
-  resolution: "serialize-error@npm:8.1.0"
-  dependencies:
-    type-fest: "npm:^0.20.2"
-  checksum: 10c0/8cfd89f43ca93e283c5f1d16178a536bdfac9bc6029f4a9df988610cc399bc4f2478d1f10ce40b9dff66b863a5158a19b438fbec929045c96d92174f6bca1e88
-  languageName: node
-  linkType: hard
-
-"serialize-javascript@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "serialize-javascript@npm:4.0.0"
-  dependencies:
-    randombytes: "npm:^2.1.0"
-  checksum: 10c0/510dfe7f0311c0b2f7ab06311afa1668ba2969ab2f1faaac0a4924ede76b7f22ba85cfdeaa0052ec5a047bca42c8cd8ac8df8f0efe52f9bd290b3a39ae69fe9d
-  languageName: node
-  linkType: hard
-
-"serialize-javascript@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "serialize-javascript@npm:5.0.1"
-  dependencies:
-    randombytes: "npm:^2.1.0"
-  checksum: 10c0/646bd92a8298d764d38316f3006bce0b0def6d0e254791396ac34403847654d9346b0b6ed7865efd799d93d4c47d900e08a8fa7a6f7f8d2dbaebab5444c3b431
-  languageName: node
-  linkType: hard
-
 "serialize-javascript@npm:^6.0.0, serialize-javascript@npm:^6.0.1, serialize-javascript@npm:^6.0.2":
   version: 6.0.2
   resolution: "serialize-javascript@npm:6.0.2"
@@ -35141,19 +28638,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"serve-favicon@npm:^2.5.0":
-  version: 2.5.0
-  resolution: "serve-favicon@npm:2.5.0"
-  dependencies:
-    etag: "npm:~1.8.1"
-    fresh: "npm:0.5.2"
-    ms: "npm:2.1.1"
-    parseurl: "npm:~1.3.2"
-    safe-buffer: "npm:5.1.1"
-  checksum: 10c0/7244ced3c46f8dfde591dc801f1e21ebc8fa07c4870cbbaee3ce37104b3aad32858e674e251a8ed4837867ea0dd67cb734b485ae5a7b0895cb6022f8b8c79303
-  languageName: node
-  linkType: hard
-
 "serve-handler@npm:^6.1.6":
   version: 6.1.6
   resolution: "serve-handler@npm:6.1.6"
@@ -35184,7 +28668,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"serve-static@npm:1.16.2, serve-static@npm:^1.13.1":
+"serve-static@npm:1.16.2":
   version: 1.16.2
   resolution: "serve-static@npm:1.16.2"
   dependencies:
@@ -35196,6 +28680,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"serve-static@npm:^1.16.2":
+  version: 1.16.3
+  resolution: "serve-static@npm:1.16.3"
+  dependencies:
+    encodeurl: "npm:~2.0.0"
+    escape-html: "npm:~1.0.3"
+    parseurl: "npm:~1.3.3"
+    send: "npm:~0.19.1"
+  checksum: 10c0/36320397a073c71bedf58af48a4a100fe6d93f07459af4d6f08b9a7217c04ce2a4939e0effd842dc7bece93ffcd59eb52f58c4fff2a8e002dc29ae6b219cd42b
+  languageName: node
+  linkType: hard
+
 "serve-static@npm:^2.2.0":
   version: 2.2.0
   resolution: "serve-static@npm:2.2.0"
@@ -35252,25 +28748,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-value@npm:^2.0.0, set-value@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "set-value@npm:2.0.1"
-  dependencies:
-    extend-shallow: "npm:^2.0.1"
-    is-extendable: "npm:^0.1.1"
-    is-plain-object: "npm:^2.0.3"
-    split-string: "npm:^3.0.1"
-  checksum: 10c0/4c40573c4f6540456e4b38b95f570272c4cfbe1d12890ad4057886da8535047cd772dfadf5b58e2e87aa244dfb4c57e3586f6716b976fc47c5144b6b09e1811b
-  languageName: node
-  linkType: hard
-
-"setimmediate@npm:^1.0.4, setimmediate@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "setimmediate@npm:1.0.5"
-  checksum: 10c0/5bae81bfdbfbd0ce992893286d49c9693c82b1bcc00dcaaf3a09c8f428fdeacf4190c013598b81875dfac2b08a572422db7df779a99332d0fce186d15a3e4d49
-  languageName: node
-  linkType: hard
-
 "setprototypeof@npm:1.1.0":
   version: 1.1.0
   resolution: "setprototypeof@npm:1.1.0"
@@ -35285,25 +28762,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sf-symbols-typescript@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "sf-symbols-typescript@npm:1.0.0"
-  checksum: 10c0/690314f401fb37b79382decf158fc7f511de5c113ec3fb265ce4e1e06341050d17c1327c581342367f0ba6e41d2b3e82637789fab8cd41a4470ef952e05241bb
-  languageName: node
-  linkType: hard
-
-"sha.js@npm:^2.4.0, sha.js@npm:^2.4.8":
-  version: 2.4.11
-  resolution: "sha.js@npm:2.4.11"
-  dependencies:
-    inherits: "npm:^2.0.1"
-    safe-buffer: "npm:^5.0.1"
-  bin:
-    sha.js: ./bin.js
-  checksum: 10c0/b7a371bca8821c9cc98a0aeff67444a03d48d745cb103f17228b96793f455f0eb0a691941b89ea1e60f6359207e36081d9be193252b0f128e0daf9cfea2815a5
-  languageName: node
-  linkType: hard
-
 "shallow-clone@npm:^3.0.0":
   version: 3.0.1
   resolution: "shallow-clone@npm:3.0.1"
@@ -35352,7 +28810,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shell-quote@npm:^1.6.1, shell-quote@npm:^1.7.2, shell-quote@npm:^1.7.3, shell-quote@npm:^1.8.1":
+"shell-quote@npm:^1.6.1, shell-quote@npm:^1.7.3, shell-quote@npm:^1.8.1":
   version: 1.8.1
   resolution: "shell-quote@npm:1.8.1"
   checksum: 10c0/8cec6fd827bad74d0a49347057d40dfea1e01f12a6123bf82c4649f3ef152fc2bc6d6176e6376bffcd205d9d0ccb4f1f9acae889384d20baff92186f01ea455a
@@ -35463,15 +28921,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"simple-swizzle@npm:^0.2.2":
-  version: 0.2.2
-  resolution: "simple-swizzle@npm:0.2.2"
-  dependencies:
-    is-arrayish: "npm:^0.3.1"
-  checksum: 10c0/df5e4662a8c750bdba69af4e8263c5d96fe4cd0f9fe4bdfa3cbdeb45d2e869dff640beaaeb1ef0e99db4d8d2ec92f85508c269f50c972174851bc1ae5bd64308
-  languageName: node
-  linkType: hard
-
 "sirv@npm:^2.0.3":
   version: 2.0.3
   resolution: "sirv@npm:2.0.3"
@@ -35545,17 +28994,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slice-ansi@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "slice-ansi@npm:2.1.0"
-  dependencies:
-    ansi-styles: "npm:^3.2.0"
-    astral-regex: "npm:^1.0.0"
-    is-fullwidth-code-point: "npm:^2.0.0"
-  checksum: 10c0/c317b21ec9e3d3968f3d5b548cbfc2eae331f58a03f1352621020799cbe695b3611ee972726f8f32d4ca530065a5ec9c74c97fde711c1f41b4a1585876b2c191
-  languageName: node
-  linkType: hard
-
 "slice-ansi@npm:^4.0.0":
   version: 4.0.0
   resolution: "slice-ansi@npm:4.0.0"
@@ -35588,15 +29026,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"snake-case@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "snake-case@npm:2.1.0"
-  dependencies:
-    no-case: "npm:^2.2.0"
-  checksum: 10c0/fd8b21537263d4e64cadd62da0cb5fd96c95f8685ee8e290c912b79950385dbb9eccf7216a913d96db5efc4ade426badae5e3e35b69ea1f10cbb0b4898a38236
-  languageName: node
-  linkType: hard
-
 "snake-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "snake-case@npm:3.0.4"
@@ -35607,42 +29036,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"snapdragon-node@npm:^2.0.1":
-  version: 2.1.1
-  resolution: "snapdragon-node@npm:2.1.1"
-  dependencies:
-    define-property: "npm:^1.0.0"
-    isobject: "npm:^3.0.0"
-    snapdragon-util: "npm:^3.0.1"
-  checksum: 10c0/7616e6a1ca054afe3ad8defda17ebe4c73b0800d2e0efd635c44ee1b286f8ac7900517314b5330862ce99b28cd2782348ee78bae573ff0f55832ad81d9657f3f
-  languageName: node
-  linkType: hard
-
-"snapdragon-util@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "snapdragon-util@npm:3.0.1"
-  dependencies:
-    kind-of: "npm:^3.2.0"
-  checksum: 10c0/4441856d343399ba7f37f79681949d51b922e290fcc07e7bc94655a50f584befa4fb08f40c3471cd160e004660161964d8ff140cba49baa59aa6caba774240e3
-  languageName: node
-  linkType: hard
-
-"snapdragon@npm:^0.8.1":
-  version: 0.8.2
-  resolution: "snapdragon@npm:0.8.2"
-  dependencies:
-    base: "npm:^0.11.1"
-    debug: "npm:^2.2.0"
-    define-property: "npm:^0.2.5"
-    extend-shallow: "npm:^2.0.1"
-    map-cache: "npm:^0.2.2"
-    source-map: "npm:^0.5.6"
-    source-map-resolve: "npm:^0.5.0"
-    use: "npm:^3.1.0"
-  checksum: 10c0/dfdac1f73d47152d72fc07f4322da09bbddfa31c1c9c3ae7346f252f778c45afa5b03e90813332f02f04f6de8003b34a168c456f8bb719024d092f932520ffca
-  languageName: node
-  linkType: hard
-
 "sockjs@npm:^0.3.24":
   version: 0.3.24
   resolution: "sockjs@npm:0.3.24"
@@ -35700,56 +29093,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-list-map@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "source-list-map@npm:2.0.1"
-  checksum: 10c0/2e5e421b185dcd857f46c3c70e2e711a65d717b78c5f795e2e248c9d67757882ea989b80ebc08cf164eeeda5f4be8aa95d3b990225070b2daaaf3257c5958149
-  languageName: node
-  linkType: hard
-
-"source-map-explorer@npm:^2.5.3":
-  version: 2.5.3
-  resolution: "source-map-explorer@npm:2.5.3"
-  dependencies:
-    btoa: "npm:^1.2.1"
-    chalk: "npm:^4.1.0"
-    convert-source-map: "npm:^1.7.0"
-    ejs: "npm:^3.1.5"
-    escape-html: "npm:^1.0.3"
-    glob: "npm:^7.1.6"
-    gzip-size: "npm:^6.0.0"
-    lodash: "npm:^4.17.20"
-    open: "npm:^7.3.1"
-    source-map: "npm:^0.7.4"
-    temp: "npm:^0.9.4"
-    yargs: "npm:^16.2.0"
-  bin:
-    sme: bin/cli.js
-    source-map-explorer: bin/cli.js
-  checksum: 10c0/43bbf2dd3384c4bfccbde14f1302d8e325b61a0847d2affb8e40ec1c7467e93af3058a3458525935407e25aa7bc19b9459f1113aba433b9e7f0cc273c30cd07a
-  languageName: node
-  linkType: hard
-
-"source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.1":
+"source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"
   checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf
   languageName: node
   linkType: hard
 
-"source-map-resolve@npm:^0.5.0":
-  version: 0.5.3
-  resolution: "source-map-resolve@npm:0.5.3"
-  dependencies:
-    atob: "npm:^2.1.2"
-    decode-uri-component: "npm:^0.2.0"
-    resolve-url: "npm:^0.2.1"
-    source-map-url: "npm:^0.4.0"
-    urix: "npm:^0.1.0"
-  checksum: 10c0/410acbe93882e058858d4c1297be61da3e1533f95f25b95903edddc1fb719654e705663644677542d1fb78a66390238fad1a57115fc958a0724cf9bb509caf57
-  languageName: node
-  linkType: hard
-
 "source-map-support@npm:0.5.13":
   version: 0.5.13
   resolution: "source-map-support@npm:0.5.13"
@@ -35770,7 +29120,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-support@npm:^0.5.16, source-map-support@npm:~0.5.12, source-map-support@npm:~0.5.20, source-map-support@npm:~0.5.21":
+"source-map-support@npm:^0.5.16, source-map-support@npm:~0.5.20, source-map-support@npm:~0.5.21":
   version: 0.5.21
   resolution: "source-map-support@npm:0.5.21"
   dependencies:
@@ -35780,13 +29130,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-url@npm:^0.4.0":
-  version: 0.4.1
-  resolution: "source-map-url@npm:0.4.1"
-  checksum: 10c0/f8af0678500d536c7f643e32094d6718a4070ab4ca2d2326532512cfbe2d5d25a45849b4b385879326f2d7523bb3b686d0360dd347a3cda09fd89a5c28d4bc58
-  languageName: node
-  linkType: hard
-
 "source-map@npm:^0.5.0, source-map@npm:^0.5.6":
   version: 0.5.7
   resolution: "source-map@npm:0.5.7"
@@ -35815,13 +29158,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"space-separated-tokens@npm:^1.0.0":
-  version: 1.1.5
-  resolution: "space-separated-tokens@npm:1.1.5"
-  checksum: 10c0/3ee0a6905f89e1ffdfe474124b1ade9fe97276a377a0b01350bc079b6ec566eb5b219e26064cc5b7f3899c05bde51ffbc9154290b96eaf82916a1e2c2c13ead9
-  languageName: node
-  linkType: hard
-
 "space-separated-tokens@npm:^2.0.0":
   version: 2.0.2
   resolution: "space-separated-tokens@npm:2.0.2"
@@ -35897,24 +29233,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"split-string@npm:^3.0.1, split-string@npm:^3.0.2":
-  version: 3.1.0
-  resolution: "split-string@npm:3.1.0"
-  dependencies:
-    extend-shallow: "npm:^3.0.0"
-  checksum: 10c0/72d7cd625445c7af215130e1e2bc183013bb9dd48a074eda1d35741e2b0dcb355e6df5b5558a62543a24dcec37dd1d6eb7a6228ff510d3c9de0f3dc1d1da8a70
-  languageName: node
-  linkType: hard
-
-"split@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "split@npm:1.0.1"
-  dependencies:
-    through: "npm:2"
-  checksum: 10c0/7f489e7ed5ff8a2e43295f30a5197ffcb2d6202c9cf99357f9690d645b19c812bccf0be3ff336fea5054cda17ac96b91d67147d95dbfc31fbb5804c61962af85
-  languageName: node
-  linkType: hard
-
 "sprintf-js@npm:~1.0.2":
   version: 1.0.3
   resolution: "sprintf-js@npm:1.0.3"
@@ -35929,24 +29247,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ssri@npm:^10.0.0":
-  version: 10.0.6
-  resolution: "ssri@npm:10.0.6"
-  dependencies:
-    minipass: "npm:^7.0.3"
-  checksum: 10c0/e5a1e23a4057a86a97971465418f22ea89bd439ac36ade88812dd920e4e61873e8abd6a9b72a03a67ef50faa00a2daf1ab745c5a15b46d03e0544a0296354227
-  languageName: node
-  linkType: hard
-
-"ssri@npm:^6.0.1":
-  version: 6.0.2
-  resolution: "ssri@npm:6.0.2"
-  dependencies:
-    figgy-pudding: "npm:^3.5.1"
-  checksum: 10c0/e6f18c57dc9fed69343db5c59f95ef334e9664bfbdbad686c190ef2c6ad6b35e9b56cb203f3e4eb7eee6cb7bb602daa26dab6685e3847f0b5c464cdf7d9c2cee
-  languageName: node
-  linkType: hard
-
 "ssri@npm:^8.0.0, ssri@npm:^8.0.1":
   version: 8.0.1
   resolution: "ssri@npm:8.0.1"
@@ -35970,15 +29270,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stack-generator@npm:^2.0.3":
-  version: 2.0.10
-  resolution: "stack-generator@npm:2.0.10"
-  dependencies:
-    stackframe: "npm:^1.3.4"
-  checksum: 10c0/c3f6f6c580488e65c0fee806a57f6ae4b79e6435f144be471c1f20328a8d9d8492d4f3beed31840f6dae03e2633325e2764fd3aca5c3126a0639e7c9ddfa45ce
-  languageName: node
-  linkType: hard
-
 "stack-utils@npm:^2.0.3":
   version: 2.0.5
   resolution: "stack-utils@npm:2.0.5"
@@ -36011,23 +29302,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"state-toggle@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "state-toggle@npm:1.0.3"
-  checksum: 10c0/6051ee5654b39b0006911ae3130fa7f47675e07db16a711d8cd23d43b63f383e98f3bd9fa80e118a3f5964a11284d8eee180baef27a556146e628f8da74aba12
-  languageName: node
-  linkType: hard
-
-"static-extend@npm:^0.1.1":
-  version: 0.1.2
-  resolution: "static-extend@npm:0.1.2"
-  dependencies:
-    define-property: "npm:^0.2.5"
-    object-copy: "npm:^0.1.0"
-  checksum: 10c0/284f5865a9e19d079f1badbcd70d5f9f82e7a08393f818a220839cd5f71729e89105e1c95322bd28e833161d484cee671380ca443869ae89578eef2bf55c0653
-  languageName: node
-  linkType: hard
-
 "stats-gl@npm:^2.2.8":
   version: 2.4.2
   resolution: "stats-gl@npm:2.4.2"
@@ -36117,9 +29391,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook@npm:^9.1.2":
-  version: 9.1.2
-  resolution: "storybook@npm:9.1.2"
+"storybook@npm:9.1.17":
+  version: 9.1.17
+  resolution: "storybook@npm:9.1.17"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     "@testing-library/jest-dom": "npm:^6.6.3"
@@ -36140,67 +29414,18 @@ __metadata:
       optional: true
   bin:
     storybook: ./bin/index.cjs
-  checksum: 10c0/3a575f94913f9000a3591e5c685f4eabf75fa78ce306f8b0d48e9c72e46028df31f6d15955b8a338be2bf48dadca6550b65782783d8b3cb4b737ba9f3887d007
+  checksum: 10c0/8590eaff08714565f19658b16676005960cada649fd0809171d8e8917f38592c52a795a68662c92abb90aae9d5794f0e60f08a2523d9d2524f7f826af0ddd66e
   languageName: node
   linkType: hard
 
-"stream-browserify@npm:^2.0.1":
-  version: 2.0.2
-  resolution: "stream-browserify@npm:2.0.2"
-  dependencies:
-    inherits: "npm:~2.0.1"
-    readable-stream: "npm:^2.0.2"
-  checksum: 10c0/485562bd5d962d633ae178449029c6fa2611052e356bdb5668f768544aa4daa94c4f9a97de718f3f30ad98f3cb98a5f396252bb3855aff153c138f79c0e8f6ac
-  languageName: node
-  linkType: hard
-
-"stream-buffers@npm:2.2.x, stream-buffers@npm:~2.2.0":
+"stream-buffers@npm:2.2.x":
   version: 2.2.0
   resolution: "stream-buffers@npm:2.2.0"
   checksum: 10c0/14a351f0a066eaa08c8c64a74f4aedd87dd7a8e59d4be224703da33dca3eb370828ee6c0ae3fff59a9c743e8098728fc95c5f052ae7741672a31e6b1430ba50a
   languageName: node
   linkType: hard
 
-"stream-chain@npm:^2.2.5":
-  version: 2.2.5
-  resolution: "stream-chain@npm:2.2.5"
-  checksum: 10c0/c512f50190d7c92d688fa64e7af540c51b661f9c2b775fc72bca38ea9bca515c64c22c2197b1be463741daacbaaa2dde8a8ea24ebda46f08391224f15249121a
-  languageName: node
-  linkType: hard
-
-"stream-each@npm:^1.1.0":
-  version: 1.2.3
-  resolution: "stream-each@npm:1.2.3"
-  dependencies:
-    end-of-stream: "npm:^1.1.0"
-    stream-shift: "npm:^1.0.0"
-  checksum: 10c0/7ed229d3b7c24373058b5742b00066da8d3122d1487c8219a025ed53a8978545c77654a529a8e9c62ba83ae80c424cbb0204776b49abf72270d2e8154831dd5f
-  languageName: node
-  linkType: hard
-
-"stream-http@npm:^2.7.2":
-  version: 2.8.3
-  resolution: "stream-http@npm:2.8.3"
-  dependencies:
-    builtin-status-codes: "npm:^3.0.0"
-    inherits: "npm:^2.0.1"
-    readable-stream: "npm:^2.3.6"
-    to-arraybuffer: "npm:^1.0.0"
-    xtend: "npm:^4.0.0"
-  checksum: 10c0/fbe7d327a29216bbabe88d3819bb8f7a502f11eeacf3212579e5af1f76fa7283f6ffa66134ab7d80928070051f571d1029e85f65ce3369fffd4c4df3669446c4
-  languageName: node
-  linkType: hard
-
-"stream-json@npm:^1.7.4, stream-json@npm:^1.7.5":
-  version: 1.8.0
-  resolution: "stream-json@npm:1.8.0"
-  dependencies:
-    stream-chain: "npm:^2.2.5"
-  checksum: 10c0/5e6de600a7d86f54f9ced608131f1f840082fa7aa443df9fe72bd255b6b1c098d2c6c756b4b9acd64e50e2b9f52d9a432714bce43e96e9850b819ee9ff6331a1
-  languageName: node
-  linkType: hard
-
-"stream-shift@npm:^1.0.0, stream-shift@npm:^1.0.2":
+"stream-shift@npm:^1.0.2":
   version: 1.0.3
   resolution: "stream-shift@npm:1.0.3"
   checksum: 10c0/939cd1051ca750d240a0625b106a2b988c45fb5a3be0cebe9a9858cb01bc1955e8c7b9fac17a9462976bea4a7b704e317c5c2200c70f0ca715a3363b9aa4fd3b
@@ -36224,13 +29449,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-natural-compare@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "string-natural-compare@npm:3.0.1"
-  checksum: 10c0/85a6a9195736be500af5d817c7ea36b7e1ac278af079a807f70f79a56602359ee6743ca409af6291b94557de550ff60d1ec31b3c4fc8e7a08d0e12cdab57c149
-  languageName: node
-  linkType: hard
-
 "string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.0.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.2, string-width@npm:^4.2.3":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
@@ -36264,7 +29482,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.matchall@npm:^4.0.0 || ^3.0.1, string.prototype.matchall@npm:^4.0.12":
+"string.prototype.matchall@npm:^4.0.12":
   version: 4.0.12
   resolution: "string.prototype.matchall@npm:4.0.12"
   dependencies:
@@ -36285,28 +29503,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.padend@npm:^3.0.0":
-  version: 3.1.3
-  resolution: "string.prototype.padend@npm:3.1.3"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.1.3"
-    es-abstract: "npm:^1.19.1"
-  checksum: 10c0/c713de3b48f6c773c72012dfad99d3865e714d9c9f8ea8656852b21a9bf5d6ccbcbf553e14ef2b6cbdff45db935103322a1fab87dfda8021fd8c8af432195aeb
-  languageName: node
-  linkType: hard
-
-"string.prototype.padstart@npm:^3.0.0":
-  version: 3.1.3
-  resolution: "string.prototype.padstart@npm:3.1.3"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.1.3"
-    es-abstract: "npm:^1.19.1"
-  checksum: 10c0/3fbe6ba613461b19a69294ba4580b41906f1dc74d51234d0c34c8c1cc808578c0b87b67b46f7a91ff2c9b45c20676b98f326d5fb8b5221a39d1ebfdd899f42e7
-  languageName: node
-  linkType: hard
-
 "string.prototype.repeat@npm:^1.0.0":
   version: 1.0.0
   resolution: "string.prototype.repeat@npm:1.0.0"
@@ -36355,7 +29551,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string_decoder@npm:^1.0.0, string_decoder@npm:^1.1.1":
+"string_decoder@npm:^1.1.1":
   version: 1.3.0
   resolution: "string_decoder@npm:1.3.0"
   dependencies:
@@ -36410,16 +29606,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-ansi@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "strip-ansi@npm:3.0.1"
-  dependencies:
-    ansi-regex: "npm:^2.0.0"
-  checksum: 10c0/f6e7fbe8e700105dccf7102eae20e4f03477537c74b286fd22cfc970f139002ed6f0d9c10d0e21aa9ed9245e0fa3c9275930e8795c5b947da136e4ecb644a70f
-  languageName: node
-  linkType: hard
-
-"strip-ansi@npm:^5.0.0, strip-ansi@npm:^5.2.0":
+"strip-ansi@npm:^5.2.0":
   version: 5.2.0
   resolution: "strip-ansi@npm:5.2.0"
   dependencies:
@@ -36444,15 +29631,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-bom@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "strip-bom@npm:2.0.0"
-  dependencies:
-    is-utf8: "npm:^0.2.0"
-  checksum: 10c0/4fcbb248af1d5c1f2d710022b7d60245077e7942079bfb7ef3fc8c1ae78d61e96278525ba46719b15ab12fced5c7603777105bc898695339d7c97c64d300ed0b
-  languageName: node
-  linkType: hard
-
 "strip-bom@npm:^3.0.0":
   version: 3.0.0
   resolution: "strip-bom@npm:3.0.0"
@@ -36481,17 +29659,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-indent@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "strip-indent@npm:1.0.1"
-  dependencies:
-    get-stdin: "npm:^4.0.1"
-  bin:
-    strip-indent: cli.js
-  checksum: 10c0/671370d44105b63daf4582a42f0a0168d58a351f6558eb913d1ede05d0ad5f964548b99f15c63fa6c7415c3980aad72f28c62997fd98fbb6da2eee1051d3c21a
-  languageName: node
-  linkType: hard
-
 "strip-indent@npm:^3.0.0":
   version: 3.0.0
   resolution: "strip-indent@npm:3.0.0"
@@ -36524,13 +29691,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strnum@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "strnum@npm:1.0.5"
-  checksum: 10c0/64fb8cc2effbd585a6821faa73ad97d4b553c8927e49086a162ffd2cc818787643390b89d567460a8e74300148d11ac052e21c921ef2049f2987f4b1b89a7ff1
-  languageName: node
-  linkType: hard
-
 "structured-headers@npm:^0.4.1":
   version: 0.4.1
   resolution: "structured-headers@npm:0.4.1"
@@ -36538,18 +29698,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-loader@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "style-loader@npm:1.3.0"
-  dependencies:
-    loader-utils: "npm:^2.0.0"
-    schema-utils: "npm:^2.7.0"
-  peerDependencies:
-    webpack: ^4.0.0 || ^5.0.0
-  checksum: 10c0/21137d63623690af0c8b135f94e01af724bc0dea560c65ff553aa06c560fac69c068ec19ae7893b3667e50e79a660e051783803c949bcd559a8fc2f839397056
-  languageName: node
-  linkType: hard
-
 "style-search@npm:^0.1.0":
   version: 0.1.0
   resolution: "style-search@npm:0.1.0"
@@ -36557,15 +29705,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-to-object@npm:0.3.0, style-to-object@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "style-to-object@npm:0.3.0"
-  dependencies:
-    inline-style-parser: "npm:0.1.1"
-  checksum: 10c0/afe9b96ba077a9068baf8887091870f50298157c0ebf5378151792cf2a2ce084fec9b34fc544da0d9f8e6c22ca0c9e23aa6f075bb8eb051aa1d64363e9987600
-  languageName: node
-  linkType: hard
-
 "style-to-object@npm:^0.4.0":
   version: 0.4.4
   resolution: "style-to-object@npm:0.4.4"
@@ -36789,25 +29928,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sucrase@npm:3.34.0":
-  version: 3.34.0
-  resolution: "sucrase@npm:3.34.0"
-  dependencies:
-    "@jridgewell/gen-mapping": "npm:^0.3.2"
-    commander: "npm:^4.0.0"
-    glob: "npm:7.1.6"
-    lines-and-columns: "npm:^1.1.6"
-    mz: "npm:^2.7.0"
-    pirates: "npm:^4.0.1"
-    ts-interface-checker: "npm:^0.1.9"
-  bin:
-    sucrase: ./bin/sucrase
-    sucrase-node: ./bin/sucrase-node
-  checksum: 10c0/83e524f2b9386c7029fc9e46b8d608485866d08bea5a0a71e9e3442dc12e1d05a5ab555808d1922f45dd012fc71043479d778aac07391d9740daabe45730a056
-  languageName: node
-  linkType: hard
-
-"sucrase@npm:^3.35.0":
+"sucrase@npm:^3.35.0, sucrase@npm:~3.35.1":
   version: 3.35.1
   resolution: "sucrase@npm:3.35.1"
   dependencies:
@@ -36825,27 +29946,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sudo-prompt@npm:9.1.1":
-  version: 9.1.1
-  resolution: "sudo-prompt@npm:9.1.1"
-  checksum: 10c0/0416b255ce760ad61d828b87da32a15a5a49cfe0f674031e4f0b479e0ac28a43af2bed05a95a9ac2a830f82b3fc803f865ac3ae8b5837d3dd36e22c4aced87e3
-  languageName: node
-  linkType: hard
-
-"sudo-prompt@npm:^8.2.0":
-  version: 8.2.5
-  resolution: "sudo-prompt@npm:8.2.5"
-  checksum: 10c0/c17bcc852112c11addcdfb8630fad1a236823887959f133ba47de9fcec22c03aafc49bbb35184ab7f13a78e625fb8324b86d5aa21b73b15d601aee71fb9b976e
-  languageName: node
-  linkType: hard
-
-"sudo-prompt@npm:^9.0.0":
-  version: 9.2.1
-  resolution: "sudo-prompt@npm:9.2.1"
-  checksum: 10c0/e56793513a9c95f66367a3be2ec4c1adee84a2a62f1b7ff6453d610586dcd373d7d8f4df522a7dae03aea8b779ef7f7ba25d1130d24fb1e495cfbbc2c72c7486
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -37004,16 +30104,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"swap-case@npm:^1.1.0":
-  version: 1.1.2
-  resolution: "swap-case@npm:1.1.2"
-  dependencies:
-    lower-case: "npm:^1.1.1"
-    upper-case: "npm:^1.1.1"
-  checksum: 10c0/0fb57c2427cec53c85cab0dd85f243b8b84b68e039eb550c50e01340cfa43a62e5276e04d088e9066b89073f781b258eeb97bf2c22d6232e005feeca2a11d6bc
-  languageName: node
-  linkType: hard
-
 "swc-loader@npm:^0.2.6":
   version: 0.2.6
   resolution: "swc-loader@npm:0.2.6"
@@ -37033,25 +30123,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"symbol.prototype.description@npm:^1.0.0":
-  version: 1.0.5
-  resolution: "symbol.prototype.description@npm:1.0.5"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    get-symbol-description: "npm:^1.0.0"
-    has-symbols: "npm:^1.0.2"
-    object.getownpropertydescriptors: "npm:^2.1.2"
-  checksum: 10c0/6009bb54faa50fd899772baa0c047d4d4fc85cd03b7e2b5e5385f23f4688879518103ab4a95a03b0b25e4c89c10cf0bb16c159865df2c932682cc56502693650
-  languageName: node
-  linkType: hard
-
-"synchronous-promise@npm:^2.0.15":
-  version: 2.0.16
-  resolution: "synchronous-promise@npm:2.0.16"
-  checksum: 10c0/b0cbad61b24b36ab1a8c6ac5b10335ad7c1a006b69bf5e73e5de9a141a54abaef20b4b808a9939e81dc52cf27f4c4c7a62e90cec42a0005efda712618985ba5a
-  languageName: node
-  linkType: hard
-
 "systeminformation@npm:^5.25.11":
   version: 5.27.8
   resolution: "systeminformation@npm:5.27.8"
@@ -37075,7 +30146,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tapable@npm:^1.0.0, tapable@npm:^1.1.3":
+"tapable@npm:^1.0.0":
   version: 1.1.3
   resolution: "tapable@npm:1.1.3"
   checksum: 10c0/c9f0265e55e45821ec672b9b9ee8a35d95bf3ea6b352199f8606a2799018e89cfe4433c554d424b31fc67c4be26b05d4f36dc3c607def416fdb2514cd63dba50
@@ -37115,15 +30186,15 @@ __metadata:
   linkType: hard
 
 "tar@npm:^7.5.12":
-  version: 7.5.13
-  resolution: "tar@npm:7.5.13"
+  version: 7.5.12
+  resolution: "tar@npm:7.5.12"
   dependencies:
     "@isaacs/fs-minipass": "npm:^4.0.0"
     chownr: "npm:^3.0.0"
     minipass: "npm:^7.1.2"
     minizlib: "npm:^3.1.0"
     yallist: "npm:^5.0.0"
-  checksum: 10c0/5c65b8084799bde7a791593a1c1a45d3d6ee98182e3700b24c247b7b8f8654df4191642abbdb07ff25043d45dcff35620827c3997b88ae6c12040f64bed5076b
+  checksum: 10c0/3825c5974f5fde792981f47ee9ffea021ee7f4b552b7ab95eeb98e5dfadfd5a5d5861f01fb772e2e5637a41980d3c019fd6cdad1be48b462b886abd7fe0fa17c
   languageName: node
   linkType: hard
 
@@ -37143,29 +30214,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"telnet-client@npm:1.2.8":
-  version: 1.2.8
-  resolution: "telnet-client@npm:1.2.8"
-  dependencies:
-    bluebird: "npm:^3.5.4"
-  checksum: 10c0/f6700268a9734305655e305540b21e18f0ab05923d4917fcf8c3192ced596ce4675c61e8b8d6ad12c89bf7eb2d38f2792ead5eb721c7055c4e924f9312913a34
-  languageName: node
-  linkType: hard
-
-"temp-dir@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "temp-dir@npm:1.0.0"
-  checksum: 10c0/648669d5e154d1961217784c786acadccf0156519c19e0aceda7edc76f5bdfa32a40dd7f88ebea9238ed6e3dedf08b846161916c8947058c384761351be90a8e
-  languageName: node
-  linkType: hard
-
-"temp-dir@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "temp-dir@npm:2.0.0"
-  checksum: 10c0/b1df969e3f3f7903f3426861887ed76ba3b495f63f6d0c8e1ce22588679d9384d336df6064210fda14e640ed422e2a17d5c40d901f60e161c99482d723f4d309
-  languageName: node
-  linkType: hard
-
 "temp@npm:^0.8.4":
   version: 0.8.4
   resolution: "temp@npm:0.8.4"
@@ -37175,50 +30223,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"temp@npm:^0.9.4":
-  version: 0.9.4
-  resolution: "temp@npm:0.9.4"
-  dependencies:
-    mkdirp: "npm:^0.5.1"
-    rimraf: "npm:~2.6.2"
-  checksum: 10c0/7a1cd75efa65b9ca97fc0dfa752673842d23fa41d9c641a447d86ca986eb7662f0d17771e1edf8d0149e76de3c6e7005faf2ccaa3baf64811c86d1d1a951dda7
-  languageName: node
-  linkType: hard
-
-"tempfile@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "tempfile@npm:2.0.0"
-  dependencies:
-    temp-dir: "npm:^1.0.0"
-    uuid: "npm:^3.0.1"
-  checksum: 10c0/f9d65d109b58b626ef3746ada9538c61fe6aa79b43d3d18dde0187fe9d844aeff730f5c33fa4540ad43f9ace877406788f9fa236879b5e98da5b300cfa06a9a7
-  languageName: node
-  linkType: hard
-
-"tempy@npm:0.3.0":
-  version: 0.3.0
-  resolution: "tempy@npm:0.3.0"
-  dependencies:
-    temp-dir: "npm:^1.0.0"
-    type-fest: "npm:^0.3.1"
-    unique-string: "npm:^1.0.0"
-  checksum: 10c0/9432dc82569ab0f34f23aab19ab277c58c7fcf12f903483436e9e1ee72b6b5be2189da31e351eecc69a0f98f6f2003d524cdbc50e67ee7202edf3675f9b0c2c0
-  languageName: node
-  linkType: hard
-
-"tempy@npm:^0.7.1":
-  version: 0.7.1
-  resolution: "tempy@npm:0.7.1"
-  dependencies:
-    del: "npm:^6.0.0"
-    is-stream: "npm:^2.0.0"
-    temp-dir: "npm:^2.0.0"
-    type-fest: "npm:^0.16.0"
-    unique-string: "npm:^2.0.0"
-  checksum: 10c0/f93764c9c236ade74037b5989799930687d8618fb9ce6040d3f2a82b0ae60f655cc07bad883a0ba55dc13dc56af2f92d8e8a534a9eff78f4ac79a19d65f7dadd
-  languageName: node
-  linkType: hard
-
 "terminal-link@npm:^2.1.1":
   version: 2.1.1
   resolution: "terminal-link@npm:2.1.1"
@@ -37229,44 +30233,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser-webpack-plugin@npm:^1.4.3":
-  version: 1.4.5
-  resolution: "terser-webpack-plugin@npm:1.4.5"
-  dependencies:
-    cacache: "npm:^12.0.2"
-    find-cache-dir: "npm:^2.1.0"
-    is-wsl: "npm:^1.1.0"
-    schema-utils: "npm:^1.0.0"
-    serialize-javascript: "npm:^4.0.0"
-    source-map: "npm:^0.6.1"
-    terser: "npm:^4.1.2"
-    webpack-sources: "npm:^1.4.0"
-    worker-farm: "npm:^1.7.0"
-  peerDependencies:
-    webpack: ^4.0.0
-  checksum: 10c0/97164cfa383cf988832427e912cd9606471452f15f8bfb905ae51f1a42561f90ea541141e1e530e59f8307639fed7dfdbd626aec8390acd6ad80e58ea3fcf6df
-  languageName: node
-  linkType: hard
-
-"terser-webpack-plugin@npm:^4.2.3":
-  version: 4.2.3
-  resolution: "terser-webpack-plugin@npm:4.2.3"
-  dependencies:
-    cacache: "npm:^15.0.5"
-    find-cache-dir: "npm:^3.3.1"
-    jest-worker: "npm:^26.5.0"
-    p-limit: "npm:^3.0.2"
-    schema-utils: "npm:^3.0.0"
-    serialize-javascript: "npm:^5.0.1"
-    source-map: "npm:^0.6.1"
-    terser: "npm:^5.3.4"
-    webpack-sources: "npm:^1.4.3"
-  peerDependencies:
-    webpack: ^4.0.0 || ^5.0.0
-  checksum: 10c0/52bd036b72b596b162e65dce314f1ee7ba1e82b97200d919b61ad50592dc72608b5fe50d7e3f6c0934e42183dfc746b98b922c9e1d00d75253933f799687fa4b
-  languageName: node
-  linkType: hard
-
 "terser-webpack-plugin@npm:^5.3.11, terser-webpack-plugin@npm:^5.3.9":
   version: 5.3.14
   resolution: "terser-webpack-plugin@npm:5.3.14"
@@ -37289,20 +30255,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser@npm:^4.1.2, terser@npm:^4.6.3":
-  version: 4.8.0
-  resolution: "terser@npm:4.8.0"
-  dependencies:
-    commander: "npm:^2.20.0"
-    source-map: "npm:~0.6.1"
-    source-map-support: "npm:~0.5.12"
-  bin:
-    terser: bin/terser
-  checksum: 10c0/5dbe6684ecfba94b20c556d0774e8ac05265509bf9fe7e05ed306ac839f7de33e72b9238a4a35d274f340330358d0cff88b543545ae7433f0e2a05ddf61159f1
-  languageName: node
-  linkType: hard
-
-"terser@npm:^5.10.0, terser@npm:^5.15.0, terser@npm:^5.15.1, terser@npm:^5.17.4, terser@npm:^5.3.4, terser@npm:^5.31.1":
+"terser@npm:^5.10.0, terser@npm:^5.15.0, terser@npm:^5.15.1, terser@npm:^5.17.4, terser@npm:^5.31.1":
   version: 5.37.0
   resolution: "terser@npm:5.37.0"
   dependencies:
@@ -37414,17 +30367,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"through2@npm:^2.0.0, through2@npm:^2.0.1":
-  version: 2.0.5
-  resolution: "through2@npm:2.0.5"
-  dependencies:
-    readable-stream: "npm:~2.3.6"
-    xtend: "npm:~4.0.1"
-  checksum: 10c0/cbfe5b57943fa12b4f8c043658c2a00476216d79c014895cef1ac7a1d9a8b31f6b438d0e53eecbb81054b93128324a82ecd59ec1a4f91f01f7ac113dcb14eade
-  languageName: node
-  linkType: hard
-
-"through@npm:2, through@npm:^2.3.8":
+"through@npm:^2.3.8":
   version: 2.3.8
   resolution: "through@npm:2.3.8"
   checksum: 10c0/4b09f3774099de0d4df26d95c5821a62faee32c7e96fb1f4ebd54a2d7c11c57fe88b0a0d49cf375de5fee5ae6bf4eb56dbbf29d07366864e2ee805349970d3cc
@@ -37438,15 +30381,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"timers-browserify@npm:^2.0.4":
-  version: 2.0.12
-  resolution: "timers-browserify@npm:2.0.12"
-  dependencies:
-    setimmediate: "npm:^1.0.4"
-  checksum: 10c0/98e84db1a685bc8827c117a8bc62aac811ad56a995d07938fc7ed8cdc5bf3777bfe2d4e5da868847194e771aac3749a20f6cdd22091300fe889a76fe214a4641
-  languageName: node
-  linkType: hard
-
 "tiny-emitter@npm:^2.1.0":
   version: 2.1.0
   resolution: "tiny-emitter@npm:2.1.0"
@@ -37461,7 +30395,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-invariant@npm:^1.0.2, tiny-invariant@npm:^1.1.0, tiny-invariant@npm:^1.2.0, tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3":
+"tiny-invariant@npm:^1.0.2, tiny-invariant@npm:^1.1.0, tiny-invariant@npm:^1.2.0, tiny-invariant@npm:^1.3.3":
   version: 1.3.3
   resolution: "tiny-invariant@npm:1.3.3"
   checksum: 10c0/65af4a07324b591a059b35269cd696aba21bef2107f29b9f5894d83cc143159a204b299553435b03874ebb5b94d019afa8b8eff241c8a4cfee95872c2e1c1c4a
@@ -37520,25 +30454,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"title-case@npm:^2.1.0":
-  version: 2.1.1
-  resolution: "title-case@npm:2.1.1"
-  dependencies:
-    no-case: "npm:^2.2.0"
-    upper-case: "npm:^1.0.3"
-  checksum: 10c0/7b4e51036af10d99c48fac9eee8c6f59f92c1c6cc56fc1f790c7727f5eb139c7ebf7a22381626855ce74b6534f36041e91922469dbe086e67d0d71e7e8e40fc3
-  languageName: node
-  linkType: hard
-
-"tmp@npm:^0.0.33":
-  version: 0.0.33
-  resolution: "tmp@npm:0.0.33"
-  dependencies:
-    os-tmpdir: "npm:~1.0.2"
-  checksum: 10c0/69863947b8c29cabad43fe0ce65cec5bb4b481d15d4b4b21e036b060b3edbf3bc7a5541de1bacb437bb3f7c4538f669752627fdf9b4aaf034cebd172ba373408
-  languageName: node
-  linkType: hard
-
 "tmp@npm:~0.2.1":
   version: 0.2.1
   resolution: "tmp@npm:0.2.1"
@@ -37555,32 +30470,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"to-arraybuffer@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "to-arraybuffer@npm:1.0.1"
-  checksum: 10c0/2460bd95524f4845a751e4f8bf9937f9f3dcd1651f104e1512868782f858f8302c1cf25bbc30794bc1b3ff65c4e135158377302f2abaff43a2d8e3c38dfe098c
-  languageName: node
-  linkType: hard
-
-"to-object-path@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "to-object-path@npm:0.3.0"
-  dependencies:
-    kind-of: "npm:^3.0.2"
-  checksum: 10c0/731832a977614c03a770363ad2bd9e9c82f233261861724a8e612bb90c705b94b1a290a19f52958e8e179180bb9b71121ed65e245691a421467726f06d1d7fc3
-  languageName: node
-  linkType: hard
-
-"to-regex-range@npm:^2.1.0":
-  version: 2.1.1
-  resolution: "to-regex-range@npm:2.1.1"
-  dependencies:
-    is-number: "npm:^3.0.0"
-    repeat-string: "npm:^1.6.1"
-  checksum: 10c0/440d82dbfe0b2e24f36dd8a9467240406ad1499fc8b2b0f547372c22ed1d092ace2a3eb522bb09bfd9c2f39bf1ca42eb78035cf6d2b8c9f5c78da3abc96cd949
-  languageName: node
-  linkType: hard
-
 "to-regex-range@npm:^5.0.1":
   version: 5.0.1
   resolution: "to-regex-range@npm:5.0.1"
@@ -37590,18 +30479,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"to-regex@npm:^3.0.1, to-regex@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "to-regex@npm:3.0.2"
-  dependencies:
-    define-property: "npm:^2.0.2"
-    extend-shallow: "npm:^3.0.2"
-    regex-not: "npm:^1.0.2"
-    safe-regex: "npm:^1.1.0"
-  checksum: 10c0/99d0b8ef397b3f7abed4bac757b0f0bb9f52bfd39167eb7105b144becfaa9a03756892352d01ac6a911f0c1ceef9f81db68c46899521a3eed054082042796120
-  languageName: node
-  linkType: hard
-
 "toidentifier@npm:1.0.1, toidentifier@npm:~1.0.1":
   version: 1.0.1
   resolution: "toidentifier@npm:1.0.1"
@@ -37661,23 +30538,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"trace-event-lib@npm:^1.3.1":
-  version: 1.3.1
-  resolution: "trace-event-lib@npm:1.3.1"
-  dependencies:
-    browser-process-hrtime: "npm:^1.0.0"
-    lodash: "npm:^4.17.21"
-  checksum: 10c0/e834b914a2bafe3f89be9670c794a005983cfe17de21e31d76a0ef609359998502297ff64bef72d369a22f1337627d2ec895efd7b103eafda41fd8daea0a368a
-  languageName: node
-  linkType: hard
-
-"traverse@npm:~0.6.6":
-  version: 0.6.7
-  resolution: "traverse@npm:0.6.7"
-  checksum: 10c0/97312cbcce0fdc640cf871a33c3f8efa85fbc2e21020bcbbf48b50883db4c41cfef580f3deaab67217291b761be4558fff34aab1baff7eb2b65323412458a489
-  languageName: node
-  linkType: hard
-
 "tree-dump@npm:^1.0.1":
   version: 1.0.2
   resolution: "tree-dump@npm:1.0.2"
@@ -37694,13 +30554,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"trim-newlines@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "trim-newlines@npm:1.0.0"
-  checksum: 10c0/ae859c83d0dbcbde32245509f7c51a4bc9696d56e080bc19acc95c4188381e34fba05a4b2fefb47b4ee4537150a11d57a0fd3cd1179837c06210795d7f62e795
-  languageName: node
-  linkType: hard
-
 "trim-newlines@npm:^3.0.0":
   version: 3.0.1
   resolution: "trim-newlines@npm:3.0.1"
@@ -37715,27 +30568,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"trim-right@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "trim-right@npm:1.0.1"
-  checksum: 10c0/71989ec179c6b42a56e03db68e60190baabf39d32d4e1252fa1501c4e478398ae29d7191beffe015b9d9dc76f04f4b3a946bdb9949ad6b0c0b0c5db65f3eb672
-  languageName: node
-  linkType: hard
-
-"trim-trailing-lines@npm:^1.0.0":
-  version: 1.1.4
-  resolution: "trim-trailing-lines@npm:1.1.4"
-  checksum: 10c0/95c35ece5fc806e626e7a93a2135c52932d1dee584963138dbefb1df6cb7adcb7a7c68e2c63f05c536f0681c9260e1d5262cb2e234242d23b9a31617b2c1d53c
-  languageName: node
-  linkType: hard
-
-"trim@npm:0.0.1":
-  version: 0.0.1
-  resolution: "trim@npm:0.0.1"
-  checksum: 10c0/d974971fc8b8629d13286f20ec6ccc48f480494ca9df358d452beb1fd7eea1b802be41cc7ee157be4abbdf1b3ca79cc6d04c34b14a7026037d437e8de9dacecb
-  languageName: node
-  linkType: hard
-
 "troika-three-text@npm:^0.52.0":
   version: 0.52.4
   resolution: "troika-three-text@npm:0.52.4"
@@ -37766,13 +30598,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"trough@npm:^1.0.0":
-  version: 1.0.5
-  resolution: "trough@npm:1.0.5"
-  checksum: 10c0/f036d0d7f9bc7cfe5ee650d70b57bb1f048f3292adf6c81bb9b228e546b2b2e5b74ea04a060d21472108a8cda05ec4814bbe86f87ee35c182c50cb41b5c1810a
-  languageName: node
-  linkType: hard
-
 "trough@npm:^2.0.0":
   version: 2.2.0
   resolution: "trough@npm:2.2.0"
@@ -37780,15 +30605,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"truncate-utf8-bytes@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "truncate-utf8-bytes@npm:1.0.2"
-  dependencies:
-    utf8-byte-length: "npm:^1.0.1"
-  checksum: 10c0/af2b431fc4314f119b551e5fccfad49d4c0ef82e13ba9ca61be6567801195b08e732ce9643542e8ad1b3df44f3df2d7345b3dd34f723954b6bb43a14584d6b3c
-  languageName: node
-  linkType: hard
-
 "ts-api-utils@npm:^1.3.0":
   version: 1.3.0
   resolution: "ts-api-utils@npm:1.3.0"
@@ -37850,16 +30666,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-pnp@npm:^1.1.6":
-  version: 1.2.0
-  resolution: "ts-pnp@npm:1.2.0"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/ff32b4f810f9d99f676d70fe2c0e327cb6c812214bd4fc7135870b039f9e85a85b2c20f8fe030d9bd36e9598a12faa391f10aecb95df624b92f1af6bd47dc397
-  languageName: node
-  linkType: hard
-
 "tsconfig-paths@npm:^3.15.0":
   version: 3.15.0
   resolution: "tsconfig-paths@npm:3.15.0"
@@ -37883,14 +30689,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.8.1":
-  version: 1.14.1
-  resolution: "tslib@npm:1.14.1"
-  checksum: 10c0/69ae09c49eea644bc5ebe1bca4fa4cc2c82b7b3e02f43b84bd891504edf66dbc6b2ec0eef31a957042de2269139e4acff911e6d186a258fb14069cd7f6febce2
-  languageName: node
-  linkType: hard
-
-"tslib@npm:^2, 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.4.0, tslib@npm:^2.5.3, tslib@npm:^2.6.0, tslib@npm:^2.8.0, tslib@npm:^2.8.1":
+"tslib@npm:^2, 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.4.0, tslib@npm:^2.6.0, tslib@npm:^2.8.0, tslib@npm:^2.8.1":
   version: 2.8.1
   resolution: "tslib@npm:2.8.1"
   checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
@@ -37904,17 +30703,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tsutils@npm:^3.21.0":
-  version: 3.21.0
-  resolution: "tsutils@npm:3.21.0"
-  dependencies:
-    tslib: "npm:^1.8.1"
-  peerDependencies:
-    typescript: ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-  checksum: 10c0/02f19e458ec78ead8fffbf711f834ad8ecd2cc6ade4ec0320790713dccc0a412b99e7fd907c4cda2a1dc602c75db6f12e0108e87a5afad4b2f9e90a24cabd5a2
-  languageName: node
-  linkType: hard
-
 "tsx@npm:^4.19.1":
   version: 4.19.1
   resolution: "tsx@npm:4.19.1"
@@ -37956,13 +30744,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tty-browserify@npm:0.0.0":
-  version: 0.0.0
-  resolution: "tty-browserify@npm:0.0.0"
-  checksum: 10c0/c0c68206565f1372e924d5cdeeff1a0d9cc729833f1da98c03d78be8f939e5f61a107bd0ab77d1ef6a47d62bb0e48b1081fbea273acf404959e22fd3891439c5
-  languageName: node
-  linkType: hard
-
 "tunnel-rat@npm:^0.1.2":
   version: 0.1.2
   resolution: "tunnel-rat@npm:0.1.2"
@@ -37988,13 +30769,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^0.16.0":
-  version: 0.16.0
-  resolution: "type-fest@npm:0.16.0"
-  checksum: 10c0/6b4d846534e7bcb49a6160b068ffaed2b62570d989d909ac3f29df5ef1e993859f890a4242eebe023c9e923f96adbcb3b3e88a198c35a1ee9a731e147a6839c3
-  languageName: node
-  linkType: hard
-
 "type-fest@npm:^0.18.0":
   version: 0.18.1
   resolution: "type-fest@npm:0.18.1"
@@ -38016,13 +30790,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^0.3.1":
-  version: 0.3.1
-  resolution: "type-fest@npm:0.3.1"
-  checksum: 10c0/ef632e9549f331024594bbb8b620fe570d90abd8e7f2892d4aff733fd72698774e1a88e277fac02b4267de17d79cbb87860332f64f387145532b13ace6510502
-  languageName: node
-  linkType: hard
-
 "type-fest@npm:^0.6.0":
   version: 0.6.0
   resolution: "type-fest@npm:0.6.0"
@@ -38148,13 +30915,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typedarray@npm:^0.0.6":
-  version: 0.0.6
-  resolution: "typedarray@npm:0.0.6"
-  checksum: 10c0/6005cb31df50eef8b1f3c780eb71a17925f3038a100d82f9406ac2ad1de5eb59f8e6decbdc145b3a1f8e5836e17b0c0002fb698b9fe2516b8f9f9ff602d36412
-  languageName: node
-  linkType: hard
-
 "typescript-eslint@npm:^8.26.1":
   version: 8.26.1
   resolution: "typescript-eslint@npm:8.26.1"
@@ -38209,34 +30969,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ua-parser-js@npm:^0.7.30":
-  version: 0.7.31
-  resolution: "ua-parser-js@npm:0.7.31"
-  checksum: 10c0/22ea7a73db4528f4b8c5e9ed3d711dfc005f9efa5e6f803e5b78bf358c1d81baaed2699fc1f35252a316f64f3fdf730919fa97e7cc1ae66d3011bd515a4a0f30
-  languageName: node
-  linkType: hard
-
-"uglify-es@npm:^3.1.9":
-  version: 3.3.10
-  resolution: "uglify-es@npm:3.3.10"
-  dependencies:
-    commander: "npm:~2.14.1"
-    source-map: "npm:~0.6.1"
-  bin:
-    uglifyjs: bin/uglifyjs
-  checksum: 10c0/165b19b331f72aae4a0eeb4350606d8e5d39c82315ef8eaa8d3a0706d16be9282f6055b5e1e46914422b3e56520740fc68cec40a0b06e7fd6905b1f680528487
-  languageName: node
-  linkType: hard
-
-"uglify-js@npm:^3.1.4":
-  version: 3.17.2
-  resolution: "uglify-js@npm:3.17.2"
-  bin:
-    uglifyjs: bin/uglifyjs
-  checksum: 10c0/faa4ac74ee748384da27ba36402c00c2f52f1f21e5bc7cd50d8f885895de14f18226dc4506bb8824a2534f09ac2ef26cd2d96370f390c9cb980020b14c516e9e
-  languageName: node
-  linkType: hard
-
 "unbox-primitive@npm:^1.1.0":
   version: 1.1.0
   resolution: "unbox-primitive@npm:1.1.0"
@@ -38259,13 +30991,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undici-types@npm:~5.26.4":
-  version: 5.26.5
-  resolution: "undici-types@npm:5.26.5"
-  checksum: 10c0/bb673d7876c2d411b6eb6c560e0c571eef4a01c1c19925175d16e3a30c4c428181fb8d7ae802a261f283e4166a0ac435e2f505743aa9e45d893f9a3df017b501
-  languageName: node
-  linkType: hard
-
 "undici-types@npm:~6.19.2":
   version: 6.19.8
   resolution: "undici-types@npm:6.19.8"
@@ -38280,10 +31005,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undici@npm:^6.19.5":
-  version: 6.21.2
-  resolution: "undici@npm:6.21.2"
-  checksum: 10c0/799bbc02b77dda9b6b12d56d2620a3a4d4cf087908d6a548acc3ce32f21b5c27467f75c2c4b30fab281daf341210be3d685e8fe99854288de541715ae5735027
+"undici@npm:^6.18.2, undici@npm:^6.19.5":
+  version: 6.23.0
+  resolution: "undici@npm:6.23.0"
+  checksum: 10c0/d846b3fdfd05aa6081ba1eab5db6bbc21b283042c7a43722b86d1ee2bf749d7c990ceac0c809f9a07ffd88b1b0f4c0f548a8362c035088cb1997d63abdda499c
   languageName: node
   linkType: hard
 
@@ -38294,23 +31019,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unfetch@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "unfetch@npm:4.2.0"
-  checksum: 10c0/a5c0a896a6f09f278b868075aea65652ad185db30e827cb7df45826fe5ab850124bf9c44c4dafca4bf0c55a0844b17031e8243467fcc38dd7a7d435007151f1b
-  languageName: node
-  linkType: hard
-
-"unherit@npm:^1.0.4":
-  version: 1.1.3
-  resolution: "unherit@npm:1.1.3"
-  dependencies:
-    inherits: "npm:^2.0.0"
-    xtend: "npm:^4.0.0"
-  checksum: 10c0/f953b548e56ef347b14c0897484ff22187acfeeb599afe2994cfdbfaddffe8731b999029e243fd40966b597bdffd541f3b5a54254797b98aebb760bb39dd8456
-  languageName: node
-  linkType: hard
-
 "unicode-canonical-property-names-ecmascript@npm:^2.0.0":
   version: 2.0.0
   resolution: "unicode-canonical-property-names-ecmascript@npm:2.0.0"
@@ -38366,20 +31074,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unified@npm:9.2.0":
-  version: 9.2.0
-  resolution: "unified@npm:9.2.0"
-  dependencies:
-    bail: "npm:^1.0.0"
-    extend: "npm:^3.0.0"
-    is-buffer: "npm:^2.0.0"
-    is-plain-obj: "npm:^2.0.0"
-    trough: "npm:^1.0.0"
-    vfile: "npm:^4.0.0"
-  checksum: 10c0/53aedb794b0ada002b72593d74633f45742e3dfe771a8091c0f51b59119f74f3f1bba0a24c5d72a35629793f992cf9e1debf21aa4689dc718482ffec3a633623
-  languageName: node
-  linkType: hard
-
 "unified@npm:^11.0.0, unified@npm:^11.0.3, unified@npm:^11.0.4":
   version: 11.0.5
   resolution: "unified@npm:11.0.5"
@@ -38395,18 +31089,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"union-value@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "union-value@npm:1.0.1"
-  dependencies:
-    arr-union: "npm:^3.1.0"
-    get-value: "npm:^2.0.6"
-    is-extendable: "npm:^0.1.1"
-    set-value: "npm:^2.0.1"
-  checksum: 10c0/8758d880cb9545f62ce9cfb9b791b2b7a206e0ff5cc4b9d7cd6581da2c6839837fbb45e639cf1fd8eef3cae08c0201b614b7c06dd9f5f70d9dbe7c5fe2fbf592
-  languageName: node
-  linkType: hard
-
 "unique-filename@npm:^1.1.1":
   version: 1.1.1
   resolution: "unique-filename@npm:1.1.1"
@@ -38416,15 +31098,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unique-filename@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "unique-filename@npm:3.0.0"
-  dependencies:
-    unique-slug: "npm:^4.0.0"
-  checksum: 10c0/6363e40b2fa758eb5ec5e21b3c7fb83e5da8dcfbd866cc0c199d5534c42f03b9ea9ab069769cc388e1d7ab93b4eeef28ef506ab5f18d910ef29617715101884f
-  languageName: node
-  linkType: hard
-
 "unique-slug@npm:^2.0.0":
   version: 2.0.2
   resolution: "unique-slug@npm:2.0.2"
@@ -38434,33 +31107,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unique-slug@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "unique-slug@npm:4.0.0"
-  dependencies:
-    imurmurhash: "npm:^0.1.4"
-  checksum: 10c0/cb811d9d54eb5821b81b18205750be84cb015c20a4a44280794e915f5a0a70223ce39066781a354e872df3572e8155c228f43ff0cce94c7cbf4da2cc7cbdd635
-  languageName: node
-  linkType: hard
-
-"unique-string@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "unique-string@npm:1.0.0"
-  dependencies:
-    crypto-random-string: "npm:^1.0.0"
-  checksum: 10c0/79cc2a6515a51e6350c74f65c92246511966c47528f1119318cbe8d68a508842f4e5a2a81857a65f3919629397a525f820505116dd89cac425294598e35ca12c
-  languageName: node
-  linkType: hard
-
-"unique-string@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "unique-string@npm:2.0.0"
-  dependencies:
-    crypto-random-string: "npm:^2.0.0"
-  checksum: 10c0/11820db0a4ba069d174bedfa96c588fc2c96b083066fafa186851e563951d0de78181ac79c744c1ed28b51f9d82ac5b8196ff3e4560d0178046ef455d8c2244b
-  languageName: node
-  linkType: hard
-
 "unique-string@npm:^3.0.0":
   version: 3.0.0
   resolution: "unique-string@npm:3.0.0"
@@ -38470,27 +31116,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-builder@npm:2.0.3, unist-builder@npm:^2.0.0":
-  version: 2.0.3
-  resolution: "unist-builder@npm:2.0.3"
-  checksum: 10c0/d8b13ffd774bfe6175ca988d63cbaf6d85882a0701d6158597134ce1c3acf665a09421461a4036704f77edb8a6a2792d09eb55382428c2a9a60488b44909eeae
-  languageName: node
-  linkType: hard
-
-"unist-util-generated@npm:^1.0.0":
-  version: 1.1.6
-  resolution: "unist-util-generated@npm:1.1.6"
-  checksum: 10c0/ee04a58a6711145ec5c8c6f10dfd3335ac93d9039dc35e7410ffc1299d6f3671b27d9b7aa486f826bd66ec15807ad6d0bf9348b34a1046440e1617abcf42903f
-  languageName: node
-  linkType: hard
-
-"unist-util-is@npm:^4.0.0":
-  version: 4.1.0
-  resolution: "unist-util-is@npm:4.1.0"
-  checksum: 10c0/21ca3d7bacc88853b880b19cb1b133a056c501617d7f9b8cce969cd8b430ed7e1bc416a3a11b02540d5de6fb86807e169d00596108a459d034cf5faec97c055e
-  languageName: node
-  linkType: hard
-
 "unist-util-is@npm:^6.0.0":
   version: 6.0.0
   resolution: "unist-util-is@npm:6.0.0"
@@ -38509,13 +31134,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-position@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "unist-util-position@npm:3.1.0"
-  checksum: 10c0/a89d4095560f01e0ddfdab3deae6abd250ee6b91c3b23922de05297227a4aede076d96cb0e22e9962d0e85f54d11f719d1e11388233d0936631b8527485a02a8
-  languageName: node
-  linkType: hard
-
 "unist-util-position@npm:^5.0.0":
   version: 5.0.0
   resolution: "unist-util-position@npm:5.0.0"
@@ -38525,24 +31143,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-remove-position@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "unist-util-remove-position@npm:2.0.1"
-  dependencies:
-    unist-util-visit: "npm:^2.0.0"
-  checksum: 10c0/9aadc8e9fafc4eeb04462454ab084184b84b397a367cab3787c59411b16c8f03d13e80e9ffd6bdae68bf8e5175f42008f410288a041a6ee53bcac8ced45a12ed
-  languageName: node
-  linkType: hard
-
-"unist-util-remove@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "unist-util-remove@npm:2.1.0"
-  dependencies:
-    unist-util-is: "npm:^4.0.0"
-  checksum: 10c0/f7dea56fb720ddab5e406af12ce37453b028273e23a7cc3e4c9f3f1ec85e1f72c6943a1ebb907120c9be0b1d08b209d7b8c7d2191a5012e16081056edf638df9
-  languageName: node
-  linkType: hard
-
 "unist-util-stringify-position@npm:^2.0.0":
   version: 2.0.3
   resolution: "unist-util-stringify-position@npm:2.0.3"
@@ -38561,16 +31161,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-visit-parents@npm:^3.0.0":
-  version: 3.1.1
-  resolution: "unist-util-visit-parents@npm:3.1.1"
-  dependencies:
-    "@types/unist": "npm:^2.0.0"
-    unist-util-is: "npm:^4.0.0"
-  checksum: 10c0/231c80c5ba8e79263956fcaa25ed2a11ad7fe77ac5ba0d322e9d51bbc4238501e3bb52f405e518bcdc5471e27b33eff520db0aa4a3b1feb9fb6e2de6ae385d49
-  languageName: node
-  linkType: hard
-
 "unist-util-visit-parents@npm:^6.0.0":
   version: 6.0.1
   resolution: "unist-util-visit-parents@npm:6.0.1"
@@ -38581,17 +31171,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-visit@npm:2.0.3, unist-util-visit@npm:^2.0.0":
-  version: 2.0.3
-  resolution: "unist-util-visit@npm:2.0.3"
-  dependencies:
-    "@types/unist": "npm:^2.0.0"
-    unist-util-is: "npm:^4.0.0"
-    unist-util-visit-parents: "npm:^3.0.0"
-  checksum: 10c0/7b11303d82271ca53a2ced2d56c87a689dd518596c99ff4a11cdff750f5cc5c0e4b64b146bd2363557cb29443c98713bfd1e8dc6d1c3f9d474b9eb1f23a60888
-  languageName: node
-  linkType: hard
-
 "unist-util-visit@npm:^5.0.0":
   version: 5.0.0
   resolution: "unist-util-visit@npm:5.0.0"
@@ -38603,13 +31182,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"universalify@npm:^0.1.0":
-  version: 0.1.2
-  resolution: "universalify@npm:0.1.2"
-  checksum: 10c0/e70e0339f6b36f34c9816f6bf9662372bd241714dc77508d231d08386d94f2c4aa1ba1318614f92015f40d45aae1b9075cd30bd490efbe39387b60a76ca3f045
-  languageName: node
-  linkType: hard
-
 "universalify@npm:^0.2.0":
   version: 0.2.0
   resolution: "universalify@npm:0.2.0"
@@ -38617,13 +31189,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"universalify@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "universalify@npm:1.0.0"
-  checksum: 10c0/735dd9c118f96a13c7810212ef8b45e239e2fe6bf65aceefbc2826334fcfe8c523dbbf1458cef011563c51505e3a367dff7654cfb0cec5b6aa710ef120843396
-  languageName: node
-  linkType: hard
-
 "universalify@npm:^2.0.0":
   version: 2.0.0
   resolution: "universalify@npm:2.0.0"
@@ -38648,32 +31213,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unset-value@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "unset-value@npm:1.0.0"
-  dependencies:
-    has-value: "npm:^0.3.1"
-    isobject: "npm:^3.0.0"
-  checksum: 10c0/68a796dde4a373afdbf017de64f08490a3573ebee549136da0b3a2245299e7f65f647ef70dc13c4ac7f47b12fba4de1646fa0967a365638578fedce02b9c0b1f
-  languageName: node
-  linkType: hard
-
-"untildify@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "untildify@npm:2.1.0"
-  dependencies:
-    os-homedir: "npm:^1.0.0"
-  checksum: 10c0/8a8a8766fcac7a796104d2124d1951af87889e95fd73d5704c78000fb0612fe21041eb33eadb7b4dedc44dd99db3c4adba04775454990baf7c4b728076ab2bc2
-  languageName: node
-  linkType: hard
-
-"upath@npm:^1.1.1":
-  version: 1.2.0
-  resolution: "upath@npm:1.2.0"
-  checksum: 10c0/3746f24099bf69dbf8234cecb671e1016e1f6b26bd306de4ff8966fb0bc463fa1014ffc48646b375de1ab573660e3a0256f6f2a87218b2dfa1779a84ef6992fa
-  languageName: node
-  linkType: hard
-
 "update-browserslist-db@npm:^1.2.0":
   version: 1.2.3
   resolution: "update-browserslist-db@npm:1.2.3"
@@ -38710,22 +31249,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"upper-case-first@npm:^1.1.0, upper-case-first@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "upper-case-first@npm:1.1.2"
-  dependencies:
-    upper-case: "npm:^1.1.1"
-  checksum: 10c0/db3aff30538ed53c35b91a68faf46119d35ceb8800fec373ad781cbfc487f10ccd4d60609e4188e85d20ea3ec9db9a2392fa6372c334f1d1107cbde0bcb5edfe
-  languageName: node
-  linkType: hard
-
-"upper-case@npm:^1.0.3, upper-case@npm:^1.1.0, upper-case@npm:^1.1.1, upper-case@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "upper-case@npm:1.1.3"
-  checksum: 10c0/3e4d3a90519915bb591db84d72610392518806d8287b8f7541d87642d30388f42b2def1ed2f687e5792ee025e8f7e17d3a0dcbd5b3b59e306ceb1f3b8121ef54
-  languageName: node
-  linkType: hard
-
 "uri-js@npm:^4.2.2":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"
@@ -38735,20 +31258,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"urix@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "urix@npm:0.1.0"
-  checksum: 10c0/264f1b29360c33c0aec5fb9819d7e28f15d1a3b83175d2bcc9131efe8583f459f07364957ae3527f1478659ec5b2d0f1ad401dfb625f73e4d424b3ae35fc5fc0
-  languageName: node
-  linkType: hard
-
-"url-join@npm:4.0.0":
-  version: 4.0.0
-  resolution: "url-join@npm:4.0.0"
-  checksum: 10c0/1aa466cfa128adab76dc9e559b38e2171df51e6105b5773382c3726e5a29971da013e4f9f5c36f1414ef1e5f1af535cfaf29611b53b0d2fc4f311f7b41199d13
-  languageName: node
-  linkType: hard
-
 "url-loader@npm:^4.1.1":
   version: 4.1.1
   resolution: "url-loader@npm:4.1.1"
@@ -38776,16 +31285,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"url@npm:^0.11.0":
-  version: 0.11.0
-  resolution: "url@npm:0.11.0"
-  dependencies:
-    punycode: "npm:1.3.2"
-    querystring: "npm:0.2.0"
-  checksum: 10c0/bbe05f9f570ec5c06421c50ca63f287e61279092eed0891db69a9619323703ccd3987e6eed234c468794cf25680c599680d5c1f58d26090f1956c8e9ed8346a2
-  languageName: node
-  linkType: hard
-
 "use-editable@npm:^2.3.3":
   version: 2.3.3
   resolution: "use-editable@npm:2.3.3"
@@ -38836,20 +31335,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use@npm:^3.1.0":
-  version: 3.1.1
-  resolution: "use@npm:3.1.1"
-  checksum: 10c0/75b48673ab80d5139c76922630d5a8a44e72ed58dbaf54dee1b88352d10e1c1c1fc332066c782d8ae9a56503b85d3dc67ff6d2ffbd9821120466d1280ebb6d6e
-  languageName: node
-  linkType: hard
-
-"utf8-byte-length@npm:^1.0.1":
-  version: 1.0.4
-  resolution: "utf8-byte-length@npm:1.0.4"
-  checksum: 10c0/78eeae05e7b44cd5cd382f00477fe07f5f14e04e83625cd5680e4b41ec29630fb8f85a553a650ae4131216019ef0569169990015e34619d3a2906380ecac6da8
-  languageName: node
-  linkType: hard
-
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
@@ -38857,34 +31342,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util.promisify@npm:1.0.0":
-  version: 1.0.0
-  resolution: "util.promisify@npm:1.0.0"
-  dependencies:
-    define-properties: "npm:^1.1.2"
-    object.getownpropertydescriptors: "npm:^2.0.3"
-  checksum: 10c0/af9df9d111b1464586e4fa414ccf6de61c3a14c0664a66a497438a0507d47f65389f5e025c048ef7e2bf6dba73e95adc3d0c56111a0952ae0282817fc4dd83b2
-  languageName: node
-  linkType: hard
-
-"util@npm:0.10.3":
-  version: 0.10.3
-  resolution: "util@npm:0.10.3"
-  dependencies:
-    inherits: "npm:2.0.1"
-  checksum: 10c0/88bb58fec3b1f5f43dea27795f61f24b3b505bbba6f3ad6e91b32db0cd0928b2acb54ebe21603a75743c6e21a52f954cd2ffb6cddafed5a01169dd1287db3ff3
-  languageName: node
-  linkType: hard
-
-"util@npm:^0.11.0":
-  version: 0.11.1
-  resolution: "util@npm:0.11.1"
-  dependencies:
-    inherits: "npm:2.0.3"
-  checksum: 10c0/8e9d1a85e661c8a8d9883d821aedbff3f8d9c3accd85357020905386ada5653b20389fc3591901e2a0bde64f8dc86b28c3f990114aa5a38eaaf30b455fa3cdf6
-  languageName: node
-  linkType: hard
-
 "utila@npm:~0.4":
   version: 0.4.0
   resolution: "utila@npm:0.4.0"
@@ -38906,15 +31363,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:^3.0.1, uuid@npm:^3.3.2":
-  version: 3.4.0
-  resolution: "uuid@npm:3.4.0"
-  bin:
-    uuid: ./bin/uuid
-  checksum: 10c0/1c13950df865c4f506ebfe0a24023571fa80edf2e62364297a537c80af09c618299797bbf2dbac6b1f8ae5ad182ba474b89db61e0e85839683991f7e08795347
-  languageName: node
-  linkType: hard
-
 "uuid@npm:^7.0.3":
   version: 7.0.3
   resolution: "uuid@npm:7.0.3"
@@ -38924,7 +31372,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:^8.0.0, uuid@npm:^8.3.2":
+"uuid@npm:^8.3.2":
   version: 8.3.2
   resolution: "uuid@npm:8.3.2"
   bin:
@@ -38940,17 +31388,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"v8-to-istanbul@npm:^8.0.0":
-  version: 8.1.1
-  resolution: "v8-to-istanbul@npm:8.1.1"
-  dependencies:
-    "@types/istanbul-lib-coverage": "npm:^2.0.1"
-    convert-source-map: "npm:^1.6.0"
-    source-map: "npm:^0.7.3"
-  checksum: 10c0/c3c99c4aa1ffffb098cc85c0c13c21871e6cbb9a83537d4e0650aa61589c347b2add787ceac68b8ea7fa1b7f446e9059d8e374cd7e7ab13b170a6caf8ad29c30
-  languageName: node
-  linkType: hard
-
 "v8-to-istanbul@npm:^9.0.1":
   version: 9.0.1
   resolution: "v8-to-istanbul@npm:9.0.1"
@@ -38962,13 +31399,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"valid-url@npm:~1.0.9":
-  version: 1.0.9
-  resolution: "valid-url@npm:1.0.9"
-  checksum: 10c0/3995e65f9942dbcb1621754c0f9790335cec61e9e9310c0a809e9ae0e2ae91bb7fc6a471fba788e979db0418d9806639f681ecebacc869bc8c3de88efa562ee6
-  languageName: node
-  linkType: hard
-
 "validate-npm-package-license@npm:^3.0.1":
   version: 3.0.4
   resolution: "validate-npm-package-license@npm:3.0.4"
@@ -38979,15 +31409,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"validate-npm-package-name@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "validate-npm-package-name@npm:3.0.0"
-  dependencies:
-    builtins: "npm:^1.0.3"
-  checksum: 10c0/064f21f59aefae6cc286dd4a50b15d14adb0227e0facab4316197dfb8d06801669e997af5081966c15f7828a5e6ff1957bd20886aeb6b9d0fa430e4cb5db9c4a
-  languageName: node
-  linkType: hard
-
 "validate-npm-package-name@npm:^5.0.0":
   version: 5.0.1
   resolution: "validate-npm-package-name@npm:5.0.1"
@@ -39021,13 +31442,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vfile-location@npm:^3.0.0, vfile-location@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "vfile-location@npm:3.2.0"
-  checksum: 10c0/d9513c738fcac26388f4ee04337663514434df718201309088377b53be3fdcfdb01a4a8f02f5a21ebf33690a670f31229e4c7c3991fb7af63f549fda3ec36836
-  languageName: node
-  linkType: hard
-
 "vfile-location@npm:^5.0.0":
   version: 5.0.3
   resolution: "vfile-location@npm:5.0.3"
@@ -39038,16 +31452,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vfile-message@npm:^2.0.0":
-  version: 2.0.4
-  resolution: "vfile-message@npm:2.0.4"
-  dependencies:
-    "@types/unist": "npm:^2.0.0"
-    unist-util-stringify-position: "npm:^2.0.0"
-  checksum: 10c0/ce50d90e0e5dc8f995f39602dd2404f1756388a54209c983d259b17c15e6f262a53546977a638065bc487d0657799fa96f4c1ba6b2915d9724a4968e9c7ff1c8
-  languageName: node
-  linkType: hard
-
 "vfile-message@npm:^4.0.0":
   version: 4.0.2
   resolution: "vfile-message@npm:4.0.2"
@@ -39058,18 +31462,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vfile@npm:^4.0.0":
-  version: 4.2.1
-  resolution: "vfile@npm:4.2.1"
-  dependencies:
-    "@types/unist": "npm:^2.0.0"
-    is-buffer: "npm:^2.0.0"
-    unist-util-stringify-position: "npm:^2.0.0"
-    vfile-message: "npm:^2.0.0"
-  checksum: 10c0/4816aecfedc794ba4d3131abff2032ef0e825632cfa8cd20dd9d83819ef260589924f4f3e8fa30e06da2d8e60d7ec8ef7d0af93e0483df62890738258daf098a
-  languageName: node
-  linkType: hard
-
 "vfile@npm:^6.0.0, vfile@npm:^6.0.1":
   version: 6.0.3
   resolution: "vfile@npm:6.0.3"
@@ -39087,20 +31479,20 @@ __metadata:
     "@coinbase/cds-common": "workspace:^"
     "@coinbase/cds-icons": "workspace:^"
     "@coinbase/cds-illustrations": "workspace:^"
+    "@coinbase/cds-migrator": "workspace:^"
     "@coinbase/cds-web": "workspace:^"
-    "@coinbase/cds-web-visualization": "workspace:^"
-    "@types/react": "npm:^18.3.12"
-    "@types/react-dom": "npm:^18.3.1"
-    "@vitejs/plugin-react": "npm:^5.0.0"
+    "@types/react": "npm:19.1.2"
+    "@types/react-dom": "npm:19.1.2"
+    "@vitejs/plugin-react": "npm:^5.1.2"
     framer-motion: "npm:^10.18.0"
-    react: "npm:^18.3.1"
-    react-dom: "npm:^18.3.1"
+    react: "npm:19.1.2"
+    react-dom: "npm:19.1.2"
     typescript: "npm:~5.9.2"
-    vite: "npm:^7.1.2"
+    vite: "npm:^7.3.1"
   languageName: unknown
   linkType: soft
 
-"vite@npm:^6.0.0 || ^7.0.0, vite@npm:^7.1.2":
+"vite@npm:^6.0.0 || ^7.0.0, vite@npm:^7.3.1":
   version: 7.3.1
   resolution: "vite@npm:7.3.1"
   dependencies:
@@ -39221,13 +31613,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vm-browserify@npm:^1.0.1":
-  version: 1.1.2
-  resolution: "vm-browserify@npm:1.1.2"
-  checksum: 10c0/0cc1af6e0d880deb58bc974921320c187f9e0a94f25570fca6b1bd64e798ce454ab87dfd797551b1b0cc1849307421aae0193cedf5f06bdb5680476780ee344b
-  languageName: node
-  linkType: hard
-
 "vscode-jsonrpc@npm:8.2.0":
   version: 8.2.0
   resolution: "vscode-jsonrpc@npm:8.2.0"
@@ -39317,10 +31702,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warn-once@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "warn-once@npm:0.1.0"
-  checksum: 10c0/609e1fbbcb5340be329c6a225015a9232bfeee47fb9de79ff89ae5e4c7e081b34553daf2637388e20837eb0c28ff7a5588062505a23ebec8ba76c8ef11b83d00
+"warn-once@npm:0.1.1, warn-once@npm:^0.1.0":
+  version: 0.1.1
+  resolution: "warn-once@npm:0.1.1"
+  checksum: 10c0/f531e7b2382124f51e6d8f97b8c865246db8ab6ff4e53257a2d274e0f02b97d7201eb35db481843dc155815e154ad7afb53b01c4d4db15fb5aa073562496aff7
   languageName: node
   linkType: hard
 
@@ -39333,33 +31718,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"watchpack-chokidar2@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "watchpack-chokidar2@npm:2.0.1"
-  dependencies:
-    chokidar: "npm:^2.1.8"
-  checksum: 10c0/9b8d880ae2543dd4f26a69f6b7f881119494f6b772b7431027a06a5cf963e0ebc1cac91a3ef479365c358b693c65fa80a1f8297427fa11fd4c080c3d6408c372
-  languageName: node
-  linkType: hard
-
-"watchpack@npm:^1.7.4":
-  version: 1.7.5
-  resolution: "watchpack@npm:1.7.5"
-  dependencies:
-    chokidar: "npm:^3.4.1"
-    graceful-fs: "npm:^4.1.2"
-    neo-async: "npm:^2.5.0"
-    watchpack-chokidar2: "npm:^2.0.1"
-  dependenciesMeta:
-    chokidar:
-      optional: true
-    watchpack-chokidar2:
-      optional: true
-  checksum: 10c0/53e3b112064f5de9edbb2a14973fb3901d9697b24cc70f8531a143eaace2353a273ca25c0ba21def8d3803cfedb8f6861ca1e49e9782257e40d5b5f8f5365c86
-  languageName: node
-  linkType: hard
-
-"watchpack@npm:^2.2.0, watchpack@npm:^2.4.1":
+"watchpack@npm:^2.4.1":
   version: 2.4.2
   resolution: "watchpack@npm:2.4.2"
   dependencies:
@@ -39399,13 +31758,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"web-namespaces@npm:^1.0.0":
-  version: 1.1.4
-  resolution: "web-namespaces@npm:1.1.4"
-  checksum: 10c0/05b5782c32a33ef94fa7a412afdebc9d0d3cc7b59db31d2cc7bd80de3e237d4b6309cb5f156d06e3a837b9826c9414448c25111ec1d4407d2025ffeb7bea4f62
-  languageName: node
-  linkType: hard
-
 "web-namespaces@npm:^2.0.0":
   version: 2.0.1
   resolution: "web-namespaces@npm:2.0.1"
@@ -39524,21 +31876,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-dev-middleware@npm:^3.7.3":
-  version: 3.7.3
-  resolution: "webpack-dev-middleware@npm:3.7.3"
-  dependencies:
-    memory-fs: "npm:^0.4.1"
-    mime: "npm:^2.4.4"
-    mkdirp: "npm:^0.5.1"
-    range-parser: "npm:^1.2.1"
-    webpack-log: "npm:^2.0.0"
-  peerDependencies:
-    webpack: ^4.0.0 || ^5.0.0
-  checksum: 10c0/f9bd8318c6f356d006dc99e3e46ef8870d67640e43f26cfcd2bb36c9e7eaf64015513f43498e92b532896f7fbd8f32c0710d4489fc81d7a45ea328d7e4cf3085
-  languageName: node
-  linkType: hard
-
 "webpack-dev-middleware@npm:^5.3.4":
   version: 5.3.4
   resolution: "webpack-dev-middleware@npm:5.3.4"
@@ -39665,36 +32002,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-filter-warnings-plugin@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "webpack-filter-warnings-plugin@npm:1.2.1"
-  peerDependencies:
-    webpack: ^2.0.0 || ^3.0.0 || ^4.0.0
-  checksum: 10c0/0a30b2b7725e4d4de96701d3a76b10d1e6a6e502a26e64177d8bcb1ba16a34dc87ab82f588b5b46620f105ac471c3b76e5f2810244b373efbdf6d3dc193553da
-  languageName: node
-  linkType: hard
-
-"webpack-hot-middleware@npm:^2.25.1":
-  version: 2.25.2
-  resolution: "webpack-hot-middleware@npm:2.25.2"
-  dependencies:
-    ansi-html-community: "npm:0.0.8"
-    html-entities: "npm:^2.1.0"
-    strip-ansi: "npm:^6.0.0"
-  checksum: 10c0/dc7cef3b3b06aeeaa925a3514a8f5ab110ec42c7a423d9f2c3fd31d96ac54e2837647f01f9169e1fddbda64c3ff962bb8b6eda184a53f2d09cd7deaa03c6f422
-  languageName: node
-  linkType: hard
-
-"webpack-log@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "webpack-log@npm:2.0.0"
-  dependencies:
-    ansi-colors: "npm:^3.0.0"
-    uuid: "npm:^3.3.2"
-  checksum: 10c0/515b800433da1c0b5722317baaeb05fc185da5a1fde5e39d25bed0b05c13ee3a544aa13844db8590696274a3c5dc04fd5abdd39f38f8c46a4084b74ff0dc9c60
-  languageName: node
-  linkType: hard
-
 "webpack-merge@npm:^5.9.0":
   version: 5.10.0
   resolution: "webpack-merge@npm:5.10.0"
@@ -39717,16 +32024,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-sources@npm:^1.4.0, webpack-sources@npm:^1.4.1, webpack-sources@npm:^1.4.3":
-  version: 1.4.3
-  resolution: "webpack-sources@npm:1.4.3"
-  dependencies:
-    source-list-map: "npm:^2.0.0"
-    source-map: "npm:~0.6.1"
-  checksum: 10c0/78dafb3e1e297d3f4eb6204311e8c64d28cd028f82887ba33aaf03fffc82482d8e1fdf6de25a60f4dde621d3565f4c3b1bfb350f09add8f4e54e00279ff3db5e
-  languageName: node
-  linkType: hard
-
 "webpack-sources@npm:^3.3.3":
   version: 3.3.3
   resolution: "webpack-sources@npm:3.3.3"
@@ -39734,15 +32031,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-virtual-modules@npm:^0.2.2":
-  version: 0.2.2
-  resolution: "webpack-virtual-modules@npm:0.2.2"
-  dependencies:
-    debug: "npm:^3.0.0"
-  checksum: 10c0/1e4156cbc7d64fde1a4531c3a2f92ccbe5702f16c34e3379ea302f7917b8c6c52f91328b893b615a34531a69c1e5079ec3b2edb7479f9908bd8243006437daa3
-  languageName: node
-  linkType: hard
-
 "webpack-virtual-modules@npm:^0.6.2":
   version: 0.6.2
   resolution: "webpack-virtual-modules@npm:0.6.2"
@@ -39750,45 +32038,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack@npm:4":
-  version: 4.46.0
-  resolution: "webpack@npm:4.46.0"
-  dependencies:
-    "@webassemblyjs/ast": "npm:1.9.0"
-    "@webassemblyjs/helper-module-context": "npm:1.9.0"
-    "@webassemblyjs/wasm-edit": "npm:1.9.0"
-    "@webassemblyjs/wasm-parser": "npm:1.9.0"
-    acorn: "npm:^6.4.1"
-    ajv: "npm:^6.10.2"
-    ajv-keywords: "npm:^3.4.1"
-    chrome-trace-event: "npm:^1.0.2"
-    enhanced-resolve: "npm:^4.5.0"
-    eslint-scope: "npm:^4.0.3"
-    json-parse-better-errors: "npm:^1.0.2"
-    loader-runner: "npm:^2.4.0"
-    loader-utils: "npm:^1.2.3"
-    memory-fs: "npm:^0.4.1"
-    micromatch: "npm:^3.1.10"
-    mkdirp: "npm:^0.5.3"
-    neo-async: "npm:^2.6.1"
-    node-libs-browser: "npm:^2.2.1"
-    schema-utils: "npm:^1.0.0"
-    tapable: "npm:^1.1.3"
-    terser-webpack-plugin: "npm:^1.4.3"
-    watchpack: "npm:^1.7.4"
-    webpack-sources: "npm:^1.4.1"
-  peerDependenciesMeta:
-    webpack-cli:
-      optional: true
-    webpack-command:
-      optional: true
-  bin:
-    webpack: ./bin/webpack.js
-  checksum: 10c0/3451b48b926d7c295a4eba65bb7ff9a7d2d49a848014ea0945f446ebf4c1ca5bdd15681b444f5dfd8bbc4856afda55211d30a173ae721b8108f229792e6fb509
-  languageName: node
-  linkType: hard
-
-"webpack@npm:>=4.43.0 <6.0.0, webpack@npm:^5, webpack@npm:^5.101.0, webpack@npm:^5.72.1, webpack@npm:^5.88.1, webpack@npm:^5.95.0":
+"webpack@npm:^5, webpack@npm:^5.101.0, webpack@npm:^5.72.1, webpack@npm:^5.88.1, webpack@npm:^5.95.0":
   version: 5.101.0
   resolution: "webpack@npm:5.101.0"
   dependencies:
@@ -39988,13 +32238,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-module@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "which-module@npm:2.0.0"
-  checksum: 10c0/946ffdbcd6f0cf517638f8f2319c6d51e528c3b41bc2c0f5dc3dc46047347abd7326aea5cdf5def0a8b32bdca313ac87a32ce5a76b943fe1ca876c4557e6b716
-  languageName: node
-  linkType: hard
-
 "which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.19":
   version: 1.1.19
   resolution: "which-typed-array@npm:1.1.19"
@@ -40078,13 +32321,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wonka@npm:^4.0.14":
-  version: 4.0.15
-  resolution: "wonka@npm:4.0.15"
-  checksum: 10c0/b93f15339c0de08259439d3c5bd3a03ca44196fbd7553cbe13c844e7b3ff2eb31b5dc4a0b2e0c3c2119160e65fc471d8366f4559744b53ab52763eb463b6793b
-  languageName: node
-  linkType: hard
-
 "wonka@npm:^6.3.2":
   version: 6.3.4
   resolution: "wonka@npm:6.3.4"
@@ -40099,31 +32335,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wordwrap@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "wordwrap@npm:1.0.0"
-  checksum: 10c0/7ed2e44f3c33c5c3e3771134d2b0aee4314c9e49c749e37f464bf69f2bcdf0cbf9419ca638098e2717cff4875c47f56a007532f6111c3319f557a2ca91278e92
-  languageName: node
-  linkType: hard
-
-"worker-farm@npm:^1.7.0":
-  version: 1.7.0
-  resolution: "worker-farm@npm:1.7.0"
-  dependencies:
-    errno: "npm:~0.1.7"
-  checksum: 10c0/069a032f9198a07273a7608dc0c23d7288c1c25256b66008e1ae95838cda6fa2c7aefb3b7ba760f975c8d18120ca54eb193afb66d7237b2a05e5da12c1c961f7
-  languageName: node
-  linkType: hard
-
-"worker-rpc@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "worker-rpc@npm:0.1.1"
-  dependencies:
-    microevent.ts: "npm:~0.1.1"
-  checksum: 10c0/986406dbed4a2fd25d21e05e5a16a2db5051735df4011848366bb9488ecf19f44b43a90072171e509580fafd0565a7759543966496b8c18322efa5440dea1e6c
-  languageName: node
-  linkType: hard
-
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0, wrap-ansi@npm:^7.0.0":
   version: 7.0.0
   resolution: "wrap-ansi@npm:7.0.0"
@@ -40222,16 +32433,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^6.2.2":
-  version: 6.2.2
-  resolution: "ws@npm:6.2.2"
+"ws@npm:^6.2.3":
+  version: 6.2.3
+  resolution: "ws@npm:6.2.3"
   dependencies:
     async-limiter: "npm:~1.0.0"
-  checksum: 10c0/d628a1e95668a296644b4f51ce5debb43d9f1d89ebb2e32fef205a685b9439378eb824d60ce3a40bbc3bad0e887d84a56b343f2076f48d74f17c4c0800c42967
+  checksum: 10c0/56a35b9799993cea7ce2260197e7879f21bbbb194a967f31acbbda6f7f46ecda4365951966fb062044c95197e19fb2f053be6f65c172435455186835f494de41
   languageName: node
   linkType: hard
 
-"ws@npm:^7, ws@npm:^7.0.0, ws@npm:^7.3.1, ws@npm:^7.5.1":
+"ws@npm:^7, ws@npm:^7.3.1, ws@npm:^7.5.10":
   version: 7.5.10
   resolution: "ws@npm:7.5.10"
   peerDependencies:
@@ -40246,7 +32457,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.12.1, ws@npm:^8.13.0, ws@npm:^8.17.1, ws@npm:^8.18.0, ws@npm:^8.18.3, ws@npm:^8.2.3, ws@npm:^8.8.0":
+"ws@npm:^8.12.1, ws@npm:^8.13.0, ws@npm:^8.17.1, ws@npm:^8.18.0, ws@npm:^8.18.3, ws@npm:^8.8.0":
   version: 8.19.0
   resolution: "ws@npm:8.19.0"
   peerDependencies:
@@ -40261,20 +32472,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"x-default-browser@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "x-default-browser@npm:0.4.0"
-  dependencies:
-    default-browser-id: "npm:^1.0.4"
-  dependenciesMeta:
-    default-browser-id:
-      optional: true
-  bin:
-    x-default-browser: bin/x-default-browser.js
-  checksum: 10c0/a19e42ffeab19560ea05a423561f5b3b82bb3a5878dc932cfd0847fadc5890b8b685d6b39e2356c8304b3943f5a7120ba4b233365d686ff8f9bf2499ce11f052
-  languageName: node
-  linkType: hard
-
 "xcode@npm:^3.0.1":
   version: 3.0.1
   resolution: "xcode@npm:3.0.1"
@@ -40337,13 +32534,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"xmlbuilder@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "xmlbuilder@npm:14.0.0"
-  checksum: 10c0/3a99d1642b0a25a24f24bc5a32f37d299886e01e004654e34d13877e7648956f000708568456fedb7423e1dc2fbfe6520298699a3fbabc681d989be4a41c1509
-  languageName: node
-  linkType: hard
-
 "xmlbuilder@npm:^15.1.1":
   version: 15.1.1
   resolution: "xmlbuilder@npm:15.1.1"
@@ -40372,20 +32562,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"xtend@npm:^4.0.0, xtend@npm:^4.0.1, xtend@npm:~4.0.1":
-  version: 4.0.2
-  resolution: "xtend@npm:4.0.2"
-  checksum: 10c0/366ae4783eec6100f8a02dff02ac907bf29f9a00b82ac0264b4d8b832ead18306797e283cf19de776538babfdcb2101375ec5646b59f08c52128ac4ab812ed0e
-  languageName: node
-  linkType: hard
-
-"y18n@npm:^4.0.0":
-  version: 4.0.3
-  resolution: "y18n@npm:4.0.3"
-  checksum: 10c0/308a2efd7cc296ab2c0f3b9284fd4827be01cfeb647b3ba18230e3a416eb1bc887ac050de9f8c4fd9e7856b2e8246e05d190b53c96c5ad8d8cb56dffb6f81024
-  languageName: node
-  linkType: hard
-
 "y18n@npm:^5.0.5":
   version: 5.0.8
   resolution: "y18n@npm:5.0.8"
@@ -40393,13 +32569,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yallist@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "yallist@npm:2.1.2"
-  checksum: 10c0/0b9e25aa00adf19e01d2bcd4b208aee2b0db643d9927131797b7af5ff69480fc80f1c3db738cbf3946f0bddf39d8f2d0a5709c644fd42d4aa3a4e6e786c087b5
-  languageName: node
-  linkType: hard
-
 "yallist@npm:^3.0.2":
   version: 3.1.1
   resolution: "yallist@npm:3.1.1"
@@ -40428,7 +32597,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:^2.0.0, yaml@npm:^2.2.1, yaml@npm:^2.4.1, yaml@npm:^2.6.0":
+"yaml@npm:^2.0.0, yaml@npm:^2.4.1, yaml@npm:^2.6.0, yaml@npm:^2.6.1":
   version: 2.8.2
   resolution: "yaml@npm:2.8.2"
   bin:
@@ -40437,61 +32606,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:21.1.1, yargs-parser@npm:^21.0.0, yargs-parser@npm:^21.0.1, yargs-parser@npm:^21.1.1":
+"yargs-parser@npm:21.1.1, yargs-parser@npm:^21.1.1":
   version: 21.1.1
   resolution: "yargs-parser@npm:21.1.1"
   checksum: 10c0/f84b5e48169479d2f402239c59f084cfd1c3acc197a05c59b98bab067452e6b3ea46d4dd8ba2985ba7b3d32a343d77df0debd6b343e5dae3da2aab2cdf5886b2
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:^18.1.2":
-  version: 18.1.3
-  resolution: "yargs-parser@npm:18.1.3"
-  dependencies:
-    camelcase: "npm:^5.0.0"
-    decamelize: "npm:^1.2.0"
-  checksum: 10c0/25df918833592a83f52e7e4f91ba7d7bfaa2b891ebf7fe901923c2ee797534f23a176913ff6ff7ebbc1cc1725a044cc6a6539fed8bfd4e13b5b16376875f9499
-  languageName: node
-  linkType: hard
-
-"yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.3, yargs-parser@npm:^20.2.7, yargs-parser@npm:^20.2.9":
+"yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.3, yargs-parser@npm:^20.2.9":
   version: 20.2.9
   resolution: "yargs-parser@npm:20.2.9"
   checksum: 10c0/0685a8e58bbfb57fab6aefe03c6da904a59769bd803a722bb098bd5b0f29d274a1357762c7258fb487512811b8063fb5d2824a3415a0a4540598335b3b086c72
   languageName: node
   linkType: hard
 
-"yargs-unparser@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "yargs-unparser@npm:2.0.0"
-  dependencies:
-    camelcase: "npm:^6.0.0"
-    decamelize: "npm:^4.0.0"
-    flat: "npm:^5.0.2"
-    is-plain-obj: "npm:^2.1.0"
-  checksum: 10c0/a5a7d6dc157efa95122e16780c019f40ed91d4af6d2bac066db8194ed0ec5c330abb115daa5a79ff07a9b80b8ea80c925baacf354c4c12edd878c0529927ff03
-  languageName: node
-  linkType: hard
-
-"yargs@npm:^15.1.0":
-  version: 15.4.1
-  resolution: "yargs@npm:15.4.1"
-  dependencies:
-    cliui: "npm:^6.0.0"
-    decamelize: "npm:^1.2.0"
-    find-up: "npm:^4.1.0"
-    get-caller-file: "npm:^2.0.1"
-    require-directory: "npm:^2.1.1"
-    require-main-filename: "npm:^2.0.0"
-    set-blocking: "npm:^2.0.0"
-    string-width: "npm:^4.2.0"
-    which-module: "npm:^2.0.0"
-    y18n: "npm:^4.0.0"
-    yargs-parser: "npm:^18.1.2"
-  checksum: 10c0/f1ca680c974333a5822732825cca7e95306c5a1e7750eb7b973ce6dc4f97a6b0a8837203c8b194f461969bfe1fb1176d1d423036635285f6010b392fa498ab2d
-  languageName: node
-  linkType: hard
-
 "yargs@npm:^16.2.0":
   version: 16.2.0
   resolution: "yargs@npm:16.2.0"
@@ -40562,15 +32690,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zod-validation-error@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "zod-validation-error@npm:2.1.0"
-  peerDependencies:
-    zod: ^3.18.0
-  checksum: 10c0/e8e8a0af64092dfb3388d759bf10fb7cf5358bc1bdb365771b8ac1944b1fb014ccbc8e60fbd69627961ea5873c5694e5c3fe730341c9842312fbb91661a1f451
-  languageName: node
-  linkType: hard
-
 "zod-validation-error@npm:^3.2.0":
   version: 3.4.0
   resolution: "zod-validation-error@npm:3.4.0"
@@ -40580,13 +32699,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zod@npm:3.25.58, zod@npm:^3.20.2, zod@npm:^3.22.4, zod@npm:^3.23.8":
+"zod-validation-error@npm:^3.5.0 || ^4.0.0":
+  version: 4.0.2
+  resolution: "zod-validation-error@npm:4.0.2"
+  peerDependencies:
+    zod: ^3.25.0 || ^4.0.0
+  checksum: 10c0/0ccfec48c46de1be440b719cd02044d4abb89ed0e14c13e637cd55bf29102f67ccdba373f25def0fc7130e5f15025be4d557a7edcc95d5a3811599aade689e1b
+  languageName: node
+  linkType: hard
+
+"zod@npm:3.25.58, zod@npm:^3.20.2, zod@npm:^3.23.8":
   version: 3.25.58
   resolution: "zod@npm:3.25.58"
   checksum: 10c0/3525e9104adcb84b48ff2c166a44175e2f4fd502bcab045bde7cb898097a3ff0cc8b03469d949f1c14455266fd9bedeea0b411ec624b42827db48ad942ffb3b1
   languageName: node
   linkType: hard
 
+"zod@npm:^3.25.0 || ^4.0.0":
+  version: 4.3.6
+  resolution: "zod@npm:4.3.6"
+  checksum: 10c0/860d25a81ab41d33aa25f8d0d07b091a04acb426e605f396227a796e9e800c44723ed96d0f53a512b57be3d1520f45bf69c0cb3b378a232a00787a2609625307
+  languageName: node
+  linkType: hard
+
 "zustand@npm:^3.7.1":
   version: 3.7.2
   resolution: "zustand@npm:3.7.2"
@@ -40640,13 +32775,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zwitch@npm:^1.0.0":
-  version: 1.0.5
-  resolution: "zwitch@npm:1.0.5"
-  checksum: 10c0/26dc7d32e5596824b565db1da9650d00d32659c1211195bef50c25c60820f9c942aa7abefe678fc1ed0b97c1755036ac1bde5f97881d7d0e73e04e02aca56957
-  languageName: node
-  linkType: hard
-
 "zwitch@npm:^2.0.0":
   version: 2.0.4
   resolution: "zwitch@npm:2.0.4"